♻️(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.
2025-10-16 12:10:05 +02:00
parent aca334f81f
commit fe24c00178
30 changed files with 1720 additions and 3066 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/src/frontend/apps/e2e/tests/app-impress/doc-editor.spec.ts
+++ b/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'));
--- a/src/frontend/apps/e2e/tests/app-impress/doc-export.spec.ts
+++ b/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 expect(
+      editor.locator('div[data-content-type="pageBreak"]'),
+    ).toBeVisible();

-    await page.keyboard.press('Enter');
-
-    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 }) => {
--- a/src/frontend/apps/e2e/tests/app-impress/doc-member-create.spec.ts
+++ b/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();

--- a/src/frontend/apps/e2e/tests/app-impress/doc-routing.spec.ts
+++ b/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,
--- a/src/frontend/apps/e2e/tests/app-impress/doc-visibility.spec.ts
+++ b/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,
+    });
  });
 });

--- a/src/frontend/apps/e2e/tests/app-impress/language.spec.ts
+++ b/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();
  });
 });
--- a/src/frontend/apps/e2e/tests/app-impress/types/pdf-parse.d.ts
+++ b/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;
+}
--- a/src/frontend/apps/e2e/tests/app-impress/utils-editor.ts
+++ b/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;
 };
--- a/src/frontend/apps/impress/package.json
+++ b/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",
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg
@@ -1,3 +1,14 @@
-<svg width="18" height="23" viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.57954 5.93282C4.44486 5.79021 4.37793 5.61484 4.37793 5.41299C4.37793 5.21112 4.44495 5.03795 4.58154 4.90136C4.72456 4.75833 4.90437 4.6875 5.11367 4.6875H12.8964C13.0991 4.6875 13.2722 4.75857 13.408 4.90133C13.5508 5.03718 13.6219 5.21027 13.6219 5.41299C13.6219 5.61613 13.5506 5.7918 13.409 5.93387C13.273 6.07732 13.0996 6.14873 12.8964 6.14873H5.11367C4.90437 6.14873 4.72456 6.0779 4.58154 5.93487L4.57954 5.93282ZM4.57954 9.51144C4.44486 9.36882 4.37793 9.19346 4.37793 8.9916C4.37793 8.78973 4.44495 8.61656 4.58154 8.47997C4.72456 8.33695 4.90437 8.26611 5.11367 8.26611H12.8964C13.0991 8.26611 13.2722 8.33719 13.408 8.47995C13.5508 8.61579 13.6219 8.78888 13.6219 8.9916C13.6219 9.19475 13.5506 9.37042 13.409 9.51249C13.273 9.65593 13.0996 9.72734 12.8964 9.72734H5.11367C4.90437 9.72734 4.72456 9.65651 4.58154 9.51348L4.57954 9.51144ZM4.57954 13.1003C4.44561 12.9585 4.37793 12.7869 4.37793 12.5907C4.37793 12.3831 4.44414 12.204 4.57954 12.0606L4.58151 12.0586C4.72453 11.9155 4.90437 11.8447 5.11367 11.8447H8.79482C9.00363 11.8447 9.18092 11.9153 9.3177 12.0596C9.46006 12.2024 9.53057 12.3819 9.53057 12.5907C9.53057 12.7887 9.45812 12.9609 9.31671 13.1024C9.17936 13.2397 9.00235 13.306 8.79482 13.306H5.11367C4.90609 13.306 4.72695 13.2397 4.58358 13.1043L4.57954 13.1003ZM1.09476 0.851519C1.65317 0.285946 2.47955 0.0117188 3.55508 0.0117188H14.4447C15.52 0.0117188 16.3433 0.28583 16.895 0.851748C17.4529 1.41698 17.7234 2.24966 17.7234 3.33145V18.8866C17.7234 19.975 17.4531 20.8082 16.8945 21.3668C16.3427 21.9256 15.5196 22.1961 14.4447 22.1961H3.55508C2.47988 22.1961 1.65367 21.9255 1.09521 21.367C0.543652 20.8083 0.276367 19.9747 0.276367 18.8866V3.33145C0.276367 2.24984 0.543796 1.41679 1.09476 0.851519ZM15.5624 20.0351C15.2958 20.3085 14.8959 20.4452 14.3627 20.4452H3.63711C3.10391 20.4452 2.70059 20.3085 2.42715 20.0351L2.49875 19.9652L2.49786 19.9643L2.42715 20.0351C2.16055 19.7616 2.02725 19.3686 2.02725 18.8559V3.36221C2.02725 2.84951 2.16055 2.45645 2.42715 2.18301C2.70059 1.90273 3.10391 1.7626 3.63711 1.7626H14.3627C14.8959 1.7626 15.2958 1.90273 15.5624 2.18301C15.8358 2.45645 15.9726 2.84951 15.9726 3.36221V18.8559C15.9726 19.3686 15.8358 19.7616 15.5624 20.0351Z" fill="#3A3A3A"/>
+<svg
+  width="18"
+  height="23"
+  viewBox="0 0 18 23"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.57954 5.93282C4.44486 5.79021 4.37793 5.61484 4.37793 5.41299C4.37793 5.21112 4.44495 5.03795 4.58154 4.90136C4.72456 4.75833 4.90437 4.6875 5.11367 4.6875H12.8964C13.0991 4.6875 13.2722 4.75857 13.408 4.90133C13.5508 5.03718 13.6219 5.21027 13.6219 5.41299C13.6219 5.61613 13.5506 5.7918 13.409 5.93387C13.273 6.07732 13.0996 6.14873 12.8964 6.14873H5.11367C4.90437 6.14873 4.72456 6.0779 4.58154 5.93487L4.57954 5.93282ZM4.57954 9.51144C4.44486 9.36882 4.37793 9.19346 4.37793 8.9916C4.37793 8.78973 4.44495 8.61656 4.58154 8.47997C4.72456 8.33695 4.90437 8.26611 5.11367 8.26611H12.8964C13.0991 8.26611 13.2722 8.33719 13.408 8.47995C13.5508 8.61579 13.6219 8.78888 13.6219 8.9916C13.6219 9.19475 13.5506 9.37042 13.409 9.51249C13.273 9.65593 13.0996 9.72734 12.8964 9.72734H5.11367C4.90437 9.72734 4.72456 9.65651 4.58154 9.51348L4.57954 9.51144ZM4.57954 13.1003C4.44561 12.9585 4.37793 12.7869 4.37793 12.5907C4.37793 12.3831 4.44414 12.204 4.57954 12.0606L4.58151 12.0586C4.72453 11.9155 4.90437 11.8447 5.11367 11.8447H8.79482C9.00363 11.8447 9.18092 11.9153 9.3177 12.0596C9.46006 12.2024 9.53057 12.3819 9.53057 12.5907C9.53057 12.7887 9.45812 12.9609 9.31671 13.1024C9.17936 13.2397 9.00235 13.306 8.79482 13.306H5.11367C4.90609 13.306 4.72695 13.2397 4.58358 13.1043L4.57954 13.1003ZM1.09476 0.851519C1.65317 0.285946 2.47955 0.0117188 3.55508 0.0117188H14.4447C15.52 0.0117188 16.3433 0.28583 16.895 0.851748C17.4529 1.41698 17.7234 2.24966 17.7234 3.33145V18.8866C17.7234 19.975 17.4531 20.8082 16.8945 21.3668C16.3427 21.9256 15.5196 22.1961 14.4447 22.1961H3.55508C2.47988 22.1961 1.65367 21.9255 1.09521 21.367C0.543652 20.8083 0.276367 19.9747 0.276367 18.8866V3.33145C0.276367 2.24984 0.543796 1.41679 1.09476 0.851519ZM15.5624 20.0351C15.2958 20.3085 14.8959 20.4452 14.3627 20.4452H3.63711C3.10391 20.4452 2.70059 20.3085 2.42715 20.0351L2.49875 19.9652L2.49786 19.9643L2.42715 20.0351C2.16055 19.7616 2.02725 19.3686 2.02725 18.8559V3.36221C2.02725 2.84951 2.16055 2.45645 2.42715 2.18301C2.70059 1.90273 3.10391 1.7626 3.63711 1.7626H14.3627C14.8959 1.7626 15.2958 1.90273 15.5624 2.18301C15.8358 2.45645 15.9726 2.84951 15.9726 3.36221V18.8559C15.9726 19.3686 15.8358 19.7616 15.5624 20.0351Z"
+    fill="#3A3A3A"
+  />
 </svg>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-selected.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-selected.svg
