From 197b769838cd014249370082bc04258efa4ea915 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 15 Feb 2026 16:46:19 +0200
Subject: [PATCH] feat(client/render_note): create sample note with HTML

---
 .../src/translations/en/translation.json      |  3 +-
 .../src/widgets/type_widgets/Render.tsx       | 51 ++++++++++++-------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ac5f3256ed..b90f79da4b 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -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": {
diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx
index 7dc524e216..88fc75cd75 100644
--- a/apps/client/src/widgets/type_widgets/Render.tsx
+++ b/apps/client/src/widgets/type_widgets/Render.tsx
@@ -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"));
+}