Skip to content

Conversation

matthewlipski
Copy link
Collaborator

This PR updates the Mantine version to v8. There are 2 notable changes with this:

  1. The Mantine CSS styles have been updated. The previous global.css has now been split into several files, from which we only need baseline.css. The styles from that file have been copied and scoped to .bn-mantine.
  2. There is now proper support for submenus, so our previous workaround has been removed.

Copy link

vercel bot commented Sep 23, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
blocknote Ready Ready Preview Sep 25, 2025 9:18am
blocknote-website Ready Ready Preview Sep 25, 2025 9:18am

Copy link

pkg-pr-new bot commented Sep 23, 2025

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2028

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2028

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2028

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2028

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2028

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2028

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2028

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2028

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2028

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2028

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2028

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2028

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2028

commit: d3db99d

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty straightforward! Nice

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to update the .bnblock config file or whatever it is called. So that pnpm run gen doesn't overwrite these changes

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it not correct as is? In the .bnexample.json file, I updated the Mantine package version under dependencies, which pnpm gen uses to update the dependencies in the corresponding package.json. Or am I misunderstanding?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah maybe I missed it then

@import url("@mantine/core/styles/TypographyStylesProvider.css");
@import url("@mantine/core/styles/Typography.css");

/* Mantine baseline styles, scoped to .bn-mantine element. */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure we don't need the other styles from global.css?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the global.css file does have some styling for focused elements, but they aren't necessary and in some cases where we use non-Mantine components (like regular divs with FloatingUI), they can look broken:

Default focus style:
Screenshot 2025-09-23 at 17 23 18

Mantine global focus style:
Screenshot 2025-09-23 at 17 23 34

The other styles in global.css are unused within BlockNote.

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me

* Added `withMantineProvider` prop

* Ran `pnpm gen`

* Made separate component instead of boolean flag

* Updated naming

* Made `BlockNoteView` render `MantineProvider` only if it's not already within a `MantineContext`
@matthewlipski matthewlipski merged commit eb3ee28 into main Sep 25, 2025
4 of 6 checks passed
@matthewlipski matthewlipski deleted the mantine-update-8 branch September 25, 2025 09:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants