feat(client/link): render reference links same as in editor

Author: eliandoran

apps/client/src/services/doc_renderer.ts

@@ -11,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, () => {
-                        processContent(fallbackUrl, $content)
+                    $content.load(fallbackUrl, async () => {
+                        await processContent(fallbackUrl, $content)
                         resolve($content);
                     });
                     return;
                 }
 
-                processContent(url, $content);
+                await processContent(url, $content);
                 resolve($content);
             });
         } else {
@@ -33,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.
@@ -45,7 +45,7 @@ function processContent(url: string, $content: JQuery<HTMLElement>) {
     formatCodeBlocks($content);
 
     // Apply reference links.
-    applyReferenceLinks($content[0]);
+    await applyReferenceLinks($content[0]);
 }
 
 function getUrl(docNameValue: string, language: string) {

apps/client/src/widgets/type_widgets/text/read_only_helper.ts

@@ -1,12 +1,13 @@
 import link from "../../../services/link";
 
-export function applyReferenceLinks(container: HTMLDivElement | HTMLElement) {
+export async 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;
-        }
+        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);
     }
 }