From 88cc80cd1add9cea061abe4ed46dce7672653c01 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Fri, 16 Dec 2022 12:44:04 +0100 Subject: [PATCH] Fixes #201 --- plug-api/silverbullet-syscall/editor.ts | 8 ++++++++ plugs/core/core.plug.yaml | 9 +++++++++ plugs/core/editor.ts | 14 ++++++++++++++ web/editor.tsx | 19 +++++++++++-------- web/syscalls/editor.ts | 6 ++++++ web/types.ts | 1 - website/CHANGELOG.md | 2 +- website/Silver Bullet.md | 1 + 8 files changed, 50 insertions(+), 10 deletions(-) diff --git a/plug-api/silverbullet-syscall/editor.ts b/plug-api/silverbullet-syscall/editor.ts index 8d400666..32920980 100644 --- a/plug-api/silverbullet-syscall/editor.ts +++ b/plug-api/silverbullet-syscall/editor.ts @@ -121,3 +121,11 @@ export function confirm( export function enableReadOnlyMode(enabled: boolean) { return syscall("editor.enableReadOnlyMode", enabled); } + +export function getVimEnabled(): Promise { + return syscall("editor.getVimEnabled"); +} + +export function setVimEnabled(enabled: boolean) { + return syscall("editor.setVimEnabled", enabled); +} diff --git a/plugs/core/core.plug.yaml b/plugs/core/core.plug.yaml index 4022c873..8ce0e03f 100644 --- a/plugs/core/core.plug.yaml +++ b/plugs/core/core.plug.yaml @@ -18,6 +18,15 @@ syntax: regex: "\\$[a-zA-Z\\.\\-\\/]+[\\w\\.\\-\\/]*" className: sb-named-anchor functions: + setEditorMode: + path: "./editor.ts:setEditorMode" + events: + - editor:init + toggleVimMode: + path: "./editor.ts:toggleVimMode" + command: + name: "Editor: Toggle Vim Mode" + clearPageIndex: path: "./page.ts:clearPageIndex" env: server diff --git a/plugs/core/editor.ts b/plugs/core/editor.ts index 3c9fb843..4a13b347 100644 --- a/plugs/core/editor.ts +++ b/plugs/core/editor.ts @@ -13,3 +13,17 @@ export async function toggleReadOnlyMode() { await editor.enableReadOnlyMode(readOnlyMode); await clientStore.set("readOnlyMode", readOnlyMode); } + +// Run on "editor:init" +export async function setEditorMode() { + if (await clientStore.get("vimMode")) { + await editor.setVimEnabled(true); + } +} + +export async function toggleVimMode() { + let vimMode = await clientStore.get("vimMode"); + vimMode = !vimMode; + await editor.setVimEnabled(vimMode); + await clientStore.set("vimMode", vimMode); +} diff --git a/web/editor.tsx b/web/editor.tsx index 1f7fff5c..4efc74bc 100644 --- a/web/editor.tsx +++ b/web/editor.tsx @@ -128,6 +128,7 @@ export class Editor { openPages = new Map(); editorView?: EditorView; viewState: AppViewState; + // deno-lint-ignore ban-types viewDispatch: Function; space: Space; pageNavigator: PathPageNavigator; @@ -142,7 +143,10 @@ export class Editor { private mdExtensions: MDExt[] = []; urlPrefix: string; indexPage: string; + + // Runtime state (that doesn't make sense in viewState) collabState?: CollabState; + enableVimMode = false; constructor( space: Space, @@ -455,13 +459,7 @@ export class Editor { doc: this.collabState ? this.collabState.ytext.toString() : text, extensions: [ // Enable vim mode, or not - [ - ...this.builtinSettings.vimMode - ? [vim({ - status: true, - })] - : [], - ], + [...this.enableVimMode ? [vim({ status: true })] : []], // The uber markdown mode markdown({ base: buildMarkdown(this.mdExtensions), @@ -497,7 +495,7 @@ export class Editor { highlightSpecialChars(), history(), // Enable vim mode - [...this.builtinSettings.vimMode ? [vim()] : []], + [...this.enableVimMode ? [vim()] : []], drawSelection(), dropCursor(), indentOnInput(), @@ -987,4 +985,9 @@ export class Editor { }); this.rebuildEditorState(); } + + setVimMode(vimMode: boolean) { + this.enableVimMode = vimMode; + this.rebuildEditorState(); + } } diff --git a/web/syscalls/editor.ts b/web/syscalls/editor.ts index e8899fa3..970cf94d 100644 --- a/web/syscalls/editor.ts +++ b/web/syscalls/editor.ts @@ -197,6 +197,12 @@ export function editorSyscalls(editor: Editor): SysCallMapping { enabled, }); }, + "editor.getVimEnabled": (): boolean => { + return editor.enableVimMode; + }, + "editor.setVimEnabled": (_ctx, enabled: boolean) => { + editor.setVimMode(enabled); + }, }; return syscalls; diff --git a/web/types.ts b/web/types.ts index 98a5df73..d443581c 100644 --- a/web/types.ts +++ b/web/types.ts @@ -14,7 +14,6 @@ export type PanelMode = number; export type BuiltinSettings = { indexPage: string; - vimMode?: boolean; }; export type PanelConfig = { diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md index af826fe5..4541b037 100644 --- a/website/CHANGELOG.md +++ b/website/CHANGELOG.md @@ -4,7 +4,7 @@ release. --- ## Next -* Initial version of vim mode is here. To enable set `vimMode` to `true` in your [[SETTINGS]] page and reload. +* Vim mode is here! This mode can be enabled on a per-client basis (its state is stored in the browser). To toggle Vim mode on or off use the {[Editor: Toggle Vim Mode]} command. --- diff --git a/website/Silver Bullet.md b/website/Silver Bullet.md index ee8314c9..1d0bc349 100644 --- a/website/Silver Bullet.md +++ b/website/Silver Bullet.md @@ -42,6 +42,7 @@ Don’t just sit there, try it! * Start typing `:party` to trigger the emoji picker 🎉 * Type `/` somewhere in the text to invoke a **slash command**. * Hit `Cmd-p` (Mac) or `Ctrl-p` (Windows, Linux) to show a live preview for the current page on the side, if your brain doesn’t speak native Markdown yet. +* Click this button {[Editor: Toggle Vim Mode]} to toggle Vim mode * Open this site on your phone or tablet and... it just works! * Are you using a browser with **PWA support** (e.g. any Chromium-based browser)? Click on that little icon to the right of your location bar that says “Install Silver Bullet” to give SB its own window frame and desktop icon, like it is a stand-alone app (not particularly useful on silverbullet.md, but definitely do this once you install it yourself).