feat: Mobile formatting toolbar demo

[matthewlipski]

Summary

This PR replaces the experimental mobile formatting toolbar example with a demo for an implementation that provides much smoother scrolling. The caveat is that it requires the document and document.body to not be scrollable.

This PR is not intended to be merged, only serving as a PoC.

Rationale

N/A

Changes

N/A

Impact

N/A

Testing

N/A

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	Actions	Updated (UTC)
blocknote	Ready	Preview	Aug 3, 2026 5:03pm
blocknote-website	Ready	Preview	Aug 3, 2026 5:03pm

[coderabbitai]

Important

Review skipped

Draft detected.

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: Pro Plus

Run ID: 2692885f-c46a-40a7-917a-9ad86166a2f3

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.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 03e86dd

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2939/
Built to branch gh-pages at 2026-08-03 17:07 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[nperez0111]

Is there a way to implement this such that it requires no changes to an existing application (i.e. not require a specific parent div)?

• If there is a way to do it, what are the pros/cons of it?
• If there is not a way to do it, can we somehow constrain this to only happen when the toolbar needs to be shown (so it doesn't impact the whole app the entire time, just during the formatting toolbar opening)? Like could we only lock the body when we need to?