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
This commit is contained in:
Abdullah.
2026-02-27 13:16:49 +05:00
committed by GitHub
parent def5ea5764
commit 4ed09a3feb
26 changed files with 851 additions and 1220 deletions
@@ -1,6 +1,6 @@
import { getDefaultReactSlashMenuItems } from '@blocknote/react';
import { type SuggestionItem } from '@/blocknote-editor/components/CustomSlashMenu';
import { type SuggestionItem } from '@/blocknote-editor/types/types';
import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
import {
@@ -11,10 +11,15 @@ import {
IconH1,
IconH2,
IconH3,
IconH4,
IconH5,
IconH6,
IconHeadphones,
IconList,
IconListCheck,
IconListDetails,
IconListNumbers,
IconMinus,
IconMoodSmile,
IconPhoto,
IconPilcrow,
@@ -26,6 +31,14 @@ const Icons: Record<string, IconComponent> = {
'Heading 1': IconH1,
'Heading 2': IconH2,
'Heading 3': IconH3,
'Heading 4': IconH4,
'Heading 5': IconH5,
'Heading 6': IconH6,
'Toggle Heading 1': IconH1,
'Toggle Heading 2': IconH2,
'Toggle Heading 3': IconH3,
'Toggle List': IconListDetails,
Divider: IconMinus,
Quote: IconBlockquote,
'Numbered List': IconListNumbers,
'Bullet List': IconList,
@@ -41,10 +54,12 @@ const Icons: Record<string, IconComponent> = {
export const getSlashMenu = (editor: typeof BLOCK_SCHEMA.BlockNoteEditor) => {
const items: SuggestionItem[] = [
...getDefaultReactSlashMenuItems(editor).map((x) => ({
...x,
Icon: Icons[x.title],
})),
...getDefaultReactSlashMenuItems(editor)
.filter((item) => item.title !== 'File')
.map((x) => ({
...x,
Icon: Icons[x.title],
})),
{
title: 'File',
aliases: ['file', 'folder'],