Read-only mode

packages/plugos-silverbullet-syscall/editor.ts

@@ -133,3 +133,7 @@ export function prompt(
 ): Promise<string | undefined> {
   return syscall("editor.prompt", message, defaultValue);
 }
+
+export function enableReadOnlyMode(enabled: boolean) {
+  return syscall("editor.enableReadOnlyMode", enabled);
+}

packages/plugs/core/cloud.ts

@@ -6,7 +6,7 @@ import {
   renderToText,
   replaceNodesMatching,
 } from "@silverbulletmd/common/tree";
-import type { FileMeta, PageMeta } from "@silverbulletmd/common/types";
+import type { FileMeta } from "@silverbulletmd/common/types";
 import { parseMarkdown } from "@silverbulletmd/plugos-silverbullet-syscall/markdown";
 
 const pagePrefix = "💭 ";

packages/plugs/core/core.plug.yaml

@@ -46,6 +46,16 @@ functions:
     path: "./page.ts:deletePage"
     command:
       name: "Page: Delete"
+
+  editorLoad:
+    path: "./editor.ts:editorLoad"
+    events:
+      - plugs:loaded
+  toggleReadOnlyode:
+    path: "./editor.ts:toggleReadOnlyMode"
+    command:
+      name: "Editor: Toggle Read Only Mode"
+
   # Backlinks
   indexLinks:
     path: "./page.ts:indexLinks"

packages/plugs/core/editor.ts

@@ -0,0 +1,16 @@
+import * as clientStore from "@silverbulletmd/plugos-silverbullet-syscall/clientStore";
+import { enableReadOnlyMode } from "@silverbulletmd/plugos-silverbullet-syscall/editor";
+
+export async function editorLoad() {
+  let readOnlyMode = await clientStore.get("readOnlyMode");
+  if (readOnlyMode) {
+    await enableReadOnlyMode(true);
+  }
+}
+
+export async function toggleReadOnlyMode() {
+  let readOnlyMode = await clientStore.get("readOnlyMode");
+  readOnlyMode = !readOnlyMode;
+  await enableReadOnlyMode(readOnlyMode);
+  await clientStore.set("readOnlyMode", readOnlyMode);
+}

packages/web/editor.tsx

@@ -658,7 +658,10 @@ export class Editor {
     contentDOM.spellcheck = true;
     contentDOM.setAttribute("autocorrect", "on");
     contentDOM.setAttribute("autocapitalize", "on");
-    contentDOM.setAttribute("contenteditable", readOnly ? "false" : "true");
+    contentDOM.setAttribute(
+      "contenteditable",
+      readOnly || this.viewState.forcedROMode ? "false" : "true"
+    );
 
     if (isMobileSafari() && readOnly) {
       console.log("Safari read only hack");
@@ -720,6 +723,15 @@ export class Editor {
       }
     }, [viewState.currentPage]);
 
+    useEffect(() => {
+      if (editor.editorView) {
+        editor.tweakEditorDOM(
+          editor.editorView.contentDOM,
+          viewState.perm === "ro"
+        );
+      }
+    }, [viewState.forcedROMode]);
+
     return (
       <>
         {viewState.showPageNavigator && (

packages/web/reducer.ts

@@ -163,6 +163,11 @@ export default function reducer(
         filterBoxOptions: [],
         filterBoxHelpText: "",
       };
+    case "set-editor-ro":
+      return {
+        ...state,
+        forcedROMode: action.enabled,
+      };
   }
   return state;
 }

packages/web/syscalls/editor.ts

@@ -192,5 +192,11 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
     ): string | null => {
       return prompt(message, defaultValue);
     },
+    "editor.enableReadOnlyMode": (ctx, enabled: boolean) => {
+      editor.viewDispatch({
+        type: "set-editor-ro",
+        enabled,
+      });
+    },
   };
 }

packages/web/types.ts

@@ -8,10 +8,12 @@ export type Notification = {
   date: Date;
 };
 
+type EditorMode = "ro" | "rw";
+
 export type AppViewState = {
   currentPage?: string;
-  perm: "ro" | "rw";
-
+  perm: EditorMode;
+  forcedROMode: boolean;
   isLoading: boolean;
   showPageNavigator: boolean;
   showCommandPalette: boolean;
@@ -40,6 +42,7 @@ export type AppViewState = {
 
 export const initialViewState: AppViewState = {
   perm: "rw",
+  forcedROMode: false,
   isLoading: false,
   showPageNavigator: false,
   showCommandPalette: false,
@@ -93,4 +96,5 @@ export type Action =
       label: string;
       onSelect: (option: FilterOption | undefined) => void;
     }
-  | { type: "hide-filterbox" };
+  | { type: "hide-filterbox" }
+  | { type: "set-editor-ro"; enabled: boolean };