feat: Render Mantine BlockNoteView without MantineProvider

[matthewlipski]

This PR changes the Mantine BlockNoteView to check if it's being rendered within an existing MantineContext. If it isn't, it wraps the editor in a MantineProvider. Otherwise, it just renders the editor.

I've changed how the Mantine active styles are reset too (using CSS instead of Mantine theme) so that in case a MantineContext is found, the theme set on it doesn't affect BlockNote's styles.

Closes #1555

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
blocknote	Ready	Preview	Sep 24, 2025 2:51pm
blocknote-website	Ready	Preview	Sep 24, 2025 2:51pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2029

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2029

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2029

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2029

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2029

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2029

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2029

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2029

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2029

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2029

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2029

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2029

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2029

commit: aa94d72

[matthewlipski]

@nperez0111 any suggestions for how to name the component? I think BlockNoteViewNoProvider is not great but not sure what to change it with since it should still be specific in what it does imo.

[nperez0111]

@matthewlipski, BlockNoteViewRaw, CustomBlockNoteView maybe?

I prefer naming things as what they are, instead of naming them as what they are not 😂

[nperez0111]

Actually, I just thought of something @matthewlipski, I think that may be able to use the provider if it exists by calling:

import { MantineContext } from "@mantine/core";
const hasContextSet = useContext(MantineContext)
if (hasContextSet) {
  return // simple render
} else {
  return // wrap with a provider
}

Because Mantine has a default value of null (https://github.com/mantinedev/mantine/blob/81e38bc8e3894c433f065557df60db5691aaf131/packages/%40mantine/core/src/core/MantineProvider/Mantine.context.ts#L25) we can easily tell whether the project already has a Mantine context set or not, and branch based on that. So maybe it can "just work" for the dev without having to use a separate component.

Maybe this is worth exploring?

[nperez0111]

EASY!