Selection toolbar

A floating toolbar over selected text with Ask, Rewrite, Explain and Copy. Ask turns it into a question field.

Markdown

On this page

Select text to Ask, Rewrite, Explain or Copy. Ask turns the toolbar into a question field.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/selection-toolbar.json

Usage

tsx

import { SelectionToolbar } from "@/components/ui/chatcn/selection-toolbar"

const ref = React.useRef<HTMLDivElement>(null)

<div ref={ref}>{answer}</div>
<SelectionToolbar
  target={ref}
  onAsk={(question, selection) => ask(question, selection.text)}
  onAction={(action, selection) => run(action, selection.text)}
/>

It works on any text: answers, reports or an editor. Placement is measured from the selection, centered above it and flipped below near the top of the viewport. While the Ask field has focus, the selection stays painted with the CSS Custom Highlight API.

Props

Prop	Type	Notes
`target`	`RefObject<HTMLElement>`	Selections inside it get the toolbar
`actions`	`SelectionToolbarAction[]`	`{ id, label, icon? }`. Defaults to Ask, Rewrite, Explain, Copy
`onAsk`	`(question, selection) => void`	Turns `ask` into a question field
`onAction`	`(action, selection) => void`	Every other action
`askPlaceholder`	`string`	Default Ask about this…
`minLength`	`number`	Ignore shorter selections. Default 2
`disabled`	`boolean`

The useChatcnCanvasSelection(ref) hook underneath returns the selection's text, range, rect and source, with dismiss, setFrozen and restore, for building your own floating UI.

Keyboard

Key	Action
`Shift` plus arrows	Select text. The toolbar shows instantly and follows
`Tab`	Move from the text into the toolbar
`ArrowLeft`, `ArrowRight`, `Home`, `End`	Move between actions
`Esc`, `Tab` in the toolbar	Back to the text with the selection restored
`Enter` in the Ask field	Ask. Ignored during IME composition

Accessibility

A toolbar with roving focus: one tab stop, arrow keys inside.
Keyboard selections announce that actions are available with Tab. Copy announces Copied.
Buttons keep the text selection alive by not taking it on mouse down.

Motion

After a pointer selection the toolbar comes in over 150 ms: opacity plus 4 px toward the text. It leaves over 110 ms.
Keyboard selections show and move it with no animation. Reduced motion keeps only the fade.