From 5f1486cf6a902921ae478de0d51c895f18a26cae Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Mar 2026 10:31:28 +0200
Subject: [PATCH] feat(mermaid): use custom placeholder

---
 apps/client/src/translations/en/translation.json             | 1 +
 apps/client/src/widgets/layout/NoteContentSwitcher.tsx       | 2 +-
 apps/client/src/widgets/type_widgets/code/Code.tsx           | 5 +++--
 .../src/widgets/type_widgets/helpers/SvgSplitEditor.tsx      | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 7a91c831af..4b1baa0d53 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2204,6 +2204,7 @@
     "more_info": "Learn more"
   },
   "mermaid": {
+    "placeholder": "Type the content of your Mermaid diagram or use one of the sample diagrams below.",
     "sample_diagrams": "Sample diagrams:",
     "sample_flowchart": "Flowchart",
     "sample_class": "Class",
diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
index c018d84ac9..a47ff308b6 100644
--- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
@@ -19,7 +19,7 @@ interface NoteContentSwitcherProps {
 export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
     const blob = useNoteSavedData(note?.noteId);
 
-    return (blob?.length === 0 &&
+    return (blob?.trim().length === 0 &&
         <div className="note-content-switcher">
             {text}{" "}
 
diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx
index 3c12a8036b..f59d6eff3c 100644
--- a/apps/client/src/widgets/type_widgets/code/Code.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -30,6 +30,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
     onContentChanged?: (content: string) => void;
     /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
     dataSaved?: () => void;
+    placeholder?: string;
 }
 
 export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
@@ -74,7 +75,7 @@ function formatViewSource(note: FNote, content: string) {
     return content;
 }
 
-export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, placeholder, ...editorProps }: EditableCodeProps) {
     const editorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useRef<HTMLPreElement>(null);
     const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
@@ -115,7 +116,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
                 editorRef={editorRef} containerRef={containerRef}
                 mime={mime ?? "text/plain"}
                 className="note-detail-code-editor"
-                placeholder={t("editable_code.placeholder")}
+                placeholder={placeholder ?? t("editable_code.placeholder")}
                 vimKeybindings={vimKeymapEnabled}
                 tabIndex={300}
                 onContentChanged={() => {
diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
index a587eba63a..ac0a44f9a7 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -117,6 +117,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             error={error}
             onContentChanged={onContentChanged}
             dataSaved={onSave}
+            placeholder={t("mermaid.placeholder")}
             previewContent={(
                 <RawHtmlBlock
                     className="render-container"