🐛(app-impress) refresh when multiple Blocknote

When multiple blocknote were created, the editor
didn't display the content of the selected blocknote
but the content of the last blocknote with a new
provider.
We were actually storing the editor, so if the
editor is stored already, we serve it instead of
creating a new one.

src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts

@@ -134,4 +134,39 @@ test.describe('Pad Editor', () => {
     expect(pdfText).toContain('My template !');
     expect(pdfText).toContain('And my pad !');
   });
+
+  test('it renders correctly when we switch from one pad to another', async ({
+    page,
+    browserName,
+  }) => {
+    const [firstPad, secondPad] = await createPad(
+      page,
+      'pad-multiple',
+      browserName,
+      2,
+    );
+
+    const panel = page.getByLabel('Pads panel').first();
+
+    // Check the first pad
+    await panel.getByText(firstPad).click();
+    await expect(page.locator('h2').getByText(firstPad)).toBeVisible();
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World Pad 1');
+    await expect(page.getByText('Hello World Pad 1')).toBeVisible();
+
+    // Check the second pad
+    await panel.getByText(secondPad).click();
+    await expect(page.locator('h2').getByText(secondPad)).toBeVisible();
+    await expect(page.getByText('Hello World Pad 1')).toBeHidden();
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World Pad 2');
+    await expect(page.getByText('Hello World Pad 2')).toBeVisible();
+
+    // Check the first pad again
+    await panel.getByText(firstPad).click();
+    await expect(page.locator('h2').getByText(firstPad)).toBeVisible();
+    await expect(page.getByText('Hello World Pad 2')).toBeHidden();
+    await expect(page.getByText('Hello World Pad 1')).toBeVisible();
+  });
 });

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx

@@ -1,7 +1,8 @@
-import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
+import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import { BlockNoteView } from '@blocknote/react';
 import '@blocknote/react/style.css';
 import { Alert, VariantType } from '@openfun/cunningham-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { WebrtcProvider } from 'y-webrtc';
 
 import { Box } from '@/components';
@@ -19,19 +20,10 @@ interface BlockNoteEditorProps {
 
 export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
   const { createProvider, padsStore } = usePadStore();
-  const [provider, setProvider] = useState<WebrtcProvider>(
-    padsStore?.[pad.id]?.provider,
-  );
-
-  useEffect(() => {
-    if (provider) {
-      return;
-    }
-
-    setProvider(createProvider(pad.id));
-  }, [createProvider, pad.id, provider]);
+  const provider = padsStore?.[pad.id]?.provider;
 
   if (!provider) {
+    createProvider(pad.id);
     return null;
   }
 
@@ -45,18 +37,25 @@ interface BlockNoteContentProps {
 
 export const BlockNoteContent = ({ pad, provider }: BlockNoteContentProps) => {
   const { userData } = useAuthStore();
-  const { setEditor } = usePadStore();
+  const { setEditor, padsStore } = usePadStore();
 
-  const editor = useCreateBlockNote({
-    collaboration: {
-      provider,
-      fragment: provider.doc.getXmlFragment('document-store'),
-      user: {
-        name: userData?.name || userData?.email || 'Anonymous',
-        color: randomColor(),
+  const storedEditor = padsStore?.[pad.id]?.editor;
+  const editor = useMemo(() => {
+    if (storedEditor) {
+      return storedEditor;
+    }
+
+    return BlockNoteEditorCore.create({
+      collaboration: {
+        provider,
+        fragment: provider.doc.getXmlFragment('document-store'),
+        user: {
+          name: userData?.name || userData?.email || 'Anonymous',
+          color: randomColor(),
+        },
       },
-    },
-  });
+    });
+  }, [provider, storedEditor, userData?.email, userData?.name]);
 
   editor.isEditable = pad.abilities.partial_update;