⬆️(dependencies) update js dependencies

CHANGELOG.md

@@ -13,11 +13,14 @@ and this project adheres to
 
 - 📝(doc) Add security.md and codeofconduct.md #604
 - ✨(frontend) add home page #553
-
+- ✨(frontend) cursor display on activity #609
 
 ## Fixed
 
 🌐(CI) Fix email partially translated #616
+- 🐛(frontend) fix cursor breakline #609
+- 🐛(frontend) fix style pdf export #609
+
 
 ## [2.1.0] - 2025-01-29
 

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

@@ -395,9 +395,7 @@ test.describe('Doc Header', () => {
       navigator.clipboard.readText(),
     );
     const clipboardContent = await handle.jsonValue();
-    expect(clipboardContent.trim()).toBe(
-      `<h1 data-level=\"1\">Hello World</h1><p></p>`,
-    );
+    expect(clipboardContent.trim()).toBe(`<h1>Hello World</h1><p></p>`);
   });
 
   test('it checks the copy link button', async ({ page }) => {

src/frontend/apps/e2e/package.json

@@ -12,7 +12,7 @@
     "test:ui::chromium": "yarn test:ui --project=chromium"
   },
   "devDependencies": {
-    "@playwright/test": "1.50.0",
+    "@playwright/test": "1.50.1",
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",

src/frontend/apps/impress/package.json

@@ -15,42 +15,42 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@blocknote/core": "0.21.0",
-    "@blocknote/mantine": "0.21.0",
-    "@blocknote/react": "0.21.0",
-    "@blocknote/xl-docx-exporter": "0.21.0",
-    "@blocknote/xl-pdf-exporter": "0.21.0",
+    "@blocknote/core": "0.23.2",
+    "@blocknote/mantine": "0.23.2",
+    "@blocknote/react": "0.23.2",
+    "@blocknote/xl-docx-exporter": "0.23.2",
+    "@blocknote/xl-pdf-exporter": "0.23.2",
     "@gouvfr-lasuite/integration": "1.0.2",
-    "@hocuspocus/provider": "2.15.1",
+    "@hocuspocus/provider": "2.15.2",
     "@openfun/cunningham-react": "2.9.4",
     "@react-pdf/renderer": "4.1.6",
-    "@sentry/nextjs": "8.52.0",
-    "@tanstack/react-query": "5.65.1",
+    "@sentry/nextjs": "8.54.0",
+    "@tanstack/react-query": "5.66.0",
     "cmdk": "1.0.4",
     "crisp-sdk-web": "1.0.25",
     "docx": "9.1.1",
     "i18next": "24.2.2",
     "i18next-browser-languagedetector": "8.0.2",
-    "idb": "8.0.1",
+    "idb": "8.0.2",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "next": "15.1.6",
-    "posthog-js": "1.211.3",
+    "posthog-js": "1.215.6",
     "react": "*",
     "react-aria-components": "1.6.0",
     "react-dom": "*",
     "react-i18next": "15.4.0",
     "react-intersection-observer": "9.15.1",
     "react-select": "5.10.0",
-    "styled-components": "6.1.14",
+    "styled-components": "6.1.15",
     "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "13.6.23",
     "zustand": "5.0.3"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.65.1",
+    "@tanstack/react-query-devtools": "5.66.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",

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

@@ -27,6 +27,41 @@ const cssEditor = (readonly: boolean) => css`
   & .ProseMirror {
     height: 100%;
 
+    .collaboration-cursor-custom__base {
+      position: relative;
+    }
+    .collaboration-cursor-custom__caret {
+      position: absolute;
+      height: 85%;
+      width: 2px;
+      bottom: 4%;
+      left: -1px;
+    }
+
+    .collaboration-cursor-custom__label {
+      color: #0d0d0d;
+      font-size: 12px;
+      font-weight: 600;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      position: absolute;
+      top: -17px;
+      padding: 0px 6px;
+      border-radius: 0px;
+      white-space: nowrap;
+      transition: clip-path 0.3s ease-in-out;
+      border-radius: 4px 4px 4px 0;
+      box-shadow: inset -2px 2px 6px #ffffff88;
+      clip-path: polygon(0 100%, 0 100%, 0 100%, 0% 100%);
+    }
+
+    .collaboration-cursor-custom__base[data-active]
+      .collaboration-cursor-custom__label {
+      pointer-events: none;
+      clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
+    }
+
     .bn-side-menu[data-block-type='heading'][data-level='1'] {
       height: 50px;
     }
@@ -127,6 +162,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const collabName = readOnly
     ? 'Reader'
     : user?.full_name || user?.email || t('Anonymous');
+  const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
   const editor = useCreateBlockNote(
     {
@@ -138,30 +174,46 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
           color: randomColor(),
         },
         /**
-         * We re-use the blocknote code to render the cursor but we:
-         * - fix rendering issue with Firefox
-         * - We don't want to show the cursor when anonymous users
+         * We render the cursor with a custom element to:
+         * - fix rendering issue with the default cursor
+         * - hide the cursor when anonymous users
          */
         renderCursor: (user: { color: string; name: string }) => {
-          const cursor = document.createElement('span');
+          const cursorElement = document.createElement('span');
 
           if (user.name === 'Reader') {
-            return cursor;
+            return cursorElement;
+          }
+
+          cursorElement.classList.add('collaboration-cursor-custom__base');
+          const caretElement = document.createElement('span');
+          caretElement.classList.add('collaboration-cursor-custom__caret');
+          caretElement.setAttribute('spellcheck', `false`);
+          caretElement.setAttribute('style', `background-color: ${user.color}`);
+
+          if (showCursorLabels === 'always') {
+            cursorElement.setAttribute('data-active', '');
           }
 
-          cursor.classList.add('collaboration-cursor__caret');
-          cursor.setAttribute('style', `border-color: ${user.color}`);
+          const labelElement = document.createElement('span');
 
-          const label = document.createElement('span');
+          labelElement.classList.add('collaboration-cursor-custom__label');
+          labelElement.setAttribute('spellcheck', `false`);
+          labelElement.setAttribute(
+            'style',
+            `background-color: ${user.color};border: 1px solid ${user.color};`,
+          );
+          labelElement.insertBefore(document.createTextNode(user.name), null);
 
-          label.classList.add('collaboration-cursor__label');
-          label.setAttribute('style', `background-color: ${user.color}`);
-          label.insertBefore(document.createTextNode(user.name), null);
+          caretElement.insertBefore(labelElement, null);
 
-          cursor.insertBefore(label, null);
+          cursorElement.insertBefore(document.createTextNode('\u2060'), null); // Non-breaking space
+          cursorElement.insertBefore(caretElement, null);
+          cursorElement.insertBefore(document.createTextNode('\u2060'), null); // Non-breaking space
 
-          return cursor;
+          return cursorElement;
         },
+        showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
       dictionary: locales[lang as keyof typeof locales] as Dictionary,
       uploadFile,

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -98,7 +98,61 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
 
       const exporter = new PDFExporter(
         editor.schema,
-        pdfDefaultSchemaMappings,
+        {
+          ...pdfDefaultSchemaMappings,
+          blockMapping: {
+            ...pdfDefaultSchemaMappings.blockMapping,
+            heading: (block, exporter) => {
+              const PIXELS_PER_POINT = 0.75;
+              const MERGE_RATIO = 7.5;
+              const FONT_SIZE = 16;
+              const fontSizeEM =
+                block.props.level === 1
+                  ? 2
+                  : block.props.level === 2
+                    ? 1.5
+                    : 1.17;
+              return (
+                <Text
+                  style={{
+                    fontSize: fontSizeEM * FONT_SIZE * PIXELS_PER_POINT,
+                    fontWeight: 700,
+                    marginTop: `${fontSizeEM * MERGE_RATIO}px`,
+                    marginBottom: `${fontSizeEM * MERGE_RATIO}px`,
+                  }}
+                >
+                  {exporter.transformInlineContent(block.content)}
+                </Text>
+              );
+            },
+            paragraph: (block, exporter) => {
+              /**
+               * Breakline in the editor are not rendered in the PDF
+               * By adding a space if the block is empty we ensure that the block is rendered
+               */
+              if (Array.isArray(block.content)) {
+                block.content.forEach((content) => {
+                  if (content.type === 'text' && !content.text) {
+                    content.text = ' ';
+                  }
+                });
+
+                if (!block.content.length) {
+                  block.content.push({
+                    styles: {},
+                    text: ' ',
+                    type: 'text',
+                  });
+                }
+              }
+              return (
+                <Text key={block.id}>
+                  {exporter.transformInlineContent(block.content)}
+                </Text>
+              );
+            },
+          },
+        },
         {
           resolveFileUrl: async (url) =>
             exportResolveFileUrl(url, defaultExporter.options.resolveFileUrl),

src/frontend/package.json

@@ -28,10 +28,10 @@
     "server:test": "yarn COLLABORATION_SERVER run test"
   },
   "resolutions": {
-    "@types/node": "22.12.0",
+    "@types/node": "22.13.1",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.22.0",
-    "@typescript-eslint/parser": "8.22.0",
+    "@typescript-eslint/eslint-plugin": "8.23.0",
+    "@typescript-eslint/parser": "8.23.0",
     "eslint": "8.57.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/frontend/packages/eslint-config-impress/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@next/eslint-plugin-next": "15.1.6",
-    "@tanstack/eslint-plugin-query": "5.65.0",
+    "@tanstack/eslint-plugin-query": "5.66.0",
     "@typescript-eslint/eslint-plugin": "*",
     "@typescript-eslint/parser": "*",
     "eslint": "*",

src/frontend/servers/y-provider/package.json

@@ -16,18 +16,18 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@blocknote/server-util": "0.21.0",
-    "@hocuspocus/server": "2.15.1",
-    "@sentry/node": "8.52.0",
-    "@sentry/profiling-node": "8.52.0",
+    "@blocknote/server-util": "0.23.2",
+    "@hocuspocus/server": "2.15.2",
+    "@sentry/node": "8.54.0",
+    "@sentry/profiling-node": "8.54.0",
     "cors": "2.8.5",
     "express": "4.21.2",
     "express-ws": "5.0.2",
     "y-protocols": "1.0.6",
     "yjs": "13.6.23"
   },
   "devDependencies": {
-    "@hocuspocus/provider": "2.15.1",
+    "@hocuspocus/provider": "2.15.2",
     "@types/cors": "2.8.17",
     "@types/express": "5.0.0",
     "@types/express-ws": "3.0.5",