chore(react/type_widget): port render note partially

apps/client/src/widgets/NoteDetail.tsx

@@ -33,6 +33,7 @@ const TYPE_MAPPINGS: Record<ExtendedNoteType, () => Promise<{ default: TypeWidge
     "attachmentList": async () => (await import("./type_widgets/Attachment")).AttachmentList,
     "attachmentDetail": async () => (await import("./type_widgets/Attachment")).AttachmentDetail,
     "readOnlyText": () => import("./type_widgets/text/ReadOnlyText"),
+    "render": () => import("./type_widgets/Render")
     // TODO: finalize the record.
 };
 
@@ -148,7 +149,6 @@ async function getCorrespondingWidget(type: ExtendedNoteType, props: TypeWidgetP
     if (!correspondingType) return null;
 
     const result = await correspondingType();
-    console.log("For type ", type, " got ", result);
 
     if ("default" in result) {
         const Component = result.default;

apps/client/src/widgets/type_widgets/Render.css

@@ -0,0 +1,8 @@
+.note-detail-render {
+    position: relative;
+}
+
+.note-detail-render .note-detail-render-help {
+    margin: 50px;
+    padding: 20px;
+}

apps/client/src/widgets/type_widgets/Render.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { TypeWidgetProps } from "./type_widget";
+import render from "../../services/render";
+import { refToJQuerySelector } from "../react/react_utils";
+import Alert from "../react/Alert";
+import "./Render.css";
+import { t } from "../../services/i18n";
+import RawHtml from "../react/RawHtml";
+
+export default function Render({ note }: TypeWidgetProps) {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [ renderNotesFound, setRenderNotesFound ] = useState(false);
+
+    useEffect(() => {
+        if (!contentRef) return;
+        render.render(note, refToJQuerySelector(contentRef)).then(setRenderNotesFound);
+    }, [ note ]);
+
+    return (
+        <div className="note-detail-render note-detail-printable">
+            {!renderNotesFound && (
+                <Alert className="note-detail-render-help" type="warning">
+                    <p><strong>{t("render.note_detail_render_help_1")}</strong></p>
+                    <p><RawHtml html={t("render.note_detail_render_help_2")} /></p>
+                </Alert>
+            )}
+
+            <div ref={contentRef} className="note-detail-render-content" />
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets_old/render.ts

@@ -1,25 +1,8 @@
 import renderService from "../../services/render.js";
 import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
 
-const TPL = /*html*/`
-<div class="note-detail-render note-detail-printable">
-    <style>
-        .note-detail-render {
-            position: relative;
-        }
-    </style>
-
-    <div class="note-detail-render-help alert alert-warning" style="margin: 50px; padding: 20px;">
-        <p><strong>${t("render.note_detail_render_help_1")}</strong></p>
-
-        <p>${t("render.note_detail_render_help_2")}</p>
-    </div>
-
-    <div class="note-detail-render-content"></div>
-</div>`;
 
 export default class RenderTypeWidget extends TypeWidget {
 
@@ -43,10 +26,6 @@ export default class RenderTypeWidget extends TypeWidget {
         this.$noteDetailRenderHelp.hide();
 
         const renderNotesFound = await renderService.render(note, this.$noteDetailRenderContent);
-
-        if (!renderNotesFound) {
-            this.$noteDetailRenderHelp.show();
-        }
     }
 
     cleanup() {