From 73931cc9bae914dc06fc71a2b168360e8be05859 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 23 Sep 2025 18:36:57 +0200 Subject: [PATCH 1/5] Added `withMantineProvider` prop --- packages/mantine/src/BlockNoteView.tsx | 36 ++++++++++++++++---------- packages/mantine/src/style.css | 8 +++++- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index 09948c3ab9..7f29f2abc3 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -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, @@ -42,9 +37,11 @@ export const BlockNoteView = < light: Theme; dark: Theme; }; + } & { + withMantineProvider?: boolean; }, ) => { - const { className, theme, ...rest } = props; + const { className, theme, withMantineProvider, ...rest } = props; const existingContext = useBlockNoteContext(); const systemColorScheme = usePrefersColorScheme(); @@ -83,10 +80,27 @@ export const BlockNoteView = < ? defaultColorScheme : "light"; + const view = ( + + ); + + if (withMantineProvider === false) { + return ( + + {view} + + ); + } + return ( undefined} > - + {view} ); diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css index c97e713432..8c9c2be3c0 100644 --- a/packages/mantine/src/style.css +++ b/packages/mantine/src/style.css @@ -3,6 +3,11 @@ /* Mantine base styles*/ +/* Removes Mantine active styles */ +.bn-mantine .mantine-active:active { + transform: none; +} + /* Mantine Badge component base styles */ .bn-mantine .mantine-Badge-root { background-color: var(--bn-colors-tooltip-background); @@ -38,7 +43,8 @@ } /* Mantine Menu component base styles */ -.bn-mantine .mantine-Menu-dropdown { +.bn-mantine .mantine-Menu-dropdown, +.bn-mantine .bn-menu-dropdown { background-color: var(--bn-colors-menu-background); border: var(--bn-border); border-radius: var(--bn-border-radius-medium); From 145ca1b69277752ab736f2f3d13189d378403e84 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 24 Sep 2025 11:56:04 +0200 Subject: [PATCH 2/5] Ran `pnpm gen` --- docs/package.json | 2 +- .../package.json | 2 +- .../06-custom-schema/01-alert-block/package.json | 2 +- .../04-pdf-file-block/package.json | 2 +- .../05-alert-block-full-ux/package.json | 2 +- examples/09-ai/01-minimal/package.json | 2 +- examples/09-ai/02-playground/package.json | 2 +- .../09-ai/03-custom-ai-menu-items/package.json | 2 +- .../09-ai/04-with-collaboration/package.json | 2 +- playground/src/examples.gen.tsx | 16 ++++++++-------- 10 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/package.json b/docs/package.json index 2f0d32ccd9..f3b187a93f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -140,4 +140,4 @@ "y-partykit": "^0.0.33", "yjs": "^13.6.27" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json index f75f779b5c..7d28e02765 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json @@ -26,4 +26,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/01-alert-block/package.json b/examples/06-custom-schema/01-alert-block/package.json index cd052badbc..436274fd5c 100644 --- a/examples/06-custom-schema/01-alert-block/package.json +++ b/examples/06-custom-schema/01-alert-block/package.json @@ -26,4 +26,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/04-pdf-file-block/package.json b/examples/06-custom-schema/04-pdf-file-block/package.json index 34431972e7..efa4f81848 100644 --- a/examples/06-custom-schema/04-pdf-file-block/package.json +++ b/examples/06-custom-schema/04-pdf-file-block/package.json @@ -26,4 +26,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/05-alert-block-full-ux/package.json b/examples/06-custom-schema/05-alert-block-full-ux/package.json index 2cdb8ac432..fffb43e270 100644 --- a/examples/06-custom-schema/05-alert-block-full-ux/package.json +++ b/examples/06-custom-schema/05-alert-block-full-ux/package.json @@ -26,4 +26,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/01-minimal/package.json b/examples/09-ai/01-minimal/package.json index b4305dcf23..78957c9886 100644 --- a/examples/09-ai/01-minimal/package.json +++ b/examples/09-ai/01-minimal/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/02-playground/package.json b/examples/09-ai/02-playground/package.json index ddd11a96cc..3e8f2880cb 100644 --- a/examples/09-ai/02-playground/package.json +++ b/examples/09-ai/02-playground/package.json @@ -34,4 +34,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/03-custom-ai-menu-items/package.json b/examples/09-ai/03-custom-ai-menu-items/package.json index e3abe3eb84..681aa35934 100644 --- a/examples/09-ai/03-custom-ai-menu-items/package.json +++ b/examples/09-ai/03-custom-ai-menu-items/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/04-with-collaboration/package.json b/examples/09-ai/04-with-collaboration/package.json index 7825bec420..a5dee74797 100644 --- a/examples/09-ai/04-with-collaboration/package.json +++ b/examples/09-ai/04-with-collaboration/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index 2928ad3acf..8fce984f51 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -417,7 +417,7 @@ "Custom Schemas" ], "dependencies": { - "@mantine/core": "^7.17.3", + "@mantine/core": "^8.3.2", "react-icons": "^5.2.1" } as any }, @@ -1142,7 +1142,7 @@ "Slash Menu" ], "dependencies": { - "@mantine/core": "^7.17.3", + "@mantine/core": "^8.3.2", "react-icons": "^5.2.1" } as any }, @@ -1216,7 +1216,7 @@ "Slash Menu" ], "dependencies": { - "@mantine/core": "^7.17.3", + "@mantine/core": "^8.3.2", "react-icons": "^5.2.1" } as any, "pro": true @@ -1245,7 +1245,7 @@ "Slash Menu" ], "dependencies": { - "@mantine/core": "^7.17.3", + "@mantine/core": "^8.3.2", "react-icons": "^5.2.1" } as any }, @@ -1576,7 +1576,7 @@ ], "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" @@ -1603,7 +1603,7 @@ ], "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", @@ -1635,7 +1635,7 @@ ], "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", @@ -1664,7 +1664,7 @@ ], "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", From 89c4adab96ada564eaff7409fc85d83d8f8468ae Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 24 Sep 2025 11:56:39 +0200 Subject: [PATCH 3/5] Made separate component instead of boolean flag --- docs/content/docs/getting-started/mantine.mdx | 6 ++ packages/mantine/src/BlockNoteView.tsx | 76 ++++++++++--------- 2 files changed, 48 insertions(+), 34 deletions(-) diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx index 293b21af4b..11aa489a96 100644 --- a/docs/content/docs/getting-started/mantine.mdx +++ b/docs/content/docs/getting-started/mantine.mdx @@ -23,3 +23,9 @@ bun add @blocknote/core @blocknote/react @blocknote/mantine To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`. + +## Usage within a Mantine app + +By default, the [`BlockNoteView`](/docs/getting-started/editor-setup#render-the-editor) component from `@blocknote/mantine` will be wrapped in a [`MantineProvider`](https://mantine.dev/theming/mantine-provider/) context. However, if you're already using Mantine for your application UI, this context will already be provided. + +Therefore, `@blocknote/mantine` also includes a `BlockNoteViewNoProvider` component which expects to be rendered in an existing `MantineProvider` context and does not include its own. It takes the same props as the regular `BlockNoteView`. diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index 7f29f2abc3..0632383f50 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -20,7 +20,7 @@ import { import { components } from "./components.js"; import "./style.css"; -export const BlockNoteView = < +export const BlockNoteViewNoProvider = < BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema, @@ -37,11 +37,9 @@ export const BlockNoteView = < light: Theme; dark: Theme; }; - } & { - withMantineProvider?: boolean; }, ) => { - const { className, theme, withMantineProvider, ...rest } = props; + const { className, theme, ...rest } = props; const existingContext = useBlockNoteContext(); const systemColorScheme = usePrefersColorScheme(); @@ -80,38 +78,48 @@ export const BlockNoteView = < ? defaultColorScheme : "light"; - const view = ( - - ); - - if (withMantineProvider === false) { - return ( - - {view} - - ); - } - return ( - undefined} - > - {view} - + ); }; + +export const BlockNoteView = < + BSchema extends BlockSchema, + ISchema extends InlineContentSchema, + SSchema extends StyleSchema, +>( + props: Omit< + React.ComponentProps>, + "theme" + > & { + theme?: + | "light" + | "dark" + | Theme + | { + light: Theme; + dark: Theme; + }; + }, +) => ( + undefined} + > + + +); From 7cfdd687486e68a2f518ecdf559a9315044eb97a Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 24 Sep 2025 12:16:44 +0200 Subject: [PATCH 4/5] Updated naming --- docs/content/docs/getting-started/mantine.mdx | 2 +- packages/mantine/src/BlockNoteView.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx index 11aa489a96..e460644c30 100644 --- a/docs/content/docs/getting-started/mantine.mdx +++ b/docs/content/docs/getting-started/mantine.mdx @@ -28,4 +28,4 @@ To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/m By default, the [`BlockNoteView`](/docs/getting-started/editor-setup#render-the-editor) component from `@blocknote/mantine` will be wrapped in a [`MantineProvider`](https://mantine.dev/theming/mantine-provider/) context. However, if you're already using Mantine for your application UI, this context will already be provided. -Therefore, `@blocknote/mantine` also includes a `BlockNoteViewNoProvider` component which expects to be rendered in an existing `MantineProvider` context and does not include its own. It takes the same props as the regular `BlockNoteView`. +Therefore, `@blocknote/mantine` also includes a `BaseBlockNoteView` component which expects to be rendered in an existing `MantineProvider` context and does not include its own. It takes the same props as the regular `BlockNoteView`. diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index 0632383f50..ceef860d50 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -20,7 +20,7 @@ import { import { components } from "./components.js"; import "./style.css"; -export const BlockNoteViewNoProvider = < +export const BaseBlockNoteView = < BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema, @@ -120,6 +120,6 @@ export const BlockNoteView = < // manually in `BlockNoteViewRaw`. getRootElement={() => undefined} > - + ); From aa94d728276fa79bbc0470bf368c0f5dcf03a9fa Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 24 Sep 2025 16:46:29 +0200 Subject: [PATCH 5/5] Made `BlockNoteView` render `MantineProvider` only if it's not already within a `MantineContext` --- docs/content/docs/getting-started/mantine.mdx | 6 -- packages/mantine/src/BlockNoteView.tsx | 62 ++++++++----------- 2 files changed, 25 insertions(+), 43 deletions(-) diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx index e460644c30..293b21af4b 100644 --- a/docs/content/docs/getting-started/mantine.mdx +++ b/docs/content/docs/getting-started/mantine.mdx @@ -23,9 +23,3 @@ bun add @blocknote/core @blocknote/react @blocknote/mantine To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`. - -## Usage within a Mantine app - -By default, the [`BlockNoteView`](/docs/getting-started/editor-setup#render-the-editor) component from `@blocknote/mantine` will be wrapped in a [`MantineProvider`](https://mantine.dev/theming/mantine-provider/) context. However, if you're already using Mantine for your application UI, this context will already be provided. - -Therefore, `@blocknote/mantine` also includes a `BaseBlockNoteView` component which expects to be rendered in an existing `MantineProvider` context and does not include its own. It takes the same props as the regular `BlockNoteView`. diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index ceef860d50..37f40a1728 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -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, @@ -20,7 +20,7 @@ import { import { components } from "./components.js"; import "./style.css"; -export const BaseBlockNoteView = < +export const BlockNoteView = < BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema, @@ -71,6 +71,8 @@ export const BaseBlockNoteView = < [defaultColorScheme, theme], ); + const mantineContext = useContext(MantineContext); + const finalTheme = typeof theme === "string" ? theme @@ -78,7 +80,7 @@ export const BaseBlockNoteView = < ? defaultColorScheme : "light"; - return ( + const view = ( ); -}; -export const BlockNoteView = < - BSchema extends BlockSchema, - ISchema extends InlineContentSchema, - SSchema extends StyleSchema, ->( - props: Omit< - React.ComponentProps>, - "theme" - > & { - theme?: - | "light" - | "dark" - | Theme - | { - light: Theme; - dark: Theme; - }; - }, -) => ( - undefined} - > - - -); + if (mantineContext) { + return view; + } + + return ( + undefined} + > + {view} + + ); +};