Skip to content

Commit 744e4e7

Browse files
AntoLCAntoLC
committed
✨(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.
1 parent cb0be59 commit 744e4e7

File tree

14 files changed

+1053
-22
lines changed

14 files changed

+1053
-22
lines changed

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

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
import { createDoc, getOtherBrowserName } from './utils-common';
4+
import { writeInEditor } from './utils-editor';
5+
import { addNewMember, connectOtherUserToDoc } from './utils-share';
6+
7+
test.beforeEach(async ({ page }) => {
8+
await page.goto('/');
9+
});
10+
11+
test.describe('Doc Comments', () => {
12+
test('it checks comments with 2 users in real time', async ({
13+
page,
14+
browserName,
15+
}) => {
16+
const [docTitle] = await createDoc(page, 'comment-doc', browserName, 1);
17+
18+
// We share the doc with another user
19+
const otherBrowserName = getOtherBrowserName(browserName);
20+
await page.getByRole('button', { name: 'Share' }).click();
21+
await addNewMember(page, 0, 'Administrator', otherBrowserName);
22+
23+
await expect(
24+
page
25+
.getByRole('listbox', { name: 'Suggestions' })
26+
.getByText(new RegExp(otherBrowserName)),
27+
).toBeVisible();
28+
29+
await page.getByRole('button', { name: 'close' }).click();
30+
31+
// We add a comment with the first user
32+
const editor = await writeInEditor({ page, text: 'Hello World' });
33+
await editor.getByText('Hello').selectText();
34+
await page.getByRole('button', { name: 'Add comment' }).click();
35+
36+
const thread = page.locator('.bn-thread');
37+
await thread.getByRole('paragraph').first().fill('This is a comment');
38+
await thread.locator('[data-test="save"]').click();
39+
await editor.getByText('Hello').click();
40+
41+
await thread.getByText('This is a comment').first().hover();
42+
43+
// We add a reaction with the first user
44+
await thread.locator('[data-test="addreaction"]').first().click();
45+
await thread.getByRole('button', { name: '👍' }).click();
46+
47+
await expect(thread.getByText('This is a comment').first()).toBeVisible();
48+
await expect(thread.getByText(`E2E ${browserName}`).first()).toBeVisible();
49+
await expect(thread.locator('.bn-comment-reaction')).toHaveText('👍1');
50+
51+
const urlCommentDoc = page.url();
52+
53+
const { otherPage, cleanup } = await connectOtherUserToDoc({
54+
otherBrowserName,
55+
docUrl: urlCommentDoc,
56+
docTitle,
57+
});
58+
59+
const otherEditor = otherPage.locator('.ProseMirror');
60+
await otherEditor.getByText('Hello').click();
61+
const otherThread = otherPage.locator('.bn-thread');
62+
63+
await otherThread.getByText('This is a comment').first().hover();
64+
await otherThread.locator('[data-test="addreaction"]').first().click();
65+
await otherThread.getByRole('button', { name: '👍' }).click();
66+
67+
// We check that the comment made by the first user is visible for the second user
68+
await expect(
69+
otherThread.getByText('This is a comment').first(),
70+
).toBeVisible();
71+
await expect(
72+
otherThread.getByText(`E2E ${browserName}`).first(),
73+
).toBeVisible();
74+
await expect(otherThread.locator('.bn-comment-reaction')).toHaveText('👍2');
75+
76+
// We add a comment with the second user
77+
await otherThread
78+
.getByRole('paragraph')
79+
.last()
80+
.fill('This is a comment from the other user');
81+
await otherThread.locator('[data-test="save"]').click();
82+
83+
// We check that the second user can see the comment he just made
84+
await expect(
85+
otherThread.getByText('This is a comment from the other user').first(),
86+
).toBeVisible();
87+
await expect(
88+
otherThread.getByText(`E2E ${otherBrowserName}`).first(),
89+
).toBeVisible();
90+
91+
// We check that the first user can see the comment made by the second user in real time
92+
await expect(
93+
thread.getByText('This is a comment from the other user').first(),
94+
).toBeVisible();
95+
await expect(
96+
thread.getByText(`E2E ${otherBrowserName}`).first(),
97+
).toBeVisible();
98+
99+
await cleanup();
100+
});
101+
102+
test('it checks the comments interactions', async ({ page, browserName }) => {
103+
await createDoc(page, 'comment-interaction', browserName, 1);
104+
105+
// Checks add react reaction
106+
const editor = page.locator('.ProseMirror');
107+
await editor.locator('.bn-block-outer').last().fill('Hello World');
108+
await editor.getByText('Hello').selectText();
109+
await page.getByRole('button', { name: 'Add comment' }).click();
110+
111+
const thread = page.locator('.bn-thread');
112+
await thread.getByRole('paragraph').first().fill('This is a comment');
113+
await thread.locator('[data-test="save"]').click();
114+
// Check background color changed
115+
await expect(editor.getByText('Hello')).toHaveCSS(
116+
'background-color',
117+
'rgb(244, 210, 97)',
118+
);
119+
await editor.getByText('Hello').click();
120+
121+
await thread.getByText('This is a comment').first().hover();
122+
123+
// We add a reaction with the first user
124+
await thread.locator('[data-test="addreaction"]').first().click();
125+
await thread.getByRole('button', { name: '👍' }).click();
126+
127+
await expect(thread.locator('.bn-comment-reaction')).toHaveText('👍1');
128+
129+
// Edit Comment
130+
await thread.getByText('This is a comment').first().hover();
131+
await thread.locator('[data-test="moreactions"]').first().click();
132+
await thread.getByRole('menuitem', { name: 'Edit comment' }).click();
133+
const commentEditor = thread.getByText('This is a comment').first();
134+
await commentEditor.fill('This is an edited comment');
135+
const saveBtn = thread.getByRole('button', { name: 'Save' });
136+
await saveBtn.click();
137+
await expect(saveBtn).toBeHidden();
138+
await expect(
139+
thread.getByText('This is an edited comment').first(),
140+
).toBeVisible();
141+
await expect(thread.getByText('This is a comment').first()).toBeHidden();
142+
143+
// Add second comment
144+
await thread.getByRole('paragraph').last().fill('This is a second comment');
145+
await thread.getByRole('button', { name: 'Save' }).click();
146+
await expect(
147+
thread.getByText('This is an edited comment').first(),
148+
).toBeVisible();
149+
await expect(
150+
thread.getByText('This is a second comment').first(),
151+
).toBeVisible();
152+
153+
// Delete second comment
154+
await thread.getByText('This is a second comment').first().hover();
155+
await thread.locator('[data-test="moreactions"]').first().click();
156+
await thread.getByRole('menuitem', { name: 'Delete comment' }).click();
157+
await expect(
158+
thread.getByText('This is a second comment').first(),
159+
).toBeHidden();
160+
161+
// Resolve thread
162+
await thread.getByText('This is an edited comment').first().hover();
163+
await thread.locator('[data-test="resolve"]').click();
164+
await expect(thread).toBeHidden();
165+
await expect(editor.getByText('Hello')).toHaveCSS(
166+
'background-color',
167+
'rgba(0, 0, 0, 0)',
168+
);
169+
});
170+
});

‎src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,11 +229,11 @@ test.describe('Document create member', () => {
229229
.last()
230230
.fill('Hello World');
231231

232-
const urlDoc = page.url();
232+
const docUrl = page.url();
233233

234234
// Other user will request access
235235
const { otherPage, otherBrowserName, cleanup } =
236-
await connectOtherUserToDoc(browserName, urlDoc);
236+
await connectOtherUserToDoc({ browserName, docUrl });
237237

238238
await expect(
239239
otherPage.getByText('Insufficient access rights to view the document.'),

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,12 +157,12 @@ test.describe('Doc Visibility: Restricted', () => {
157157
.last()
158158
.fill('Hello World');
159159

160-
const urlDoc = page.url();
160+
const docUrl = page.url();
161161

162-
const { otherBrowserName, otherPage } = await connectOtherUserToDoc(
162+
const { otherBrowserName, otherPage } = await connectOtherUserToDoc({
163163
browserName,
164-
urlDoc,
165-
);
164+
docUrl,
165+
});
166166

167167
await expect(
168168
otherPage.getByText('Insufficient access rights to view the document.'),

‎src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ export const keyCloakSignIn = async (
6969
await page.click('button[type="submit"]', { force: true });
7070
};
7171

72+
export const getOtherBrowserName = (browserName: BrowserName) => {
73+
const otherBrowserName = BROWSERS.find((b) => b !== browserName);
74+
if (!otherBrowserName) {
75+
throw new Error('No alternative browser found');
76+
}
77+
return otherBrowserName;
78+
};
79+
7280
export const randomName = (name: string, browserName: string, length: number) =>
7381
Array.from({ length }, (_el, index) => {
7482
return `${browserName}-${Math.floor(Math.random() * 10000)}-${index}-${name}`;

‎src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Page, chromium, expect } from '@playwright/test';
22

33
import {
4-
BROWSERS,
54
BrowserName,
5+
getOtherBrowserName,
66
keyCloakSignIn,
77
verifyDocName,
88
} from './utils-common';
@@ -88,15 +88,28 @@ export const updateRoleUser = async (
8888
* @param docTitle The title of the document (optional).
8989
* @returns An object containing the other browser, context, and page.
9090
*/
91-
export const connectOtherUserToDoc = async (
92-
browserName: BrowserName,
93-
docUrl: string,
94-
docTitle?: string,
95-
) => {
96-
const otherBrowserName = BROWSERS.find((b) => b !== browserName);
97-
if (!otherBrowserName) {
98-
throw new Error('No alternative browser found');
99-
}
91+
type ConnectOtherUserToDocParams = {
92+
docUrl: string;
93+
docTitle?: string;
94+
} & (
95+
| {
96+
otherBrowserName: BrowserName;
97+
browserName?: never;
98+
}
99+
| {
100+
browserName: BrowserName;
101+
otherBrowserName?: never;
102+
}
103+
);
104+
105+
export const connectOtherUserToDoc = async ({
106+
browserName,
107+
docUrl,
108+
docTitle,
109+
otherBrowserName: _otherBrowserName,
110+
}: ConnectOtherUserToDocParams) => {
111+
const otherBrowserName =
112+
_otherBrowserName || getOtherBrowserName(browserName);
100113

101114
const otherBrowser = await chromium.launch({ headless: true });
102115
const otherContext = await otherBrowser.newContext({

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ export interface User {
1313
short_name: string;
1414
language?: string;
1515
}
16+
17+
export type UserLight = Pick<User, 'full_name' | 'short_name'>;

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

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useCreateBlockNote } from '@blocknote/react';
1313
import { HocuspocusProvider } from '@hocuspocus/provider';
1414
import { useEffect } from 'react';
1515
import { useTranslation } from 'react-i18next';
16+
import { css } from 'styled-components';
1617
import * as Y from 'yjs';
1718

1819
import { Box, TextErrors } from '@/components';
@@ -33,6 +34,7 @@ import { randomColor } from '../utils';
3334

3435
import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
3536
import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
37+
import { cssComments, useComments } from './comments/';
3638
import {
3739
AccessibleImageBlock,
3840
CalloutBlock,
@@ -83,6 +85,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
8385
const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
8486
const isConnectedToCollabServer = provider.isSynced;
8587
const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
88+
const canSeeComment = doc.abilities.comment;
8689

8790
useSaveDoc(doc.id, provider.document, !readOnly, isConnectedToCollabServer);
8891
const { i18n } = useTranslation();
@@ -95,6 +98,8 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
9598
: user?.full_name || user?.email || t('Anonymous');
9699
const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
97100

101+
const threadStore = useComments(provider.document, doc, user);
102+
98103
const editor: DocsBlockNoteEditor = useCreateBlockNote(
99104
{
100105
codeBlock,
@@ -147,11 +152,25 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
147152
},
148153
showCursorLabels: showCursorLabels as 'always' | 'activity',
149154
},
155+
comments: { threadStore },
150156
dictionary: {
151157
...locales[lang as keyof typeof locales],
152158
multi_column:
153159
multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
154160
},
161+
resolveUsers: async (userIds) => {
162+
return Promise.resolve(
163+
userIds.map((encodedURIUserId) => {
164+
const fullName = decodeURIComponent(encodedURIUserId);
165+
166+
return {
167+
id: encodedURIUserId,
168+
username: fullName || t('Anonymous'),
169+
avatarUrl: 'https://i.pravatar.cc/300',
170+
};
171+
}),
172+
);
173+
},
155174
tables: {
156175
splitCells: true,
157176
cellBackgroundColor: true,
@@ -161,7 +180,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
161180
uploadFile,
162181
schema: blockNoteSchema,
163182
},
164-
[collabName, lang, provider, uploadFile],
183+
[collabName, lang, provider, uploadFile, threadStore],
165184
);
166185

167186
useHeadings(editor);
@@ -180,7 +199,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
180199
<Box
181200
$padding={{ top: 'md' }}
182201
$background="white"
183-
$css={cssEditor(readOnly)}
202+
$css={css`
203+
${cssEditor(readOnly)};
204+
${cssComments(canSeeComment)}
205+
`}
184206
className="--docs--editor-container"
185207
>
186208
{errorAttachment && (
@@ -194,11 +216,13 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
194216
)}
195217

196218
<BlockNoteView
219+
className="--docs--main-editor"
197220
editor={editor}
198221
formattingToolbar={false}
199222
slashMenu={false}
200223
editable={!readOnly}
201224
theme="light"
225+
comments={canSeeComment}
202226
>
203227
<BlockNoteSuggestionMenu />
204228
<BlockNoteToolbar />
@@ -232,7 +256,12 @@ export const BlockNoteEditorVersion = ({
232256

233257
return (
234258
<Box $css={cssEditor(readOnly)} className="--docs--editor-container">
235-
<BlockNoteView editor={editor} editable={!readOnly} theme="light" />
259+
<BlockNoteView
260+
className="--docs--main-editor"
261+
editor={editor}
262+
editable={!readOnly}
263+
theme="light"
264+
/>
236265
</Box>
237266
);
238267
};

0 commit comments

Comments
 (0)