Fixes #263: Implement TOC

plugs/index/asset/style.css

@@ -58,3 +58,19 @@ li code {
     font-size: 80%;
     color: #a5a4a4;
 }
+
+li.toc-header-1 {
+    margin-left: 0;
+}
+
+li.toc-header-2 {
+    margin-left: 2ch;
+}
+
+li.toc-header-3 {
+    margin-left: 4ch;
+}
+
+li.toc-header-4 {
+    margin-left: 6ch;
+}

plugs/index/asset/toc.js

@@ -0,0 +1,26 @@
+function processClick(e) {
+  const dataEl = e.target.closest("[data-ref]");
+  syscall(
+    "system.invokeFunction",
+    "index.navigateToMention",
+    dataEl.getAttribute("data-ref"),
+  ).catch(console.error);
+}
+
+document.getElementById("link-ul").addEventListener("click", processClick);
+document.getElementById("hide-button").addEventListener("click", () => {
+  syscall("system.invokeFunction", "index.toggleTOC").catch(console.error);
+});
+
+document.body.addEventListener("mouseenter", () => {
+  console.log("Refreshing on focus");
+  syscall("system.invokeFunction", "index.renderTOC").catch(
+    console.error,
+  );
+});
+
+document.getElementById("reload-button").addEventListener("click", () => {
+  syscall("system.invokeFunction", "index.renderTOC").catch(
+    console.error,
+  );
+});

plugs/index/index.plug.yaml

@@ -175,6 +175,20 @@ functions:
   renderMentions:
     path: "./mentions_ps.ts:renderMentions"
 
+  # TOC
+  toggleTOC:
+    path: toc_preface.ts:toggleTOC
+    command:
+      name: "Table of Contents: Toggle"
+      key: ctrl-alt-t
+
+  renderTOC:
+    path: toc_preface.ts:renderTOC
+    env: client
+    events:
+    - plug:load
+    - editor:pageLoaded
+
   lintYAML:
     path: lint.ts:lintYAML
     events:

plugs/index/mentions_ps.ts

