feat: support vim mode

core/package.json

@@ -18,6 +18,7 @@
     "@popperjs/core": "^2.11.8",
     "foxact": "^0.2.20",
     "jotai": "^2.3.1",
+    "monaco-vim": "^0.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

core/src/components/EditorZone.tsx

@@ -7,8 +7,9 @@ import React, {
   useState
 } from 'react'
 import Editor, { useMonaco } from '@monaco-editor/react'
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import type * as monacoEditor from 'monaco-editor'
+import { initVimMode } from 'monaco-vim'
 
 import { ExtensionContext } from '../contextes/Extension'
 import { MonacoScopeContext } from '../contextes/MonacoScope'
@@ -18,7 +19,7 @@ import { classnames, isMacOS } from '../utils'
 
 import { Popover } from './base/Popover'
 import { BottomStatus } from './BottomStatus'
-import { displayLeftBarAtom } from './EditorZoneShareAtoms'
+import { displayLeftBarAtom, isVimModeAtom } from './EditorZoneShareAtoms'
 import { LeftBar } from './LeftBar'
 import type { ResizableProps } from './Resizable'
 import { Resizable } from './Resizable'
@@ -113,6 +114,9 @@ export default function EditorZone(props: EditorZoneProps) {
 
   const [displayLeftBar, setDisplayLeftBar] = useAtom(displayLeftBarAtom)
 
+  const isVimMode = useAtomValue(isVimModeAtom)
+  const vimModeRef = useRef<ReturnType<typeof initVimMode> | null>(null)
+
   const editorCursorPosition = useRef<monacoEditor.Position | null>(null)
 
   useEffect(() => {
@@ -150,6 +154,17 @@ export default function EditorZone(props: EditorZoneProps) {
     return () => dispose.forEach(func => func?.())
   }, [monaco, editor, plugins])
 
+  useEffect(() => {
+    if (!editor) return
+
+    if (isVimMode)
+      vimModeRef.current = initVimMode(editor, null!)
+    else {
+      vimModeRef.current?.dispose()
+      vimModeRef.current = null
+    }
+  }, [editor, isVimMode])
+
   useDocumentEventListener('keydown', e => {
     if (e.key === '\\' && (e.metaKey || e.ctrlKey)) {
       setDisplayLeftBar(!displayLeftBar)

core/src/components/EditorZoneShareAtoms.ts

@@ -1,3 +1,5 @@
 import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
 
 export const displayLeftBarAtom = atom(false)
+export const isVimModeAtom = atomWithStorage('IS_VIM_MODE', false)

core/src/components/LeftBar.tsx

@@ -1,9 +1,12 @@
 import './LeftBar.scss'
 
 import { classnames, messenger } from '@power-playground/core'
+import { useSetAtom } from 'jotai'
 
 import PP from '../../../resources/PP_P.svg'
 
+import { isVimModeAtom } from './EditorZoneShareAtoms'
+
 const prefix = 'ppd-left-bar'
 
 export interface LeftBarProps {
@@ -12,6 +15,7 @@ export interface LeftBarProps {
 }
 
 export function LeftBar(props: LeftBarProps) {
+  const toggleVimMode = useSetAtom(isVimModeAtom)
   return <div className={classnames(prefix, props.className)}
               style={props.style}>
     <div className={`${prefix}__top`}>
@@ -37,6 +41,10 @@ export function LeftBar(props: LeftBarProps) {
       </button>
     </div>
     <div className={`${prefix}__bottom`}>
+      {/* TODO: move to settings */}
+      <button onClick={() => toggleVimMode(mode => !mode)}>
+        Vim Mode
+      </button> 
       <button onClick={() => messenger.then(m => m.display('warning', <>Not implemented yet, it will come soon, <a href='https://github.com/Power-Playground/app/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22' target='_blank' rel='noreferrer'>help us</a></>))}>
         <span className='cldr codicon codicon-account'></span>
       </button>

core/src/vim-mode.d.ts

@@ -0,0 +1,21 @@
+declare module "monaco-vim" {
+	export interface EditorVimMode {
+		dispose: () => void;
+	}
+
+	type initVimModeFn = (
+		editor: monaco.editor.IStandaloneCodeEditor,
+		statusElm: HTMLElement
+	) => EditorVimMode;
+
+	const initVimMode: initVimModeFn
+	export { initVimMode }
+
+	const VimMode: {
+		Vim: {
+			noremap: (from: string, to: string) => void;
+			map: (from: string, to: string, mode: string) => void;
+		};
+	}
+	export { VimMode }
+}