From ce71068f6d3e2cb73afb74542792e89268eea4c6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Mar 2026 09:18:38 +0200
Subject: [PATCH] chore(mermaid): add a bottom section for switching between
 samples

---
 .../src/widgets/layout/NoteContentSwitcher.tsx       |  9 +++++++++
 apps/client/src/widgets/type_widgets/Mermaid.tsx     |  9 ++++++++-
 .../src/widgets/type_widgets/helpers/SplitEditor.tsx | 12 ++++++++----
 3 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 apps/client/src/widgets/layout/NoteContentSwitcher.tsx

diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
new file mode 100644
index 0000000000..0470bac361
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
@@ -0,0 +1,9 @@
+import { ComponentChildren } from "preact";
+
+interface NoteContentSwitcherProps {
+    children: ComponentChildren;
+}
+
+export default function NoteContentSwitcher({ children }: NoteContentSwitcherProps) {
+    return <p>{children}</p>;
+}
diff --git a/apps/client/src/widgets/type_widgets/Mermaid.tsx b/apps/client/src/widgets/type_widgets/Mermaid.tsx
index 9403c4cf61..3d47d25fac 100644
--- a/apps/client/src/widgets/type_widgets/Mermaid.tsx
+++ b/apps/client/src/widgets/type_widgets/Mermaid.tsx
@@ -1,7 +1,9 @@
 import { useCallback } from "preact/hooks";
+
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
+import NoteContentSwitcher from "../layout/NoteContentSwitcher";
 import SvgSplitEditor from "./helpers/SvgSplitEditor";
 import { TypeWidgetProps } from "./type_widget";
-import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
 
 let idCounter = 1;
 let registeredErrorReporter = false;
@@ -30,6 +32,11 @@ export default function Mermaid(props: TypeWidgetProps) {
             attachmentName="mermaid-export"
             renderSvg={renderSvg}
             noteType="mermaid"
+            extraContent={(
+                <NoteContentSwitcher>
+                    Foo
+                </NoteContentSwitcher>
+            )}
             {...props}
         />
     );
diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
index 237556b5e7..bf6d331ea5 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -19,6 +19,7 @@ export interface SplitEditorProps extends EditableCodeProps {
     previewButtons?: ComponentChildren;
     editorBefore?: ComponentChildren;
     forceOrientation?: "horizontal" | "vertical";
+    extraContent?: ComponentChildren;
 }
 
 /**
@@ -41,7 +42,7 @@ export default function SplitEditor(props: SplitEditorProps) {
 
 }
 
-function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
+function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, extraContent, ...editorProps }: SplitEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const splitEditorOrientation = useSplitOrientation(forceOrientation);
 
@@ -57,9 +58,12 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut
                     {...editorProps}
                 />
             </div>
-            {error && <Admonition type="caution" className="note-detail-error-container">
-                {error}
-            </Admonition>}
+            {error && (
+                <Admonition type="caution" className="note-detail-error-container">
+                    {error}
+                </Admonition>
+            )}
+            {extraContent}
         </div>
     );