Tweaks in rendering and buttons

web/client.ts

@@ -287,57 +287,59 @@ export class Client {
       cleanPageRef(this.settings.indexPage),
     );
 
-    this.pageNavigator.subscribe(async (pageName, pos: number | string) => {
-      console.log("Now navigating to", pageName);
+    this.pageNavigator.subscribe(
+      async (pageName, pos: number | string | undefined) => {
+        console.log("Now navigating to", pageName, pos);
 
-      const stateRestored = await this.loadPage(pageName);
-      if (pos) {
-        if (typeof pos === "string") {
-          console.log("Navigating to anchor", pos);
+        const stateRestored = await this.loadPage(pageName, pos === undefined);
+        if (pos) {
+          if (typeof pos === "string") {
+            console.log("Navigating to anchor", pos);
 
-          // We're going to look up the anchor through a API invocation
-          const matchingAnchor = await this.system.system.localSyscall(
-            "index",
-            "system.invokeFunction",
-            ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
-          );
-
-          if (!matchingAnchor) {
-            return this.flashNotification(
-              `Could not find anchor $${pos}`,
-              "error",
+            // We're going to look up the anchor through a API invocation
+            const matchingAnchor = await this.system.system.localSyscall(
+              "index",
+              "system.invokeFunction",
+              ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
             );
-          } else {
-            pos = matchingAnchor.pos as number;
-          }
-        }
-        setTimeout(() => {
-          this.editorView.dispatch({
-            selection: { anchor: pos as number },
-            effects: EditorView.scrollIntoView(pos as number, { y: "start" }),
-          });
-        });
-      } else if (!stateRestored) {
-        // Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
-        const pageText = this.editorView.state.sliceDoc();
 
-        // Default the cursor to be at position 0
-        let initialCursorPos = 0;
-        const match = frontMatterRegex.exec(pageText);
-        if (match) {
-          // Frontmatter found, put cursor after it
-          initialCursorPos = match[0].length;
+            if (!matchingAnchor) {
+              return this.flashNotification(
+                `Could not find anchor $${pos}`,
+                "error",
+              );
+            } else {
+              pos = matchingAnchor.pos as number;
+            }
+          }
+          setTimeout(() => {
+            this.editorView.dispatch({
+              selection: { anchor: pos as number },
+              effects: EditorView.scrollIntoView(pos as number, { y: "start" }),
+            });
+          });
+        } else if (!stateRestored) {
+          // Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
+          const pageText = this.editorView.state.sliceDoc();
+
+          // Default the cursor to be at position 0
+          let initialCursorPos = 0;
+          const match = frontMatterRegex.exec(pageText);
+          if (match) {
+            // Frontmatter found, put cursor after it
+            initialCursorPos = match[0].length;
+          }
+          // By default scroll to the top
+          this.editorView.scrollDOM.scrollTop = 0;
+          this.editorView.dispatch({
+            selection: { anchor: initialCursorPos },
+            // And then scroll down if required
+            scrollIntoView: true,
+          });
         }
-        // By default scroll to the top
-        this.editorView.scrollDOM.scrollTop = 0;
-        this.editorView.dispatch({
-          selection: { anchor: initialCursorPos },
-          // And then scroll down if required
-          scrollIntoView: true,
-        });
-      }
-      await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
-    });
+        await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
+      },
+    );
 
     if (location.hash === "#boot") {
       (async () => {
@@ -846,11 +848,13 @@ export class Client {
     await this.pageNavigator!.navigate(name, pos, replaceState);
   }
 
-  async loadPage(pageName: string): Promise<boolean> {
+  async loadPage(pageName: string, restoreState = true): Promise<boolean> {
     const loadingDifferentPage = pageName !== this.currentPage;
     const editorView = this.editorView;
     const previousPage = this.currentPage;
 
+    // console.log("Navigating to", pageName, restoreState);
+
     // Persist current page state and nicely close page
     if (previousPage) {
       this.openPages.saveState(previousPage);
@@ -915,7 +919,7 @@ export class Client {
     if (editorView.contentDOM) {
       this.tweakEditorDOM(editorView.contentDOM);
     }
-    const stateRestored = this.openPages.restoreState(pageName);
+    const stateRestored = restoreState && this.openPages.restoreState(pageName);
     this.space.watchPage(pageName);
 
     // Note: these events are dispatched asynchronously deliberately (not waiting for results)

web/navigator.ts

@@ -13,20 +13,24 @@ export class PathPageNavigator {
 
   constructor(readonly indexPage: string, readonly root: string = "") {}
 
-  async navigate(page: string, pos?: number | string, replaceState = false) {
+  async navigate(
+    page: string,
+    pos?: number | string | undefined,
+    replaceState = false,
+  ) {
     let encodedPage = encodePageUrl(page);
     if (page === this.indexPage) {
       encodedPage = "";
     }
     if (replaceState) {
       window.history.replaceState(
-        { page, pos },
+        { page },
         page,
         `${this.root}/${encodedPage}`,
       );
     } else {
       window.history.pushState(
-        { page, pos },
+        { page },
         page,
         `${this.root}/${encodedPage}`,
       );
@@ -43,7 +47,10 @@ export class PathPageNavigator {
   }
 
   subscribe(
-    pageLoadCallback: (pageName: string, pos: number | string) => Promise<void>,
+    pageLoadCallback: (
+      pageName: string,
+      pos: number | string | undefined,
+    ) => Promise<void>,
   ): void {
     const cb = (event?: PopStateEvent) => {
       const gotoPage = this.getCurrentPage();
@@ -53,7 +60,7 @@ export class PathPageNavigator {
       safeRun(async () => {
         await pageLoadCallback(
           this.getCurrentPage(),
-          event?.state?.pos || this.getCurrentPos(),
+          event?.state?.pos,
         );
         if (this.navigationResolve) {
           this.navigationResolve();

web/styles/editor.scss

@@ -471,7 +471,7 @@
     overflow-y: auto;
     border: 1px solid var(--editor-directive-background-color);
     border-radius: 5px;
-    white-space: wrap;
+    white-space: normal;
     position: relative;
 
     ul,
@@ -520,21 +520,27 @@
       background-color: var(--editor-code-background-color);
     }
 
-    // Button bar
-    &:hover .button-bar,
-    &:active .button-bar {
+    // Only show the button bar on hover on non-touch devices
+    &:hover .button-bar {
       display: block;
     }
 
+    // Always show button bar on touch devices
+    @media (hover: none) and (pointer: coarse) {
+      .button-bar {
+        display: block !important;
+      }
+    }
+
     .button-bar {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 0;
+      top: 0;
       display: none;
       background: var(--editor-directive-background-color);
       padding-inline: 3px;
-      padding-bottom: 1px;
-      border-radius: 5px;
+      padding: 4px 0;
+      // border-radius: 0 5px;
 
 
       button {
@@ -545,6 +551,10 @@
         margin-right: -8px;
       }
 
+      button:last-of-type {
+        margin-right: 2px;
+      }
+
     }
   }
 

web/styles/theme.scss

@@ -101,7 +101,7 @@ html {
   --editor-frontmatter-background-color: rgba(255, 246, 189, 0.5);
   --editor-frontmatter-color: var(--subtle-color);
   --editor-frontmatter-marker-color: #89000080;
-  --editor-directive-background-color: rgb(233, 233, 233, 50%);
+  --editor-directive-background-color: rgb(238, 238, 238);
   --editor-directive-border-color: #0000000f;
   --editor-directive-color: #5b5b5b;
   --editor-directive-info-color: var(--subtle-color);