TypeCellOS · matthewlipski · Sep 25, 2025 · Sep 23, 2025 · Sep 24, 2025 · Sep 24, 2025
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
@@ -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,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,
@@ -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>
+  );
 };
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"
       }
-    }
+    }