⬆️(dependencies) bump blocknote to 0.44.2

CHANGELOG.md

@@ -14,6 +14,11 @@ and this project adheres to
 
 - 🚸(backend) use unaccented full name for user search #1637
 
+### Fixed
+
+- 🐛(frontend) Select text + Go back one page crash the app #1733
+
+
 ## [4.1.0] - 2025-12-09
 
 ### Added

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

@@ -6,7 +6,7 @@ import {
   getOtherBrowserName,
   verifyDocName,
 } from './utils-common';
-import { writeInEditor } from './utils-editor';
+import { getEditor, writeInEditor } from './utils-editor';
 import {
   addNewMember,
   connectOtherUserToDoc,
@@ -48,6 +48,7 @@ test.describe('Doc Comments', () => {
     await thread.locator('[data-test="save"]').click();
     await expect(thread.getByText('This is a comment').first()).toBeHidden();
 
+    await editor.first().click();
     await editor.getByText('Hello').click();
 
     await thread.getByText('This is a comment').first().hover();
@@ -135,6 +136,7 @@ test.describe('Doc Comments', () => {
       'background-color',
       'rgba(237, 180, 0, 0.4)',
     );
+    await editor.first().click();
     await editor.getByText('Hello').click();
 
     await thread.getByText('This is a comment').first().hover();
@@ -197,6 +199,7 @@ test.describe('Doc Comments', () => {
       'background-color',
       'rgba(237, 180, 0, 0.4)',
     );
+    await editor.first().click();
     await editor.getByText('Hello').click();
 
     await thread.getByText('This is a new comment').first().hover();
@@ -217,6 +220,8 @@ test.describe('Doc Comments', () => {
     // We share the doc with another user
     const otherBrowserName = getOtherBrowserName(browserName);
 
+    const editor = await getEditor({ page });
+
     // Add a new member with editor role
     await page.getByRole('button', { name: 'Share' }).click();
     await addNewMember(page, 0, 'Editor', otherBrowserName);
@@ -240,7 +245,7 @@ test.describe('Doc Comments', () => {
       text: 'Hello, I can edit the document',
     });
     await expect(
-      otherEditor.getByText('Hello, I can edit the document'),
+      editor.getByText('Hello, I can edit the document'),
     ).toBeVisible();
     await otherEditor.getByText('Hello').selectText();
     await otherPage.getByRole('button', { name: 'Comment' }).click();

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

@@ -802,6 +802,8 @@ test.describe('Doc Editor', () => {
     await page.getByText('Symbols').scrollIntoViewIfNeeded();
     await expect(page.getByRole('button', { name: '🛃' })).toBeVisible();
 
+    await page.keyboard.press('Escape');
+
     await page.locator('.bn-side-menu > button').last().click();
     await page.locator('.mantine-Menu-dropdown > button').last().click();
     await page.locator('.bn-color-picker-dropdown > button').last().click();

src/frontend/apps/impress/package.json

@@ -19,14 +19,14 @@
   },
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
-    "@blocknote/code-block": "0.42.3",
-    "@blocknote/core": "0.42.3",
-    "@blocknote/mantine": "0.42.3",
-    "@blocknote/react": "0.42.3",
-    "@blocknote/xl-docx-exporter": "0.42.3",
-    "@blocknote/xl-multi-column": "0.42.3",
-    "@blocknote/xl-odt-exporter": "0.42.3",
-    "@blocknote/xl-pdf-exporter": "0.42.3",
+    "@blocknote/code-block": "0.44.2",
+    "@blocknote/core": "0.44.2",
+    "@blocknote/mantine": "0.44.2",
+    "@blocknote/react": "0.44.2",
+    "@blocknote/xl-docx-exporter": "0.44.2",
+    "@blocknote/xl-multi-column": "0.44.2",
+    "@blocknote/xl-odt-exporter": "0.44.2",
+    "@blocknote/xl-pdf-exporter": "0.44.2",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@emoji-mart/data": "1.2.1",

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

@@ -6,6 +6,7 @@ import {
   defaultInlineContentSpecs,
   withPageBreak,
 } from '@blocknote/core';
+import { CommentsExtension } from '@blocknote/core/comments';
 import '@blocknote/core/fonts/inter.css';
 import * as locales from '@blocknote/core/locales';
 import { BlockNoteView } from '@blocknote/mantine';
@@ -101,7 +102,11 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const cursorName = collabName || t('Anonymous');
   const showCursorLabels: 'always' | 'activity' | (string & {}) = 'activity';
 
-  const threadStore = useComments(doc.id, canSeeComment, user);
+  const { resolveUsers, threadStore } = useComments(
+    doc.id,
+    canSeeComment,
+    user,
+  );
 
   const currentUserAvatarUrl = useMemo(() => {
     if (canSeeComment) {
@@ -156,28 +161,12 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         },
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
-      comments: { threadStore },
       dictionary: {
         ...locales[lang as keyof typeof locales],
         multi_column:
           multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
       },
-      resolveUsers: async (userIds) => {
-        return Promise.resolve(
-          userIds.map((encodedURIUserId) => {
-            const fullName = decodeURIComponent(encodedURIUserId);
-
-            return {
-              id: encodedURIUserId,
-              username: fullName || t('Anonymous'),
-              avatarUrl: avatarUrlFromName(
-                fullName,
-                themeTokens?.font?.families?.base,
-              ),
-            };
-          }),
-        );
-      },
+      extensions: [CommentsExtension({ threadStore, resolveUsers })],
       tables: {
         splitCells: true,
         cellBackgroundColor: true,
@@ -187,7 +176,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       uploadFile,
       schema: blockNoteSchema,
     },
-    [cursorName, lang, provider, uploadFile, threadStore],
+    [cursorName, lang, provider, uploadFile, threadStore, resolveUsers],
   );
 
   useHeadings(editor);
@@ -248,7 +237,7 @@ export const BlockNoteReader = ({
 }: BlockNoteReaderProps) => {
   const { user } = useAuth();
   const { setEditor } = useEditorStore();
-  const threadStore = useComments(docId, false, user);
+  const { threadStore } = useComments(docId, false, user);
   const { t } = useTranslation();
   const editor = useCreateBlockNote(
     {
@@ -261,12 +250,16 @@ export const BlockNoteReader = ({
         provider: undefined,
       },
       schema: blockNoteSchema,
-      comments: { threadStore },
-      resolveUsers: async () => {
-        return Promise.resolve([]);
-      },
+      extensions: [
+        CommentsExtension({
+          threadStore,
+          resolveUsers: async () => {
+            return Promise.resolve([]);
+          },
+        }),
+      ],
     },
-    [initialContent],
+    [initialContent, threadStore],
   );
 
   useEffect(() => {

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

@@ -1,4 +1,5 @@
-import { combineByGroup, filterSuggestionItems } from '@blocknote/core';
+import { combineByGroup } from '@blocknote/core';
+import { filterSuggestionItems } from '@blocknote/core/extensions';
 import {
   DefaultReactSuggestionItem,
   SuggestionMenuController,

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

@@ -6,24 +6,25 @@
  * https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
  */
 
-import {
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-  blockHasType,
-} from '@blocknote/core';
+import { blockHasType } from '@blocknote/core';
 import {
   useBlockNoteEditor,
   useComponentsContext,
   useDictionary,
-  useSelectedBlocks,
+  useEditorState,
 } from '@blocknote/react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { RiDownload2Fill } from 'react-icons/ri';
 
 import { downloadFile, exportResolveFileUrl } from '@/docs/doc-export';
 import { isSafeUrl } from '@/utils/url';
 
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../../types';
+
 export const FileDownloadButton = ({
   open,
 }: {
@@ -33,36 +34,43 @@ export const FileDownloadButton = ({
   const Components = useComponentsContext();
 
   const editor = useBlockNoteEditor<
-    BlockSchema,
-    InlineContentSchema,
-    StyleSchema
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
   >();
 
-  const selectedBlocks = useSelectedBlocks(editor);
+  const fileBlock = useEditorState({
+    editor,
+    selector: ({ editor }) => {
+      const selectedBlocks = editor.getSelection()?.blocks || [
+        editor.getTextCursorPosition().block,
+      ];
 
-  const fileBlock = useMemo(() => {
-    // Checks if only one block is selected.
-    if (selectedBlocks.length !== 1) {
-      return undefined;
-    }
+      if (selectedBlocks.length !== 1) {
+        return undefined;
+      }
 
-    const block = selectedBlocks[0];
+      const block = selectedBlocks[0];
 
-    if (
-      blockHasType(block, editor, block.type, { url: 'string', name: 'string' })
-    ) {
-      return block;
-    }
+      if (
+        !blockHasType(block, editor, block.type, {
+          url: 'string',
+          name: 'string',
+        })
+      ) {
+        return undefined;
+      }
 
-    return undefined;
-  }, [editor, selectedBlocks]);
+      return block;
+    },
+  });
 
   const onClick = useCallback(async () => {
     if (fileBlock && fileBlock.props.url) {
       editor.focus();
 
       const url = fileBlock.props.url as string;
-      const name = fileBlock.props.name as string | undefined;
+      const name = fileBlock.props.name as string;
 
       /**
        * If not hosted on our domain, means not a file uploaded by the user,
@@ -110,19 +118,18 @@ export const FileDownloadButton = ({
     return null;
   }
 
+  const blockType = fileBlock.type as string;
+  const tooltipText =
+    dict.formatting_toolbar.file_download.tooltip[blockType] ||
+    dict.formatting_toolbar.file_download.tooltip['file'];
+
   return (
     <>
       <Components.FormattingToolbar.Button
         className="bn-button --docs--editor-file-download-button"
         data-test="downloadfile"
-        label={
-          dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
-          dict.formatting_toolbar.file_download.tooltip['file']
-        }
-        mainTooltip={
-          dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
-          dict.formatting_toolbar.file_download.tooltip['file']
-        }
+        label={tooltipText}
+        mainTooltip={tooltipText}
         icon={<RiDownload2Fill />}
         onClick={() => void onClick()}
       />

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

@@ -3,9 +3,12 @@
  * https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/AddCommentButton.tsx
  */
 
+import { CommentsExtension } from '@blocknote/core/comments';
+import { FormattingToolbarExtension } from '@blocknote/core/extensions';
 import {
   useBlockNoteEditor,
   useComponentsContext,
+  useExtension,
   useSelectedBlocks,
 } from '@blocknote/react';
 import { useMemo } from 'react';
@@ -29,6 +32,10 @@ export const CommentToolbarButton = () => {
   const { t } = useTranslation();
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
+  const comments = useExtension('comments') as unknown as ReturnType<
+    ReturnType<typeof CommentsExtension>
+  >;
+  const { store } = useExtension(FormattingToolbarExtension);
 
   const editor = useBlockNoteEditor<
     DocsBlockSchema,
@@ -53,6 +60,7 @@ export const CommentToolbarButton = () => {
   };
 
   if (
+    !comments ||
     !isDesktop ||
     !show ||
     !editor.isEditable ||
@@ -67,8 +75,8 @@ export const CommentToolbarButton = () => {
       <Components.Generic.Toolbar.Button
         className="bn-button"
         onClick={() => {
-          editor.comments?.startPendingComment();
-          editor.formattingToolbar.closeMenu();
+          comments.startPendingComment();
+          store.setState(false);
           focusOnInputThread();
         }}
         aria-haspopup="dialog"

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

@@ -200,7 +200,7 @@ export class DocsThreadStore extends ThreadStore {
     const { editor } = useEditorStore.getState();
 
     // Should not happen
-    if (!editor) {
+    if (!editor || !editor._tiptapEditor?.view?.dom) {
       console.warn('Editor to add thread not ready');
       return Promise.resolve();
     }