Skip to content

feat: Mantine v8 upgrade #2028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 25, 2025
Merged

feat: Mantine v8 upgrade #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
589c6f2
Updated mantine
matthewlipski Sep 22, 2025
52e0fd9
Updated submenu code
matthewlipski Sep 22, 2025
7dedd5f
Small fixes
matthewlipski Sep 23, 2025
034ff21
Small fixes
matthewlipski Sep 23, 2025
6fa5f92
Small fix
matthewlipski Sep 23, 2025
d3db99d
Updated Mantine 8.3.2
matthewlipski Sep 24, 2025
b46968f
feat: Render Mantine `BlockNoteView` without `MantineProvider` (#2029)
matthewlipski Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"@liveblocks/react-blocknote": "3.7.1-tiptap3",
"@liveblocks/react-tiptap": "3.7.1-tiptap3",
"@liveblocks/react-ui": "3.7.1-tiptap3",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"@mui/icons-material": "^5.16.1",
"@mui/material": "^5.16.1",
"@polar-sh/better-auth": "^1.0.2",
Expand Down
2 changes: 1 addition & 1 deletion examples/03-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"Custom Schemas"
],
"dependencies": {
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
}
}
2 changes: 1 addition & 1 deletion examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@blocknote/shadcn": "latest",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/06-custom-schema/01-alert-block/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"Slash Menu"
],
"dependencies": {
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
}
}
2 changes: 1 addition & 1 deletion examples/06-custom-schema/01-alert-block/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@blocknote/shadcn": "latest",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/06-custom-schema/04-pdf-file-block/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"Slash Menu"
],
"dependencies": {
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
},
"pro": true
Expand Down
2 changes: 1 addition & 1 deletion examples/06-custom-schema/04-pdf-file-block/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@blocknote/shadcn": "latest",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/06-custom-schema/05-alert-block-full-ux/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"Slash Menu"
],
"dependencies": {
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
}
}
2 changes: 1 addition & 1 deletion examples/06-custom-schema/05-alert-block-full-ux/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@blocknote/shadcn": "latest",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"react-icons": "^5.2.1"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/01-minimal/.bnexample.json
View file
Open in desktop
Copy link
Contributor

@nperez0111 nperez0111 Sep 23, 2025

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

@matthewlipski matthewlipski Sep 23, 2025

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

