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: "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.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,10 +287,11 @@ 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 (typeof pos === "string") {
             console.log("Navigating to anchor", pos);
@@ -337,7 +338,8 @@ export class Client {
           });
         }
         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);