KQ-555 · SELECT/BAR

Select Bar

A format bar that rises out of the selection. Selecting words lifts the toolbar above them on recoil, positioned from the selection's own rectangle and clamped to the passage; it glides sideways when the selection moves and fades on the exit ease when it collapses. Formatting is range wrapping rather than execCommand, and the bar is a role=toolbar with a roving tabindex where Left and Right step the buttons and Escape drops it.

KQ-555 · SELECT/BAR

Gaugeworks 3.1 moves calibration off the handset and onto the rig, so a technician can sign a sensor off without waiting for the bench. Select any words in this paragraph to raise the format bar.

Select words to raise the bar

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/select-bar

Props

actions: ("bold" | "italic" | "link" | "code")[]; default ["bold", "italic", "link"]; Buttons on the bar.
children: React.ReactNode; default —; The editable content; it is seeded once and then owned by the editor.
onChange: (html: string) => void; default —; Fires after an action, with the editor's HTML.
onAction: (action: SelectAction) => void; default —; Fires with the action that was applied.
label: string; default "Editable passage"; Accessible name for the editable region.

Prop	Type	Default	Description
actions	("bold" \| "italic" \| "link" \| "code")[]	["bold", "italic", "link"]	Buttons on the bar.
children	React.ReactNode	—	The editable content; it is seeded once and then owned by the editor.
onChange	(html: string) => void	—	Fires after an action, with the editor's HTML.
onAction	(action: SelectAction) => void	—	Fires with the action that was applied.
label	string	"Editable passage"	Accessible name for the editable region.