feat: Mobile formatting toolbar (BLO-1292) #2939
+717
−358
There are no files selected for viewing
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
File renamed without changes.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # Mobile Formatting Toolbar | ||
|
|
||
| On mobile, BlockNote's default UI automatically shows a formatting toolbar pinned above the virtual keyboard - no setup needed. This example demos the opt-in, CSS-only "non-scrolling document" setup (locking `html`/`body` scroll and sizing a `.scroll-host` to the visual viewport), which keeps the toolbar smoothly pinned while scrolling. | ||
|
|
||
| **Relevant Docs:** | ||
|
|
||
| - [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar) | ||
| - [Editor Setup](/docs/getting-started/editor-setup) |
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
File renamed without changes.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import "@blocknote/core/fonts/inter.css"; | ||
| import { useCreateBlockNote } from "@blocknote/react"; | ||
| import { BlockNoteView } from "@blocknote/mantine"; | ||
| import "@blocknote/mantine/style.css"; | ||
|
|
||
| import "./style.css"; | ||
| import { StaticText, NavBar } from "./DummyUI"; | ||
|
|
||
| // Enough content that the editor actually overflows, so scrolling is testable. | ||
| const initialContent = [ | ||
| { type: "paragraph" as const, content: "Welcome to this demo!" }, | ||
| { | ||
| type: "paragraph" as const, | ||
| content: | ||
| "Select some text to bring up the toolbar, then scroll — it stays " + | ||
| "pinned above the keyboard because the document itself doesn't scroll.", | ||
| }, | ||
| ...Array.from({ length: 20 }, (_, i) => ({ | ||
| type: "paragraph" as const, | ||
| content: | ||
| `Filler paragraph ${i + 1}. Select some text here and bring up the ` + | ||
| "keyboard to see the toolbar sit above it.", | ||
| })), | ||
| ]; | ||
|
|
||
| export default function App() { | ||
| const editor = useCreateBlockNote({ initialContent }); | ||
|
|
||
| return ( | ||
| // To make the formatting toolbar scrolling smoother, we lock the `document.body` scrolling | ||
| // using CSS so we can use `position: fixed` on the toolbar. Therefore, we need to use a | ||
| // descendant element for scrolling. | ||
| <div className="scroll-host"> | ||
| <NavBar /> | ||
| <main className="app-main"> | ||
| <StaticText /> | ||
| {/* On mobile, the default UI automatically shows the mobile formatting | ||
| toolbar above the keyboard - no extra setup needed. */} | ||
| <BlockNoteView editor={editor} /> | ||
| <StaticText /> | ||
| </main> | ||
| </div> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| function HamburgerMenu() { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <div className="hamburger"> | ||
| <button | ||
| type="button" | ||
| className="hamburger-button" | ||
| aria-label="Menu" | ||
| aria-expanded={open} | ||
| onClick={() => setOpen((v) => !v)} | ||
| > | ||
| <span /> | ||
| <span /> | ||
| <span /> | ||
| </button> | ||
| {open && ( | ||
| <nav className="hamburger-menu"> | ||
| <a href="#">Home</a> | ||
| <a href="#">Documents</a> | ||
| <a href="#">Shared with me</a> | ||
| <a href="#">Settings</a> | ||
| </nav> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function NavBar() { | ||
| return ( | ||
| <header className="top-nav"> | ||
| <HamburgerMenu /> | ||
| <span className="top-nav-title">Lorem Ipsum</span> | ||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| /** A block of static page text, to sit around the editor. */ | ||
| export function StaticText() { | ||
| return ( | ||
| <section className="prose"> | ||
| <h2>Lorem Ipsum</h2> | ||
| <p> | ||
| Elit ipsum qui deserunt deserunt. Qui labore eu esse veniam excepteur. | ||
| Aute ipsum qui dolore in ipsum commodo adipisicing velit. Qui | ||
| consectetur et cupidatat consectetur sunt anim excepteur reprehenderit | ||
| sunt quis magna aliqua laborum. Lorem irure est ipsum ea nisi incididunt | ||
| culpa qui consequat eiusmod deserunt ipsum nostrud velit laboris. | ||
| </p> | ||
| <p> | ||
| Culpa quis id ipsum enim proident dolore non. Ad occaecat nostrud | ||
| eiusmod pariatur occaecat nisi voluptate nulla. Nisi quis ut esse ex | ||
| reprehenderit Lorem tempor ex tempor id sit officia. Commodo sunt sint | ||
| aliqua quis reprehenderit. Occaecat id ad dolor officia qui sunt dolor. | ||
| Consectetur magna excepteur in minim pariatur qui elit in sit consequat | ||
| aliquip voluptate laboris. Reprehenderit et eu dolor ex cupidatat aliqua | ||
| in elit anim eiusmod et adipisicing. Cupidatat fugiat fugiat amet duis. | ||
| </p> | ||
| <p> | ||
| Voluptate quis dolor ipsum commodo fugiat sit tempor tempor non aliqua | ||
| qui. Veniam consectetur mollit consequat exercitation sit ad. Lorem amet | ||
| deserunt qui sint et. Sint aute cillum aliqua pariatur cillum id. | ||
| Consectetur proident Lorem qui laborum id in sit. Aute aute irure nisi | ||
| est veniam Lorem. Anim labore irure ut sit mollit velit et duis veniam | ||
| ipsum aliquip. | ||
| </p> | ||
| <p> | ||
| Occaecat dolore excepteur qui proident laborum. Dolor deserunt cillum | ||
| veniam nulla minim eu in est aute nulla anim incididunt ea. Anim aliquip | ||
| aute duis aliqua eu pariatur est dolor magna Lorem dolore do sunt | ||
| aliquip est. Laborum pariatur fugiat do reprehenderit tempor cupidatat | ||
| proident ipsum ad dolor laboris. | ||
| </p> | ||
| </section> | ||
| ); | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* Fixed-height, internally scrollable editor — a nested scroll container inside | ||
| the page's `.scroll-host`, to check nested scrolling works. */ | ||
| .bn-container { | ||
| height: 300px; | ||
| border: 1px solid #e0e0e0; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .bn-editor { | ||
| height: 100%; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| /* --- App shell (see DemoChrome) --- */ | ||
|
|
||
| .top-nav { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 20; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 12px; | ||
| height: 48px; | ||
| padding: 0 12px; | ||
| background: #1a1a1a; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .top-nav-title { | ||
| font: 600 15px/1 sans-serif; | ||
| } | ||
|
|
||
| .hamburger { | ||
| position: relative; | ||
| } | ||
|
|
||
| .hamburger-button { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 5px; | ||
| width: 44px; | ||
| height: 44px; | ||
| margin: -10px; | ||
| padding: 0; | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
matthewlipski marked this conversation as resolved.
|
||
|
|
||
| .hamburger-button span { | ||
| display: block; | ||
| width: 22px; | ||
| height: 2px; | ||
| border-radius: 1px; | ||
| background: #fff; | ||
| } | ||
|
|
||
| .hamburger-menu { | ||
| position: absolute; | ||
| top: calc(100% + 8px); | ||
| left: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-width: 180px; | ||
| padding: 8px; | ||
| background: #fff; | ||
| color: #111; | ||
| border-radius: 8px; | ||
| box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); | ||
| } | ||
|
|
||
| .hamburger-menu a { | ||
| display: flex; | ||
| align-items: center; | ||
| min-height: 44px; | ||
| padding: 8px 10px; | ||
| color: inherit; | ||
| text-decoration: none; | ||
| border-radius: 6px; | ||
| } | ||
|
|
||
| .hamburger-menu a:hover { | ||
| background: #f0f0f0; | ||
| } | ||
|
|
||
| .app-main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| max-width: 720px; | ||
| margin: 0 auto; | ||
| padding: 16px; | ||
| } | ||
|
|
||
| .prose h2 { | ||
| margin: 0 0 8px; | ||
| font: 600 18px/1.2 sans-serif; | ||
| } | ||
|
|
||
| .prose p { | ||
| margin: 0 0 8px; | ||
| font: 14px/1.6 sans-serif; | ||
| color: #333; | ||
| } | ||
|
|
||
| /* A top-level wrapper div is the scroll container (the document itself doesn't | ||
|
Collaborator
There was a problem hiding this comment. move up, because this is the actual fix |
||
| scroll — `html`/`body` are locked with `overflow: hidden` above), pinned to | ||
| the visual viewport rectangle via the `--bn-vv-*` variables the mobile | ||
| toolbar controller publishes, so it sits directly above the keyboard on iOS — | ||
| where the layout viewport doesn't resize and can be left with a nonzero | ||
| `offsetTop`. */ | ||
| .scroll-host { | ||
|
Collaborator
There was a problem hiding this comment. We could consider shipping this class with BlockNote, so implementors only need to add a single class to their existing DOM? wdyt? |
||
| position: fixed; | ||
| top: var(--bn-vv-top, 0px); | ||
| left: var(--bn-vv-left, 0px); | ||
| width: var(--bn-vv-width, 100vw); | ||
| height: var(--bn-vv-height, 100dvh); | ||
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| /* Stop overscroll at the boundary from chaining to the document. Without | ||
| this, dragging past the bottom on iOS rubber-bands the whole page, which | ||
| shifts the visual viewport (repinning the host mid-bounce → jitter) and | ||
| surfaces a second, document-level scrollbar. */ | ||
| overscroll-behavior: contain; | ||
| } | ||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the hamburger menu required for testing / demonstrational purposes?
if so, let's change to "some", "dummy", "buttons" or similar to clarify these menus are fake and people don't think they're broken