🐛(frontend) fix rerendering when doc is saving

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.

Author: AntoLC

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} />;
 };

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(() => {