@@ -1,6 +1,6 @@
 <svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M3.40918 4.70117C3.28613 4.70117 3.18359 4.66016 3.10156 4.57812C3.02409 4.49609 2.98535 4.39583 2.98535 4.27734C2.98535 4.15885 3.02409 4.06087 3.10156 3.9834C3.18359 3.90137 3.28613 3.86035 3.40918 3.86035H8.59766C8.71615 3.86035 8.81413 3.90137 8.8916 3.9834C8.97363 4.06087 9.01465 4.15885 9.01465 4.27734C9.01465 4.39583 8.97363 4.49609 8.8916 4.57812C8.81413 4.66016 8.71615 4.70117 8.59766 4.70117H3.40918ZM3.40918 7.08691C3.28613 7.08691 3.18359 7.0459 3.10156 6.96387C3.02409 6.88184 2.98535 6.78158 2.98535 6.66309C2.98535 6.5446 3.02409 6.44661 3.10156 6.36914C3.18359 6.28711 3.28613 6.24609 3.40918 6.24609H8.59766C8.71615 6.24609 8.81413 6.28711 8.8916 6.36914C8.97363 6.44661 9.01465 6.5446 9.01465 6.66309C9.01465 6.78158 8.97363 6.88184 8.8916 6.96387C8.81413 7.0459 8.71615 7.08691 8.59766 7.08691H3.40918ZM3.40918 9.47266C3.28613 9.47266 3.18359 9.43392 3.10156 9.35645C3.02409 9.27441 2.98535 9.17643 2.98535 9.0625C2.98535 8.93945 3.02409 8.83691 3.10156 8.75488C3.18359 8.67285 3.28613 8.63184 3.40918 8.63184H5.86328C5.98633 8.63184 6.08659 8.67285 6.16406 8.75488C6.24609 8.83691 6.28711 8.93945 6.28711 9.0625C6.28711 9.17643 6.24609 9.27441 6.16406 9.35645C6.08659 9.43392 5.98633 9.47266 5.86328 9.47266H3.40918ZM0.250977 13.2598V2.88965C0.250977 2.17871 0.426432 1.64323 0.777344 1.2832C1.13281 0.923177 1.66374 0.743164 2.37012 0.743164H9.62988C10.3363 0.743164 10.8649 0.923177 11.2158 1.2832C11.5713 1.64323 11.749 2.17871 11.749 2.88965V13.2598C11.749 13.9753 11.5713 14.5107 11.2158 14.8662C10.8649 15.2217 10.3363 15.3994 9.62988 15.3994H2.37012C1.66374 15.3994 1.13281 15.2217 0.777344 14.8662C0.426432 14.5107 0.250977 13.9753 0.250977 13.2598ZM1.35156 13.2393C1.35156 13.5811 1.44043 13.8431 1.61816 14.0254C1.80046 14.2077 2.06934 14.2988 2.4248 14.2988H9.5752C9.93066 14.2988 10.1973 14.2077 10.375 14.0254C10.5573 13.8431 10.6484 13.5811 10.6484 13.2393V2.91016C10.6484 2.56836 10.5573 2.30632 10.375 2.12402C10.1973 1.93717 9.93066 1.84375 9.5752 1.84375H2.4248C2.06934 1.84375 1.80046 1.93717 1.61816 2.12402C1.44043 2.30632 1.35156 2.56836 1.35156 2.91016V13.2393Z"
