Merge branch 'main' into siriusbcd_close_split

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";
 
@@ -10,18 +11,18 @@ export default function renderDoc(note: FNote) {
         if (docName) {
             // find doc based on language
             const url = getUrl(docName, getCurrentLanguage());
-            $content.load(url, (response, status) => {
+            $content.load(url, async (response, status) => {
                 // fallback to english doc if no translation available
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
-                    $content.load(fallbackUrl, () => {
+                    $content.load(fallbackUrl, async () => {
-                        processContent(fallbackUrl, $content)
+                        await processContent(fallbackUrl, $content)
                         resolve($content);
                     });
                     return;
                 }
 
-                processContent(url, $content);
+                await processContent(url, $content);
                 resolve($content);
             });
         } else {
@@ -32,7 +33,7 @@ export default function renderDoc(note: FNote) {
     });
 }
 
-function processContent(url: string, $content: JQuery<HTMLElement>) {
+async function processContent(url: string, $content: JQuery<HTMLElement>) {
     const dir = url.substring(0, url.lastIndexOf("/"));
 
     // Images are relative to the docnote but that will not work when rendered in the application since the path breaks.
@@ -42,6 +43,9 @@ function processContent(url: string, $content: JQuery<HTMLElement>) {
     });
 
     formatCodeBlocks($content);
+
+    // Apply reference links.
+    await applyReferenceLinks($content[0]);
 }
 
 function getUrl(docNameValue: string, language: string) {

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
+        <div
-            containerRef={containerRef}
+            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,13 @@
+import link from "../../../services/link";
+
+export async function applyReferenceLinks(container: HTMLDivElement | HTMLElement) {
+    const referenceLinks = container.querySelectorAll<HTMLDivElement>("a.reference-link");
+    for (const referenceLink of referenceLinks) {
+        await link.loadReferenceLinkTitle($(referenceLink));
+
+        // Wrap in a <span> to match the design while in CKEditor.
+        const spanEl = document.createElement("span");
+        spanEl.replaceChildren(...referenceLink.childNodes);
+        referenceLink.replaceChildren(spanEl);
+    }
+}