Playground Feature | Vim motion ( WIP )

content/package.json

@@ -109,6 +109,7 @@
     }
   },
   "dependencies": {
+    "monaco-vim": "^0.4.2",
     "neverthrow": "^8.2.0"
   }
 }

content/src/components/editor/index.tsx

@@ -49,7 +49,14 @@ function CodeEditorPanels() {
           </ResizablePanel>
           <ResizableHandle direction="vertical" />
           <ResizablePanel>
-            <FileEditor />
+            <div className="h-full flex flex-col">
+              <div className="flex-1">
+                <FileEditor />
+              </div>
+              <div className="h-6 px-2 bg-[--sl-color-bg-nav] border-t border-[--sl-color-hairline] font-mono text-xs text-[--sl-color-text] flex items-center">
+                <span id="vim-status"></span>
+              </div>
+            </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </ResizablePanel>

content/src/components/editor/services/monaco.ts

@@ -3,6 +3,7 @@ import * as Effect from "effect/Effect"
 import * as Stream from "effect/Stream"
 import type ts from "typescript"
 import { ChromeDevTools, Dracula } from "./monaco/themes"
+import { initVimMode } from "monaco-vim"
 
 type MonacoApi = typeof import("@effect/monaco-editor")
 
@@ -56,6 +57,32 @@ export class Monaco extends Effect.Service<Monaco>()("app/Monaco", {
           (editor) => Effect.sync(() => editor.dispose())
         )
 
+        /**
+         * Initialize vim mode
+         */
+        const vimAdapter = yield* Effect.acquireRelease(
+          Effect.sync(() => {
+            const adapter = initVimMode(editor)
+            console.log("Vim adapter initialized:", adapter)
+
+            setTimeout(() => {
+              const statusNode = document.getElementById("vim-status")
+              console.log("Status node found:", statusNode)
+              if (statusNode) {
+                adapter?.dispose?.()
+                const newAdapter = initVimMode(editor, statusNode as HTMLElement)
+                console.log("Vim adapter re-initialized with status:", newAdapter)
+              }
+            }, 200)
+
+            return adapter
+          }),
+          (adapter) =>
+            Effect.sync(() => {
+              adapter?.dispose?.()
+            })
+        )
+
         /**
          * Loads the specified model into the editor.
          */
@@ -96,7 +123,8 @@ export class Monaco extends Effect.Service<Monaco>()("app/Monaco", {
         return {
           editor,
           loadModel,
-          content
+          content,
+          vimAdapter
         } as const
       })
     }

content/src/types/monaco-vim.d.ts

@@ -0,0 +1,3 @@
+declare module 'monaco-vim' {
+  export function initVimMode(editor: any, statusNode?: HTMLElement): any;
+}