From 6a0d2e21b537bbce680a62c7d9038a0fda670ad5 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 17 Dec 2024 09:10:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20rerendering=20wh?=
 =?UTF-8?q?en=20doc=20is=20saving?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the document is saved, the blocknote toolbar
was rerendering, causing the toolbar to close
some panels.
It was creating flakiness in the e2e tests, plus
it was not a good user experience.
This commit fixes this issue.
---
 .../components/BlockNoteToolbar.tsx           | 28 ++++++++++---------
 .../impress/src/pages/docs/[id]/index.tsx     |  4 ---
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
index 0f1e2086..b9c66473 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
@@ -2,27 +2,29 @@ import '@blocknote/mantine/style.css';
 import {
   FormattingToolbar,
   FormattingToolbarController,
+  FormattingToolbarProps,
   getFormattingToolbarItems,
 } from '@blocknote/react';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { AIGroupButton } from './AIButton';
 import { MarkdownButton } from './MarkdownButton';
 
 export const BlockNoteToolbar = () => {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={({ blockTypeSelectItems }) => (
-        <FormattingToolbar>
-          {getFormattingToolbarItems(blockTypeSelectItems)}
+  const formattingToolbar = useCallback(
+    ({ blockTypeSelectItems }: FormattingToolbarProps) => (
+      <FormattingToolbar>
+        {getFormattingToolbarItems(blockTypeSelectItems)}
 
-          {/* Extra button to do some AI powered actions */}
-          <AIGroupButton key="AIButton" />
+        {/* Extra button to do some AI powered actions */}
+        <AIGroupButton key="AIButton" />
 
-          {/* Extra button to convert from markdown to json */}
-          <MarkdownButton key="customButton" />
-        </FormattingToolbar>
-      )}
-    />
+        {/* Extra button to convert from markdown to json */}
+        <MarkdownButton key="customButton" />
+      </FormattingToolbar>
+    ),
+    [],
   );
+
+  return <FormattingToolbarController formattingToolbar={formattingToolbar} />;
 };
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index 92410f8e..a51c2bca 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -65,10 +65,6 @@ const DocPage = ({ id }: DocProps) => {
 
     setDoc(docQuery);
     setCurrentDoc(docQuery);
-
-    return () => {
-      setCurrentDoc(undefined);
-    };
   }, [docQuery, setCurrentDoc]);
 
   useEffect(() => {