From ae58b4af3573155769439daee217685d324c13c2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 16 Nov 2025 10:41:16 +0200
Subject: [PATCH] feat(help): render reference links with icon

---
 apps/client/src/services/doc_renderer.ts             |  4 ++++
 apps/client/src/widgets/type_widgets/Doc.tsx         |  8 +++-----
 .../src/widgets/type_widgets/text/ReadOnlyText.tsx   |  8 +-------
 .../widgets/type_widgets/text/read_only_helper.ts    | 12 ++++++++++++
 4 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/text/read_only_helper.ts

diff --git a/apps/client/src/services/doc_renderer.ts b/apps/client/src/services/doc_renderer.ts
index de3cfba6c..3a6e9d33f 100644
--- a/apps/client/src/services/doc_renderer.ts
+++ b/apps/client/src/services/doc_renderer.ts
@@ -1,4 +1,5 @@
 import type FNote from "../entities/fnote.js";
+import { applyReferenceLinks } from "../widgets/type_widgets/text/read_only_helper.js";
 import { getCurrentLanguage } from "./i18n.js";
 import { formatCodeBlocks } from "./syntax_highlight.js";
 
@@ -42,6 +43,9 @@ function processContent(url: string, $content: JQuery<HTMLElement>) {
     });
 
     formatCodeBlocks($content);
+
+    // Apply reference links.
+    applyReferenceLinks($content[0]);
 }
 
 function getUrl(docNameValue: string, language: string) {
diff --git a/apps/client/src/widgets/type_widgets/Doc.tsx b/apps/client/src/widgets/type_widgets/Doc.tsx
index 4467c09e0..5c7a31890 100644
--- a/apps/client/src/widgets/type_widgets/Doc.tsx
+++ b/apps/client/src/widgets/type_widgets/Doc.tsx
@@ -7,7 +7,6 @@ import { useTriliumEvent } from "../react/hooks";
 import { refToJQuerySelector } from "../react/react_utils";
 
 export default function Doc({ note, viewScope, ntxId }: TypeWidgetProps) {
-    const [ html, setHtml ] = useState<string>();
     const initialized = useRef<Promise<void> | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -15,7 +14,7 @@ export default function Doc({ note, viewScope, ntxId }: TypeWidgetProps) {
         if (!note) return;
 
         initialized.current = renderDoc(note).then($content => {
-            setHtml($content.html());
+            containerRef.current?.replaceChildren(...$content);
         });
     }, [ note ]);
 
@@ -26,10 +25,9 @@ export default function Doc({ note, viewScope, ntxId }: TypeWidgetProps) {
     });
 
     return (
-        <RawHtmlBlock
-            containerRef={containerRef}
+        <div
+            ref={containerRef}
             className={`note-detail-doc-content ck-content ${viewScope?.viewMode === "contextual-help" ? "contextual-help" : ""}`}
-            html={html}
         />
     );
 }
diff --git a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
index 5bd43833c..545095818 100644
--- a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
@@ -17,6 +17,7 @@ import link from "../../../services/link";
 import { formatCodeBlocks } from "../../../services/syntax_highlight";
 import TouchBar, { TouchBarButton, TouchBarSpacer } from "../../react/TouchBar";
 import appContext from "../../../components/app_context";
+import { applyReferenceLinks } from "./read_only_helper";
 
 export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) {
     const blob = useNoteBlob(note);
@@ -122,10 +123,3 @@ function applyMath(container: HTMLDivElement) {
         renderMathInElement(equation, { trust: true });
     }
 }
-
-function applyReferenceLinks(container: HTMLDivElement) {
-    const referenceLinks = container.querySelectorAll<HTMLDivElement>("a.reference-link");
-    for (const referenceLink of referenceLinks) {
-        link.loadReferenceLinkTitle($(referenceLink));
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/text/read_only_helper.ts b/apps/client/src/widgets/type_widgets/text/read_only_helper.ts
new file mode 100644
index 000000000..d8866e55e
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/read_only_helper.ts
@@ -0,0 +1,12 @@
+import link from "../../../services/link";
+
+export function applyReferenceLinks(container: HTMLDivElement | HTMLElement) {
+    const referenceLinks = container.querySelectorAll<HTMLDivElement>("a.reference-link");
+    for (const referenceLink of referenceLinks) {
+        try {
+            link.loadReferenceLinkTitle($(referenceLink));
+        } catch (e) {
+            continue;
+        }
+    }
+}