♻️(frontend) adapt custom blocks to new implementation

Last release of Blocknote introduced breaking
changes for custom blocks.
We adapted our custom blocks to the new
implementation.
"code-block" is considered as a block now, we
update the way to import and use it.
The custom blocks should be now more tiptap friendly.

Author: AntoLC

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) adapt custom blocks to new implementation #1375
 - ♻️(backend) increase user short_name field length
 
 ### Fixed
@@ -42,10 +43,6 @@ and this project adheres to
 - ✨(frontend) add pdf block to the editor #1293
 - ✨List and restore deleted docs #1450
 
-### Fixed
-
-- 🐛(frontend) show full nested doc names with ajustable bar #1456
-
 ### Changed
 
 - ♻️(frontend) Refactor Auth component for improved redirection logic #1461

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

@@ -676,10 +676,9 @@ test.describe('Doc Editor', () => {
 
     await calloutBlock.locator('.inline-content').fill('example text');
 
-    await expect(page.locator('.bn-block').first()).toHaveAttribute(
-      'data-background-color',
-      'yellow',
-    );
+    await expect(
+      page.locator('.bn-block-content[data-content-type="callout"]').first(),
+    ).toHaveAttribute('data-background-color', 'yellow');
 
     const emojiButton = calloutBlock.getByRole('button');
     await expect(emojiButton).toHaveText('💡');
@@ -703,10 +702,9 @@ test.describe('Doc Editor', () => {
     await page.locator('.mantine-Menu-dropdown > button').last().click();
     await page.locator('.bn-color-picker-dropdown > button').last().click();
 
-    await expect(page.locator('.bn-block').first()).toHaveAttribute(
-      'data-background-color',
-      'pink',
-    );
+    await expect(
+      page.locator('.bn-block-content[data-content-type="callout"]').first(),
+    ).toHaveAttribute('data-background-color', 'pink');
   });
 
   test('it checks interlink feature', async ({ page, browserName }) => {
@@ -844,10 +842,10 @@ test.describe('Doc Editor', () => {
 
     await expect(pdfBlock).toBeVisible();
 
-    await page.getByText('Add PDF').click();
+    await page.getByText(/Add (PDF|file)/).click();
     const fileChooserPromise = page.waitForEvent('filechooser');
     const downloadPromise = page.waitForEvent('download');
-    await page.getByText('Upload file').click();
+    await page.getByText(/Upload (PDF|file)/).click();
     const fileChooser = await fileChooserPromise;
 
     await fileChooser.setFiles(path.join(__dirname, 'assets/test-pdf.pdf'));

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

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 import cs from 'convert-stream';
-import pdf from 'pdf-parse';
+import { pdf } from 'pdf-parse';
 
 import {
   TestLanguage,
@@ -59,20 +59,16 @@ test.describe('Doc Export', () => {
 
     await verifyDocName(page, randomDoc);
 
-    const editor = page.locator('.ProseMirror.bn-editor');
-
-    await editor.click();
-    await editor.locator('.bn-block-outer').last().fill('Hello');
-
+    const editor = await writeInEditor({ page, text: 'Hello' });
     await page.keyboard.press('Enter');
-    await editor.locator('.bn-block-outer').last().fill('/');
+    await openSuggestionMenu({ page });
     await page.getByText('Page Break').click();
 
-    await expect(editor.locator('.bn-page-break')).toBeVisible();
-
-    await page.keyboard.press('Enter');
+    await expect(
+      editor.locator('div[data-content-type="pageBreak"]'),
+    ).toBeVisible();
 
-    await editor.locator('.bn-block-outer').last().fill('World');
+    await writeInEditor({ page, text: 'World' });
 
     await page
       .getByRole('button', {
@@ -92,9 +88,9 @@ test.describe('Doc Export', () => {
     const pdfBuffer = await cs.toBuffer(await download.createReadStream());
     const pdfData = await pdf(pdfBuffer);
 
-    expect(pdfData.numpages).toBe(2);
-    expect(pdfData.text).toContain('\n\nHello\n\nWorld'); // This is the doc text
-    expect(pdfData.info.Title).toBe(randomDoc);
+    expect(pdfData.total).toBe(2);
+    expect(pdfData.text).toContain('Hello\n\nWorld\n\n'); // This is the doc text
+    expect(pdfData.info?.Title).toBe(randomDoc);
   });
 
   test('it exports the doc to docx', async ({ page, browserName }) => {

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

@@ -7,6 +7,7 @@ import {
   randomName,
   verifyDocName,
 } from './utils-common';
+import { writeInEditor } from './utils-editor';
 import { connectOtherUserToDoc, updateRoleUser } from './utils-share';
 import { createRootSubPage } from './utils-sub-pages';
 
@@ -240,11 +241,7 @@ test.describe('Document create member', () => {
 
     await verifyDocName(page, docTitle);
 
-    await page
-      .locator('.ProseMirror')
-      .locator('.bn-block-outer')
-      .last()
-      .fill('Hello World');
+    await writeInEditor({ page, text: 'Hello World' });
 
     const docUrl = page.url();
 

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

@@ -9,6 +9,7 @@ import {
   mockedDocument,
   verifyDocName,
 } from './utils-common';
+import { writeInEditor } from './utils-editor';
 import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Doc Routing', () => {
@@ -58,16 +59,23 @@ test.describe('Doc Routing', () => {
 
     await createRootSubPage(page, browserName, '401-doc-child');
 
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
+    await writeInEditor({ page, text: 'Hello World' });
 
     const responsePromise = page.route(
       /.*\/documents\/.*\/$|users\/me\/$/,
       async (route) => {
         const request = route.request();
 
+        // When we quit a document, a PATCH request is sent to save the document.
+        // We intercept this request to simulate a 401 error from the backend.
+        // The GET request to users/me is also intercepted to simulate the user
+        // being logged out when trying to fetch user info.
+        // This way we can test the 401 error handling when saving the document
         if (
-          request.method().includes('PATCH') ||
-          request.method().includes('GET')
+          (request.url().includes('/documents/') &&
+            request.method().includes('PATCH')) ||
+          (request.url().includes('/users/me/') &&
+            request.method().includes('GET'))
         ) {
           await route.fulfill({
             status: 401,

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

@@ -175,7 +175,9 @@ test.describe('Doc Visibility: Restricted', () => {
     await addNewMember(page, 0, 'Reader', otherBrowserName);
 
     await otherPage.reload();
-    await expect(otherPage.getByText('Hello World')).toBeVisible();
+    await expect(otherPage.getByText('Hello World')).toBeVisible({
+      timeout: 10000,
+    });
   });
 });
 

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

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { TestLanguage, createDoc, waitForLanguageSwitch } from './utils-common';
+import { openSuggestionMenu } from './utils-editor';
 
 test.describe('Language', () => {
   test.beforeEach(async ({ page }) => {
@@ -51,6 +52,7 @@ test.describe('Language', () => {
     await expect(page.locator('html')).toHaveAttribute('lang', 'en');
     await expect(languagePicker).toContainText('English');
   });
+
   test('can switch language using only keyboard', async ({ page }) => {
     await page.goto('/');
     await waitForLanguageSwitch(page, TestLanguage.English);
@@ -106,18 +108,18 @@ test.describe('Language', () => {
   }) => {
     await createDoc(page, 'doc-toolbar', browserName, 1);
 
-    const editor = page.locator('.ProseMirror');
-
-    // Trigger slash menu to show english menu
-    await editor.click();
-    await editor.fill('/');
+    const editor = await openSuggestionMenu({ page });
     await expect(page.getByText('Headings', { exact: true })).toBeVisible();
 
+    await editor.click(); // close the menu
+
+    await expect(page.getByText('Headings', { exact: true })).toBeHidden();
+
     // Change language to French
     await waitForLanguageSwitch(page, TestLanguage.French);
 
     // Trigger slash menu to show french menu
-    await editor.locator('.bn-block-outer').last().fill('/');
+    await openSuggestionMenu({ page });
     await expect(page.getByText('Titres', { exact: true })).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/types/pdf-parse.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Type definitions for pdf-parse library
+ * The library doesn't export complete type definitions for the parsed PDF data
+ */
+
+declare module 'pdf-parse' {
+  export interface PdfInfo {
+    Title?: string;
+    Author?: string;
+    Subject?: string;
+    Keywords?: string;
+    Creator?: string;
+    Producer?: string;
+    CreationDate?: string;
+    ModDate?: string;
+    [key: string]: unknown;
+  }
+
+  export interface PdfData {
+    /** Total number of pages */
+    numpages: number;
+    /** Alias for numpages */
+    total?: number;
+    /** Extracted text content from the PDF */
+    text: string;
+    /** PDF metadata information */
+    info?: PdfInfo;
+    /** PDF metadata (alternative structure) */
+    metadata?: unknown;
+    /** PDF version */
+    version?: string;
+  }
+
+  export function pdf(buffer: Buffer): Promise<PdfData>;
+
+  export default pdf;
+}

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

@@ -9,7 +9,7 @@ export const getEditor = async ({ page }: { page: Page }) => {
 export const openSuggestionMenu = async ({ page }: { page: Page }) => {
   const editor = await getEditor({ page });
   await editor.click();
-  await page.locator('.bn-block-outer').last().fill('/');
+  await writeInEditor({ page, text: '/' });
 
   return editor;
 };
@@ -22,6 +22,6 @@ export const writeInEditor = async ({
   text: string;
 }) => {
   const editor = await getEditor({ page });
-  await editor.locator('.bn-block-outer').last().fill(text);
+  await editor.locator('.bn-block-outer .bn-inline-content').last().fill(text);
   return editor;
 };

src/frontend/apps/impress/package.json

@@ -36,15 +36,18 @@
     "@gouvfr-lasuite/integration": "1.0.3",
     "@gouvfr-lasuite/ui-kit": "0.16.2",
     "@hocuspocus/provider": "2.15.2",
+    "@mantine/core": "8.3.4",
+    "@mantine/hooks": "8.3.4",
     "@openfun/cunningham-react": "3.2.3",
     "@react-pdf/renderer": "4.3.1",
     "@sentry/nextjs": "10.17.0",
     "@tanstack/react-query": "5.90.2",
+    "@tiptap/extensions": "3.4.4",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "crisp-sdk-web": "1.0.25",
-    "docx": "9.5.0",
+    "docx": "*",
     "emoji-datasource-apple": "16.0.0",
     "emoji-mart": "5.6.0",
     "emoji-regex": "10.5.0",