feat: Update Mantine setup

docs/content/docs/getting-started/mantine.mdx

@@ -9,17 +9,27 @@ imageTitle: Mantine rich text editor using BlockNote
 [Mantine](https://mantine.dev/) is an open-source collection of React components.
 
 ```console tab="npm"
+npm install @mantine/core @mantine/hooks @mantine/util
 npm install @blocknote/core @blocknote/react @blocknote/mantine
 ```
 
 ```console tab="pnpm"
+pnpm add @mantine/core @mantine/hooks @mantine/util
 pnpm add @blocknote/core @blocknote/react @blocknote/mantine
 ```
 
 ```console tab="bun"
+bun add @mantine/core @mantine/hooks @mantine/util
 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`.
 
+<Callout type={"info"}>
+ If your application already uses Mantine UI, you should use the
+ `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains
+ the styles added by BlockNote on top of the Mantine core styles, whereas
+ `@blocknote/mantine/style.css` includes both.
+</Callout>
+
 <Example name="basic/minimal" />

docs/package.json

@@ -41,6 +41,8 @@
  "@liveblocks/react-tiptap": "3.7.1-tiptap3",
  "@liveblocks/react-ui": "3.7.1-tiptap3",
  "@mantine/core": "^8.3.2",
+ "@mantine/hooks": "^8.3.2",
+ "@mantine/utils": "^6.0.22",
  "@mui/icons-material": "^5.16.1",
  "@mui/material": "^5.16.1",
  "@polar-sh/better-auth": "^1.0.2",

packages/mantine/package.json

@@ -43,9 +43,14 @@
  "require": "./dist/blocknote-mantine.cjs"
  },
  "./style.css": {
- "import": "./dist/style.css",
- "require": "./dist/style.css",
- "style": "./dist/style.css"
+ "import": "./src/style.css",
+ "require": "./src/style.css",
+ "style": "./src/style.css"
+ },
+ "./blocknoteStyles.css": {
+ "import": "./src/blocknoteStyles.css",
+ "require": "./src/blocknoteStyles.css",
+ "style": "./src/blocknoteStyles.css"
  }
  },
  "scripts": {
@@ -58,9 +63,6 @@
  "dependencies": {
  "@blocknote/core": "0.39.1",
  "@blocknote/react": "0.39.1",
- "@mantine/core": "^8.3.2",
- "@mantine/hooks": "^8.3.2",
- "@mantine/utils": "^6.0.22",
  "react-icons": "^5.2.1"
  },
  "devDependencies": {
@@ -78,6 +80,9 @@
  "vite-plugin-externalize-deps": "^0.8.0"
  },
  "peerDependencies": {
+ "@mantine/core": "^8.3.2",
+ "@mantine/hooks": "^8.3.2",
+ "@mantine/utils": "^6.0.22",
  "react": "^18.0 || ^19.0 || >= 19.0.0-rc",
  "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc"
  },

packages/mantine/src/BlockNoteView.tsx

@@ -18,7 +18,6 @@ import {
  Theme,
 } from "./BlockNoteTheme.js";
 import { components } from "./components.js";
-import "./style.css";
 
 export const BlockNoteView = <
  BSchema extends BlockSchema,
@@ -98,9 +97,10 @@ export const BlockNoteView = <
 
  return (
  <MantineProvider
- // Scopes Mantine CSS variables to only the editor, as proposed here:
- // https://github.com/orgs/mantinedev/discussions/5685
- cssVariablesSelector=".bn-mantine"
+ // By default, Mantine adds its CSS variables to the root. This disables
+ // that, as we instead set the variables on `.bn-mantine` in
+ // `mantineStyles.css`.
+ withCssVariables={false}
  // 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