Rich Text Toolbar

Preview in your theme

Wired to a real contenteditable — press Bold with text selected and it actually bolds. Every button prevents its own mousedown, so the click never blurs the editor and the selection survives; the pressed states are read back from queryCommandState as the caret moves. “Clear formatting” has no active field, so it gets no aria-pressed.

Release 4.2 ships the new command palette. Select any of this text and press a button — the toolbar never steals focus, so the selection survives the click.

Formatting applied here is real: execCommand runs against this element.

Overflow collapsing — drag the slider to change the container width. A ResizeObserver measures the groups with the collapse lifted, so whole groups fold into the “More” menu from the end and unfold again as room returns; there are no breakpoints. At 400px three of the four groups fit, at the narrowest setting only the first survives.

Container width400px actual

Toggles flip in place; the one-shot Insert commands report here — last one: none yet

variant="floating" size="sm" — pass anchorRect (a viewport-space rect, e.g. range.getBoundingClientRect()) and the bar portals to <body> with position: fixed, centred above the selection and flipping below when there is no room. Select text in the card, or use the button. Passing null hides it. With a selection, Alt+F10 in the editor focuses the bar and Escape returns to the editor.

Design review is blocked on the empty-state copy. Drag across any words here and the bar appears above them.

It is portalled to <body> with position: fixed, so this card's overflow-hidden cannot clip it.

Pressed and disabled — Undo/Redo enable themselves from a real history stack, and Sub/Superscript are disabled while the block is a heading. Disabled buttons keep aria-disabled instead of the disabled attribute, so arrow-key users can still reach them and hear why they are unavailable.

Block paragraph · marks bold, highlight · 0 undoable, 0 redoable

Eight groups, 24 buttons, size="sm" — the bar keeps as many whole groups as the width allows (six of eight at this column's width, with Insert and Cleanup in the menu; two of eight at 390px) and the rest live in the overflow menu, where every group keeps its label and every shortcut renders as kbd glyphs (⌘ on mac, Ctrl elsewhere). Tab reaches the bar once, then ←/→ walk it and Home/End jump to the ends.

Last command: none yet

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro