Fixes #360

plugs/markdown/markdown_render.test.ts

@@ -30,12 +30,12 @@ Deno.test("Markdown render", async () => {
   // console.log("HTML", html);
 });
 
-Deno.test("Smart hard break test", () => {
+Deno.test("Smart hard break test", async () => {
   const example = `**Hello**
 *world!*`;
   const lang = buildMarkdown([]);
   const tree = parse(lang, example);
-  const html = renderMarkdownToHtml(tree, {
+  const html = await renderMarkdownToHtml(tree, {
     failOnUnknown: true,
     smartHardBreak: true,
   });

plugs/markdown/markdown_render.ts

@@ -13,6 +13,8 @@ type MarkdownRenderOptions = {
   annotationPositions?: true;
   renderFrontMatter?: true;
   attachmentUrlPrefix?: string;
+  // When defined, use to inline images as data: urls
+  inlineAttachments?: (url: string) => Promise<string>;
 };
 
 function cleanTags(values: (Tag | null)[]): Tag[] {
@@ -390,11 +392,36 @@ function render(
   }
 }
 
-export function renderMarkdownToHtml(
+async function traverseTag(
+  t: Tag,
+  fn: (t: Tag) => Promise<void>,
+): Promise<void> {
+  await fn(t);
+  if (typeof t === "string") {
+    return;
+  }
+  if (t.body) {
+    for (const child of t.body) {
+      await traverseTag(child, fn);
+    }
+  }
+}
+
+export async function renderMarkdownToHtml(
   t: ParseTree,
   options: MarkdownRenderOptions = {},
 ) {
   preprocess(t, options);
   const htmlTree = posPreservingRender(t, options);
+  if (htmlTree && options.inlineAttachments) {
+    await traverseTag(htmlTree, async (t) => {
+      if (typeof t === "string") {
+        return;
+      }
+      if (t.name === "img") {
+        t.attrs!.src = await options.inlineAttachments!(t.attrs!.src!);
+      }
+    });
+  }
   return renderHtml(htmlTree);
 }

plugs/markdown/preview.ts

@@ -1,4 +1,9 @@
-import { clientStore, editor, system } from "$sb/silverbullet-syscall/mod.ts";
+import {
+  clientStore,
+  editor,
+  space,
+  system,
+} from "$sb/silverbullet-syscall/mod.ts";
 import { asset } from "$sb/plugos-syscall/mod.ts";
 import { parseMarkdown } from "../../plug-api/silverbullet-syscall/markdown.ts";
 import { renderMarkdownToHtml } from "./markdown_render.ts";
@@ -12,11 +17,21 @@ export async function updateMarkdownPreview() {
   // const cleanMd = await cleanMarkdown(text);
   const css = await asset.readAsset("assets/styles.css");
   const js = await asset.readAsset("assets/handler.js");
-  const html = renderMarkdownToHtml(mdTree, {
+  const html = await renderMarkdownToHtml(mdTree, {
     smartHardBreak: true,
     annotationPositions: true,
     renderFrontMatter: true,
-    attachmentUrlPrefix: "fs/",
+    inlineAttachments: async (url): Promise<string> => {
+      if (!url.includes("://")) {
+        try {
+          return await space.readAttachment(url);
+        } catch (e: any) {
+          console.error(e);
+          return url;
+        }
+      }
+      return url;
+    },
   });
   await editor.showPanel(
     "rhs",

plugs/markdown/widget.ts

@@ -7,7 +7,7 @@ export async function markdownWidget(
 ): Promise<WidgetContent> {
   const mdTree = await parseMarkdown(bodyText);
 
-  const html = renderMarkdownToHtml(mdTree, {
+  const html = await renderMarkdownToHtml(mdTree, {
     smartHardBreak: true,
   });
   return Promise.resolve({