🐛(frontend) Fixed side effects between comments and versionning

We fixed 2 side effects between comments and versionning:
- When going from a version, it was not possible
to add a comment anymore. This was due to the fact
that the versionning was resetting the comment store.
- When restoring a version, we now reset the comment
store to avoid having comments that are not relevant
anymore.

CHANGELOG.md

@@ -15,6 +15,10 @@ and this project adheres to
 
 - 🐛(frontend) Fix drop cursor creating columns #2185
 
+### Fixed
+
+- 🐛 Fixed side effects between comments and versioning #2183
+
 ## [v4.8.5] - 2026-04-03
 
 ### Added

src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts

@@ -133,14 +133,20 @@ test.describe('Doc Version', () => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
     await verifyDocName(page, randomDoc);
 
-    await page.locator('.bn-block-outer').last().click();
-    await page.locator('.bn-block-outer').last().fill('Hello');
+    const editor = await writeInEditor({ page, text: 'Hello' });
+
+    // Add a comment
+    await editor.getByText('Hello').selectText();
+    await page.getByRole('button', { name: 'Add comment' }).click();
+
+    const thread = page.locator('.bn-thread');
+    await thread.getByRole('paragraph').first().fill('This is a comment');
+    await thread.locator('[data-test="save"]').click();
 
     await goToGridDoc(page, {
       title: randomDoc,
     });
 
-    const editor = page.locator('.ProseMirror');
     await expect(editor.getByText('Hello')).toBeVisible();
     await page.locator('.bn-block-outer').last().click();
     await page.keyboard.press('Enter');
@@ -152,6 +158,11 @@ test.describe('Doc Version', () => {
 
     await expect(page.getByText('World')).toBeVisible();
 
+    await editor.getByText('Hello').click();
+    await thread.getByText('This is a comment').first().hover();
+    await thread.locator('[data-test="resolve"]').click();
+    await expect(thread).toBeHidden();
+
     await page.getByLabel('Open the document options').click();
     await page.getByRole('menuitem', { name: 'Version history' }).click();
 
@@ -175,7 +186,21 @@ test.describe('Doc Version', () => {
 
     await page.waitForTimeout(500);
 
-    await expect(page.getByText('Hello')).toBeVisible();
-    await expect(page.getByText('World')).toBeHidden();
+    await expect(editor.getByText('Hello')).toBeVisible();
+    await expect(editor.getByText('World')).toBeHidden();
+
+    // The old comment is not restored
+    await expect(editor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(0, 0, 0, 0)',
+    );
+
+    // We can add a new comment
+    await editor.getByText('Hello').selectText();
+    await page.getByRole('button', { name: 'Add comment' }).click();
+
+    await thread.getByRole('paragraph').first().fill('This is a comment');
+    await thread.locator('[data-test="save"]').click();
+    await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
   });
 });

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -303,11 +303,13 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
 interface BlockNoteReaderProps {
   docId: Doc['id'];
   initialContent: Y.XmlFragment;
+  isMainEditor?: boolean;
 }
 
 export const BlockNoteReader = ({
   docId,
   initialContent,
+  isMainEditor = true,
 }: BlockNoteReaderProps) => {
   const { user } = useAuth();
   const { setEditor } = useEditorStore();
@@ -336,12 +338,19 @@ export const BlockNoteReader = ({
   );
 
   useEffect(() => {
+    if (!isMainEditor) {
+      return;
+    }
+
     setEditor(editor);
 
     return () => {
+      if (!isMainEditor) {
+        return;
+      }
       setEditor(undefined);
     };
-  }, [setEditor, editor]);
+  }, [setEditor, editor, isMainEditor]);
 
   useHeadings(editor);
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useCunninghamTheme } from '@/cunningham';
 import { User, avatarUrlFromName } from '@/features/auth';
+import { useEditorStore } from '@/features/docs/doc-editor/stores';
 import { Doc, useProviderStore } from '@/features/docs/doc-management';
 
 import { DocsThreadStore } from './DocsThreadStore';
@@ -16,6 +17,7 @@ export function useComments(
   const { provider } = useProviderStore();
   const { t } = useTranslation();
   const { themeTokens } = useCunninghamTheme();
+  const { setThreadStore } = useEditorStore();
 
   const threadStore = useMemo(() => {
     return new DocsThreadStore(
@@ -28,6 +30,18 @@ export function useComments(
     );
   }, [docId, canComment, provider?.awareness, user?.full_name]);
 
+  useEffect(() => {
+    if (canComment) {
+      setThreadStore(threadStore);
+    }
+
+    return () => {
+      if (canComment) {
+        setThreadStore(undefined);
+      }
+    };
+  }, [threadStore, setThreadStore, canComment]);
+
   useEffect(() => {
     return () => {
       threadStore?.destroy();

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx

@@ -1,15 +1,22 @@
 import { create } from 'zustand';
 
+import type { DocsThreadStore } from '../components/comments/DocsThreadStore';
 import { DocsBlockNoteEditor } from '../types';
 
 export interface UseEditorstore {
   editor?: DocsBlockNoteEditor;
+  threadStore?: DocsThreadStore;
   setEditor: (editor: DocsBlockNoteEditor | undefined) => void;
+  setThreadStore: (threadStore: DocsThreadStore | undefined) => void;
 }
 
 export const useEditorStore = create<UseEditorstore>((set) => ({
   editor: undefined,
+  threadStore: undefined,
   setEditor: (editor) => {
     set({ editor });
   },
+  setThreadStore: (threadStore) => {
+    set({ threadStore });
+  },
 }));

src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx

@@ -86,7 +86,11 @@ export const DocVersionEditor = ({
     <DocEditorContainer
       docHeader={<DocVersionHeader />}
       docEditor={
-        <BlockNoteReader initialContent={initialContent} docId={version.id} />
+        <BlockNoteReader
+          initialContent={initialContent}
+          docId={version.id}
+          isMainEditor={false}
+        />
       }
       isDeletedDoc={false}
       readOnly={true}

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';
 
 import { Box, Text } from '@/components';
+import { useEditorStore } from '@/docs/doc-editor/stores';
 import {
   Doc,
   base64ToYDoc,
@@ -47,6 +48,7 @@ export const ModalConfirmationVersion = ({
   const { t } = useTranslation();
   const { toast } = useToastProvider();
   const { provider } = useProviderStore();
+  const { threadStore } = useEditorStore();
   const { mutate: updateDoc } = useUpdateDoc({
     listInvalidQueries: [KEY_LIST_DOC_VERSIONS],
     onSuccess: () => {
@@ -66,6 +68,8 @@ export const ModalConfirmationVersion = ({
         base64ToYDoc(version.content),
       );
 
+      threadStore?.refreshThreads();
+
       onDisplaySuccess();
     },
   });