Open feat: Update Mantine setup (#2033)

Author: matthewlipski

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