Work to implement #131

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

plugs/directive/command.ts

@@ -110,3 +110,16 @@ export function serverRenderDirective(
 ): Promise<string> {
   return renderDirectives(pageName, text);
 }
+
+export async function toggleEditDirectiveBodyCommand() {
+  const directiveBodyEditingEnabled = await editor
+    .getDirectiveBodyEditingEnabled();
+  await editor.setDirectiveBodyEditingEnabled(
+    !directiveBodyEditingEnabled,
+  );
+  await editor.flashNotification(
+    directiveBodyEditingEnabled
+      ? "Editing of directive bodies now disabled"
+      : "Editing of directive bodies now enabled",
+  );
+}

plugs/directive/directive.plug.yaml

@@ -24,6 +24,11 @@ functions:
     events:
       - page:complete
 
+  toggleEditDirectiveBodyCommand:
+    path: ./command.ts:toggleEditDirectiveBodyCommand
+    command:
+      name: "Directives: Toggle Body Editing"
+
   # Templates
   insertQuery:
     redirect: core.insertTemplateText

plugs/directive/directives.ts

@@ -1,4 +1,4 @@
-import { nodeAtPos, ParseTree, renderToText } from "$sb/lib/tree.ts";
+import { nodeAtPos, ParseTree } from "$sb/lib/tree.ts";
 import { replaceAsync } from "$sb/lib/util.ts";
 import { markdown } from "$sb/silverbullet-syscall/mod.ts";
 

web/cm_plugins/readonly_directives.ts

@@ -0,0 +1,31 @@
+import { EditorState } from "../deps.ts";
+import { directiveRegex } from "../../plugs/directive/directives.ts";
+import type { Editor } from "../editor.tsx";
+
+// Prevents edits inside <!-- #directive --> blocks.
+// Possible performance concern: on every edit (every character typed), this pulls the whole document and applies a regex to it
+export function readonlyDirectives(editor: Editor) {
+  return EditorState.changeFilter.of((tr): boolean => {
+    // Only act on actual edits triggered by the user (so 'changes' and 'selection' are set)
+    if (tr.docChanged && tr.selection) {
+      const text = tr.state.sliceDoc(0);
+      const allMatches = text.matchAll(directiveRegex);
+      for (const match of allMatches) {
+        const [_fullMatch, startInst, _type, _args, body] = match;
+        const from = match.index! + startInst.length;
+        const to = match.index! + startInst.length + body.length;
+        for (const sel of tr.selection.ranges) {
+          if (from <= sel.from && sel.to <= to) {
+            // In range: BLOCK
+            editor.flashNotification(
+              "Cannot edit inside directive bodies (run `Directives: Update` to update instead)",
+              "error",
+            );
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  });
+}

web/editor.tsx

@@ -105,6 +105,7 @@ import customMarkdownStyle from "./style.ts";
 // Real-time collaboration
 import { CollabState } from "./cm_plugins/collab.ts";
 import { collabSyscalls } from "./syscalls/collab.ts";
+import { readonlyDirectives } from "./cm_plugins/readonly_directives.ts";
 
 const frontMatterRegex = /^---\s*$(.*?)---\s*$/ms;
 
@@ -138,6 +139,7 @@ export class Editor {
   urlPrefix: string;
   indexPage: string;
   collabState?: CollabState;
+  enableDirectiveBodyEditing = false;
 
   constructor(
     space: Space,
@@ -560,6 +562,9 @@ export class Editor {
         pasteLinkExtension,
         attachmentExtension(this),
         closeBrackets(),
+        ...[
+          this.enableDirectiveBodyEditing ? [] : readonlyDirectives(editor),
+        ],
         ...[this.collabState ? this.collabState.collabExtension() : []],
       ],
     });

web/syscalls/editor.ts

@@ -197,6 +197,13 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
         enabled,
       });
     },
+    "editor.setDirectiveBodyEditingEnabled": (_ctx, enabled: boolean) => {
+      editor.enableDirectiveBodyEditing = enabled;
+      editor.rebuildEditorState();
+    },
+    "editor.getDirectiveBodyEditingEnabled": (_ctx): boolean => {
+      return editor.enableDirectiveBodyEditing;
+    },
   };
 
   return syscalls;

website/CHANGELOG.md

@@ -7,6 +7,7 @@ release.
 
 * Replaced the `--password` flag with `--user` taking a basic auth combination of username and password, e.g. `--user pete:1234`. Authentication now uses standard basic auth. This should fix attachments not working with password protected setups.
 * Added support for ~~strikethrough~~ syntax.
+* Disabled editing of text inside `<!-- #directive -->` and `<!-- /directive -->` blocks to avoid accidental edits (later overridden when the body is updated via {[Directives: Update]}). If you need to temporarily disable this, use the {[Directives: Toggle Body Editing]} command.
 
 ---