fix: shadowdom support and example

[YousefED]

Summary

Support for using BlockNote in shadowdom was broken due to usage of document.queryselector

Rationale

n/a

Changes

• fix support by using .closest
• add example (to playground, not to website), to simplify future testing

Impact

n/a

Testing

manual

Screenshots/Video

n/a

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

n/a

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
blocknote	Ready	Preview	Dec 3, 2025 2:56pm
blocknote-website	Ready	Preview	Dec 3, 2025 2:56pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 0ed0119

[nperez0111]

Any other usage we should be aware of?

[YousefED]

Any other usage we should be aware of?

I didn't find any other breaking functionality. Checked explicitly for usage of document.queryselector*).

In general, we should be careful with any document. and window. calls (also because of usage in server-side environments of course). (cc @matthewlipski )

Unfortunately I don't think it's easy to enforce this with eslint

[matthewlipski]

R.e. e2e failures, wait for #2231 to be merged since that fixes them. Nothing major, the custom block e2e tests just use different URLs which aren't appended with the hideMenu query, so the sidebar gets shown in their screenshots. That means adding unrelated examples will cause the screenshot comparison to fail.