⬆️(dependencies) bump blocknote to 0.44.2

We bump the blocknote dependencies to version
0.44.2 to incorporate the latest features
and bug fixes.
It seems to fix an issue with Titap, when the text
was selected and the user clicked
on the Go Back button of the browser, the
application was crashing.
"[tiptap error]: The editor view is not available.
Cannot access view['dom']. The editor may not be
mounted yet."

Author: AntoLC

CHANGELOG.md

@@ -10,6 +10,11 @@ and this project adheres to
 
 - ✨(backend) allow to create a new user in a marketing system
 
+### 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/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();
     }