🚸(frontend) separate viewers from editors

We are now totally separating the viewers with
the editors. We will not load the provider
when we are in viewer mode, meaning the
viewers will not be aware of other users and
will not show their cursors anymore.
We still get the document updates in real-time.

Author: AntoLC

CHANGELOG.md

@@ -10,16 +10,17 @@ and this project adheres to
 
 - ✨(frontend) create skeleton component for DocEditor #1491
 - ✨(frontend) add an EmojiPicker in the document tree and title #1381
+- ✨(frontend) ajustable left panel #1456
 
 ### Changed
 
 - ♻️(frontend) adapt custom blocks to new implementation #1375
 - ♻️(backend) increase user short_name field length
+- 🚸(frontend) separate viewers from editors #1509
 
 ### Fixed
 
 - 🐛(frontend) fix duplicate document entries in grid #1479
-- 🐛(frontend) show full nested doc names with ajustable bar #1456
 - 🐛(backend) fix trashbin list
 - ♿(frontend) improve accessibility:
   - ♿(frontend) remove empty alt on logo due to Axe a11y error #1516

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

@@ -7,7 +7,7 @@ import {
   keyCloakSignIn,
   verifyDocName,
 } from './utils-common';
-import { writeInEditor } from './utils-editor';
+import { getEditor, writeInEditor } from './utils-editor';
 import { addNewMember, connectOtherUserToDoc } from './utils-share';
 import { createRootSubPage } from './utils-sub-pages';
 
