From af15e77713afe72465c8e827abbaafcc11dfad5e Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 10 Dec 2025 11:48:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20keep=20editor=20mounte?=
 =?UTF-8?q?d=20when=20resize=20window?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When resizing the window and crossing the desktop
breakpoint, the editor was unmounted. It could
lead to loss of data if there were unsaved changes,
and tiptap crash if the toolbar was used while the
editor was unmounted.
It was caused by the ResizableLeftPanel component
which was rerendering the editor.
We now keep the editor mounted when resizing
the window, by keeping the ResizableLeftPanel
component rendered but setting its size to 0
and disabling the resize handle.
---
 CHANGELOG.md                                  |  1 +
 .../__tests__/app-impress/doc-editor.spec.ts  | 40 ++++++++++
 .../components/LeftPanelHeaderButton.tsx      |  4 +-
 .../components/ResizableLeftPanel.tsx         | 69 ++++++++++-------
 .../left-panel/stores/useLeftPanelStore.tsx   |  4 +
 .../apps/impress/src/layouts/MainLayout.tsx   | 76 ++++++++++---------
 6 files changed, 129 insertions(+), 65 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ef90231..72a71aa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(nginx) fix / location to handle new static pages
+- 🐛(frontend) rerendering during resize window #1715
 
 ## [4.0.0] - 2025-12-01
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
index 9ff17d65..cc981f73 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
@@ -996,4 +996,44 @@ test.describe('Doc Editor', () => {
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe('test-pdf.pdf');
   });
