TypeCellOS · matthewlipski · Sep 25, 2025 · Sep 23, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git 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`.
 
 <Example name="basic/minimal" />
+
+## 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/docs/package.json b/docs/package.json
@@ -140,4 +140,4 @@
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
   }
-}
+}
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
@@ -26,4 +26,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}
diff --git 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"
   }
-}
+}
diff --git 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"
   }
-}
+}
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
@@ -26,4 +26,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}
diff --git 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"
   }
-}
+}
diff --git 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"
   }
-}
+}
diff --git 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"
   }
-}
+}
diff --git 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"
   }
-}
+}
diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx
@@ -20,12 +20,7 @@ import {
 import { components } from "./components.js";
 import "./style.css";
 
-const mantineTheme = {
-  // Removes button press effect
-  activeClassName: "",
-};
-
-export const BlockNoteView = <
+export const BaseBlockNoteView = <
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
   SSchema extends StyleSchema,
@@ -85,25 +80,46 @@ export const BlockNoteView = <
 
   return (
     <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>
   );
 };
+
+export const BlockNoteView = <
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema,
+>(
+  props: Omit<
+    React.ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>,
+    "theme"
+  > & {
+    theme?:
+      | "light"
+      | "dark"
+      | Theme
+      | {
+          light: Theme;
+          dark: Theme;
+        };
+  },
+) => (
+  <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}
+  >
+    <BaseBlockNoteView {...props} />
+  </MantineProvider>
+);
diff --git 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);

diff --git 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",
-Original file line number
+Diff line change
@@ Expand Up / @@ -140,4 +140,4 @@ @@
         "y-partykit": "^0.0.33",
         "yjs": "^13.6.27"
       }
-    }
+    }