@@ -182,15 +182,14 @@ test.describe('Doc Visibility: Restricted', () => {
 });
 
 test.describe('Doc Visibility: Public', () => {
-  test.use({ storageState: { cookies: [], origins: [] } });
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
 
   test('It checks a public doc in read only mode', async ({
     page,
     browserName,
   }) => {
-    await page.goto('/');
-    await keyCloakSignIn(page, browserName);
-
     const [docTitle] = await createDoc(
       page,
       'Public read only',
@@ -200,6 +199,8 @@ test.describe('Doc Visibility: Public', () => {
 
     await verifyDocName(page, docTitle);
 
+    await writeInEditor({ page, text: 'Hello Public Viewonly' });
+
     await page.getByRole('button', { name: 'Share' }).click();
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
@@ -241,49 +242,63 @@ test.describe('Doc Visibility: Public', () => {
     await expect(page.getByTestId('search-docs-button')).toBeVisible();
     await expect(page.getByTestId('new-doc-button')).toBeVisible();
 
-    const urlDoc = page.url();
-
-    await page
-      .getByRole('button', {
-        name: 'Logout',
-      })
-      .click();
-
-    await expectLoginPage(page);
+    const docUrl = page.url();
 
-    await page.goto(urlDoc);
+    const { otherPage, cleanup } = await connectOtherUserToDoc({
+      browserName,
+      docUrl,
+      withoutSignIn: true,
+    });
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await expect(page.getByTestId('search-docs-button')).toBeHidden();
-    await expect(page.getByTestId('new-doc-button')).toBeHidden();
-    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-    const card = page.getByLabel('It is the card information');
+    await expect(otherPage.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(otherPage.getByTestId('search-docs-button')).toBeHidden();
+    await expect(otherPage.getByTestId('new-doc-button')).toBeHidden();
+    await expect(
+      otherPage.getByRole('button', { name: 'Share' }),
+    ).toBeVisible();
+    const card = otherPage.getByLabel('It is the card information');
     await expect(card).toBeVisible();
     await expect(card.getByText('Reader')).toBeVisible();
 
-    await page.getByRole('button', { name: 'Share' }).click();
+    const otherEditor = await getEditor({ page: otherPage });
+    await expect(otherEditor).toHaveAttribute('contenteditable', 'false');
+    await expect(otherEditor.getByText('Hello Public Viewonly')).toBeVisible();
+
+    // Cursor and selection of the anonymous user are not visible
+    await otherEditor.getByText('Hello Public').selectText();
     await expect(
-      page.getByText(
+      page.locator('.collaboration-cursor-custom__base'),
+    ).toBeHidden();
+    await expect(page.locator('.ProseMirror-yjs-selection')).toBeHidden();
+
+    // Can still see changes made by others
+    await writeInEditor({ page, text: 'Can you see it ?' });
+    await expect(otherEditor.getByText('Can you see it ?')).toBeVisible();
+
+    await otherPage.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      otherPage.getByText(
         'You can view this document but need additional access to see its members or modify settings.',
       ),
     ).toBeVisible();
 
     await expect(
-      page.getByRole('button', { name: 'Request access' }),
+      otherPage.getByRole('button', { name: 'Request access' }),
     ).toBeHidden();
+
+    await cleanup();
   });
 
   test('It checks a public doc in editable mode', async ({
     page,
     browserName,
   }) => {
-    await page.goto('/');
-    await keyCloakSignIn(page, browserName);
-
     const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
     await verifyDocName(page, docTitle);
 
+    await writeInEditor({ page, text: 'Hello Public Editable' });
+
     await page.getByRole('button', { name: 'Share' }).click();
     const selectVisibility = page.getByTestId('doc-visibility');
     await selectVisibility.click();
@@ -317,20 +332,47 @@ test.describe('Doc Visibility: Public', () => {
       cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
-    const urlDoc = page.url();
+    const docUrl = page.url();
 
-    await page
-      .getByRole('button', {
-        name: 'Logout',
-      })
-      .click();
+    const { otherPage, cleanup } = await connectOtherUserToDoc({
+      browserName,
+      docUrl,
+      withoutSignIn: true,
+      docTitle,
+    });
 
-    await expectLoginPage(page);
+    await expect(otherPage.getByTestId('search-docs-button')).toBeHidden();
+    await expect(otherPage.getByTestId('new-doc-button')).toBeHidden();
 
-    await page.goto(urlDoc);
+    const otherEditor = await getEditor({ page: otherPage });
+    await expect(otherEditor).toHaveAttribute('contenteditable', 'true');
+    await expect(otherEditor.getByText('Hello Public Editable')).toBeVisible();
 
-    await verifyDocName(page, docTitle);
-    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+    // We can see the collaboration cursor of the anonymous user
+    await otherEditor.getByText('Hello Public').selectText();
+    await expect(
+      page.locator('.collaboration-cursor-custom__base').getByText('Anonymous'),
+    ).toBeVisible();
+
+    await expect(
+      otherPage.getByRole('button', { name: 'Share' }),
+    ).toBeVisible();
+    const card = otherPage.getByLabel('It is the card information');
+    await expect(card).toBeVisible();
+    await expect(card.getByText('Editor')).toBeVisible();
+
+    await otherPage.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      otherPage.getByText(
+        'You can view this document but need additional access to see its members or modify settings.',
+      ),
+    ).toBeVisible();
+
+    await expect(
+      otherPage.getByRole('button', { name: 'Request access' }),
+    ).toBeHidden();
+
+    await cleanup();
   });
 });
 

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

@@ -277,6 +277,7 @@ export const expectLoginPage = async (page: Page) =>
   ).toBeVisible({
     timeout: 10000,
   });
+
 // language helper
 export const TestLanguage = {
   English: {

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

@@ -17,11 +17,7 @@ import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
-import {
-  Doc,
-  useIsCollaborativeEditable,
-  useProviderStore,
-} from '@/docs/doc-management';
+import { Doc, useProviderStore } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
 import {
@@ -32,7 +28,6 @@ import {
   useUploadStatus,
 } from '../hook';
 import { useEditorStore } from '../stores';
-import { cssEditor } from '../styles';
 import { DocsBlockNoteEditor } from '../types';
 import { randomColor } from '../utils';
 
@@ -85,25 +80,19 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { t } = useTranslation();
   const { isSynced: isConnectedToCollabServer } = useProviderStore();
 
-  const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
-  const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
-  const isDeletedDoc = !!doc.deleted_at;
-
-  useSaveDoc(doc.id, provider.document, !readOnly, isConnectedToCollabServer);
+  useSaveDoc(doc.id, provider.document, isConnectedToCollabServer);
   const { i18n } = useTranslation();
   const lang = i18n.resolvedLanguage;
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);
 
-  const collabName = readOnly
-    ? 'Reader'
-    : user?.full_name || user?.email || t('Anonymous');
+  const collabName = user?.full_name || user?.email || t('Anonymous');
   const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
   const editor: DocsBlockNoteEditor = useCreateBlockNote(
     {
       collaboration: {
-        provider,
+        provider: provider,
         fragment: provider.document.getXmlFragment('document-store'),
         user: {
           name: collabName,
@@ -117,10 +106,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         renderCursor: (user: { color: string; name: string }) => {
           const cursorElement = document.createElement('span');
 
-          if (user.name === 'Reader') {
-            return cursorElement;
-          }
-
           cursorElement.classList.add('collaboration-cursor-custom__base');
           const caretElement = document.createElement('span');
           caretElement.classList.add('collaboration-cursor-custom__caret');
@@ -181,12 +166,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   }, [setEditor, editor]);
 
   return (
-    <Box
-      $padding={{ top: 'md' }}
-      $background="white"
-      $css={cssEditor(readOnly, isDeletedDoc)}
-      className="--docs--editor-container"
-    >
+    <>
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
           <TextErrors
@@ -201,24 +181,21 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         editor={editor}
         formattingToolbar={false}
         slashMenu={false}
-        editable={!readOnly}
         theme="light"
       >
         <BlockNoteSuggestionMenu />
         <BlockNoteToolbar />
       </BlockNoteView>
-    </Box>
+    </>
   );
 };
 
-interface BlockNoteEditorVersionProps {
+interface BlockNoteReaderProps {
   initialContent: Y.XmlFragment;
 }
 
-export const BlockNoteEditorVersion = ({
-  initialContent,
-}: BlockNoteEditorVersionProps) => {
-  const readOnly = true;
+export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
+  const { setEditor } = useEditorStore();
   const editor = useCreateBlockNote(
     {
       collaboration: {
@@ -234,9 +211,23 @@ export const BlockNoteEditorVersion = ({
     [initialContent],
   );
 
+  useEffect(() => {
+    setEditor(editor);
+
+    return () => {
+      setEditor(undefined);
+    };
+  }, [setEditor, editor]);
+
+  useHeadings(editor);
+
   return (
-    <Box $css={cssEditor(readOnly, true)} className="--docs--editor-container">
-      <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
-    </Box>
+    <BlockNoteView
+      editor={editor}
+      editable={false}
+      theme="light"
+      formattingToolbar={false}
+      slashMenu={false}
+    />
   );
 };