editor vim support, and add settings for vim support

package.json

@@ -23,6 +23,7 @@
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@lezer/common": "^1.2.1",
     "@quasar/extras": "^1.16.12",
+    "@replit/codemirror-vim": "^6.2.1",
     "@tauri-apps/api": "^1.6.0",
     "codemirror": "^6.0.1",
     "idb": "^8.0.0",

src/components/settings/GlobalSettings.vue

@@ -4,6 +4,23 @@
       <q-card>
         <q-card-section>
           <h1 class="text-h5 q-my-none">
+            {{ t('editor.heading') }}
+          </h1>
+        </q-card-section>
+        <q-separator />
+        <q-card-section>
+          <div class="row q-mb-lg">
+            <div class="col-md-6 col-sm-12">
+              <q-checkbox v-model="codeEditorStore.vimSupport"
+                          :label="t('editor.description')" />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+
+      <q-card>
+        <q-card-section class="q-mt-lg">
+          <h1 class="text-h5 q-my-none ">
             {{ t('settings.heading') }}
           </h1>
         </q-card-section>
@@ -82,11 +99,13 @@
   import ImportExport from './ImportExport.vue'
   import { useSearchStore } from '../../store/search.ts'
   import { useNodesStore } from '../../store/nodes.ts'
+  import {useCodeEditorStore} from '../../store/codeEditor.ts';
 
   const t = useTranslation()
   const indicesStore = useIndicesStore()
   const nodesStore = useNodesStore()
   const searchStore = useSearchStore()
+  const codeEditorStore = useCodeEditorStore()
 
   const resetHideIndicesRegex = () => (indicesStore.hideIndicesRegex = DEFAULT_HIDE_INDICES_REGEX)
   const resetHideNodesAttributesRegex = () => (nodesStore.hideAttributesRegex = DEFAULT_HIDE_NODE_ATTRIBUTES_REGEX)

src/composables/CodeEditor.ts

@@ -1,17 +1,18 @@
-import { onMounted, Ref, watch } from 'vue'
-import { EditorView, basicSetup } from 'codemirror'
-import { KeyBinding, keymap } from '@codemirror/view'
-import { Compartment, Prec } from '@codemirror/state'
-import { indentWithTab } from '@codemirror/commands'
-import { json } from '@codemirror/lang-json'
-import { baseTheme } from './CodeEditor/theme.ts'
-import { beautify } from '../helpers/beautify.ts'
-import { writeToClipboard } from '../helpers/clipboard.ts'
-import { useCodeEditorStore } from '../store/codeEditor.ts'
+import {onMounted, Ref, watch} from 'vue'
+import {basicSetup, EditorView} from 'codemirror'
+import {KeyBinding, keymap} from '@codemirror/view'
+import {Compartment, Extension, Prec} from '@codemirror/state'
+import {indentWithTab} from '@codemirror/commands'
+import {json} from '@codemirror/lang-json'
+import {baseTheme} from './CodeEditor/theme.ts'
+import {beautify} from '../helpers/beautify.ts'
+import {writeToClipboard} from '../helpers/clipboard.ts'
+import {useCodeEditorStore} from '../store/codeEditor.ts'
 
-import { syntaxTree } from '@codemirror/language'
-import { autocompletion } from '@codemirror/autocomplete'
-import { queryKeywords, queryValues } from '../autocomplete.ts'
+import {syntaxTree} from '@codemirror/language'
+import {autocompletion} from '@codemirror/autocomplete'
+import {queryKeywords, queryValues} from '../autocomplete.ts'
+import {vim} from '@replit/codemirror-vim'
 
 /*
  JsonText
@@ -78,8 +79,13 @@ export const useCodeEditor = (editorRef: Ref<HTMLElement | null>, {
       emit('update:modelValue', editorValue())
     })
 
+    const vimExtension = vim();
+    //fix dark theme can't see cursor and letters
+    customizeVimTheme(vimExtension);
     codeMirrorEditor = new EditorView({
       extensions: [
+        // make sure vim is included before other keymaps
+        codeEditorStore.vimSupport ? vim() : [],
         basicSetup,
         json(),
         autocompletion({ override: [completions] }),
@@ -122,3 +128,27 @@ export const useCodeEditor = (editorRef: Ref<HTMLElement | null>, {
     beautifyEditorValue
   }
 }
+
+// I don't know how to customize the font color of the vim panel,
+// seems like they don't have provided a way to change the CSS
+// so I just let font color inherit
+function customizeVimTheme(vimInstance: Extension) {
+  (vimInstance as Extension[])[0] = EditorView.baseTheme({
+    '.cm-vimMode .cm-cursorLayer:not(.cm-vimCursorLayer)': {
+      display: 'none',
+    },
+    '.cm-vim-panel': {
+      padding: '0px 10px',
+      fontFamily: 'monospace',
+      minHeight: '1.3em',
+    },
+    '.cm-vim-panel input': {
+      border: 'none',
+      outline: 'none',
+      backgroundColor: 'inherit',
+      color: 'inherit', // it works with editor global theme
+    },
+    '&light .cm-searchMatch': {backgroundColor: '#ffff0054'},
+    '&dark .cm-searchMatch': {backgroundColor: '#00ffff8a'},
+  })
+}

src/locales/cn.json

@@ -455,6 +455,10 @@
       }
     }
   },
+  "editor": {
+    "heading": "编辑器",
+    "description": "VIM支持"
+  },
   "settings": {
     "heading": "设置",
     "hide_indices_regex": {

src/locales/en.json

@@ -455,6 +455,10 @@
       }
     }
   },
+  "editor": {
+    "heading": "Editor",
+    "description": "VIM support"
+  },
   "settings": {
     "heading": "Settings",
     "hide_indices_regex": {

src/locales/fr.json

@@ -455,6 +455,10 @@
       }
     }
   },
+  "editor": {
+    "heading": "Éditeur",
+    "description": "Prise en charge de VIM"
+  },
   "settings": {
     "heading": "Réglages",
     "hide_indices_regex": {

src/store/codeEditor.ts

@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 
 type CodeEditorState = {
-  wrapLines: boolean
+  wrapLines: boolean,
+  vimSupport: boolean
 }
 
 export const useCodeEditorStore = defineStore('codeEditor', {
   state: (): CodeEditorState => ({
+    vimSupport: false,
     wrapLines: false
   }),
   persist: true

yarn.lock

@@ -410,6 +410,11 @@
   resolved "https://registry.yarnpkg.com/@quasar/vite-plugin/-/vite-plugin-1.7.0.tgz#8873391ed7f69677948180f6eb14aa0821747478"
   integrity sha512-ia4w1n4DuPYm92MQLPNpMqLJID1WGGRyVGxkVeg8V+V25Vh3p9QBo++iuXR4sW/bCmzzx66Ko6VStsr1zp90GQ==
 
+"@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==
+
 "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"