@@ -26,9 +26,14 @@ export async function updateMentions() {
 
 // use internal navigation via syscall to prevent reloading the full page.
 export async function navigate(ref: string) {
+  const currentPage = await editor.getCurrentPage();
   const [page, pos] = ref.split(/[@$]/);
+  if (page === currentPage) {
+    await editor.moveCursor(+pos, true);
+  } else {
     await editor.navigate(page, +pos);
   }
+}
 
 function escapeHtml(unsafe: string) {
   return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(

plugs/index/toc_preface.ts

@@ -0,0 +1,85 @@
+import { clientStore, editor, markdown } from "$sb/silverbullet-syscall/mod.ts";
+import { renderToText, traverseTree } from "$sb/lib/tree.ts";
+import { asset } from "$sb/syscalls.ts";
+
+const hideTOCKey = "hideTOC";
+const headerThreshold = 3;
+
+type Header = {
+  name: string;
+  pos: number;
+  level: number;
+};
+
+let cachedTOC: string | undefined;
+
+export async function toggleTOC() {
+  cachedTOC = undefined;
+  let hideTOC = await clientStore.get(hideTOCKey);
+  hideTOC = !hideTOC;
+  await clientStore.set(hideTOCKey, hideTOC);
+  await renderTOC(); // This will hide it if needed
+}
+
+export async function renderTOC(reload = false) {
+  if (await clientStore.get(hideTOCKey)) {
+    return editor.hidePanel("preface");
+  }
+  const page = await editor.getCurrentPage();
+  const text = await editor.getText();
+  const tree = await markdown.parseMarkdown(text);
+  const headers: Header[] = [];
+  traverseTree(tree, (n) => {
+    if (n.type?.startsWith("ATXHeading")) {
+      headers.push({
+        name: n.children!.slice(1).map(renderToText).join("").trim(),
+        pos: n.from!,
+        level: +n.type[n.type.length - 1],
+      });
+
+      return true;
+    }
+    return false;
+  });
+  // console.log("All headers", headers);
+  if (!reload && cachedTOC === JSON.stringify(headers)) {
+    console.log("TOC is the same, not updating");
+    return;
+  }
+  cachedTOC = JSON.stringify(headers);
+  if (headers.length < headerThreshold) {
+    console.log("Not enough headers, not showing TOC", headers.length);
+    await editor.hidePanel("preface");
+    return;
+  }
+  let tocMarkdown = "";
+  for (const header of headers) {
+    tocMarkdown += `${
+      " ".repeat(3 * (header.level - 1))
+    }* [${header.name}](/${page}@${header.pos})\n`;
+  }
+  const css = await asset.readAsset("asset/style.css");
+  const js = await asset.readAsset("asset/toc.js");
+
+  await editor.showPanel(
+    "preface",
+    1,
+    ` <style>${css}</style>
+      <div id="sb-main"><div id="sb-editor"><div class="cm-editor">
+      <div id="button-bar">
+      <button id="reload-button" title="Reload"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
+      <button id="hide-button" title="Hide TOC"><svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><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></button>
+      </div>
+      <div class="cm-line sb-line-h2">Table of Contents</div>
+      <ul id="link-ul">
+      ${
+      headers.map((header) =>
+        `<li data-ref="${page}@${header.pos}" class="toc-header-${header.level}"><span class="sb-wiki-link-page">${header.name}</span></li>`
+      ).join("")
+    }
+      </ul>
+      </div></div></div>
+      `,
+    js,
+  );
+}

web/cm_plugins/preface_ps.ts

@@ -5,19 +5,34 @@ import { PanelConfig } from "../types.ts";
 import { createWidgetSandboxIFrame } from "../components/widget_sandbox_iframe.ts";
 
 class IFrameWidget extends WidgetType {
+  widgetHeightCacheKey: string;
   constructor(
     readonly editor: Client,
     readonly panel: PanelConfig,
+    readonly className: string,
   ) {
     super();
+    this.widgetHeightCacheKey = `${this.editor.currentPage!}#${this.className}`;
   }
 
   toDOM(): HTMLElement {
-    const iframe = createWidgetSandboxIFrame(this.editor, null, this.panel);
-    iframe.classList.add("sb-ps-iframe");
+    const iframe = createWidgetSandboxIFrame(
+      this.editor,
+      this.widgetHeightCacheKey,
+      this.panel,
+    );
+    iframe.classList.add(this.className);
     return iframe;
   }
 
+  get estimatedHeight(): number {
+    const height = this.editor.space.getCachedWidgetHeight(
+      this.widgetHeightCacheKey,
+    );
+    console.log("GOt height", height);
+    return height;
+  }
+
   eq(other: WidgetType): boolean {
     return this.panel.html ===
         (other as IFrameWidget).panel.html &&
@@ -26,15 +41,29 @@ class IFrameWidget extends WidgetType {
   }
 }
 
-export function postScriptPlugin(editor: Client) {
+export function postScriptPrefacePlugin(editor: Client) {
   return decoratorStateField((state: EditorState) => {
     const widgets: any[] = [];
+    if (editor.ui.viewState.panels.preface.html) {
+      widgets.push(
+        Decoration.widget({
+          widget: new IFrameWidget(
+            editor,
+            editor.ui.viewState.panels.preface,
+            "sb-preface-iframe",
+          ),
+          side: -1,
+          block: true,
+        }).range(0),
+      );
+    }
     if (editor.ui.viewState.panels.ps.html) {
       widgets.push(
         Decoration.widget({
           widget: new IFrameWidget(
             editor,
             editor.ui.viewState.panels.ps,
+            "sb-ps-iframe",
           ),
           side: 1,
           block: true,

web/editor_state.ts

@@ -40,7 +40,7 @@ import {
   pasteLinkExtension,
 } from "./cm_plugins/editor_paste.ts";
 import { TextChange } from "$sb/lib/change.ts";
-import { postScriptPlugin } from "./cm_plugins/post_script.ts";
+import { postScriptPrefacePlugin } from "./cm_plugins/preface_ps.ts";
 import { languageFor } from "../common/languages.ts";
 import { plugLinter } from "./cm_plugins/lint.ts";
 
@@ -144,7 +144,7 @@ export function createEditorState(
       plugLinter(client),
       // lintGutter(),
       //       gutters(),
-      postScriptPlugin(client),
+      postScriptPrefacePlugin(client),
       lineWrapper([
         { selector: "ATXHeading1", class: "sb-line-h1" },
         { selector: "ATXHeading2", class: "sb-line-h2" },

web/styles/main.scss

@@ -154,6 +154,13 @@ body {
   border-radius: 5px;
 }
 
+.sb-preface-iframe {
+  width: 100%;
+  margin-top: 10px;
+  border: 1px solid var(--editor-directive-background-color);
+  border-radius: 5px;
+}
+
 
 #sb-main {
   display: flex;

web/syscalls/editor.ts

@@ -186,6 +186,7 @@ export function editorSyscalls(editor: Client): SysCallMapping {
           ],
         });
       }
+      editor.editorView.focus();
     },
     "editor.setSelection": (_ctx, from: number, to: number) => {
       editor.editorView.dispatch({

web/types.ts

@@ -91,6 +91,7 @@ export const initialViewState: AppViewState = {
     bhs: {},
     modal: {},
     ps: {},
+    preface: {},
   },
   allPages: [],
   commands: new Map(),