Selection Toolbar

Floating toolbar for text selection actions and formatting.

Installation

Props

SelectionToolbar

Floating formatting toolbar for editable text with the same Iconiq selection tracking, button shell, and reveal motion layered over Radix UI toolbar primitives.

containerRefReact.RefObject<HTMLElement | null>

Required

Ref pointing at the editable container whose text selection should drive the toolbar. Selections outside this element immediately hide the toolbar.

Uses Radix toolbar root and button primitives while keeping the same selectionchange tracking, mousedown command behavior, and visible shell as the core component.

Formatting actions still run on mousedown so the current browser selection is preserved while bold, italic, or underline is applied.

Active states are still read from document.queryCommandState for the same three formatting commands the toolbar exposes.

Positioning and editing behavior

The toolbar positions itself from the live range rectangle returned by the browser selection API and applies formatting through the native rich-text command pipeline.

The toolbar is still portaled to document.body and positioned from the live range rectangle returned by the Selection API.

The visible reveal keeps the same fixed-position translate and scale transition as the core selection toolbar component.

The current implementation still depends on document.execCommand for inline formatting, which keeps the install surface lightweight for native contentEditable text.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-toolbar, lucide-react.

Installs a Radix-backed selection toolbar with the same containerRef API and the same visible toolbar shell as the core component.

Keeps the original fixed-position reveal, native rich-text commands, and editable-surface scoping behavior intact.

The generated registry file is /r/r-selection-toolbar.json.