fix(print): included notes not rendering

Author: eliandoran

apps/client/src/services/content_renderer_text.ts

@@ -7,14 +7,15 @@ import tree from "./tree.js";
 import froca from "./froca.js";
 import link from "./link.js";
 import { isHtmlEmpty } from "./utils.js";
-import type { RenderOptions } from "./content_renderer.js";
+import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
 
 export default async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     // entity must be FNote
     const blob = await note.getBlob();
 
     if (blob && !isHtmlEmpty(blob.content)) {
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
+        await renderIncludedNotes($renderedContent[0]);
 
         if ($renderedContent.find("span.math-tex").length > 0) {
             renderMathInElement($renderedContent[0], { trust: true });
@@ -36,6 +37,33 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
     }
 }
 
+async function renderIncludedNotes(contentEl: HTMLElement) {
+    // TODO: Consider duplicating with server's share/content_renderer.ts.
+    const includeNoteEls = contentEl.querySelectorAll("section.include-note");
+
+    // Gather the list of items to load.
+    const noteIds: string[] = [];
+    for (const includeNoteEl of includeNoteEls) {
+        const noteId = includeNoteEl.getAttribute("data-note-id");
+        if (noteId) {
+            noteIds.push(noteId);
+        }
+    }
+
+    // Load the required notes.
+    await froca.getNotes(noteIds);
+
+    // Render and integrate the notes.
+    for (const includeNoteEl of includeNoteEls) {
+        const noteId = includeNoteEl.getAttribute("data-note-id");
+        if (!noteId) return;
+
+        const note = froca.getNoteFromCache(noteId);
+        const renderedContent = (await content_renderer.getRenderedContent(note)).$renderedContent;
+        includeNoteEl.replaceChildren(...renderedContent);
+    }
+}
+
 /** Rewrite the code block from <pre><code> to <div> in order not to apply a codeblock style to it. */
 export async function rewriteMermaidDiagramsInContainer(container: HTMLDivElement) {
     const mermaidBlocks = container.querySelectorAll('pre:has(code[class="language-mermaid"])');