✨(frontend) add comments feature

Implemented the comments feature for the document
editor.
We are now able to add, view, and manage comments
within the document editor interface.

Author: AntoLC

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

@@ -0,0 +1,119 @@
+import { chromium, expect, test } from '@playwright/test';
+
+import {
+  BROWSERS,
+  createDoc,
+  keyCloakSignIn,
+  verifyDocName,
+} from './utils-common';
+import { addNewMember } from './utils-share';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Comments', () => {
+  test('it checks comments with 2 users in real time', async ({
+    page,
+    browserName,
+  }) => {
+    const [docTitle] = await createDoc(page, 'comment-doc', browserName, 1);
+
+    // We share the doc with another user
+    const otherBrowserName = BROWSERS.find((b) => b !== browserName);
+    if (!otherBrowserName) {
+      throw new Error('No alternative browser found');
+    }
+    await page.getByRole('button', { name: 'Share' }).click();
+    await addNewMember(page, 1, 'Administrator', otherBrowserName);
+
+    await expect(
+      page
+        .getByRole('listbox', { name: 'Suggestions' })
+        .getByText(new RegExp(otherBrowserName)),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: 'close' }).click();
+
+    // We add a comment with the first user
+    const editor = page.locator('.ProseMirror');
+    await editor.locator('.bn-block-outer').last().fill('Hello World');
+    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 editor.getByText('Hello').click();
+
+    await expect(thread.getByText('This is a comment').first()).toBeVisible();
+    await expect(thread.getByText(`E2E ${browserName}`).first()).toBeVisible();
+
+    const urlCommentDoc = page.url();
+
+    /**
+     * We open another browser that will connect to the collaborative server
+     * and will block the current browser to edit the doc.
+     */
+    const otherBrowser = await chromium.launch({ headless: true });
+    const otherContext = await otherBrowser.newContext({
+      locale: 'en-US',
+      timezoneId: 'Europe/Paris',
+      permissions: [],
+      storageState: {
+        cookies: [],
+        origins: [],
+      },
+    });
+    const otherPage = await otherContext.newPage();
+    await otherPage.goto(urlCommentDoc);
+
+    await otherPage.getByRole('button', { name: 'Login' }).click({
+      timeout: 15000,
+    });
+
+    await keyCloakSignIn(otherPage, otherBrowserName, false);
+
+    await verifyDocName(otherPage, docTitle);
+
+    const otherEditor = otherPage.locator('.ProseMirror');
+    await otherEditor.getByText('Hello').click();
+    const otherThread = otherPage.locator('.bn-thread');
+
+    // We check that the comment made by the first user is visible for the second user
+    await expect(
+      otherThread.getByText('This is a comment').first(),
+    ).toBeVisible();
+    await expect(
+      otherThread.getByText(`E2E ${browserName}`).first(),
+    ).toBeVisible();
+
+    // We add a comment with the second user
+    await otherThread
+      .getByRole('paragraph')
+      .last()
+      .fill('This is a comment from the other user');
+    await otherThread.locator('[data-test="save"]').click();
+
+    // We check that the second user can see his comment he just made
+    await expect(
+      otherThread.getByText('This is a comment from the other user').first(),
+    ).toBeVisible();
+    await expect(
+      otherThread.getByText(`E2E ${otherBrowserName}`).first(),
+    ).toBeVisible();
+
+    // We check that the first user can see the comment made by the second user in real time
+    await expect(
+      thread.getByText('This is a comment from the other user').first(),
+    ).toBeVisible();
+    await expect(
+      thread.getByText(`E2E ${otherBrowserName}`).first(),
+    ).toBeVisible();
+  });
+
+  test('it checks the comments interactions', async ({
+    page,
+    browserName,
+  }) => {});
+});

src/frontend/apps/impress/src/features/auth/api/types.ts

@@ -13,3 +13,5 @@ export interface User {
   short_name: string;
   language?: string;
 }
+
+export type UserLight = Pick<User, 'full_name' | 'short_name'>;

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

@@ -13,6 +13,7 @@ import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
@@ -33,6 +34,7 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
+import { cssComments, useComments } from './comments/';
 import {
   AccessibleImageBlock,
   CalloutBlock,
@@ -79,6 +81,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
   const isConnectedToCollabServer = provider.isSynced;
   const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
+  const canSeeComment = doc.abilities.comment;
 
   useSaveDoc(doc.id, provider.document, !readOnly, isConnectedToCollabServer);
   const { i18n } = useTranslation();
@@ -91,6 +94,8 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     : user?.full_name || user?.email || t('Anonymous');
   const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
+  const threadStore = useComments(provider.document, doc, user);
+
   const editor: DocsBlockNoteEditor = useCreateBlockNote(
     {
       codeBlock,
@@ -143,11 +148,25 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         },
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
+      comments: { threadStore },
       dictionary: {
         ...locales[lang as keyof typeof locales],
         multi_column:
           multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
       },
+      resolveUsers: async (userIds) => {
+        return Promise.resolve(
+          userIds.map((encodedURIUserId) => {
+            const fullName = decodeURIComponent(encodedURIUserId);
+
+            return {
+              id: encodedURIUserId,
+              username: fullName,
+              avatarUrl: 'https://i.pravatar.cc/300',
+            };
+          }),
+        );
+      },
       tables: {
         splitCells: true,
         cellBackgroundColor: true,
@@ -157,7 +176,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       uploadFile,
       schema: blockNoteSchema,
     },
-    [collabName, lang, provider, uploadFile],
+    [collabName, lang, provider, uploadFile, threadStore],
   );
 
   useHeadings(editor);
@@ -176,7 +195,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     <Box
       $padding={{ top: 'md' }}
       $background="white"
-      $css={cssEditor(readOnly)}
+      $css={css`
+        ${cssEditor(readOnly)};
+        ${cssComments(canSeeComment)}
+      `}
       className="--docs--editor-container"
     >
       {errorAttachment && (
@@ -190,11 +212,13 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       )}
 
       <BlockNoteView
+        className="--docs--main-editor"
         editor={editor}
         formattingToolbar={false}
         slashMenu={false}
         editable={!readOnly}
         theme="light"
+        comments={canSeeComment}
       >
         <BlockNoteSuggestionMenu />
         <BlockNoteToolbar />
@@ -228,7 +252,12 @@ export const BlockNoteEditorVersion = ({
 
   return (
     <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
-      <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
+      <BlockNoteView
+        className="--docs--main-editor"
+        editor={editor}
+        editable={!readOnly}
+        theme="light"
+      />
     </Box>
   );
 };