vim/emacs modes with settings (#2173)

assets/js/hooks/cell_editor/live_editor.js

@@ -8,6 +8,8 @@ import RemoteUser from "./live_editor/remote_user";
 import { replacedSuffixLength } from "../../lib/text_utils";
 import { settingsStore } from "../../lib/settings";
 import Doctest from "./live_editor/doctest";
+import { initVimMode } from "monaco-vim";
+import { EmacsExtension, unregisterKey } from "monaco-emacs";
 
 /**
  * Mounts cell source editor with real-time collaboration mechanism.
@@ -367,6 +369,18 @@ class LiveEditor {
 
     // Add the widgets that the editor was initialized with
     this._initializeWidgets();
+
+    // Set the editor mode
+    if (settings.editor_mode == "emacs") {
+      this.emacsMode = new EmacsExtension(this.editor);
+      this.emacsMode.start();
+      unregisterKey("Tab");
+    } else if (settings.editor_mode == "vim") {
+      this.vimMode = initVimMode(this.editor);
+      this.vimMode.on("vim-mode-change", ({ mode: mode }) => {
+        this.editor.getDomNode().setAttribute("data-vim-mode", mode);
+      });
+    }
   }
 
   /**

assets/js/hooks/editor_settings.js

@@ -26,6 +26,7 @@ const EditorSettings = {
     const editorMarkdownWordWrapCheckbox = this.el.querySelector(
       `[name="editor_markdown_word_wrap"][value="true"]`
     );
+    const editorMode = this.el.querySelector(`select[name="editor_mode"]`);
 
     editorAutoCompletionCheckbox.checked = settings.editor_auto_completion;
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
@@ -34,6 +35,7 @@ const EditorSettings = {
     editorLightThemeCheckbox.checked =
       settings.editor_theme === EDITOR_THEME.light ? true : false;
     editorMarkdownWordWrapCheckbox.checked = settings.editor_markdown_word_wrap;
+    editorMode.value = settings.editor_mode;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
       settingsStore.update({ editor_auto_completion: event.target.checked });
@@ -62,6 +64,10 @@ const EditorSettings = {
     editorMarkdownWordWrapCheckbox.addEventListener("change", (event) => {
       settingsStore.update({ editor_markdown_word_wrap: event.target.checked });
     });
+
+    editorMode.addEventListener("change", (event) => {
+      settingsStore.update({ editor_mode: event.target.value });
+    });
   },
 };
 

assets/js/hooks/session.js

@@ -469,6 +469,11 @@ const Session = {
       return true;
     }
 
+    // Vim insert mode
+    if (editor.dataset.vimMode == "insert") {
+      return true;
+    }
+
     return false;
   },
 

assets/js/lib/settings.js

@@ -7,6 +7,12 @@ export const EDITOR_FONT_SIZE = {
   large: 16,
 };
 
+export const EDITOR_MODE = {
+  default: "default",
+  emacs: "emacs",
+  vim: "vim",
+};
+
 export const EDITOR_THEME = {
   default: "default",
   light: "light",
@@ -18,6 +24,7 @@ const DEFAULT_SETTINGS = {
   editor_font_size: EDITOR_FONT_SIZE.normal,
   editor_theme: EDITOR_THEME.default,
   editor_markdown_word_wrap: true,
+  editor_mode: EDITOR_MODE.default,
   custom_view_show_section: true,
   custom_view_show_markdown: true,
   custom_view_show_output: true,

assets/package-lock.json

@@ -15,6 +15,8 @@
         "jest": "^29.1.2",
         "mermaid": "^10.0.2",
         "monaco-editor": "^0.39.0",
+        "monaco-emacs": "^0.3.0",
+        "monaco-vim": "^0.4.0",
         "morphdom": "^2.6.1",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
@@ -56,7 +58,7 @@
       "version": "3.3.1"
     },
     "../deps/phoenix_live_view": {
-      "version": "0.19.3",
+      "version": "0.19.5",
       "license": "MIT"
     },
     "node_modules/@alloc/quick-lru": {
@@ -7016,6 +7018,16 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
+    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/longest-streak": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.0.1.tgz",
@@ -7946,6 +7958,26 @@
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz",
       "integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q=="
     },
+    "node_modules/monaco-emacs": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/monaco-emacs/-/monaco-emacs-0.3.0.tgz",
+      "integrity": "sha512-T7uyCIqpLBmU2dO9pzQ3KTUt2RNOFtqLVQZA0lF8oJ2nphnomSNl29WpkTCJKJVFMmGKauPVB9fknEMFibEwCA==",
+      "dependencies": {
+        "lodash.kebabcase": "^4.1.1",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.31"
+      }
+    },
+    "node_modules/monaco-vim": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-vim/-/monaco-vim-0.4.0.tgz",
+      "integrity": "sha512-+CsW0+Mvx2+eitkXS7OpUXIu57qXlqAL8oVkYhkPCEZ/c6+6gOp/IcG7w+Lb33YiZuTyvJ891+czkeJRPIEwVA==",
+      "peerDependencies": {
+        "monaco-editor": "*"
+      }
+    },
     "node_modules/morphdom": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.0.tgz",
@@ -14778,6 +14810,16 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
+    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "longest-streak": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.0.1.tgz",
@@ -15374,6 +15416,21 @@
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz",
       "integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q=="
     },
+    "monaco-emacs": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/monaco-emacs/-/monaco-emacs-0.3.0.tgz",
+      "integrity": "sha512-T7uyCIqpLBmU2dO9pzQ3KTUt2RNOFtqLVQZA0lF8oJ2nphnomSNl29WpkTCJKJVFMmGKauPVB9fknEMFibEwCA==",
+      "requires": {
+        "lodash.kebabcase": "^4.1.1",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
+    "monaco-vim": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-vim/-/monaco-vim-0.4.0.tgz",
+      "integrity": "sha512-+CsW0+Mvx2+eitkXS7OpUXIu57qXlqAL8oVkYhkPCEZ/c6+6gOp/IcG7w+Lb33YiZuTyvJ891+czkeJRPIEwVA==",
+      "requires": {}
+    },
     "morphdom": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.0.tgz",

assets/package.json

@@ -19,6 +19,8 @@
     "jest": "^29.1.2",
     "mermaid": "^10.0.2",
     "monaco-editor": "^0.39.0",
+    "monaco-emacs": "^0.3.0",
+    "monaco-vim": "^0.4.0",
     "morphdom": "^2.6.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",

lib/livebook_web/live/settings_live.ex

@@ -168,6 +168,16 @@ defmodule LivebookWeb.SettingsLive do
                 label="Wrap words in Markdown"
                 value={false}
               />
+              <.select_field
+                name="editor_mode"
+                label="Key bindings"
+                value="normal"
+                options={[
+                  {"Default", "default"},
+                  {"Emacs", "emacs"},
+                  {"Vim", "vim"}
+                ]}
+              />
             </div>
           </div>
         </div>