Factor out markdown widget rendering

2023-10-29 10:02:50 +01:00
parent 23e99b0c46
commit 50caba8522
17 changed files with 102 additions and 77 deletions
@@ -0,0 +1,65 @@
+/* Reset SB styles */
+html,
+body {
+    height: initial !important;
+    overflow: initial !important;
+}
+
+#sb-main {
+    height: initial !important;
+    display: initial !important;
+}
+
+#sb-editor {
+    flex: initial !important;
+    height: initial !important;
+}
+
+.cm-editor {
+    height: initial !important;
+}
+
+body {
+    font-family: var(--editor-font);
+    background-color: var(--root-background-color);
+    color: var(--root-color);
+}
+
+ul li p {
+    margin: 0;
+}
+
+body:hover #button-bar,
+body:active #button-bar {
+    display: block;
+}
+
+#button-bar {
+    position: absolute;
+    right: 12px;
+    top: 3px;
+    display: none;
+    background: rgb(255 255 255 / 0.9);
+    padding: 0 3px;
+}
+
+#button-bar button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--root-color);
+}
+
+#edit-button {
+    margin-left: -10px;
+}
+
+li code {
+    font-size: 80%;
+    color: #a5a4a4;
+}
+
+iframe {
+    border: none;
+    width: 100%;
+}
@@ -0,0 +1,104 @@
+async function init() {
+  // Make edit button send the "blur" API call so that the MD code is visible
+  document.getElementById("edit-button").addEventListener("click", () => {
+    api({ type: "blur" });
+  });
+  document.getElementById("reload-button").addEventListener("click", () => {
+    api({ type: "reload" });
+  });
+
+  document.querySelectorAll("a[data-ref]").forEach((el) => {
+    el.addEventListener("click", (e) => {
+      e.preventDefault();
+      syscall("editor.navigate", el.dataset.ref);
+    });
+  });
+
+  // Find all fenced code blocks and replace them with iframes (if a code widget is defined for them)
+  const allWidgets = document.querySelectorAll("pre[data-lang]");
+  for (const widget of allWidgets) {
+    const lang = widget.getAttribute("data-lang");
+    const body = widget.innerText;
+
+    try {
+      const result = await syscall("widget.render", lang, body);
+      const iframe = document.createElement("iframe");
+      iframe.src = "about:blank";
+
+      iframe.onload = () => {
+        iframe.contentDocument.write(panelHtml);
+        iframe.contentWindow.postMessage({
+          type: "html",
+          theme: document.getElementsByTagName("html")[0].getAttribute(
+            "data-theme",
+          ),
+          ...result,
+        }, "*");
+      };
+      widget.parentNode.replaceChild(iframe, widget);
+
+      globalThis.addEventListener("message", (e) => {
+        if (e.source !== iframe.contentWindow) {
+          return;
+        }
+        const messageData = e.data;
+        switch (messageData.type) {
+          case "setHeight":
+            iframe.style.height = messageData.height + "px";
+            // Propagate height setting to parent
+            updateHeight();
+            break;
+          case "syscall": {
+            // Intercept syscall messages and send them to the parent
+            const { id, name, args } = messageData;
+            syscall(name, ...args).then((result) => {
+              iframe.contentWindow.postMessage(
+                { id, type: "syscall-response", result },
+                "*",
+              );
+            }).catch((error) => {
+              iframe.contentWindow.postMessage({
+                id,
+                type: "syscall-response",
+                error,
+              }, "*");
+            });
+            break;
+          }
+          default:
+            // Bubble up any other messages to parent iframe
+            window.parent.postMessage(messageData, "*");
+        }
+      });
+    } catch (e) {
+      if (e.message.includes("not found")) {
+        // Not a code widget, ignore
+      } else {
+        console.error("Error rendering widget", e);
+      }
+    }
+  }
+
+  // Find all task toggles and propagate their state
+  document.querySelectorAll("span[data-external-task-ref]").forEach((el) => {
+    const taskRef = el.dataset.externalTaskRef;
+    el.querySelector("input[type=checkbox]").addEventListener("change", (e) => {
+      const oldState = e.target.dataset.state;
+      const newState = oldState === " " ? "x" : " ";
+      // Update state in DOM as well for future toggles
+      e.target.dataset.state = newState;
+      console.log("Toggling task", taskRef);
+      syscall(
+        "system.invokeFunction",
+        "tasks.updateTaskState",
+        taskRef,
+        oldState,
+        newState,
+      ).catch(
+        console.error,
+      );
+    });
+  });
+}
+
+init().catch(console.error);
@@ -2,6 +2,13 @@ name: markdown
 assets:
  - "assets/*"
 functions:
+
+  # API
+  markdownContentWidget:
+    path: markdown_content_widget.ts:markdownContentWidget
+
+  # User facing
+
  toggle:
    path: "./markdown.ts:togglePreview"
    command:
@@ -0,0 +1,47 @@
+import { WidgetContent } from "$sb/app_event.ts";
+import { asset, markdown } from "$sb/syscalls.ts";
+import { panelHtml } from "../../web/components/panel_html.ts";
+import { renderMarkdownToHtml } from "./markdown_render.ts";
+
+export async function markdownContentWidget(
+  markdownText: string,
+): Promise<WidgetContent> {
+  // Parse markdown to a ParseTree
+  const mdTree = await markdown.parseMarkdown(markdownText);
+  // And then render it to HTML
+  const html = renderMarkdownToHtml(mdTree, { smartHardBreak: true });
+  return {
+    html: await wrapHTML(html),
+    script: await prepareJS(),
+    // And add back the markdown text so we can render it in a different way if desired
+    markdown: markdownText,
+  };
+}
+
+export async function prepareJS() {
+  const iframeJS = await asset.readAsset("assets/markdown_widget.js");
+  return `
+    const panelHtml = \`${panelHtml}\`;
+    ${iframeJS}
+    `;
+}
+
+export async function wrapHTML(html: string): Promise<string> {
+  const css = await asset.readAsset("assets/markdown_widget.css");
+
+  return `
+       <!-- Load SB's own CSS here too -->
+       <link rel="stylesheet" href="/.client/main.css" />
+       <!-- In addition to some custom CSS -->
+       <style>${css}</style>
+       <!-- Wrap the whole thing in something SB-like to get access to styles -->
+       <div id="sb-main"><div id="sb-editor"><div class="cm-editor">
+       <!-- And add an edit button -->
+       <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="edit-button" title="Edit"><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" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>
+       </div>
+       ${html}
+       </div></div></div>
+  `;
+}
@@ -10,8 +10,8 @@ export async function updateMarkdownPreview() {
  const text = await editor.getText();
  const mdTree = await markdown.parseMarkdown(text);
  // const cleanMd = await cleanMarkdown(text);
-  const css = await asset.readAsset("assets/styles.css");
-  const js = await asset.readAsset("assets/handler.js");
+  const css = await asset.readAsset("assets/preview.css");
+  const js = await asset.readAsset("assets/preview.js");
  const html = renderMarkdownToHtml(mdTree, {
    smartHardBreak: true,
    annotationPositions: true,