Factor out markdown widget rendering

plugs/markdown/markdown.plug.yaml

@@ -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:

plugs/markdown/markdown_content_widget.ts

@@ -1,9 +1,25 @@
-import { asset } from "$sb/syscalls.ts";
+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/common.js");
-
+  const iframeJS = await asset.readAsset("assets/markdown_widget.js");
   return `
     const panelHtml = \`${panelHtml}\`;
     ${iframeJS}
@@ -11,7 +27,7 @@ export async function prepareJS() {
 }
 
 export async function wrapHTML(html: string): Promise<string> {
-  const css = await asset.readAsset("assets/style.css");
+  const css = await asset.readAsset("assets/markdown_widget.css");
 
   return `
        <!-- Load SB's own CSS here too -->

plugs/markdown/preview.ts

@@ -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,

plugs/query/query.plug.yaml

@@ -1,6 +1,4 @@
 name: query
-assets:
-  - "assets/*"
 functions:
   queryWidget:
     path: query.ts:widget

plugs/query/query.ts

@@ -1,11 +1,9 @@
 import type { WidgetContent } from "$sb/app_event.ts";
-import { editor, events, language, markdown, space } from "$sb/syscalls.ts";
+import { editor, events, language, space, system } from "$sb/syscalls.ts";
 import { parseTreeToAST } from "$sb/lib/tree.ts";
 import { astToKvQuery } from "$sb/lib/parse-query.ts";
 import { jsonToMDTable, renderTemplate } from "../directive/util.ts";
-import { renderMarkdownToHtml } from "../markdown/markdown_render.ts";
 import { replaceTemplateVars } from "../template/template.ts";
-import { prepareJS, wrapHTML } from "./util.ts";
 
 export async function widget(bodyText: string): Promise<WidgetContent> {
   const pageMeta = await space.getPageMeta(await editor.getCurrentPage());
@@ -57,21 +55,14 @@ export async function widget(bodyText: string): Promise<WidgetContent> {
       }
     }
 
-    // Parse markdown to a ParseTree
-    const mdTree = await markdown.parseMarkdown(resultMarkdown);
-    // And then render it to HTML
-    const html = renderMarkdownToHtml(mdTree, { smartHardBreak: true });
-    return {
-      html: await wrapHTML(`
-       ${parsedQuery.render ? "" : `<div class="sb-table-widget">`}
-       ${html}
-       ${parsedQuery.render ? "" : `</div>`}
-      `),
-      script: await prepareJS(),
-    };
+    return system.invokeFunction(
+      "markdown.markdownContentWidget",
+      resultMarkdown,
+    );
   } catch (e: any) {
-    return {
-      html: await wrapHTML(`<b>Error:</b> ${e.message}`),
-    };
+    return system.invokeFunction(
+      "markdown.markdownContentWidget",
+      `**Error:** ${e.message}`,
+    );
   }
 }

plugs/query/template.ts

@@ -1,9 +1,15 @@
 import { WidgetContent } from "$sb/app_event.ts";
-import { editor, handlebars, markdown, space, YAML } from "$sb/syscalls.ts";
+import {
+  editor,
+  handlebars,
+  markdown,
+  space,
+  system,
+  YAML,
+} from "$sb/syscalls.ts";
 import { rewritePageRefs } from "$sb/lib/resolve.ts";
-import { renderMarkdownToHtml } from "../markdown/markdown_render.ts";
-import { prepareJS, wrapHTML } from "./util.ts";
 import { replaceTemplateVars } from "../template/template.ts";
+import { renderToText } from "$sb/lib/tree.ts";
 
 type TemplateConfig = {
   // Pull the template from a page
@@ -36,31 +42,28 @@ export async function widget(bodyText: string): Promise<WidgetContent> {
       )
       : undefined;
 
-    const rendered = config.raw
-      ? templateText
-      : await handlebars.renderTemplate(
-        templateText,
-        value,
-        {
-          page: pageMeta,
-        },
-      );
-    const parsedMarkdown = await markdown.parseMarkdown(rendered);
+    let rendered = config.raw ? templateText : await handlebars.renderTemplate(
+      templateText,
+      value,
+      {
+        page: pageMeta,
+      },
+    );
 
     if (templatePage) {
+      const parsedMarkdown = await markdown.parseMarkdown(rendered);
       rewritePageRefs(parsedMarkdown, templatePage);
+      rendered = renderToText(parsedMarkdown);
     }
-    const html = renderMarkdownToHtml(parsedMarkdown, {
-      smartHardBreak: true,
-    });
 
-    return {
-      html: await wrapHTML(html),
-      script: await prepareJS(),
-    };
+    return system.invokeFunction(
+      "markdown.markdownContentWidget",
+      rendered,
+    );
   } catch (e: any) {
-    return {
-      html: `<b>Error:</b> ${e.message}`,
-    };
+    return system.invokeFunction(
+      "markdown.markdownContentWidget",
+      `**Error:** ${e.message}`,
+    );
   }
 }