Added pageNamespace hook support

packages/web/components/filter.tsx

@@ -159,6 +159,7 @@ export function FilterList({
                 }
                 break;
             }
+            e.stopPropagation();
           }}
           onClick={(e) => e.stopPropagation()}
         />

packages/web/editor.tsx

@@ -16,6 +16,7 @@ import {
   highlightSpecialChars,
   KeyBinding,
   keymap,
+  runScopeHandlers,
   ViewPlugin,
   ViewUpdate,
 } from "@codemirror/view";
@@ -56,7 +57,7 @@ import {
   MDExt,
 } from "@silverbulletmd/common/markdown_ext";
 import { FilterList } from "./components/filter";
-import { FilterOption } from "@silverbulletmd/common/types";
+import { FilterOption, PageMeta } from "@silverbulletmd/common/types";
 import { syntaxTree } from "@codemirror/language";
 import sandboxSyscalls from "@plugos/plugos/syscalls/sandbox";
 import globalModules from "../common/dist/global.plug.json";
@@ -144,6 +145,16 @@ export class Editor {
         });
       },
     });
+
+    // Make keyboard shortcuts work even when the editor is in read only mode or not focused
+    window.addEventListener("keydown", (ev) => {
+      if (!this.editorView?.hasFocus) {
+        console.log("Window-level keyboard event", ev);
+        if (runScopeHandlers(this.editorView!, ev, "editor")) {
+          ev.preventDefault();
+        }
+      }
+    });
   }
 
   get currentPage(): string | undefined {
@@ -454,7 +465,10 @@ export class Editor {
         this.createEditorState(this.currentPage, editorView.state.sliceDoc())
       );
       if (editorView.contentDOM) {
-        this.tweakEditorDOM(editorView.contentDOM);
+        this.tweakEditorDOM(
+          editorView.contentDOM,
+          this.viewState.perm === "ro"
+        );
       }
 
       this.restoreState(this.currentPage);
@@ -516,30 +530,31 @@ export class Editor {
       console.log("Creating new page", pageName);
       doc = {
         text: "",
-        meta: { name: pageName, lastModified: 0 },
+        meta: { name: pageName, lastModified: 0, perm: "rw" } as PageMeta,
       };
     }
 
     let editorState = this.createEditorState(pageName, doc.text);
     editorView.setState(editorState);
     if (editorView.contentDOM) {
-      this.tweakEditorDOM(editorView.contentDOM);
+      this.tweakEditorDOM(editorView.contentDOM, doc.meta.perm === "ro");
     }
     this.restoreState(pageName);
     this.space.watchPage(pageName);
 
     this.viewDispatch({
       type: "page-loaded",
-      name: pageName,
+      meta: doc.meta,
     });
 
     await this.eventHook.dispatchEvent("editor:pageSwitched");
   }
 
-  tweakEditorDOM(contentDOM: HTMLElement) {
+  tweakEditorDOM(contentDOM: HTMLElement, readOnly: boolean) {
     contentDOM.spellcheck = true;
     contentDOM.setAttribute("autocorrect", "on");
     contentDOM.setAttribute("autocapitalize", "on");
+    contentDOM.setAttribute("contenteditable", readOnly ? "false" : "true");
   }
 
   private restoreState(pageName: string) {

packages/web/reducer.ts

@@ -14,12 +14,13 @@ export default function reducer(
         ...state,
         allPages: new Set(
           [...state.allPages].map((pageMeta) =>
-            pageMeta.name === action.name
+            pageMeta.name === action.meta.name
               ? { ...pageMeta, lastOpened: Date.now() }
               : pageMeta
           )
         ),
-        currentPage: action.name,
+        perm: action.meta.perm,
+        currentPage: action.meta.name,
       };
     case "page-changed":
       return {

packages/web/types.ts

@@ -18,6 +18,8 @@ export type ActionButton = {
 
 export type AppViewState = {
   currentPage?: string;
+  perm: "ro" | "rw";
+
   showPageNavigator: boolean;
   showCommandPalette: boolean;
   unsavedChanges: boolean;
@@ -45,6 +47,7 @@ export type AppViewState = {
 };
 
 export const initialViewState: AppViewState = {
+  perm: "rw",
   showPageNavigator: false,
   showCommandPalette: false,
   unsavedChanges: false,
@@ -68,7 +71,7 @@ export const initialViewState: AppViewState = {
 };
 
 export type Action =
-  | { type: "page-loaded"; name: string }
+  | { type: "page-loaded"; meta: PageMeta }
   | { type: "pages-listed"; pages: Set<PageMeta> }
   | { type: "page-changed" }
   | { type: "page-saved" }