From dba762759e0258ddb917cc26336939c69273cec2 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 7 Apr 2026 16:39:03 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20Fixed=20side=20effects?= =?UTF-8?q?=20between=20comments=20and=20versionning?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 4 +++ .../__tests__/app-impress/doc-version.spec.ts | 35 ++++++++++++++++--- .../doc-editor/components/BlockNoteEditor.tsx | 11 +++++- .../components/comments/useComments.ts | 14 ++++++++ .../docs/doc-editor/stores/useEditorStore.tsx | 7 ++++ .../components/DocVersionEditor.tsx | 6 +++- .../components/ModalConfirmationVersion.tsx | 4 +++ 7 files changed, 74 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fdf5c5715..16cc9c7bc 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts index fe754a3e6..c1aec64ee 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts +++ b/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'); }); }); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 95744e963..f4b19a99d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/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); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts index 33a67a04d..6dbd3cbfb 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts +++ b/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(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx index 9a846b37c..c85e44710 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx +++ b/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((set) => ({ editor: undefined, + threadStore: undefined, setEditor: (editor) => { set({ editor }); }, + setThreadStore: (threadStore) => { + set({ threadStore }); + }, })); diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx index e04102a57..f903e70ec 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx @@ -86,7 +86,11 @@ export const DocVersionEditor = ({ } docEditor={ - + } isDeletedDoc={false} readOnly={true} diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx index 3dc8c52a7..c48f6eaf6 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx +++ b/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(); }, });