Add option for vim keymap in codemirror (#2475)

src/public/app/dialogs/options/code_notes.js

@@ -1,7 +1,15 @@
 import mimeTypesService from "../../services/mime_types.js";
 import options from "../../services/options.js";
+import server from "../../services/server.js";
+import toastService from "../../services/toast.js";
+import utils from "../../services/utils.js";
 
 const TPL = `
+<h4>Use vim keybindings in CodeNotes (no ex mode)</h4>
+<div class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
+    <label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
+</div>
 <h4>Available MIME types in the dropdown</h4>
 
 <ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>`;
@@ -10,12 +18,18 @@ export default class CodeNotesOptions {
     constructor() {
         $("#options-code-notes").html(TPL);
 
+        this.$vimKeymapEnabled = $("#vim-keymap-enabled");
+        this.$vimKeymapEnabled.on('change', () => {
+            const opts = { 'vimKeymapEnabled': this.$vimKeymapEnabled.is(":checked") ? "true" : "false" };
+            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+            return false;
+        });
         this.$mimeTypes = $("#options-mime-types");
     }
 
-    async optionsLoaded() {
+    async optionsLoaded(options) {
         this.$mimeTypes.empty();
-
+        this.$vimKeymapEnabled.prop("checked", options['vimKeymapEnabled'] === 'true');
         let idCtr = 1;
 
         for (const mimeType of await mimeTypesService.getMimeTypes()) {
@@ -45,4 +59,4 @@ export default class CodeNotesOptions {
 
         mimeTypesService.loadMimeTypes();
     }
-}
+}

src/public/app/services/library_loader.js

@@ -10,6 +10,7 @@ const CODE_MIRROR = {
         "libraries/codemirror/addon/edit/matchtags.js",
         "libraries/codemirror/addon/search/match-highlighter.js",
         "libraries/codemirror/mode/meta.js",
+        "libraries/codemirror/keymap/vim.js",
         "libraries/codemirror/addon/lint/lint.js",
         "libraries/codemirror/addon/lint/eslint.js"
     ],

src/public/app/widgets/type_widgets/editable_code.js

@@ -6,6 +6,7 @@ import ws from "../../services/ws.js";
 import appContext from "../../services/app_context.js";
 import toastService from "../../services/toast.js";
 import treeService from "../../services/tree.js";
+import options from "../../services/options.js";
 
 const TPL = `
 <div class="note-detail-code note-detail-printable">
@@ -97,6 +98,7 @@ export default class EditableCodeTypeWidget extends TypeWidget {
             viewportMargin: Infinity,
             indentUnit: 4,
             matchBrackets: true,
+            keyMap: options.is('vimKeymapEnabled') ? "vim": "default",
             matchTags: {bothTags: true},
             highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
             lint: true,

src/routes/api/options.js

@@ -33,6 +33,7 @@ const ALLOWED_OPTIONS = new Set([
     'similarNotesWidget',
     'editedNotesWidget',
     'calendarWidget',
+    'vimKeymapEnabled',
     'codeNotesMimeTypes',
     'spellCheckEnabled',
     'spellCheckLanguageCode',

src/services/options_init.js

@@ -70,6 +70,7 @@ const defaultOptions = [
     { name: 'imageMaxWidthHeight', value: '2000', isSynced: true },
     { name: 'imageJpegQuality', value: '75', isSynced: true },
     { name: 'autoFixConsistencyIssues', value: 'true', isSynced: false },
+    { name: 'vimKeymapEnabled', value: 'false', isSynced: false },
     { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-sqlite;schema=trilium","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
     { name: 'leftPaneWidth', value: '25', isSynced: false },
     { name: 'leftPaneVisible', value: 'true', isSynced: false },