Fixes #201

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<boolean> {
+  return syscall("editor.getVimEnabled");
+}
+
+export function setVimEnabled(enabled: boolean) {
+  return syscall("editor.setVimEnabled", enabled);
+}

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

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);
+}

web/editor.tsx

@@ -128,6 +128,7 @@ export class Editor {
   openPages = new Map<string, PageState>();
   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.enableVimMode ? [vim({ status: true })] : []],
-          ...this.builtinSettings.vimMode
-            ? [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();
+  }
 }

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;

web/types.ts

@@ -14,7 +14,6 @@ export type PanelMode = number;
 
 export type BuiltinSettings = {
   indexPage: string;
-  vimMode?: boolean;
 };
 
 export type PanelConfig = {

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

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).