Upgrade blocknote dependencies from 0.31.1 to 0.47.0. (#18207)

This PR pgrades all BlockNote packages (@blocknote/core,
@blocknote/react, @blocknote/mantine, @blocknote/server-util,
@blocknote/xl-docx-exporter, @blocknote/xl-pdf-exporter) to 0.47.0 and
adapts the codebase to the new API.

### Changes
- Dependency upgrades: Bumped all BlockNote packages to 0.47.0, added
required Mantine v8 peer dependencies, removed unnecessary prosemirror
resolutions
- Formatting toolbar: Replaced the manual reimplementation of
FormattingToolbarController (which handled visibility, positioning,
portal rendering, text-alignment-based placement, and a
dangerouslySetInnerHTML transition trick) with BlockNote's built-in
FormattingToolbarController. The toolbar buttons themselves are
unchanged.
- Side menu: Replaced manual drag handle menu positioning and rendering
(DashboardBlockDragHandleMenu, DashboardBlockColorPicker, and their
floating configs) with BlockNote's built-in SideMenuController,
DragHandleButton, and DragHandleMenu components. Deleted 4 files that
became dead code.
- Extension API migration: Replaced deprecated editor.suggestionMenus
and editor.formattingToolbar APIs with the new extension system
(SuggestionMenu, useExtensionState, editor.getExtension())
- Slash menu fixes: Filtered out BlockNote's new default "File" item
(added in 0.47) to avoid duplicates with our custom one; added icon
mappings for new block types (Toggle List, Divider, Toggle Headings,
Headings 4-6)
- Server-side: Switched @blocknote/server-util to dynamic import() to
handle ESM-only transitive dependencies in CJS context

Author: mabdullahabaid

package.json

@@ -201,8 +201,6 @@
     "type-fest": "4.10.1",
     "typescript": "5.9.2",
     "graphql-redis-subscriptions/ioredis": "^5.6.0",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4",
     "@lingui/core": "5.1.2",
     "@types/qs": "6.9.16"
   },

packages/twenty-front/package.json

