Selection toolbar

2026-08

Selection toolbar

Select any words and a formatting bar floats above the selection. The controls format the real text and reflect its current state.

Why

A floating toolbar over selected text is in every editor and most get it subtly wrong: the positioning, tracking the selection, the button state, keeping the selection alive after a click. I wanted to get it right, not fake it.

Try it

Select a run of text. The bar appears above it and follows the selection, flipping below when there is no room. Bold, italic, underline, strike, size, weight, color, highlight, and alignment all change the real text and light up to match. Shortcuts work too, and on small screens the extras fold into a menu.

How it is built

The text is a contenteditable region. On each selection change I position the bar off the range's bounding rectangle. Bold and friends go through the document commands so their state reads back with queryCommandState; size, weight, and color wrap the range in a managed span. The real trick: every control cancels its own mousedown, so the selection stays put and commands stack without reselecting.

// Position the bar off the live selection rectangle.
const rect = range.getBoundingClientRect()
let top = rect.top - barHeight - 10       // above the selection
if (top < 2) top = rect.bottom + 10       // flip below near the top

The Ask AI pill is a non-active affordance, not a fake response, and reduced motion drops the spring for a plain fade.