Add vim support to code viewer

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@replit/codemirror-vim": "^6.2.1",
     "@uiw/react-codemirror": "^4.23.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/page.tsx

@@ -1,30 +1,31 @@
 'use client';
 
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
-import { defaultKeymap } from "@codemirror/commands";
-import { javascript } from "@codemirror/lang-javascript";
-import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view";
-import { SymbolIcon, FileIcon, Cross1Icon } from "@radix-ui/react-icons";
-import { ScrollArea, Scrollbar } from "@radix-ui/react-scroll-area";
-import CodeMirror from '@uiw/react-codemirror';
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import { useDebouncedCallback } from 'use-debounce';
-import logoLight from "../../public/sb_logo_light.png";
-import logoDark from "../../public/sb_logo_dark.png";
 import {
     ResizableHandle,
     ResizablePanel,
     ResizablePanelGroup,
 } from "@/components/ui/resizable";
+import { Separator } from "@/components/ui/separator";
+import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
 import { GetSourceResponse, pathQueryParamName, repoQueryParamName } from "@/lib/api";
 import { createPathWithQueryParams } from "@/lib/utils";
-import { ThemeSelectorButton } from "./themeSelectorButton";
+import { defaultKeymap } from "@codemirror/commands";
+import { javascript } from "@codemirror/lang-javascript";
+import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { Cross1Icon, FileIcon, SymbolIcon } from "@radix-ui/react-icons";
+import { ScrollArea, Scrollbar } from "@radix-ui/react-scroll-area";
+import { vim } from "@replit/codemirror-vim";
+import CodeMirror from '@uiw/react-codemirror';
 import { useTheme } from "next-themes";
-import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useDebouncedCallback } from 'use-debounce';
+import logoDark from "../../public/sb_logo_dark.png";
+import logoLight from "../../public/sb_logo_light.png";
+import { ThemeSelectorButton } from "./themeSelectorButton";
 
 interface ZoekMatch {
     URL: string,
@@ -158,6 +159,7 @@ export default function Home() {
                             code={code}
                             filepath={filepath}
                             onClose={() => setIsCodePanelOpen(false)}
+                            keymapType="default"
                         />
                     </ResizablePanel>
                 )}
@@ -169,12 +171,14 @@ export default function Home() {
 interface CodeEditorProps {
     code: string;
     filepath: string;
+    keymapType: "default" | "vim";
     onClose: () => void;
 }
 
 const CodeEditor = ({
     code,
     filepath,
+    keymapType,
     onClose,
 }: CodeEditorProps) => {
     const { theme: _theme, systemTheme } = useTheme();
@@ -208,7 +212,7 @@ const CodeEditor = ({
             <div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3">
                 <div className="flex flex-row">
                     <div
-                        style={{width: `${gutterWidth}px`}}
+                        style={{ width: `${gutterWidth}px` }}
                         className="flex justify-center items-center"
                     >
                         <FileIcon className="h-4 w-4" />
@@ -224,11 +228,15 @@ const CodeEditor = ({
             </div>
             <ScrollArea className="h-full overflow-y-auto">
                 <CodeMirror
-                    editable={false}
+                    readOnly={true}
                     value={code}
                     theme={theme === "dark" ? "dark" : "light"}
                     extensions={[
-                        keymap.of(defaultKeymap),
+                        ...(keymapType === "vim" ? [
+                            vim(),
+                        ] : [
+                            keymap.of(defaultKeymap),
+                        ]),
                         javascript(),
                         gutterWidthPlugin.extension,
                         EditorView.updateListener.of(update => {

yarn.lock

@@ -576,6 +576,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
+"@replit/codemirror-vim@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-vim/-/codemirror-vim-6.2.1.tgz#6673ff4be93b7da03d303ef37d6cbfa5f647b74b"
+  integrity sha512-qDAcGSHBYU5RrdO//qCmD8K9t6vbP327iCj/iqrkVnjbrpFhrjOt92weGXGHmTNRh16cUtkUZ7Xq7rZf+8HVow==
+
 "@rushstack/eslint-patch@^1.3.3":
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"