+
+  test('it preserves text when switching between mobile and desktop views', async ({
+    page,
+    browserName,
+  }) => {
+    const [docTitle] = await createDoc(
+      page,
+      'doc-viewport-test',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, docTitle);
+
+    const editor = await writeInEditor({
+      page,
+      text: 'Hello World - Desktop Text',
+    });
+    await expect(editor.getByText('Hello World - Desktop Text')).toBeVisible();
+
+    await page.waitForTimeout(500);
+
+    // Switch to mobile viewport
+    await page.setViewportSize({ width: 500, height: 1200 });
+    await page.waitForTimeout(500);
+
+    await expect(editor.getByText('Hello World - Desktop Text')).toBeVisible();
+
+    await writeInEditor({
+      page,
+      text: 'Mobile Text',
+    });
+
+    await page.waitForTimeout(500);
+
+    // Switch back to desktop viewport
+    await page.setViewportSize({ width: 1280, height: 720 });
+    await page.waitForTimeout(500);
+
+    await expect(editor.getByText('Mobile Text')).toBeVisible();
+  });
 });
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
index bcb7dbfa..92bd97b6 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
@@ -12,7 +12,7 @@ import { useLeftPanelStore } from '../stores';
 export const LeftPanelHeaderButton = () => {
   const router = useRouter();
   const { t } = useTranslation();
-  const { togglePanel } = useLeftPanelStore();
+  const { closePanel } = useLeftPanelStore();
   const { setIsSkeletonVisible } = useSkeletonStore();
   const [isNavigating, setIsNavigating] = useState(false);
 
@@ -25,7 +25,7 @@ export const LeftPanelHeaderButton = () => {
         .then(() => {
           // The skeleton will be disabled by the [id] page once the data is loaded
           setIsNavigating(false);
-          togglePanel();
+          closePanel();
         })
         .catch(() => {
           // In case of navigation error, disable the skeleton
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
index 3691504d..19925c20 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
@@ -6,6 +6,8 @@ import {
   PanelResizeHandle,
 } from 'react-resizable-panels';
 
+import { useResponsiveStore } from '@/stores';
+
 // Convert a target pixel width to a percentage of the current viewport width.
 const pxToPercent = (px: number) => {
   return (px / window.innerWidth) * 100;
@@ -24,18 +26,27 @@ export const ResizableLeftPanel = ({
   minPanelSizePx = 300,
   maxPanelSizePx = 450,
 }: ResizableLeftPanelProps) => {
+  const { isDesktop } = useResponsiveStore();
   const ref = useRef<ImperativePanelHandle>(null);
   const savedWidthPxRef = useRef<number>(minPanelSizePx);
 
-  const [panelSizePercent, setPanelSizePercent] = useState(() =>
-    pxToPercent(minPanelSizePx),
-  );
-
   const minPanelSizePercent = pxToPercent(minPanelSizePx);
   const maxPanelSizePercent = Math.min(pxToPercent(maxPanelSizePx), 40);
 
+  const [panelSizePercent, setPanelSizePercent] = useState(() => {
+    const initialSize = pxToPercent(minPanelSizePx);
+    return Math.max(
+      minPanelSizePercent,
+      Math.min(initialSize, maxPanelSizePercent),
+    );
+  });
+
   // Keep pixel width constant on window resize
   useEffect(() => {
+    if (!isDesktop) {
+      return;
+    }
+
     const handleResize = () => {
       const newPercent = pxToPercent(savedWidthPxRef.current);
       setPanelSizePercent(newPercent);
@@ -48,7 +59,7 @@ export const ResizableLeftPanel = ({
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [isDesktop]);
 
   const handleResize = (sizePercent: number) => {
     const widthPx = (sizePercent / 100) * window.innerWidth;
@@ -57,29 +68,29 @@ export const ResizableLeftPanel = ({
   };
 
   return (
-    <>
-      <PanelGroup direction="horizontal">
-        <Panel
-          ref={ref}
-          order={0}
-          defaultSize={panelSizePercent}
-          minSize={minPanelSizePercent}
-          maxSize={maxPanelSizePercent}
-          onResize={handleResize}
-        >
-          {leftPanel}
-        </Panel>
-        <PanelResizeHandle
-          style={{
-            borderRightWidth: '1px',
-            borderRightStyle: 'solid',
-            borderRightColor: 'var(--c--contextuals--border--surface--primary)',
-            width: '1px',
-            cursor: 'col-resize',
-          }}
-        />
-        <Panel order={1}>{children}</Panel>
-      </PanelGroup>
-    </>
+    <PanelGroup direction="horizontal">
+      <Panel
+        ref={ref}
+        order={0}
+        defaultSize={isDesktop ? panelSizePercent : 0}
+        minSize={isDesktop ? minPanelSizePercent : 0}
+        maxSize={isDesktop ? maxPanelSizePercent : 0}
+        onResize={handleResize}
+      >
+        {leftPanel}
+      </Panel>
+      <PanelResizeHandle
+        style={{
+          borderRightWidth: '1px',
+          borderRightStyle: 'solid',
+          borderRightColor: 'var(--c--contextuals--border--surface--primary)',
+          width: '1px',
+          cursor: 'col-resize',
+        }}
+        disabled={!isDesktop}
+      />
+
+      <Panel order={1}>{children}</Panel>
+    </PanelGroup>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx b/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
index 9c087d25..83f1ab09 100644
--- a/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
@@ -3,6 +3,7 @@ import { create } from 'zustand';
 interface LeftPanelState {
   isPanelOpen: boolean;
   togglePanel: (value?: boolean) => void;
+  closePanel: () => void;
 }
 
 export const useLeftPanelStore = create<LeftPanelState>((set, get) => ({
@@ -15,4 +16,7 @@ export const useLeftPanelStore = create<LeftPanelState>((set, get) => ({
 
     set({ isPanelOpen: sanitizedValue });
   },
+  closePanel: () => {
+    set({ isPanelOpen: false });
+  },
 }));
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 024b7d08..39abde49 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -53,11 +53,51 @@ export function MainLayoutContent({
   enableResizablePanel = false,
 }: PropsWithChildren<MainLayoutContentProps>) {
   const { isDesktop } = useResponsiveStore();
+
+  if (enableResizablePanel) {
+    return (
+      <ResizableLeftPanel leftPanel={<LeftPanel />}>
+        <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
+      </ResizableLeftPanel>
+    );
+  }
+
+  if (!isDesktop) {
+    return (
+      <>
+        <LeftPanel />
+        <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $css={css`
+          width: 300px;
+          border-right: 1px solid
+            var(--c--contextuals--border--surface--primary);
+        `}
+      >
+        <LeftPanel />
+      </Box>
+      <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
+    </>
+  );
+}
+
+const MainContent = ({
+  children,
+  backgroundColor,
+}: PropsWithChildren<MainLayoutContentProps>) => {
+  const { isDesktop } = useResponsiveStore();
+
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
-  const mainContent = (
+  return (
     <Box
       as="main"
       role="main"
@@ -92,36 +132,4 @@ export function MainLayoutContent({
       {children}
     </Box>
   );
-
-  if (!isDesktop) {
-    return (
-      <>
-        <LeftPanel />
-        {mainContent}
-      </>
-    );
-  }
-
-  if (enableResizablePanel) {
-    return (
-      <ResizableLeftPanel leftPanel={<LeftPanel />}>
-        {mainContent}
-      </ResizableLeftPanel>
-    );
-  }
-
-  return (
-    <>
-      <Box
-        $css={css`
-          width: 300px;
-          border-right: 1px solid
-            var(--c--contextuals--border--surface--primary);
-        `}
-      >
-        <LeftPanel />
-      </Box>
-      {mainContent}
-    </>
-  );
-}
+};