feat(import/markdown): support image via wikilink

Author: eliandoran

apps/server/src/services/import/markdown.spec.ts

@@ -293,4 +293,10 @@ $$`;
         expect(markdownService.renderToHtml(input, "Title")).toStrictEqual(expected);
     });
 
+    it("supports wikilink with image (transclusion)", () => {
+        const input = `heres the handsome boy ![[assets/2025-06-20_14-05-20.jpeg]]`;
+        const expected = `<p>heres the handsome boy <img src="/assets/2025-06-20_14-05-20.jpeg"></p>`;
+        expect(markdownService.renderToHtml(input, "Title")).toStrictEqual(expected);
+    });
+
 });

apps/server/src/services/import/markdown.ts

@@ -1,12 +1,14 @@
 "use strict";
 
-import { parse, Renderer, type Tokens } from "marked";
+import { parse, Renderer, use, type Tokens } from "marked";
 import htmlSanitizer from "../html_sanitizer.js";
 import importUtils from "./utils.js";
 import { getMimeTypeFromMarkdownName, MIME_TYPE_AUTO } from "@triliumnext/commons";
 import { ADMONITION_TYPE_MAPPINGS } from "../export/markdown.js";
 import utils from "../utils.js";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import wikiLinkTransclusion from "./markdown/wikilink_transclusion.js";
+import wikiLinkInternalLink from "./markdown/wikilink_internal_link.js";
 
 /**
  * Keep renderer code up to date with https://github.com/markedjs/marked/blob/master/src/Renderer.ts.
@@ -115,12 +117,6 @@ class CustomMarkdownRenderer extends Renderer {
         return `<blockquote>${body}</blockquote>`;
     }
 
-    text(token: Tokens.Text | Tokens.Escape): string {
-        let text = super.text(token);
-        text = processWikiLinks(text);
-        return text;
-    }
-
 }
 
 function renderToHtml(content: string, title: string) {
@@ -130,6 +126,14 @@ function renderToHtml(content: string, title: string) {
     // Extract formulas and replace them with placeholders to prevent interference from Markdown rendering
     const { processedText, placeholderMap: formulaMap } = extractFormulas(content);
 
+    use({
+        // Order is important, especially for wikilinks.
+        extensions: [
+            wikiLinkTransclusion,
+            wikiLinkInternalLink
+        ]
+    });
+
     let html = parse(processedText, {
         async: false,
         renderer: renderer
@@ -218,11 +222,6 @@ function restoreFromMap(text: string, map: Map<string, string>): string {
     return text.replace(new RegExp(pattern, 'g'), match => map.get(match) ?? match);
 }
 
-function processWikiLinks(paragraph: string) {
-    paragraph = paragraph.replaceAll(/\[\[([^\[\]]+)\]\]/g, `<a class="reference-link" href="/$1">$1</a>`);
-    return paragraph;
-}
-
 const renderer = new CustomMarkdownRenderer({ async: false });
 
 export default {

apps/server/src/services/import/markdown/wikilink_internal_link.ts

@@ -0,0 +1,29 @@
+import { TokenizerAndRendererExtension } from "marked";
+
+const wikiLinkInternalLink: TokenizerAndRendererExtension = {
+    name: "wikilinkInternalLink",
+    level: "inline",
+
+    start(src: string) {
+        return src.indexOf('[[');
+    },
+
+    tokenizer(src) {
+        const match = /^\[\[([^\]]+?)\]\]/.exec(src);
+        if (match) {
+            return {
+                type: 'wikilinkInternalLink',
+                raw: match[0],
+                text: match[1].trim(), // what shows as link text
+                href: match[1].trim()
+            };
+        }
+    },
+
+    renderer(token) {
+        return `<a class="reference-link" href="/${token.href}">${token.text}</a>`;
+    }
+
+}
+
+export default wikiLinkInternalLink;

apps/server/src/services/import/markdown/wikilink_transclusion.ts

@@ -0,0 +1,30 @@
+import type { TokenizerAndRendererExtension } from "marked";
+
+/**
+ * The terminology is inspired by https://silverbullet.md/Transclusions.
+ */
+const wikiLinkTransclusion: TokenizerAndRendererExtension = {
+    name: "wikiLinkTransclusion",
+    level: "inline",
+
+    start(src: string) {
+        return src.match(/!\[\[/)?.index;
+    },
+
+    tokenizer(src) {
+        const match = /^!\[\[([^\]]+?)\]\]/.exec(src);
+        if (match) {
+            return {
+                type: "wikiLinkTransclusion",
+                raw: match[0],
+                href: match[1].trim(),
+            };
+        }
+    },
+
+    renderer(token) {
+        return `<img src="/${token.href}">`;
+    }
+};
+
+export default wikiLinkTransclusion;