feat: Remove useRegisterPortalRoot from ShadCN

[matthewlipski]

Summary

Generally, the components in the ariakit, mantine, and shadcn packages that are used for the ComponentsContext are supposed to be "dumb" adapters for primitives like buttons, menus, etc. In #3046, this contract was broken somewhat as ShadCN components required the use of useEditorPortalElement. This is because unlike the other 2 UI libs, which render dropdowns as siblings of their trigger elements, ShadCN portals them to body by default. This doesn't work for us as that puts them outside container elements which provide additional theming and styling (basically the same issue #3046 addresses). Therefore, the default portal location was overridden to the return of useEditorPortalElement.

To ensure consistency across UI libs then, this PR makes it so that the portalRoot prop, which tells an Ariakit/Mantine/ShadCN component if & where it should portal its dropdown to, is always passed the element returned by useEditorPortalElement.

Additionally, the preventFocusOnOpen prop has been added. This is so that for mobile, we can disable dropdowns from grabbing focus from the editor on open, as this would close the virtual keyboard. But on desktop, this should be enabled for better accessibility. This was previously set based on if portalRoot was defined, which isn't quite right. Yes, it works in our case because the only time we'd actually set portalRoot was for the mobile formatting toolbar. But there is no direct correlation between a dropdown needing to be portalled, and preventing focus from moving to a dropdown on open, so these 2 concerns have been separated.

Rationale

See above.

Changes

See above.

Impact

N/A

Testing

E2E snapshots will need updates, but I'm holding off on this until we decide whether this change is smth we want.

Screenshots/Video

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: ea1b027b-767e-49b0-a5c7-41b2e1014309

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[vercel]

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

Project	Deployment	Actions	Updated
blocknote	Error		Sep 4, 2026 4:55pm UTC
blocknote-website	Error		Sep 4, 2026 4:55pm UTC

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@3054

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@3054

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@3054

@blocknote/diagram-block

npm i https://pkg.pr.new/@blocknote/diagram-block@3054

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@3054

@blocknote/math-block

npm i https://pkg.pr.new/@blocknote/math-block@3054

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@3054

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@3054

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@3054

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@3054

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@3054

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@3054

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@3054

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@3054

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@3054

commit: f69f5c9