-    fill="#8585F6"
+    fill="currentColor"
  />
 </svg>
--- 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
@@ -1,6 +1,7 @@
-import { codeBlock } from '@blocknote/code-block';
+import { codeBlockOptions } from '@blocknote/code-block';
 import {
  BlockNoteSchema,
+  createCodeBlockSpec,
  defaultBlockSpecs,
  defaultInlineContentSpecs,
  withPageBreak,
@@ -52,10 +53,11 @@ const baseBlockNoteSchema = withPageBreak(
  BlockNoteSchema.create({
    blockSpecs: {
      ...defaultBlockSpecs,
-      callout: CalloutBlock,
-      image: AccessibleImageBlock,
-      pdf: PdfBlock,
-      uploadLoader: UploadLoaderBlock,
+      callout: CalloutBlock(),
+      codeBlock: createCodeBlockSpec(codeBlockOptions),
+      image: AccessibleImageBlock(),
+      pdf: PdfBlock(),
+      uploadLoader: UploadLoaderBlock(),
    },
    inlineContentSpecs: {
      ...defaultInlineContentSpecs,
@@ -96,7 +98,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {

  const editor: DocsBlockNoteEditor = useCreateBlockNote(
    {
-      codeBlock,
      collaboration: {
        provider,
        fragment: provider.document.getXmlFragment('document-store'),
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
@@ -1,5 +1,6 @@
 import { combineByGroup, filterSuggestionItems } from '@blocknote/core';
 import {
+  DefaultReactSuggestionItem,
  SuggestionMenuController,
  getDefaultReactSlashMenuItems,
  getPageBreakReactSlashMenuItems,
@@ -41,28 +42,29 @@ export const BlockNoteSuggestionMenu = () => {
  const getSlashMenuItems = useMemo(() => {
    // We insert it after the "Code Block" item to have the interlinking block displayed after the basic blocks
    const defaultMenu = getDefaultReactSlashMenuItems(editor);
-    const index = defaultMenu.findIndex(
-      (item) => item.aliases?.includes('code') && item.aliases?.includes('pre'),
+
+    const combinedMenu = combineByGroup(
+      defaultMenu,
+      getPageBreakReactSlashMenuItems(editor),
+      getMultiColumnSlashMenuItems?.(editor) || [],
+      getPdfReactSlashMenuItems(editor, t, fileBlocksName),
+      getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
    );
+
+    const index = combinedMenu.findIndex(
+      (item) =>
+        (item as DefaultReactSuggestionItem & { key: string })?.key ===
+        'callout',
+    );
+
    const newSlashMenuItems = [
-      ...defaultMenu.slice(0, index + 1),
+      ...combinedMenu.slice(0, index + 1),
      ...getInterlinkingMenuItems(editor, t),
-      ...defaultMenu.slice(index + 1),
+      ...combinedMenu.slice(index + 1),
    ];

    return async (query: string) =>
-      Promise.resolve(
-        filterSuggestionItems(
-          combineByGroup(
-            newSlashMenuItems,
-            getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
-            getMultiColumnSlashMenuItems?.(editor) || [],
-            getPageBreakReactSlashMenuItems(editor),
-            getPdfReactSlashMenuItems(editor, t, fileBlocksName),
-          ),
-          query,
-        ),
-      );
+      Promise.resolve(filterSuggestionItems(newSlashMenuItems, query));
  }, [basicBlocksName, editor, getInterlinkingMenuItems, t, fileBlocksName]);

  return (
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
@@ -1,9 +1,16 @@
+/**
+ * We added some custom logic to the original Blocknote FileDownloadButton
+ * component to handle our file download use case.
+ *
+ * Original source:
+ * https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
+ */
+
 import {
  BlockSchema,
  InlineContentSchema,
  StyleSchema,
-  checkBlockIsFileBlock,
-  checkBlockIsFileBlockWithPlaceholder,
+  blockHasType,
 } from '@blocknote/core';
 import {
  useBlockNoteEditor,
@@ -41,7 +48,9 @@ export const FileDownloadButton = ({

    const block = selectedBlocks[0];

-    if (checkBlockIsFileBlock(block, editor)) {
+    if (
+      blockHasType(block, editor, block.type, { url: 'string', name: 'string' })
+    ) {
      return block;
    }

@@ -53,6 +62,7 @@ export const FileDownloadButton = ({
      editor.focus();

      const url = fileBlock.props.url as string;
+      const name = fileBlock.props.name as string | undefined;

      /**
       * If not hosted on our domain, means not a file uploaded by the user,
@@ -76,16 +86,12 @@ export const FileDownloadButton = ({

      if (!url.includes('-unsafe')) {
        const blob = (await exportResolveFileUrl(url)) as Blob;
-        downloadFile(
-          blob,
-          fileBlock.props.name || url.split('/').pop() || 'file',
-        );
+        downloadFile(blob, name || url.split('/').pop() || 'file');
      } else {
        const onConfirm = async () => {
          const blob = (await exportResolveFileUrl(url)) as Blob;

-          const baseName =
-            fileBlock.props.name || url.split('/').pop() || 'file';
+          const baseName = name || url.split('/').pop() || 'file';

          const regFindLastDot = /(\.[^/.]+)$/;
          const unsafeName = baseName.includes('.')
@@ -100,11 +106,7 @@ export const FileDownloadButton = ({
    }
  }, [editor, fileBlock, open]);

-  if (
-    !fileBlock ||
-    checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
-    !Components
-  ) {
+  if (!fileBlock || fileBlock.props.url === '' || !Components) {
    return null;
  }

--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx
@@ -1,43 +1,62 @@
+/**
+ * AccessibleImageBlock.tsx
+ *
+ * This file defines a custom BlockNote block specification for an accessible image block.
+ * It extends the default image block to ensure compliance with accessibility standards,
+ * specifically RGAA 1.9.1, by using <figure> and <figcaption> elements when a caption is provided.
+ *
+ * The accessible image block ensures that:
+ * - Images with captions are wrapped in <figure> and <figcaption> elements.
+ * - The <img> element has an appropriate alt attribute based on the caption.
+ * - Accessibility attributes such as role and aria-label are added for better screen reader support.
+ * - Images without captions have alt="" and are marked as decorative with aria-hidden="true".
+ *
+ * This implementation leverages BlockNote's existing image block functionality while enhancing it for accessibility.
+ * https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/src/blocks/Image/block.ts
+ */
+
 import {
  BlockFromConfig,
  BlockNoteEditor,
-  BlockSchemaWithBlock,
+  ImageOptions,
  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
  StyleSchema,
  createBlockSpec,
-  imageBlockConfig,
+  createImageBlockConfig,
+  defaultInlineContentSpecs,
  imageParse,
  imageRender,
  imageToExternalHTML,
 } from '@blocknote/core';
 import { t } from 'i18next';

-type ImageBlockConfig = typeof imageBlockConfig;
+type CreateImageBlockConfig = ReturnType<typeof createImageBlockConfig>;

-export const accessibleImageRender = (
-  block: BlockFromConfig<ImageBlockConfig, InlineContentSchema, StyleSchema>,
-  editor: BlockNoteEditor<
-    BlockSchemaWithBlock<ImageBlockConfig['type'], ImageBlockConfig>,
-    InlineContentSchema,
-    StyleSchema
-  >,
-) => {
-  const imageRenderComputed = imageRender(block, editor);
-  const dom = imageRenderComputed.dom;
-  const imgSelector = dom.querySelector('img');
-
-  const withCaption =
-    block.props.caption && dom.querySelector('.bn-file-caption');
-
-  const accessibleImageWithCaption = () => {
-    imgSelector?.setAttribute('alt', block.props.caption);
-    imgSelector?.removeAttribute('aria-hidden');
-    imgSelector?.setAttribute('tabindex', '0');
+export const accessibleImageRender =
+  (config: ImageOptions) =>
+  (
+    block: BlockFromConfig<
+      CreateImageBlockConfig,
+      InlineContentSchema,
+      StyleSchema
+    >,
+    editor: BlockNoteEditor<
+      Record<'image', CreateImageBlockConfig>,
+      InlineContentSchemaFromSpecs<typeof defaultInlineContentSpecs>,
+      StyleSchema
+    >,
+  ) => {
+    const imageRenderComputed = imageRender(config);
+    const dom = imageRenderComputed(block, editor).dom;
+    const imgSelector = dom.querySelector('img');

    // Fix RGAA 1.9.1: Convert to figure/figcaption structure if caption exists
-    const captionElement = dom.querySelector('.bn-file-caption');
+    const accessibleImageWithCaption = () => {
+      imgSelector?.setAttribute('alt', block.props.caption);
+      imgSelector?.removeAttribute('aria-hidden');
+      imgSelector?.setAttribute('tabindex', '0');

-    if (captionElement) {
      const figureElement = document.createElement('figure');

      // Copy all attributes from the original div
@@ -76,32 +95,36 @@ export const accessibleImageRender = (
        ...imageRenderComputed,
        dom: figureElement,
      };
-    }
+    };
+
+    const accessibleImage = () => {
+      imgSelector?.setAttribute('alt', '');
+      imgSelector?.setAttribute('role', 'presentation');
+      imgSelector?.setAttribute('aria-hidden', 'true');
+      imgSelector?.setAttribute('tabindex', '-1');
+
+      return {
+        ...imageRenderComputed,
+        dom,
+      };
+    };
+
+    const withCaption =
+      block.props.caption && dom.querySelector('.bn-file-caption');
+
+    // Set accessibility attributes for the image
+    return withCaption ? accessibleImageWithCaption() : accessibleImage();
  };

-  const accessibleImage = () => {
-    imgSelector?.setAttribute('alt', '');
-    imgSelector?.setAttribute('role', 'presentation');
-    imgSelector?.setAttribute('aria-hidden', 'true');
-    imgSelector?.setAttribute('tabindex', '-1');
-  };
-
-  // Set accessibility attributes for the image
-  const result = withCaption ? accessibleImageWithCaption() : accessibleImage();
-
-  // Return the result if accessibleImageWithCaption created a figure, otherwise return original
-  if (result) {
-    return result;
-  }
-
-  return {
-    ...imageRenderComputed,
-    dom,
-  };
-};
-
-export const AccessibleImageBlock = createBlockSpec(imageBlockConfig, {
-  render: accessibleImageRender,
-  parse: imageParse,
-  toExternalHTML: imageToExternalHTML,
-});
+export const AccessibleImageBlock = createBlockSpec(
+  createImageBlockConfig,
+  (config) => ({
+    meta: {
+      fileBlockAccept: ['image/*'],
+    },
+    render: accessibleImageRender(config),
+    parse: imageParse(config),
+    toExternalHTML: imageToExternalHTML(config),
+    runsBefore: ['file'],
+  }),
+);
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
@@ -1,9 +1,16 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
+import {
+  BlockConfig,
+  BlockNoDefaults,
+  BlockNoteEditor,
+  InlineContentSchema,
+  StyleSchema,
+  defaultProps,
+  insertOrUpdateBlock,
+} from '@blocknote/core';
 import { BlockTypeSelectItem, createReactBlockSpec } from '@blocknote/react';
 import { TFunction } from 'i18next';
 import React, { useEffect, useState } from 'react';
-import { css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';

 import { Box, BoxButton, Icon } from '@/components';

@@ -12,90 +19,130 @@ import { EmojiPicker } from '../EmojiPicker';

 import emojidata from './initEmojiCallout';

+const CalloutBlockStyle = createGlobalStyle`
+  .bn-block-content[data-content-type="callout"][data-background-color] {
+    padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
+    border-radius: var(--c--theme--spacings--3xs);
+  }
+`;
+
+type CreateCalloutBlockConfig = BlockConfig<
+  'callout',
+  {
+    textAlignment: typeof defaultProps.textAlignment;
+    backgroundColor: typeof defaultProps.backgroundColor;
+    emoji: { default: '💡' };
+  },
+  'inline'
+>;
+
+interface CalloutComponentProps {
+  block: BlockNoDefaults<
+    Record<'callout', CreateCalloutBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+  editor: BlockNoteEditor<
+    Record<'callout', CreateCalloutBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+  contentRef: (node: HTMLElement | null) => void;
+}
+
+const CalloutComponent = ({
+  block,
+  editor,
+  contentRef,
+}: CalloutComponentProps) => {
+  const [openEmojiPicker, setOpenEmojiPicker] = useState(false);
+  const isEditable = editor.isEditable;
+
+  const toggleEmojiPicker = (e: React.MouseEvent) => {
+    if (!isEditable) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setOpenEmojiPicker(!openEmojiPicker);
+  };
+
+  const onClickOutside = () => setOpenEmojiPicker(false);
+
+  const onEmojiSelect = ({ native }: { native: string }) => {
+    editor.updateBlock(block, { props: { emoji: native } });
+    setOpenEmojiPicker(false);
+  };
+
+  // Temporary: sets a yellow background color to a callout block when added by
+  // the user, while keeping the colors menu on the drag handler usable for
+  // this custom block.
+  useEffect(() => {
+    if (!block.content.length && block.props.backgroundColor === 'default') {
+      // Delay the update to avoid interfering with the block insertion process
+      setTimeout(() => {
+        editor.updateBlock(block, { props: { backgroundColor: 'yellow' } });
+      }, 0);
+    }
+  }, [block, editor]);
+
+  return (
+    <Box
+      $padding="1rem"
+      $gap="0.625rem"
+      $direction="row"
+      $align="center"
+      $css={css`
+        flex-grow: 1;
+      `}
+    >
+      <CalloutBlockStyle />
+      <BoxButton
+        contentEditable={false}
+        onClick={toggleEmojiPicker}
+        $css={css`
+          font-size: 1.125rem;
+          cursor: ${isEditable ? 'pointer' : 'default'};
+          ${isEditable &&
+          `
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.1);
+          }
+          `}
+        `}
+        $align="center"
+        $width="28px"
+        $radius="4px"
+      >
+        {block.props.emoji}
+      </BoxButton>
+
+      {openEmojiPicker && (
+        <EmojiPicker
+          emojiData={emojidata}
+          onClickOutside={onClickOutside}
+          onEmojiSelect={onEmojiSelect}
+        />
+      )}
+      <Box as="p" className="inline-content" ref={contentRef} />
+    </Box>
+  );
+};
+
 export const CalloutBlock = createReactBlockSpec(
  {
    type: 'callout',
    propSchema: {
      textAlignment: defaultProps.textAlignment,
-      backgroundColor: defaultProps.backgroundColor,
+      backgroundColor: { default: 'default' as const },
      emoji: { default: '💡' },
    },
    content: 'inline',
  },
  {
-    render: ({ block, editor, contentRef }) => {
-      const [openEmojiPicker, setOpenEmojiPicker] = useState(false);
-      const isEditable = editor.isEditable;
-
-      const toggleEmojiPicker = (e: React.MouseEvent) => {
-        if (!isEditable) {
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        setOpenEmojiPicker(!openEmojiPicker);
-      };
-
-      const onClickOutside = () => setOpenEmojiPicker(false);
-
-      const onEmojiSelect = ({ native }: { native: string }) => {
-        editor.updateBlock(block, { props: { emoji: native } });
-        setOpenEmojiPicker(false);
-      };
-
-      // Temporary: sets a yellow background color to a callout block when added by
-      // the user, while keeping the colors menu on the drag handler usable for
-      // this custom block.
-      useEffect(() => {
-        if (
-          !block.content.length &&
-          block.props.backgroundColor === 'default'
-        ) {
-          editor.updateBlock(block, { props: { backgroundColor: 'yellow' } });
-        }
-      }, [block, editor]);
-
-      return (
-        <Box
-          $padding="1rem"
-          $gap="0.625rem"
-          style={{
-            flexGrow: 1,
-            flexDirection: 'row',
-          }}
-        >
-          <BoxButton
-            contentEditable={false}
-            onClick={toggleEmojiPicker}
-            $css={css`
-              font-size: 1.125rem;
-              cursor: ${isEditable ? 'pointer' : 'default'};
-              ${isEditable &&
-              `
-                &:hover {
-                  background-color: rgba(0, 0, 0, 0.1);
-                }
-              `}
-            `}
-            $align="center"
-            $height="28px"
-            $width="28px"
-            $radius="4px"
-          >
-            {block.props.emoji}
-          </BoxButton>
-
-          {openEmojiPicker && (
-            <EmojiPicker
-              emojiData={emojidata}
-              onClickOutside={onClickOutside}
-              onEmojiSelect={onEmojiSelect}
-            />
-          )}
-          <Box as="p" className="inline-content" ref={contentRef} />
-        </Box>
-      );
-    },
+    render: ({ block, editor, contentRef }) => (
+      <CalloutComponent block={block} editor={editor} contentRef={contentRef} />
+    ),
  },
 );

@@ -105,6 +152,7 @@ export const getCalloutReactSlashMenuItems = (
  group: string,
 ) => [
  {
+    key: 'callout',
    title: t('Callout'),
    onItemClick: () => {
      insertOrUpdateBlock(editor, {
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx
@@ -1,11 +1,19 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { insertOrUpdateBlock } from '@blocknote/core';
+import {
+  BlockConfig,
+  BlockNoDefaults,
+  BlockNoteEditor,
+  InlineContentSchema,
+  StyleSchema,
+  insertOrUpdateBlock,
+} from '@blocknote/core';
+import * as locales from '@blocknote/core/locales';
 import {
  AddFileButton,
  ResizableFileBlockWrapper,
  createReactBlockSpec,
 } from '@blocknote/react';
 import { TFunction } from 'i18next';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';

@@ -20,57 +28,106 @@ const PDFBlockStyle = createGlobalStyle`
 `;

 type FileBlockEditor = Parameters<typeof AddFileButton>[0]['editor'];
+type FileBlockBlock = Parameters<typeof AddFileButton>[0]['block'];
+
+type CreatePDFBlockConfig = BlockConfig<
+  'pdf',
+  {
+    backgroundColor: { default: 'default' };
+    caption: { default: '' };
+    name: { default: '' };
+    previewWidth: { default: undefined; type: 'number' };
+    showPreview: { default: true };
+    textAlignment: { default: 'left' };
+    url: { default: '' };
+  },
+  'none'
+>;
+
+interface PdfBlockComponentProps {
+  block: BlockNoDefaults<
+    Record<'callout', CreatePDFBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+  contentRef: (node: HTMLElement | null) => void;
+  editor: BlockNoteEditor<
+    Record<'pdf', CreatePDFBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+}
+
+const PdfBlockComponent = ({
+  editor,
+  block,
+  contentRef,
+}: PdfBlockComponentProps) => {
+  const pdfUrl = block.props.url;
+  const { i18n, t } = useTranslation();
+  const lang = i18n.resolvedLanguage;
+
+  useEffect(() => {
+    if (lang && locales[lang as keyof typeof locales]) {
+      locales[lang as keyof typeof locales].file_blocks.add_button_text['pdf'] =
+        t('Add PDF');
+      (
+        locales[lang as keyof typeof locales].file_panel.embed
+          .embed_button as Record<string, string>
+      )['pdf'] = t('Add PDF');
+      (
+        locales[lang as keyof typeof locales].file_panel.upload
+          .file_placeholder as Record<string, string>
+      )['pdf'] = t('Upload PDF');
+    }
+  }, [lang, t]);
+
+  return (
+    <Box ref={contentRef} className="bn-file-block-content-wrapper">
+      <PDFBlockStyle />
+      <ResizableFileBlockWrapper
+        buttonIcon={
+          <Icon iconName="upload" $size="24px" $css="line-height: normal;" />
+        }
+        block={block as unknown as FileBlockBlock}
+        editor={editor as unknown as FileBlockEditor}
+      >
+        <Box
+          className="bn-visual-media"
+          role="presentation"
+          as="embed"
+          $width="100%"
+          $height="450px"
+          type="application/pdf"
+          src={pdfUrl}
+          contentEditable={false}
+          draggable={false}
+          onClick={() => editor.setTextCursorPosition(block)}
+        />
+      </ResizableFileBlockWrapper>
+    </Box>
+  );
+};

 export const PdfBlock = createReactBlockSpec(
  {
    type: 'pdf',
    content: 'none',
    propSchema: {
-      name: { default: '' as const },
-      url: { default: '' as const },
+      backgroundColor: { default: 'default' as const },
      caption: { default: '' as const },
-      showPreview: { default: true },
+      name: { default: '' as const },
      previewWidth: { default: undefined, type: 'number' },
+      showPreview: { default: true },
+      textAlignment: { default: 'left' as const },
+      url: { default: '' as const },
    },
-    isFileBlock: true,
-    fileBlockAccept: ['application/pdf'],
  },
  {
-    render: ({ editor, block, contentRef }) => {
-      const { t } = useTranslation();
-      const pdfUrl = block.props.url;
-
-      return (
-        <Box ref={contentRef} className="bn-file-block-content-wrapper">
-          <PDFBlockStyle />
-          <ResizableFileBlockWrapper
-            buttonIcon={
-              <Icon
-                iconName="upload"
-                $size="24px"
-                $css="line-height: normal;"
-              />
-            }
-            block={block}
-            editor={editor as unknown as FileBlockEditor}
-            buttonText={t('Add PDF')}
-          >
-            <Box
-              className="bn-visual-media"
-              role="presentation"
-              as="embed"
-              $width="100%"
-              $height="450px"
-              type="application/pdf"
-              src={pdfUrl}
-              contentEditable={false}
-              draggable={false}
-              onClick={() => editor.setTextCursorPosition(block)}
-            />
-          </ResizableFileBlockWrapper>
-        </Box>
-      );
+    meta: {
+      fileBlockAccept: ['application/pdf'],
    },
+    render: (props) => <PdfBlockComponent {...props} />,
  },
 );

--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -78,7 +78,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
        transition: background-color 0.2s ease-in-out;
      `}
    >
-      <SelectedPageIcon width={11.5} />
+      <SelectedPageIcon width={11.5} color={colorsTokens['primary-400']} />
      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
        {title}
      </Text>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingSearchInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingSearchInlineContent.tsx
@@ -47,6 +47,7 @@ export const getInterlinkinghMenuItems = (
  createPage: () => void,
 ) => [
  {
+    key: 'link-doc',
    title: t('Link a doc'),
    onItemClick: () => {
      editor.insertInlineContent([
@@ -65,6 +66,7 @@ export const getInterlinkinghMenuItems = (
    subtext: t('Link this doc to another doc'),
  },
  {
+    key: 'new-sub-doc',
    title: t('New sub-doc'),
    onItemClick: createPage,
    aliases: ['new sub-doc'],
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx
@@ -43,17 +43,19 @@ const inputStyle = css`
 `;

 type SearchPageProps = {
-  trigger: string;
+  trigger: '/' | '@';
  updateInlineContent: (
    update: PartialCustomInlineContentFromConfig<
      {
-        type: string;
+        type: 'interlinkingSearchInline';
        propSchema: {
          disabled: {
-            default: boolean;
+            default: false;
+            values: [true, false];
          };
          trigger: {
-            default: string;
+            default: '/';
+            values: ['/', '@'];
          };
        };
        content: 'styled';
@@ -244,7 +246,7 @@ export const SearchPage = ({
                      $padding={{ vertical: '0.5rem', horizontal: '0.2rem' }}
                      $width="100%"
                    >
-                      <FoundPageIcon />
+                      <FoundPageIcon style={{ flexShrink: 0 }} />
                      <Text
                        $size="14px"
                        $color="var(--c--theme--colors--greyscale-1000)"
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
@@ -16,6 +16,9 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
      font-weight: 400;
    }

+    /**
+     * Ensure long placeholder text is truncated with ellipsis
+     */
    .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
      text-overflow: ellipsis;
@@ -29,14 +32,16 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
      position: relative;
    }

-    .bn-side-menu .mantine-UnstyledButton-root svg {
-      color: #767676 !important;
-    }
-
+    /**
+     * Ensure images with unsafe URLs are not interactive
+     */
    img.bn-visual-media[src*='-unsafe'] {
      pointer-events: none;
    }

+    /**
+     * Collaboration cursor styles
+     */
    .collaboration-cursor-custom__base {
      position: relative;
    }
@@ -87,6 +92,9 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
    .bn-side-menu[data-block-type='divider'] {
      height: 38px;
    }
+    .bn-side-menu .mantine-UnstyledButton-root svg {
+      color: #767676 !important;
+    }

    /**
     * Callout, Paragraph and Heading blocks
@@ -94,21 +102,17 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
    .bn-block {
      border-radius: var(--c--theme--spacings--3xs);
    }
-
    .bn-block-outer {
      border-radius: var(--c--theme--spacings--3xs);
    }
-
-    .bn-block[data-background-color] > .bn-block-content {
+    .bn-block > .bn-block-content[data-background-color] {
      padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
      border-radius: var(--c--theme--spacings--3xs);
    }
-
    .bn-block-content[data-content-type='checkListItem'][data-checked='true']
      .bn-inline-content {
      text-decoration: none;
    }
-
    h1 {
      font-size: 1.875rem;
    }
@@ -146,6 +150,16 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
      border-left: 4px solid var(--c--theme--colors--greyscale-300);
      font-style: italic;
    }
+
+    /**
+     * Divider
+    */
+    [data-content-type='divider'] hr {
+      background: #d3d2cf;
+      margin: 1rem 0;
+      width: 100%;
+      border: 1px solid #d3d2cf;
+    }
  }

  & .bn-block-outer:not(:first-child) {
--- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imageDocx.tsx
@@ -100,16 +100,13 @@ function blockPropsToStyles(
        ? undefined
        : {
            type: ShadingType.SOLID,
-            color:
-              colors[
-                props.backgroundColor as keyof typeof colors
-              ].background.slice(1),
+            color: colors[props.backgroundColor].background.slice(1),
          },
    run:
      props.textColor === 'default' || !props.textColor
        ? undefined
        : {
-            color: colors[props.textColor as keyof typeof colors].text.slice(1),
+            color: colors[props.textColor].text.slice(1),
          },
    alignment:
      !props.textAlignment || props.textAlignment === 'left'
--- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/tablePDF.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/tablePDF.tsx
@@ -92,15 +92,11 @@ export const blockMappingTablePDF: DocsExporterPDF['mappings']['blockMapping']['
                    color:
                      cellProps.textColor === 'default'
                        ? undefined
-                        : options.colors[
-                            cellProps.textColor as keyof typeof options.colors
-                          ].text,
+                        : options.colors[cellProps.textColor].text,
                    backgroundColor:
                      cellProps.backgroundColor === 'default'
                        ? undefined
-                        : options.colors[
-                            cellProps.backgroundColor as keyof typeof options.colors
-                          ].background,
+                        : options.colors[cellProps.backgroundColor].background,
                    textAlign: cellProps.textAlignment,
                  },
                ];
--- a/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts
@@ -76,16 +76,13 @@ export function docxBlockPropsToStyles(
        ? undefined
        : {
            type: ShadingType.SOLID,
-            color:
-              colors[
-                props.backgroundColor as keyof typeof colors
-              ].background.slice(1),
+            color: colors[props.backgroundColor].background.slice(1),
          },
    run:
      props.textColor === 'default' || !props.textColor
        ? undefined
        : {
-            color: colors[props.textColor as keyof typeof colors].text.slice(1),
+            color: colors[props.textColor].text.slice(1),
          },
    alignment:
      !props.textAlignment || props.textAlignment === 'left'
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/tests/DocsGridItemDate.test.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/tests/DocsGridItemDate.test.tsx
@@ -31,7 +31,10 @@ describe('DocsGridItemDate', () => {
  });

  [
-    { updated_at: DateTime.now().toISO(), rendered: '0 seconds ago' },
+    {
+      updated_at: DateTime.now().minus({ minutes: 1 }).toISO(),
+      rendered: '1 minute ago',
+    },
    {
      updated_at: DateTime.now().minus({ days: 1 }).toISO(),
      rendered: '1 day ago',
@@ -100,10 +103,10 @@ describe('DocsGridItemDate', () => {
      updated_at: DateTime.now().toISO(),
    },
    {
-      deleted_at: DateTime.now().toISO(),
-      rendered: '0 seconds ago',
+      deleted_at: DateTime.now().minus({ minutes: 1 }).toISO(),
+      rendered: '1 minute ago',
      trashbin_cutoff_days: 0,
-      updated_at: DateTime.now().toISO(),
+      updated_at: DateTime.now().minus({ minutes: 1 }).toISO(),
    },
  ].forEach(({ deleted_at, rendered, trashbin_cutoff_days, updated_at }) => {
    it(`should render "${rendered}" when we are in the trashbin`, async () => {
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -36,6 +36,7 @@
    "@types/react-dom": "19.2.0",
    "@typescript-eslint/eslint-plugin": "8.45.0",
    "@typescript-eslint/parser": "8.45.0",
+    "docx": "9.5.0",
    "eslint": "9.37.0",
    "react": "19.2.0",
    "react-dom": "19.2.0",
--- a/src/frontend/servers/y-provider/package.json
+++ b/src/frontend/servers/y-provider/package.json
@@ -20,6 +20,7 @@
    "@hocuspocus/server": "2.15.2",
    "@sentry/node": "10.17.0",
    "@sentry/profiling-node": "10.17.0",
+    "@tiptap/extensions": "*",
    "axios": "1.12.2",
    "cors": "2.8.5",
    "express": "5.1.0",
@@ -29,6 +30,7 @@
    "yjs": "*"
  },
  "devDependencies": {
+    "@blocknote/core": "0.41.1",
    "@hocuspocus/provider": "2.15.2",
    "@types/cors": "2.8.19",
    "@types/express": "5.0.3",
--- a/src/frontend/servers/y-provider/src/handlers/convertHandler.ts
+++ b/src/frontend/servers/y-provider/src/handlers/convertHandler.ts
@@ -1,4 +1,9 @@
-import { PartialBlock } from '@blocknote/core';
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  PartialBlock,
+} from '@blocknote/core';
 import { ServerBlockNoteEditor } from '@blocknote/server-util';
 import { Request, Response } from 'express';
 import * as Y from 'yjs';
@@ -9,7 +14,11 @@ interface ErrorResponse {
  error: string;
 }

-const editor = ServerBlockNoteEditor.create();
+const editor = ServerBlockNoteEditor.create<
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>();

 export const convertHandler = async (
  req: Request<object, Uint8Array | ErrorResponse, Buffer, object>,
@@ -27,7 +36,13 @@ export const convertHandler = async (
    ';',
  )[0];

-  let blocks: PartialBlock[] | null = null;
+  let blocks:
+    | PartialBlock<
+        DefaultBlockSchema,
+        DefaultInlineContentSchema,
+        DefaultStyleSchema
+      >[]
+    | null = null;
  try {
    // First, convert from the input format to blocks
    // application/x-www-form-urlencoded is interpreted as Markdown for backward compatibility
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock