feat(help): render reference links with icon

Author: eliandoran

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) {

apps/client/src/widgets/type_widgets/Doc.tsx

@@ -7,15 +7,14 @@ 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);
 
     useEffect(() => {
         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}
         />
     );
 }

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));
-    }
-}

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;
+        }
+    }
+}