Eliminate (most) uses of the client global

Also an opportunity to refactor the transclusion code, which had become
very messy

Author: zefhemel

client/codemirror/inline_content.ts

@@ -10,9 +10,14 @@ import {
 import type { Client } from "../client.ts";
 import { LuaWidget } from "./lua_widget.ts";
 import {
+  createMediaElement,
   expandMarkdown,
-  inlineContentFromURL,
+  readTransclusionContent,
 } from "../markdown_renderer/inline.ts";
+import {
+  isLocalURL,
+  resolveMarkdownLink,
+} from "@silverbulletmd/silverbullet/lib/resolve";
 import { parseMarkdown } from "../markdown_parser/parser.ts";
 import { renderToText } from "@silverbulletmd/silverbullet/lib/tree";
 import {
@@ -60,24 +65,40 @@ export function inlineContentPlugin(client: Client) {
               text,
               text,
               async () => {
-                try {
-                  const result: any = await inlineContentFromURL(
-                    client.space,
-                    transclusion,
+                // Resolve local URLs
+                if (isLocalURL(transclusion.url)) {
+                  transclusion.url = resolveMarkdownLink(
+                    client.currentName(),
+                    decodeURI(transclusion.url),
                   );
-                  const content =
-                    result.text !== undefined
-                      ? {
-                          markdown: renderToText(
-                            await expandMarkdown(
-                              client.space,
-                              nameFromTransclusion(transclusion),
-                              parseMarkdown(result.text, result.offset),
-                              client.clientSystem.spaceLuaEnv,
-                            ),
-                          ),
-                        }
-                      : { html: result };
+                }
+
+                try {
+                  let content;
+                  try {
+                    const result = await readTransclusionContent(
+                      client.space,
+                      transclusion,
+                    );
+                    content = {
+                      markdown: renderToText(
+                        await expandMarkdown(
+                          client.space,
+                          nameFromTransclusion(transclusion),
+                          parseMarkdown(result.text, result.offset),
+                          client.clientSystem.spaceLuaEnv,
+                        ),
+                      ),
+                    };
+                  } catch {
+                    const element = createMediaElement(transclusion);
+                    if (!element) {
+                      throw new Error(
+                        `Unsupported content: ${transclusion.url}`,
+                      );
+                    }
+                    content = { html: element };
+                  }
 
                   return {
                     _isWidget: true,

client/codemirror/table.ts

@@ -54,10 +54,10 @@ class TableViewWidget extends WidgetType {
     });
 
     void expandMarkdown(
-      client.space,
-      client.currentName(),
+      this.client.space,
+      this.client.currentName(),
       this.t,
-      client.clientSystem.spaceLuaEnv,
+      this.client.clientSystem.spaceLuaEnv,
     ).then((t) => {
       dom.innerHTML = renderMarkdownToHtml(t, {
         // Annotate every element with its position so we can use it to put

client/markdown_renderer/inline.ts

@@ -10,7 +10,10 @@ import {
   isMarkdownPath,
   parseToRef,
 } from "@silverbulletmd/silverbullet/lib/ref";
-import { isLocalURL } from "@silverbulletmd/silverbullet/lib/resolve";
+import {
+  isLocalURL,
+  resolveMarkdownLink,
+} from "@silverbulletmd/silverbullet/lib/resolve";
 import mime from "mime";
 import { LuaStackFrame, LuaTable } from "../space_lua/runtime.ts";
 import { parseMarkdown } from "../markdown_parser/parser.ts";
@@ -62,13 +65,25 @@ export async function expandMarkdown(
         return n;
       }
 
-      try {
-        const result = await inlineContentFromURL(space, transclusion);
+      // Resolve local URLs
+      if (isLocalURL(transclusion.url)) {
+        transclusion.url = resolveMarkdownLink(
+          pageName,
+          decodeURI(transclusion.url),
+        );
+      }
 
-        // We don't transclude anything that's not markdown
-        if (!("text" in result)) {
-          return n;
-        }
+      // We don't transclude anything that's not markdown
+      const mimeType = getMimeTypeFromUrl(
+        transclusion.url,
+        transclusion.linktype !== "wikilink",
+      );
+      if (mimeType && mimeType !== "text/markdown") {
+        return n;
+      }
+
+      try {
+        const result = await readTransclusionContent(space, transclusion);
 
         // We know it's a markdown page and we know we are transcluding it. "Mark"
         // it so we won't touch it down the line and cause endless recursion
@@ -155,54 +170,57 @@ export async function expandMarkdown(
   return mdTree;
 }
 
-type OffsetText = {
+export type OffsetText = {
   text: string;
   offset: number;
 };
 
 /**
- * Function to generate HTML or markdown for a ![[<link>]] type transclusion.
- * @param space space object to use to retrieve content (readRef)
- * @param transclusion transclusion object to process
- * @returns a string for a markdown transclusion, or html for everything else
+ * Determine the MIME type for a transclusion URL.
  */
-export function inlineContentFromURL(
-  space: Space,
-  transclusion: Transclusion,
-): HTMLElement | OffsetText | Promise<HTMLElement | OffsetText> {
-  const allowExternal = transclusion.linktype !== "wikilink";
-  if (!client) {
-    return { text: "", offset: 0 };
-  }
-  let mimeType: string | null | undefined;
-  if (!isLocalURL(transclusion.url) && allowExternal) {
-    // Remote URL
-    // Realistically we should dertermine the mine type by sending a HEAD
-    // request, this poses multiple problems
-    // 1. This makes `async` a hard requirement here
-    // 2. We would need to proxy the request (because of CORS)
-    // 3. It won't work "offline" (i.e. away from the SB instance, because it
-    //    can't proxy the request anymore)
-    // 4. It can be pretty heavy. If your internet connection is bad you will
-    //    have to wait for all HEAD request, for your `markdownToHtml` to
-    //    complete. This could take a noticeable amount of time.
-    // For this reason we will stick to doing it the `dumb` way by just getting
-    // it from the URL extension
-    const extension = URL.parse(transclusion.url)?.pathname.split(".").pop();
+export function getMimeTypeFromUrl(
+  url: string,
+  allowExternal: boolean,
+): string | null {
+  if (!isLocalURL(url) && allowExternal) {
+    // Remote URL: determine mime type from the URL extension
+    const extension = URL.parse(url)?.pathname.split(".").pop();
     if (extension) {
-      mimeType = mime.getType(extension);
-    }
-  } else {
-    const ref = parseToRef(transclusion.url);
-    if (!ref) {
-      throw Error(`Failed to parse url: ${transclusion.url}`);
+      return mime.getType(extension);
     }
+    return null;
+  }
 
-    mimeType = mime.getType(getPathExtension(ref.path));
+  const ref = parseToRef(url);
+  if (!ref) {
+    throw Error(`Failed to parse url: ${url}`);
   }
 
+  return mime.getType(getPathExtension(ref.path));
+}
+
+/**
+ * Sanitize a transclusion URL for use in HTML elements.
+ * Local URLs get prefixed with the fs endpoint.
+ */
+function sanitizeTransclusionUrl(url: string): string {
+  return isLocalURL(url)
+    ? `${fsEndpoint.slice(1)}/${url.replace(":", "%3A")}`
+    : url;
+}
+
+/**
+ * Create an HTML element for media transclusions (image/video/audio/pdf).
+ * Returns null for markdown content or unknown MIME types.
+ */
+export function createMediaElement(
+  transclusion: Transclusion,
+): HTMLElement | null {
+  const allowExternal = transclusion.linktype !== "wikilink";
+  const mimeType = getMimeTypeFromUrl(transclusion.url, allowExternal);
+
   if (!mimeType) {
-    throw Error(`Failed to determine mime type for ${transclusion.url}`);
+    return null;
   }
 
   const style =
@@ -214,28 +232,25 @@ export function inlineContentFromURL(
       ? `height: ${transclusion.dimension.height}px;`
       : "");
 
-  // If the URL is a local, prefix it with /.fs and encode the : so that it's not interpreted as a protocol
-  const sanitizedFsUrl = isLocalURL(transclusion.url)
-    ? `${fsEndpoint.slice(1)}/${transclusion.url.replace(":", "%3A")}`
-    : transclusion.url;
+  const sanitizedUrl = sanitizeTransclusionUrl(transclusion.url);
 
   if (mimeType.startsWith("image/")) {
     const img = document.createElement("img");
-    img.src = sanitizedFsUrl;
+    img.src = sanitizedUrl;
     img.alt = transclusion.alias;
     img.style = style;
     return img;
   } else if (mimeType.startsWith("video/")) {
     const video = document.createElement("video");
-    video.src = sanitizedFsUrl;
+    video.src = sanitizedUrl;
     video.title = transclusion.alias;
     video.controls = true;
     video.autoplay = false;
     video.style = style;
     return video;
   } else if (mimeType.startsWith("audio/")) {
     const audio = document.createElement("audio");
-    audio.src = sanitizedFsUrl;
+    audio.src = sanitizedUrl;
     audio.title = transclusion.alias;
     audio.controls = true;
     audio.autoplay = false;
@@ -244,26 +259,45 @@ export function inlineContentFromURL(
   } else if (mimeType === "application/pdf") {
     const embed = document.createElement("object");
     embed.type = mimeType;
-    embed.data = sanitizedFsUrl;
+    embed.data = sanitizedUrl;
     embed.style.width = "100%";
     embed.style.height = "20em";
     embed.style = style;
     return embed;
-  } else if (mimeType === "text/markdown") {
-    if (!isLocalURL(transclusion.url) && allowExternal) {
-      throw Error(`Transcluding markdown from external sources is not allowed`);
-    }
+  }
 
-    const ref = parseToRef(transclusion.url);
-    if (!ref || !isMarkdownPath(ref.path)) {
-      // We can be fairly sure this can't happen, but just be sure
-      throw Error(
-        `Couldn't transclude markdown, invalid path: ${transclusion.url}`,
-      );
-    }
+  return null;
+}
 
-    return space.readRef(ref);
-  } else {
-    return { text: `File has unsupported mimeType: ${mimeType}`, offset: 0 };
+/**
+ * Read markdown transclusion content from space.
+ * Throws for non-markdown MIME types or invalid paths.
+ */
+export async function readTransclusionContent(
+  space: Space,
+  transclusion: Transclusion,
+): Promise<OffsetText> {
+  const allowExternal = transclusion.linktype !== "wikilink";
+  const mimeType = getMimeTypeFromUrl(transclusion.url, allowExternal);
+
+  if (!mimeType) {
+    throw Error(`Failed to determine mime type for ${transclusion.url}`);
+  }
+
+  if (mimeType !== "text/markdown") {
+    throw Error(`File has unsupported mimeType: ${mimeType}`);
   }
+
+  if (!isLocalURL(transclusion.url) && allowExternal) {
+    throw Error(`Transcluding markdown from external sources is not allowed`);
+  }
+
+  const ref = parseToRef(transclusion.url);
+  if (!ref || !isMarkdownPath(ref.path)) {
+    throw Error(
+      `Couldn't transclude markdown, invalid path: ${transclusion.url}`,
+    );
+  }
+
+  return space.readRef(ref);
 }

client/markdown_renderer/markdown_render.ts

@@ -18,7 +18,7 @@ import * as TagConstants from "../../plugs/index/constants.ts";
 import { extractHashtag } from "@silverbulletmd/silverbullet/lib/tags";
 import { justifiedTableRender } from "./justified_tables.ts";
 import type { PageMeta } from "@silverbulletmd/silverbullet/type/index";
-import { inlineContentFromURL } from "./inline.ts";
+import { createMediaElement } from "./inline.ts";
 import { parseTransclusion } from "@silverbulletmd/silverbullet/lib/transclusion";
 
 export type MarkdownRenderOptions = {
@@ -263,22 +263,14 @@ function render(t: ParseTree, options: MarkdownRenderOptions = {}): Tag | null {
       }
 
       try {
-        const result = inlineContentFromURL(client.space, transclusion);
-        if (result instanceof Promise) {
-          // console.warn(
-          //   `Unsupported inline in markdown render context: ${transclusion.url}`,
-          // );
-          // Can't support promises in this context, returning original text
-          return text;
-        }
-        // Running in non-browser context
-        if (!globalThis.HTMLElement || !(result instanceof HTMLElement)) {
+        const element = createMediaElement(transclusion);
+        if (!element) {
           return text;
         }
 
         return {
-          name: result.tagName,
-          attrs: Array.from(result.attributes).reduce(
+          name: element.tagName,
+          attrs: Array.from(element.attributes).reduce(
             (obj, attr) => {
               obj[attr.name] = attr.value;
               return obj;