diff --git a/apps/client/src/services/doc_renderer.ts b/apps/client/src/services/doc_renderer.ts index 3a6e9d33f..1ae60fb9c 100644 --- a/apps/client/src/services/doc_renderer.ts +++ b/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) { +async function processContent(url: string, $content: JQuery) { 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) { formatCodeBlocks($content); // Apply reference links. - applyReferenceLinks($content[0]); + await applyReferenceLinks($content[0]); } function getUrl(docNameValue: string, language: string) { 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 index d8866e55e..0f43544b6 100644 --- a/apps/client/src/widgets/type_widgets/text/read_only_helper.ts +++ b/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("a.reference-link"); for (const referenceLink of referenceLinks) { - try { - link.loadReferenceLinkTitle($(referenceLink)); - } catch (e) { - continue; - } + await link.loadReferenceLinkTitle($(referenceLink)); + + // Wrap in a to match the design while in CKEditor. + const spanEl = document.createElement("span"); + spanEl.replaceChildren(...referenceLink.childNodes); + referenceLink.replaceChildren(spanEl); } }