@nperez0111 nperez0111 Sep 24, 2025

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

Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"tags": ["AI", "llm"],
"dependencies": {
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/groq": "^1.2.9",
"zustand": "^5.0.3"
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/01-minimal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/groq": "^1.2.9",
"zustand": "^5.0.3"
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/02-playground/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"tags": ["AI", "llm"],
"dependencies": {
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/google": "^1.2.20",
"@ai-sdk/openai": "^1.3.22",
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/02-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/google": "^1.2.20",
"@ai-sdk/openai": "^1.3.22",
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/03-custom-ai-menu-items/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"tags": ["AI", "llm"],
"dependencies": {
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.1.0",
"@ai-sdk/openai": "^1.1.0",
"@ai-sdk/groq": "^1.1.0",
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/03-custom-ai-menu-items/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.1.0",
"@ai-sdk/openai": "^1.1.0",
"@ai-sdk/groq": "^1.1.0",
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/04-with-collaboration/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"tags": ["AI", "llm"],
"dependencies": {
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/groq": "^1.2.9",
"y-partykit": "^0.0.25",
Expand Down
2 changes: 1 addition & 1 deletion examples/09-ai/04-with-collaboration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@blocknote/xl-ai": "latest",
"@mantine/core": "^7.17.3",
"@mantine/core": "^8.3.2",
"ai": "^4.3.15",
"@ai-sdk/groq": "^1.2.9",
"y-partykit": "^0.0.25",
Expand Down
6 changes: 3 additions & 3 deletions packages/mantine/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@
"dependencies": {
"@blocknote/core": "0.39.1",
"@blocknote/react": "0.39.1",
"@mantine/core": "^7.17.3",
"@mantine/hooks": "^7.17.3",
"@mantine/utils": "^6.0.21",
"@mantine/core": "^8.3.2",
"@mantine/hooks": "^8.3.2",
"@mantine/utils": "^6.0.22",
"react-icons": "^5.2.1"
},
"devDependencies": {
Expand Down
58 changes: 31 additions & 27 deletions packages/mantine/src/BlockNoteView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
useBlockNoteContext,
usePrefersColorScheme,
} from "@blocknote/react";
import { MantineProvider } from "@mantine/core";
import React, { useCallback } from "react";
import { MantineContext, MantineProvider } from "@mantine/core";
import React, { useCallback, useContext } from "react";
import {
applyBlockNoteCSSVariablesFromTheme,
removeBlockNoteCSSVariables,
Expand All @@ -20,11 +20,6 @@ import {
import { components } from "./components.js";
import "./style.css";

const mantineTheme = {
// Removes button press effect
activeClassName: "",
};

export const BlockNoteView = <
BSchema extends BlockSchema,
ISchema extends InlineContentSchema,
Expand Down Expand Up @@ -76,34 +71,43 @@ export const BlockNoteView = <
[defaultColorScheme, theme],
);

const mantineContext = useContext(MantineContext);

const finalTheme =
typeof theme === "string"
? theme
: defaultColorScheme !== "no-preference"
? defaultColorScheme
: "light";

return (
const view = (
<ComponentsContext.Provider value={components}>
<MantineProvider
theme={mantineTheme}
// Scopes Mantine CSS variables to only the editor, as proposed here:
// https://github.com/orgs/mantinedev/discussions/5685
cssVariablesSelector=".bn-mantine"
// This gets the element to set `data-mantine-color-scheme` on. This
// element needs to already be rendered, so we can't set it to the
// editor container element. Instead, we set it to `undefined` and set it
// manually in `BlockNoteViewRaw`.
getRootElement={() => undefined}
>
<BlockNoteViewRaw
data-mantine-color-scheme={finalTheme}
className={mergeCSSClasses("bn-mantine", className || "")}
theme={typeof theme === "object" ? undefined : theme}
{...rest}
ref={ref}
/>
</MantineProvider>
<BlockNoteViewRaw
data-mantine-color-scheme={finalTheme}
className={mergeCSSClasses("bn-mantine", className || "")}
theme={typeof theme === "object" ? undefined : theme}
{...rest}
ref={ref}
/>
</ComponentsContext.Provider>
);

if (mantineContext) {
return view;
}

return (
<MantineProvider
// Scopes Mantine CSS variables to only the editor, as proposed here:
// https://github.com/orgs/mantinedev/discussions/5685
cssVariablesSelector=".bn-mantine"
// This gets the element to set `data-mantine-color-scheme` on. This
// element needs to already be rendered, so we can't set it to the
// editor container element. Instead, we set it to `undefined` and set it
// manually in `BlockNoteViewRaw`.
getRootElement={() => undefined}
>
{view}
</MantineProvider>
);
};
79 changes: 34 additions & 45 deletions packages/mantine/src/mantineStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,62 +82,51 @@
@import url("@mantine/core/styles/Timeline.css");
@import url("@mantine/core/styles/Title.css");
@import url("@mantine/core/styles/Tooltip.css");
@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

@YousefED YousefED Sep 23, 2025

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

@matthewlipski matthewlipski Sep 23, 2025

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.

/* https://github.com/mantinedev/mantine/blob/8.3.1/packages/%40mantine/core/src/core/MantineProvider/baseline.css */
.bn-mantine {
color-scheme: var(--mantine-color-scheme);
}

/* Mantine global styles, scoped to bn-container */
/* Based on @mantine/core/styles/global.css
(src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
but with styles set on `body` and `html` instead set on `bn-container`, as
well as other minor changes. */
.bn-mantine *,
.bn-mantine :after,
.bn-mantine :before {
.bn-mantine *::before,
.bn-mantine *::after {
box-sizing: border-box;
}

/* Fonts are already set in `style.css`, so not needed here. */
/* .bn-mantine input,
.bn-mantine button,
.bn-mantine textarea,
.bn-mantine select {
text-transform: none;
}

@media screen and (max-device-width: 500px) {
.bn-mantine {
-webkit-text-size-adjust: 100%;
}
}

@media (prefers-reduced-motion: reduce) {
.bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
animation: none;
transition: none;
}
}
font: inherit;
} */

.bn-mantine [data-mantine-color-scheme="dark"] .mantine-dark-hidden,
.bn-mantine [data-mantine-color-scheme="light"] .mantine-light-hidden {
display: none;
}

.bn-mantine .mantine-focus-auto:focus-visible {
outline: calc(0.125rem * var(--mantine-scale)) solid
var(--mantine-primary-color-filled);
outline-offset: calc(0.125rem * var(--mantine-scale));
}

.bn-mantine .mantine-focus-always:focus {
outline: calc(0.125rem * var(--mantine-scale)) solid
var(--mantine-primary-color-filled);
outline-offset: calc(0.125rem * var(--mantine-scale));
.bn-mantine button,
.bn-mantine select {
text-transform: none;
}

.bn-mantine .mantine-focus-never:focus {
outline: none;
}
.bn-mantine {
/* Defaults for font, text color, etc are already set in `style.css` so they
aren't needed here. The `.bn-mantine` element also has a margin that we don't
want to remove, so that too is commented out (would normally just remove the
margin on `body`). */
/* margin: 0;
font-family: var(--mantine-font-family);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height);
background-color: var(--mantine-color-body);
color: var(--mantine-color-text); */

.bn-mantine .mantine-active:active {
transform: translateY(calc(0.0625rem * var(--mantine-scale)));
-webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
-moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}

.bn-mantine[dir="rtl"] .mantine-rotate-rtl {
transform: rotate(180deg);
@media screen and (max-device-width: em(500px)) {
.bn-mantine {
-webkit-text-size-adjust: 100%;
}
}
Loading
Loading