feat(client/print): support most notes via content_renderer

apps/client/src/print.tsx

@@ -2,7 +2,13 @@ import FNote from "./entities/fnote";
 import { render } from "preact";
 import { CustomNoteList } from "./widgets/collections/NoteList";
 import "./print.css";
-import { useCallback, useRef } from "preact/hooks";
+import { useCallback, useEffect, useRef } from "preact/hooks";
+import content_renderer from "./services/content_renderer";
+
+interface RendererProps {
+    note: FNote;
+    onReady: () => void;
+}
 
 async function main() {
     const notePath = window.location.hash.substring(1);
@@ -17,23 +23,42 @@ async function main() {
 }
 
 function App({ note }: { note: FNote }) {
-    return (
-        <>
-            <ContentRenderer note={note} />
-        </>
-    );
-}
-
-function ContentRenderer({ note }: { note: FNote }) {
     const sentReadyEvent = useRef(false);
     const onReady = useCallback(() => {
         if (sentReadyEvent.current) return;
         window.dispatchEvent(new Event("note-ready"));
         sentReadyEvent.current = true;
     }, []);
+    const props: RendererProps = { note, onReady };
 
-    // Collections.
+    return (
-    if (note.type === "book") {
+        <>
+            {note.type === "book"
+            ? <CollectionRenderer {...props} />
+            : <SingleNoteRenderer {...props} />
+            }
+        </>
+    );
+}
+
+function SingleNoteRenderer({ note, onReady }: RendererProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        content_renderer.getRenderedContent(note, {
+            noChildrenList: true
+        }).then(({$renderedContent}) => {
+            containerRef.current?.replaceChildren(...$renderedContent);
+        });
+    }, [ note ]);
+
+    return <>
+        <h1>{note.title}</h1>
+        <main ref={containerRef} />
+    </>;
+}
+
+function CollectionRenderer({ note, onReady }: RendererProps) {
     return <CustomNoteList
         isEnabled
         note={note}
@@ -45,10 +70,4 @@ function ContentRenderer({ note }: { note: FNote }) {
     />;
 }
 
-    // Other note types.
-    return <>
-        <h1>{note.title}</h1>
-    </>;
-}
-
 main();