refactor(client/render_note): separate content from setup

This commit is contained in:
Elian Doran 2026-02-15 16:17:41 +02:00
parent 2103be9d28
commit 06a005acec
No known key found for this signature in database
2 changed files with 26 additions and 15 deletions

View File

@ -1,23 +1,33 @@
import "./Render.css";
import { useEffect, useRef, useState } from "preact/hooks";
import { useEffect, useRef } from "preact/hooks";
import attributes from "../../services/attributes";
import { t } from "../../services/i18n";
import render from "../../services/render";
import Alert from "../react/Alert";
import { useTriliumEvent } from "../react/hooks";
import { useNoteRelation, useTriliumEvent } from "../react/hooks";
import RawHtml from "../react/RawHtml";
import { refToJQuerySelector } from "../react/react_utils";
import { TypeWidgetProps } from "./type_widget";
export default function Render({ note, noteContext, ntxId }: TypeWidgetProps) {
export default function Render(props: TypeWidgetProps) {
const { note } = props;
const [ renderNote ] = useNoteRelation(note, "renderNote");
if (!renderNote) {
return <SetupRenderContent />;
}
return <RenderContent {...props} />;
}
function RenderContent({ note, noteContext, ntxId }: TypeWidgetProps) {
const contentRef = useRef<HTMLDivElement>(null);
const [ renderNotesFound, setRenderNotesFound ] = useState(false);
function refresh() {
if (!contentRef) return;
render.render(note, refToJQuerySelector(contentRef)).then(setRenderNotesFound);
render.render(note, refToJQuerySelector(contentRef));
}
useEffect(refresh, [ note ]);
@ -47,16 +57,14 @@ export default function Render({ note, noteContext, ntxId }: TypeWidgetProps) {
resolve(refToJQuerySelector(contentRef));
});
return (
<>
{!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>
)}
return <div ref={contentRef} className="note-detail-render-content" />;
}
<div ref={contentRef} className="note-detail-render-content" />
</>
function SetupRenderContent() {
return (
<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>
);
}

View File

@ -78,6 +78,9 @@ type Relations = [
"searchScript",
"ancestor",
// Active content
"renderNote",
// Launcher-specific
"target",
"widget"