@@ -31,10 +31,10 @@
   "dependencies": {
     "@ai-sdk/react": "3.0.99",
     "@apollo/client": "^3.7.17",
-    "@blocknote/mantine": "^0.31.1",
-    "@blocknote/react": "^0.31.1",
-    "@blocknote/xl-docx-exporter": "^0.31.1",
-    "@blocknote/xl-pdf-exporter": "^0.31.1",
+    "@blocknote/mantine": "0.47.0",
+    "@blocknote/react": "0.47.0",
+    "@blocknote/xl-docx-exporter": "0.47.0",
+    "@blocknote/xl-pdf-exporter": "0.47.0",
     "@calcom/embed-react": "^1.5.3",
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@dagrejs/dagre": "^1.1.2",
@@ -46,6 +46,9 @@
     "@lingui/core": "^5.1.2",
     "@lingui/detect-locale": "^5.2.0",
     "@lingui/react": "^5.1.2",
+    "@mantine/core": "^8.3.11",
+    "@mantine/hooks": "^8.3.11",
+    "@mantine/utils": "^6.0.22",
     "@monaco-editor/react": "^4.7.0",
     "@nivo/core": "^0.99.0",
     "@nivo/line": "^0.99.0",
@@ -78,7 +81,6 @@
     "buffer": "^6.0.3",
     "cron-parser": "5.1.1",
     "date-fns": "^2.30.0",
-    "docx": "^9.1.0",
     "file-saver": "^2.0.5",
     "graphiql": "^3.1.1",
     "graphql": "16.8.1",

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/utils/exportBlockNoteEditorToDocx.ts

@@ -1,26 +1,16 @@
 import { type BlockNoteEditor } from '@blocknote/core';
-
 import {
   docxDefaultSchemaMappings,
   DOCXExporter,
 } from '@blocknote/xl-docx-exporter';
-import { Buffer } from 'buffer';
-import { Packer } from 'docx';
 import { saveAs } from 'file-saver';
 
 export const exportBlockNoteEditorToDocx = async (
   editor: BlockNoteEditor,
   filename: string,
 ) => {
-  // Polyfill needed for exportBlockNoteEditorToDocX
-  if (typeof window !== 'undefined') {
-    window.Buffer = Buffer;
-  }
-
   const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
 
-  const docxDocument = await exporter.toDocxJsDocument(editor.document);
-
-  const blob = await Packer.toBlob(docxDocument);
+  const blob = await exporter.toBlob(editor.document);
   saveAs(blob, `${filename}.docx`);
 };

packages/twenty-front/src/modules/blocknote-editor/blocks/FileBlock.tsx

@@ -42,10 +42,10 @@ export const FileBlock = createReactBlockSpec(
     type: 'file',
     propSchema: {
       url: {
-        default: '' as string,
+        default: '',
       },
       name: {
-        default: '' as string,
+        default: '',
       },
       fileCategory: {
         default: 'OTHER' as AttachmentFileCategory,

packages/twenty-front/src/modules/blocknote-editor/blocks/Schema.ts

@@ -10,7 +10,7 @@ import { MentionInlineContent } from '@/blocknote-editor/blocks/MentionInlineCon
 export const BLOCK_SCHEMA = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,
-    file: FileBlock,
+    file: FileBlock(),
   },
   inlineContentSpecs: {
     ...defaultInlineContentSpecs,

packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx

@@ -1,4 +1,4 @@
-import { filterSuggestionItems } from '@blocknote/core';
+import { filterSuggestionItems } from '@blocknote/core/extensions';
 import { BlockNoteView } from '@blocknote/mantine';
 import { SuggestionMenuController } from '@blocknote/react';
 import { useTheme } from '@emotion/react';

packages/twenty-front/src/modules/blocknote-editor/components/BlockEditorDropdownFocusEffect.tsx

@@ -1,18 +1,16 @@
-import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
+import { SuggestionMenu } from '@blocknote/core/extensions';
+import { useExtensionState } from '@blocknote/react';
+import { useStore } from 'jotai';
+import { useCallback, useState } from 'react';
+
 import { isSlashMenuOpenComponentState } from '@/blocknote-editor/states/isSlashMenuOpenComponentState';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
-import { useStore } from 'jotai';
-import { useCallback } from 'react';
 
-export type BlockEditorDropdownFocusEffectProps = {
-  editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
-};
+export const BlockEditorDropdownFocusEffect = () => {
+  const [prevShowing, setPrevShowing] = useState<boolean | null>(null);
 
-export const BlockEditorDropdownFocusEffect = ({
-  editor,
-}: BlockEditorDropdownFocusEffectProps) => {
   const isSlashMenuOpenState = useAtomComponentStateCallbackState(
     isSlashMenuOpenComponentState,
   );
@@ -25,30 +23,21 @@ export const BlockEditorDropdownFocusEffect = ({
 
   const store = useStore();
 
-  const updateCallBack = useCallback(
-    (event: any) => {
-      const eventWantsToOpen = event.show === true;
+  const suggestionState = useExtensionState(SuggestionMenu);
 
-      const isAlreadyOpen = store.get(isSlashMenuOpenState);
+  const isSlashMenuShowing =
+    suggestionState?.show === true && suggestionState?.triggerCharacter === '/';
 
-      const shouldOpen = eventWantsToOpen && !isAlreadyOpen;
+  const syncSlashMenuState = useCallback(
+    (showing: boolean) => {
+      const isAlreadyOpen = store.get(isSlashMenuOpenState);
 
-      if (shouldOpen) {
+      if (showing && isAlreadyOpen !== true) {
         setActiveDropdownFocusIdAndMemorizePrevious('custom-slash-menu');
         store.set(isSlashMenuOpenState, true);
-        return;
-      }
-
-      const eventWantsToClose = event.show === false;
-
-      const isAlreadyClosed = !isAlreadyOpen;
-
-      const shouldClose = eventWantsToClose && !isAlreadyClosed;
-
-      if (shouldClose) {
+      } else if (!showing && isAlreadyOpen === true) {
         goBackToPreviousDropdownFocusId();
         store.set(isSlashMenuOpenState, false);
-        return;
       }
     },
     [
@@ -59,7 +48,10 @@ export const BlockEditorDropdownFocusEffect = ({
     ],
   );
 
-  editor.suggestionMenus.on('update /', updateCallBack);
+  if (prevShowing !== isSlashMenuShowing) {
+    setPrevShowing(isSlashMenuShowing);
+    syncSlashMenuState(isSlashMenuShowing);
+  }
 
   return <></>;
 };

packages/twenty-front/src/modules/blocknote-editor/components/CustomAddBlockItem.tsx

@@ -1,42 +1,36 @@
 import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
-
-import { useComponentsContext } from '@blocknote/react';
+import { SuggestionMenu } from '@blocknote/core/extensions';
+import { useBlockNoteEditor, useComponentsContext } from '@blocknote/react';
 
 type CustomAddBlockItemProps = {
   editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
-  children: React.ReactNode; // Adding the children prop
+  children: React.ReactNode;
 };
 
-type ContentItem = {
-  type: string;
-  text: string;
-  styles: any;
-};
 export const CustomAddBlockItem = ({
   editor,
   children,
 }: CustomAddBlockItemProps) => {
   const Components = useComponentsContext();
+  const blockNoteEditor = useBlockNoteEditor();
 
   if (!Components) {
     return null;
   }
 
   const handleClick = () => {
-    const blockIdentifier = editor.getTextCursorPosition().block;
-    const currentBlockContent = blockIdentifier?.content as
-      | Array<ContentItem>
-      | undefined;
-
-    const [firstElement] = currentBlockContent || [];
-
-    if (firstElement === undefined) {
-      editor.openSuggestionMenu('/');
-    } else {
-      editor.openSuggestionMenu('/');
-      editor.sideMenu.unfreezeMenu();
+    const currentBlock = blockNoteEditor.getTextCursorPosition().block;
+    const blockContent = currentBlock?.content;
+
+    const isEmpty = Array.isArray(blockContent) && blockContent.length === 0;
+
+    if (isEmpty) {
+      editor.setTextCursorPosition(currentBlock);
     }
+
+    blockNoteEditor.getExtension(SuggestionMenu)?.openSuggestionMenu('/');
   };
+
   return (
     <Components.Generic.Menu.Item onClick={handleClick}>
       {children}

packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx

@@ -25,33 +25,26 @@ export const CustomSideMenu = ({ editor }: CustomSideMenuProps) => {
   const { t } = useLingui();
   return (
     <SideMenuController
-      sideMenu={(props) => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <SideMenu {...props}>
+      sideMenu={() => (
+        <SideMenu>
           <DragHandleButton
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            dragHandleMenu={(props) => (
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              <DragHandleMenu {...props}>
+            dragHandleMenu={() => (
+              <DragHandleMenu>
                 <CustomAddBlockItem editor={editor}>
                   <CustomSideMenuOptions
                     LeftIcon={IconPlus}
                     text={t`Add Block`}
                     Variant="normal"
                   />
                 </CustomAddBlockItem>
-                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                <BlockColorsItem {...props}>
+                <BlockColorsItem>
                   <CustomSideMenuOptions
                     LeftIcon={IconColorSwatch}
                     text={t`Change Color`}
                     Variant="normal"
                   />
                 </BlockColorsItem>
-                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                <RemoveBlockItem {...props}>
-                  {' '}
+                <RemoveBlockItem>
                   <CustomSideMenuOptions
                     LeftIcon={IconTrash}
                     text={t`Delete`}

packages/twenty-front/src/modules/blocknote-editor/components/CustomSlashMenu.tsx

@@ -33,7 +33,7 @@ export const CustomSlashMenu = ({
   const currentBlock = editor?.getTextCursorPosition()?.block;
   const blockType = currentBlock?.type;
   const headingLevel =
-    blockType === 'heading' ? (currentBlock?.props?.level as number) : null;
+    blockType === 'heading' ? Number(currentBlock?.props?.level) : null;
 
   const getOffsetValue = (placement: string) => {
     if (!placement.startsWith('top')) return 0;