feat(client/render_note): create sample note with preact

This commit is contained in:
Elian Doran 2026-02-15 16:38:09 +02:00
parent 5550cb7b95
commit 1ba498c0e3
No known key found for this signature in database
2 changed files with 28 additions and 1 deletions

View File

@ -1067,7 +1067,9 @@
"click_on_canvas_to_place_new_note": "Click on canvas to place new note"
},
"render": {
"setup_title": "Display custom HTML or Preact JSX inside this note"
"setup_title": "Display custom HTML or Preact JSX inside this note",
"setup_create_sample": "Create sample note with Preact",
"setup_sample_created": "A sample note was created as a child note."
},
"web_view_setup": {
"title": "Create a live view of a webpage directly into Trilium",

View File

@ -4,7 +4,10 @@ import { useEffect, useRef } from "preact/hooks";
import attributes from "../../services/attributes";
import { t } from "../../services/i18n";
import note_create from "../../services/note_create";
import render from "../../services/render";
import toast from "../../services/toast";
import Button from "../react/Button";
import FormGroup from "../react/FormGroup";
import { useNoteRelation, useTriliumEvent } from "../react/hooks";
import NoteAutocomplete from "../react/NoteAutocomplete";
@ -12,6 +15,12 @@ import { refToJQuerySelector } from "../react/react_utils";
import SetupForm from "./helpers/SetupForm";
import { TypeWidgetProps } from "./type_widget";
const PREACT_SAMPLE = /*js*/`\
export default function() {
return <p>Hello world.</p>;
}
`;
export default function Render(props: TypeWidgetProps) {
const { note } = props;
const [ renderNote ] = useNoteRelation(note, "renderNote");
@ -73,6 +82,22 @@ function SetupRenderContent({ note }: TypeWidgetProps) {
attributes.setRelation(note.noteId, "renderNote", noteId);
}} />
</FormGroup>
<Button
text={t("render.setup_create_sample")}
primary
onClick={async () => {
const { note: codeNote } = await note_create.createNote(note.noteId, {
type: "code",
mime: "text/jsx",
content: PREACT_SAMPLE,
activate: false
});
if (!codeNote) return;
await attributes.setRelation(note.noteId, "renderNote", codeNote.noteId);
toast.showMessage(t("render.setup_sample_created"));
}}
/>
</SetupForm>
);
}