vim/emacs modes with settings (#2173)

This commit is contained in:
Kenichi Nakamura 2023-08-22 00:08:54 -07:00 committed by GitHub
parent c768681e23
commit 9f96bd2f1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 102 additions and 1 deletions

View file

@ -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);
});
}
}
/**

View file

@ -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 });
});
},
};

View file

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

View file

@ -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,

View file

@ -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",

View file

@ -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",

View file

@ -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>