[#69560] add url mapping

src/hooks/markdownUrlMapping.js

@@ -0,0 +1,19 @@
+import markdownIt from "markdown-it";
+
+const mappedAttrs = ["src", "href"];
+
+const mapToken = (token, mapFunc) => {
+  for (const attrName of mappedAttrs) {
+    const attr = token.attrGet(attrName);
+    if (attr) token.attrSet(attrName, mapFunc(token.tag, attr));
+  }
+};
+
+export function markdownItMapUrls(/** @type {markdownIt} */ md) {
+  md.core.ruler.after("inline", "map_urls", (state) => {
+    for (const token of state.tokens) {
+      mapToken(token, state.env.mapUrl);
+      token.children?.forEach?.((c) => mapToken(c, state.env.mapUrl));
+    }
+  });
+}

src/hooks/useText.js

@@ -14,6 +14,7 @@ import { MystState } from "../mystState";
 import { useComputed } from "@preact/signals";
 import markdownCheckboxes from "markdown-it-checkbox";
 import { colonFencedBlocks } from "./markdownFence";
+import { markdownItMapUrls } from "./markdownUrlMapping";
 
 const countOccurences = (str, pattern) => (str?.match(pattern) || []).length;
 
@@ -112,6 +113,7 @@ export const useText = ({ preview }) => {
       .use(markdownSourceMap)
       .use(checkLinks)
       .use(colonFencedBlocks)
+      .use(markdownItMapUrls)
       .use(markdownCheckboxes);
 
     if (options.backslashLineBreak.value) md.use(backslashLineBreakPlugin);
@@ -187,14 +189,14 @@ export const useText = ({ preview }) => {
 
           const html =
             lookup[hash] ||
-            purify.sanitize(markdown.value.render(md, { chunkId, startLine, lineMap, view: editorView.value }), {
+            purify.sanitize(markdown.value.render(md, { chunkId, startLine, lineMap, view: editorView.value, mapUrl: options.mapUrl.value }), {
               // Taken from Mermaid JS settings: https://github.com/mermaid-js/mermaid/blob/dd0304387e85fc57a9ebb666f89ef788c012c2c5/packages/mermaid/src/mermaidAPI.ts#L50
               ADD_TAGS: ["foreignobject"],
               ADD_ATTR: ["dominant-baseline"],
             });
           return { md, hash, id: chunkId, html };
         }),
-    [markdown.value, options.id.value],
+    [markdown.value, options.id.value, options.mapUrl.value],
   );
 
   useEffect(() => readyToRender && updateHtmlChunks({ newMarkdown: text }), [readyToRender]);

src/mystState.js

@@ -51,6 +51,7 @@ const defaults = {
   parent: null,
   syncScroll: false,
   unfoldedHeadings: null,
+  mapUrl: (tag, url) => url,
 };
 
 export function createMystState(/** @type {typeof defaults} */ opts) {