From f86a6fe848a76baee5dfd48a41c4b54ec3c6c80b Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 22 Aug 2023 10:50:42 +0200 Subject: [PATCH] (feat) add vim keybindings to REPL component (#501) * Add vim mode * fix conflicts * add changesets --- .changeset/nine-bottles-scream.md | 5 + packages/repl/package.json | 1 + packages/repl/src/lib/CodeMirror.svelte | 29 +- .../repl/src/lib/Input/ModuleEditor.svelte | 3 + packages/repl/src/lib/Repl.svelte | 3 +- packages/repl/src/routes/+page.svelte | 2 +- pnpm-lock.yaml | 1150 +++++------------ 7 files changed, 343 insertions(+), 850 deletions(-) create mode 100644 .changeset/nine-bottles-scream.md diff --git a/.changeset/nine-bottles-scream.md b/.changeset/nine-bottles-scream.md new file mode 100644 index 00000000..ed64caf8 --- /dev/null +++ b/.changeset/nine-bottles-scream.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/repl': minor +--- + +add vim keybindings diff --git a/packages/repl/package.json b/packages/repl/package.json index 50996824..6bbe5db2 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -75,6 +75,7 @@ "@lezer/highlight": "^1.1.6", "@neocodemirror/svelte": "0.0.15", "@replit/codemirror-lang-svelte": "^6.0.0", + "@replit/codemirror-vim": "^6.0.14", "@rich_harris/svelte-split-pane": "^1.1.1", "@rollup/browser": "^3.25.3", "@sveltejs/site-kit": "5.2.2", diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte index e7ab00e9..6573ae13 100644 --- a/packages/repl/src/lib/CodeMirror.svelte +++ b/packages/repl/src/lib/CodeMirror.svelte @@ -24,6 +24,9 @@ /** @type {boolean} */ export let autocomplete = true; + /** @type {boolean} */ + export let vim = false; + /** @type {ReturnType>} */ const dispatch = createEventDispatcher(); @@ -179,6 +182,30 @@ /** @type {import('@codemirror/state').Extension[]} */ let extensions = []; + $: getExtensions(vim).then((resolvedExtensions) => { + extensions = resolvedExtensions; + }); + + /** + * update the extension if and when vim changes + * @param {boolean} vimEnabled if vim it's included in the set of extensions + */ + async function getExtensions(vimEnabled) { + let extensions = [watcher]; + if (vimEnabled) { + const { vim } = await import('@replit/codemirror-vim').then((vimModule) => ({ + vim: vimModule.vim + })); + + extensions.unshift( + vim({ + status: true + }) + ); + } + return extensions; + } + let cursor_pos = 0; $: { @@ -232,7 +259,7 @@ lint: diagnostics, lintOptions: { delay: 200 }, autocomplete, - extensions: [watcher], + extensions, instanceStore: cmInstance }} on:codemirror:textChange={({ detail: value }) => { diff --git a/packages/repl/src/lib/Input/ModuleEditor.svelte b/packages/repl/src/lib/Input/ModuleEditor.svelte index 25c91538..9db0e529 100644 --- a/packages/repl/src/lib/Input/ModuleEditor.svelte +++ b/packages/repl/src/lib/Input/ModuleEditor.svelte @@ -9,6 +9,8 @@ /** @type {boolean} */ export let autocomplete; + /** @type {boolean} */ + export let vim; export function focus() { $module_editor?.focus(); @@ -61,6 +63,7 @@ bind:this={$module_editor} {errorLoc} {autocomplete} + {vim} {diagnostics} on:change={handle_change} /> diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index 0e123346..0a279b84 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -27,6 +27,7 @@ export let showModified = false; export let showAst = false; export let autocomplete = true; + export let vim = false; export function toJSON() { return { @@ -344,7 +345,7 @@ >
- +
diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte index 6d81afcb..b64ffd03 100644 --- a/packages/repl/src/routes/+page.svelte +++ b/packages/repl/src/routes/+page.svelte @@ -36,7 +36,7 @@
- +