Selection Toolbar

A small toolbar that appears over text the moment it is selected, carrying your own actions: quote, copy, highlight, share, comment, define, translate, or "ask about this". Reach for it wherever the next thing a reader wants to do is about the words they just dragged across — a long-form article or documentation site, a proofreading or editorial review screen, an AI chat that quotes a passage back as the question, a knowledge base with highlights, a transcript or subtitle editor, a code or log viewer, a comments-on-text workflow. Three things it gets right that a hand-written version does not, each measured in a browser rather than assumed. First, it opens on selectionchange, not mouseup: a selection made with Shift and the arrow keys fires no mouseup at all (measured: five Shift+ArrowRight presses, zero mouseup events), so a mouseup toolbar is one keyboard users never see. It is not debounced either, because the browser already coalesces — three selection changes inside one task produced a single event, and a full click-drag produced three, so a debounce only makes the toolbar trail the highlight. Second, it is anchored to a line of the selection rather than to its bounding box: a selection spanning two lines returns one rect per line, and the union of those is the width of the column, so centring on it puts the toolbar over text the reader can see is not selected (measured: a selection whose visible first line started at x=101.8 had a union starting at x=29). Third, it keeps up with a selection inside a scrollable pane, because its scroll listener is in the capture phase — a nested scroller's scroll event does not bubble, and of a window-bubble, window-capture and document-bubble listener, only the capture one heard an inner pane scroll by 30px. It also refuses to open for text selected inside an <input> or <textarea>. That selection fires selectionchange and makes the document selection report the field's own text, while being collapsed and having no client rects — the trap that makes a naive toolbar flash over every search box with nowhere to point. Mousedown is prevented on the toolbar so the caret stays where it was: measured, pressing a button never destroyed the selection, but without the guard focus moved out of a contenteditable and onto the button. The selected text is captured when the toolbar opens rather than read in the click handler, because focusing an input wipes the document selection outright — so an action that opens a comment box would otherwise lose the thing it was about. Accessible by construction: a role="toolbar" with one tab stop and arrow-key movement between the actions, Escape to dismiss, focus-visible rings, labels for icon-only buttons, and shadcn tokens throughout so it follows the theme in light and dark. Optionally scoped to one element, so "quote this" is not offered for text selected in the site navigation. Common asks it answers: "selection toolbar react", "floating toolbar on text selection", "medium style highlight menu", "text selection popup react", "show a button when text is selected", "bubble menu without tiptap", "selection toolbar shadcn", "highlight text and show options", "quote selected text", "ask ai about the selected text", "react hook for window.getSelection", "useSelection hook", "position a popup over a text selection", "getClientRects multi-line selection", "selectionchange in react", "selection toolbar disappears when i click it", "keep focus in contenteditable when clicking a toolbar button", "text selection toolbar keyboard accessible", "shift arrow selection fires no mouseup", "selection toolbar inside a scrollable div", "toolbar drifts when the page scrolls".