Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-17 11:56:57 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Elian Doran
2026-02-15 16:46:19 +02:00
parent 1ba498c0e3
commit 197b769838
2 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/translations/en/translation.json
View File

@@ -1068,7 +1068,8 @@
},
"render": {
"setup_title": "Display custom HTML or Preact JSX inside this note",
"setup_create_sample": "Create sample note with Preact",
"setup_create_sample_preact": "Create sample note with Preact",
"setup_create_sample_html": "Create sample note with HTML",
"setup_sample_created": "A sample note was created as a child note."
},
"web_view_setup": {

51
apps/client/src/widgets/type_widgets/Render.tsx
View File

@@ -2,13 +2,15 @@ import "./Render.css";
import { useEffect, useRef } from "preact/hooks";
import FNote from "../../entities/fnote";
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 { SplitButton } from "../react/Button";
import FormGroup from "../react/FormGroup";
import { FormListItem } from "../react/FormList";
import { useNoteRelation, useTriliumEvent } from "../react/hooks";
import NoteAutocomplete from "../react/NoteAutocomplete";
import { refToJQuerySelector } from "../react/react_utils";
@@ -21,6 +23,10 @@ export default function() {
}
`;
const HTML_SAMPLE = /*html*/`\
<p>Hello world.</p>
`;
export default function Render(props: TypeWidgetProps) {
const { note } = props;
const [ renderNote ] = useNoteRelation(note, "renderNote");
@@ -79,25 +85,36 @@ function SetupRenderContent({ note }: TypeWidgetProps) {
<FormGroup name="render-target-note" label={t("render.setup_title")}>
<NoteAutocomplete noteIdChanged={noteId => {
if (!noteId) return;
attributes.setRelation(note.noteId, "renderNote", noteId);
setRenderNote(note, 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"));
}}
/>
<SplitButton
text={t("render.setup_create_sample_preact")}
icon="bx bxl-react"
onClick={() => setupSampleNote(note, "text/jsx", PREACT_SAMPLE)}
>
<FormListItem
icon="bx bxl-html5"
onClick={() => setupSampleNote(note, "text/html", HTML_SAMPLE)}
>{t("render.setup_create_sample_html")}</FormListItem>
</SplitButton>
</SetupForm>
);
}
async function setRenderNote(note: FNote, targetNoteUrl: string) {
await attributes.setRelation(note.noteId, "renderNote", targetNoteUrl);
}
async function setupSampleNote(parentNote: FNote, mime: string, content: string) {
const { note: codeNote } = await note_create.createNote(parentNote.noteId, {
type: "code",
mime,
content,
activate: false
});
if (!codeNote) return;
await setRenderNote(parentNote, codeNote.noteId);
toast.showMessage(t("render.setup_sample_created"));
}