From bbafce64e704d72fca3fe71c11037513a4b366bd Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 19 Apr 2024 09:25:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(app-impress)=20refresh=20when=20mu?=
 =?UTF-8?q?ltiple=20Blocknote?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../__tests__/app-impress/pad-editor.spec.ts  | 35 +++++++++++++++
 .../pads/pad/components/BlockNoteEditor.tsx   | 45 +++++++++----------
 2 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
index 39aef31b..865dddd2 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
+++ b/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();
+  });
 });
diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
index 4ee4a5d1..973afa97 100644
--- a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
+++ b/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;