feat: Render Mantine BlockNoteView without MantineProvider (#2029)

* Added `withMantineProvider` prop

* Ran `pnpm gen`

* Made separate component instead of boolean flag

* Updated naming

* Made `BlockNoteView` render `MantineProvider` only if it's not already within a `MantineContext`

Author: matthewlipski

docs/package.json

@@ -140,4 +140,4 @@
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
   }
-}
+}

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"
   }
-}
+}

examples/06-custom-schema/01-alert-block/package.json

@@ -26,4 +26,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/06-custom-schema/04-pdf-file-block/package.json

@@ -26,4 +26,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

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"
   }
-}
+}

examples/09-ai/01-minimal/package.json

@@ -29,4 +29,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/09-ai/02-playground/package.json

@@ -34,4 +34,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/09-ai/03-custom-ai-menu-items/package.json

@@ -31,4 +31,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/09-ai/04-with-collaboration/package.json

@@ -31,4 +31,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

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>
+  );
 };