From dce9f5091184e78552fed04908ed8ffb566f20ca Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Mar 2026 10:37:26 +0200
Subject: [PATCH] fix(mermaid): not recentering when using the sample switcher

---
 .../widgets/type_widgets/helpers/SvgSplitEditor.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
index ac0a44f9a7..d0043f9784 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -152,6 +152,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
     const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
     const lastNoteId = useRef<string>();
+    const wasEmpty = useRef<boolean>(false);
     const zoomRef = useRef<SvgPanZoom.Instance>();
     const width = useElementSize(containerRef);
 
@@ -159,9 +160,14 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
     useEffect(() => {
         if (zoomRef.current || width?.width === 0) return;
 
-        const shouldPreservePanZoom = (lastNoteId.current === noteId);
+        const shouldPreservePanZoom = (lastNoteId.current === noteId) && !wasEmpty.current;
         const svgEl = containerRef.current?.querySelector("svg");
-        if (!svgEl) return;
+        if (!svgEl) {
+            if (svg?.trim().length === 0) {
+                wasEmpty.current = true;
+            }
+            return;
+        };
 
         const zoomInstance = svgPanZoom(svgEl, {
             zoomEnabled: true,
@@ -187,7 +193,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
             zoomRef.current = undefined;
             zoomInstance.destroy();
         };
-    }, [ svg, width ]);
+    }, [ containerRef, noteId, svg, width ]);
 
     // React to container changes.
     useEffect(() => {