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

Author: matthewlipski

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

@@ -23,9 +23,3 @@ 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`.

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,7 +20,7 @@ import {
 import { components } from "./components.js";
 import "./style.css";
 
-export const BaseBlockNoteView = <
+export const BlockNoteView = <
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
   SSchema extends StyleSchema,
@@ -71,14 +71,16 @@ export const BaseBlockNoteView = <
     [defaultColorScheme, theme],
   );
 
+  const mantineContext = useContext(MantineContext);
+
   const finalTheme =
     typeof theme === "string"
       ? theme
       : defaultColorScheme !== "no-preference"
         ? defaultColorScheme
         : "light";
 
-  return (
+  const view = (
     <ComponentsContext.Provider value={components}>
       <BlockNoteViewRaw
         data-mantine-color-scheme={finalTheme}
@@ -89,37 +91,23 @@ export const BaseBlockNoteView = <
       />
     </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>
-);
+  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>
+  );
+};