Tweaks in rendering and buttons

plugs/index/index.plug.yaml

@@ -178,8 +178,8 @@ functions:
     env: client
     panelWidget: top
 
-  refreshTOC:
+  refreshWidgets:
-    path: toc.ts:refreshTOC
+    path: toc.ts:refreshWidgets
 
   lintYAML:
     path: lint.ts:lintYAML

plugs/index/linked_mentions.ts

@@ -13,12 +13,10 @@ export async function toggleMentions() {
 }
 
 export async function renderMentions(): Promise<CodeWidgetContent | null> {
-  console.log("Hide mentions", await clientStore.get(hideMentionsKey));
   if (await clientStore.get(hideMentionsKey)) {
     return null;
   }
 
-  console.log("Stil here");
   const page = await editor.getCurrentPage();
   const linksResult = await queryObjects<LinkObject>("link", {
     // Query all links that point to this page, excluding those that are inside directives and self pointers.
@@ -43,12 +41,21 @@ export async function renderMentions(): Promise<CodeWidgetContent | null> {
     }
     return {
       markdown: renderedMd,
-      buttons: [{
+      buttons: [
-        description: "Hide",
+        {
-        svg:
+          description: "Reload",
-          `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
+          svg:
-        invokeFunction: "index.toggleMentions",
+            `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
-      }],
+          invokeFunction: "index.refreshWidgets",
+        },
+
+        {
+          description: "Hide",
+          svg:
+            `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`,
+          invokeFunction: "index.toggleMentions",
+        },
+      ],
     };
   }
 }

plugs/index/toc.ts

@@ -23,7 +23,7 @@ export async function toggleTOC() {
   await codeWidget.refreshAll();
 }
 
-export async function refreshTOC() {
+export async function refreshWidgets() {
   await codeWidget.refreshAll();
 }
 
@@ -66,7 +66,7 @@ export async function renderTOC(): Promise<CodeWidgetContent | null> {
         description: "Reload",
         svg:
           `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
-        invokeFunction: "index.refreshTOC",
+        invokeFunction: "index.refreshWidgets",
       },
       {
         description: "Hide",

web/client.ts

@@ -287,57 +287,59 @@ export class Client {
       cleanPageRef(this.settings.indexPage),
     );
 
-    this.pageNavigator.subscribe(async (pageName, pos: number | string) => {
+    this.pageNavigator.subscribe(
-      console.log("Now navigating to", pageName);
+      async (pageName, pos: number | string | undefined) => {
+        console.log("Now navigating to", pageName, pos);
 
-      const stateRestored = await this.loadPage(pageName);
+        const stateRestored = await this.loadPage(pageName, pos === undefined);
-      if (pos) {
+        if (pos) {
-        if (typeof pos === "string") {
+          if (typeof pos === "string") {
-          console.log("Navigating to anchor", pos);
+            console.log("Navigating to anchor", pos);
 
-          // We're going to look up the anchor through a API invocation
+            // We're going to look up the anchor through a API invocation
-          const matchingAnchor = await this.system.system.localSyscall(
+            const matchingAnchor = await this.system.system.localSyscall(
-            "index",
+              "index",
-            "system.invokeFunction",
+              "system.invokeFunction",
-            ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
+              ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
-          );
-
-          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
+            if (!matchingAnchor) {
-        let initialCursorPos = 0;
+              return this.flashNotification(
-        const match = frontMatterRegex.exec(pageText);
+                `Could not find anchor $${pos}`,
-        if (match) {
+                "error",
-          // Frontmatter found, put cursor after it
+              );
-          initialCursorPos = match[0].length;
+            } 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
+        await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
-        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);
-    });
 
     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
+    // Only show the button bar on hover on non-touch devices
-    &:hover .button-bar,
+    &:hover .button-bar {
-    &:active .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;
+      right: 0;
-      top: 10px;
+      top: 0;
       display: none;
       background: var(--editor-directive-background-color);
       padding-inline: 3px;
-      padding-bottom: 1px;
+      padding: 4px 0;
-      border-radius: 5px;
+      // 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);