docs: name the mobile toolbar layouts + add layout toggle to the example - #2985
Merged
matthewlipski merged 2 commits intoAug 20, 2026
Merged
Conversation
Introduce "scrolling document" (default) vs "pinned scroll container" (opt-in) as the names for the two page layouts the mobile formatting toolbar supports, and restructure the docs section around them. - Docs: simple-first rewrite of the Mobile Formatting Toolbar section (default layout, then the opt-in layout with its two CSS rules). - Example: stop embedding it in the docs (`docs: false`) - its page-level CSS (html/body overflow, full-viewport fixed scroll host, `.prose` rules) leaks into the docs page since examples render inline. Link to the standalone playground example instead. - Example: add a nav-bar switch that toggles the pinned scroll container layout via a class on <html>, so both layouts can be compared. - Playground: `.mantine-AppShell-root` width 100vw -> 100%, which caused a horizontal scrollbar on any example taller than the viewport. - Align README, JSDoc and example comments with the new naming; regenerate examples.gen.tsx.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/diagram-block
@blocknote/mantine
@blocknote/math-block
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
|
matthewlipski
left a comment
matthewlipski
left a comment
Collaborator
There was a problem hiding this comment.
Good changes, left 2 comments
matthewlipski
approved these changes
Aug 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #2939, targeting its branch. Docs/example-only — no behavior changes in
@blocknote/react(two JSDoc comments reworded).Why
The opt-in "smooth scrolling" setup was described three different ways (the docs called it a "workaround", the code comments "non-scrolling document", the example
.scroll-host), which made the docs section hard to follow. This PR gives the two page layouts names and restructures the section around them:html/bodylocked, a container pinned to the visual viewport scrolls instead, toolbar is truly fixed."Pinned scroll container" names the one thing the host app has to add; "locked document" would name the precondition instead, and "jank-free mode" the outcome.
Changes
Docs –
formatting-toolbar.mdxSimple-first rewrite of Mobile Formatting Toolbar: intro (on by default on touch devices, nothing to set up) → two-bullet summary naming both layouts →
### Scrolling document→### Pinned scroll containerwith the same two CSS rules as before, the--bn-vv-*vars (now also listing--bn-vv-scale) and the actionable trade-off (pull-to-refresh etc.). Headings give stable anchors (#scrolling-document,#pinned-scroll-container).The embedded example broke the docs page →
docs: falseThe docs render examples inline (
dynamic()import, no iframe), so this example's page-level CSS leaked into the docs page:html, body { overflow: hidden }, the full-viewportposition: fixed.scroll-host,.bn-container { height: 300px }(hits the other two examples on the page) and.prose h2/p(collides with fumadocs' typography class). On the #2939 Vercel preview the lorem ipsum and demo editor are fixed over the prose and the page can't scroll.Since a pinned-scroll-container layout inherently owns the whole page, it can't be embedded. Following the
editor-scrollable/comments.mdxprecedent, the example is nowdocs: falseand the docs link tohttps://playground.blocknotejs.org/ui-components/mobile-formatting-toolbar?hideMenu=true. If you'd rather keep an embed, it needs an iframe-based one.Example – layout toggle
A "Pinned scroll container" switch in the demo nav bar toggles the layout so both can be compared on a device. It's pure CSS:
App.tsxtoggles apinned-scroll-containerclass on<html>(on<html>rather than<body>so the lock rule can scope bothhtmlandbodywithout:has()), andstyle.cssscopes the two rules under it, labelled "step 1" / "step 2". Defaults to on; comments say a real app applies the rules unconditionally. Verified in iPhone emulation: class/overflow/positionflip correctly and the toolbar still lands above the keyboard with the host resized to the visual viewport.Known/inherent: with the playground menu visible, the full-viewport fixed
.scroll-hostsits under the playground sidebar (hence?hideMenu=truein the docs link).Playground –
.mantine-AppShell-root { width: 100vw }→100%Separable.
100vwincludes the vertical scrollbar, so any playground example taller than the viewport shows a horizontal scrollbar with classic/always-visible scrollbars (this example exposes it when the toggle is off; pinned mode only masks it because the document can't scroll). Reproduced with real scrollbars (clientWidth1265 vsscrollWidth1280) and verified fixed.Housekeeping
MobileFormattingToolbarController/useVirtualKeyboard, and example comments aligned with the naming (also fixes the staleDemoChrome→DummyUI.tsxreference).examples.gen.tsxregenerated viavp run gen— it was already stale vs. the example README on the branch.Verification
node docs/validate-links.mjs→ 0 errors; docs page renders (200) with the new anchors, no overlay.pnpm run lintclean.🤖 Generated with Claude Code