Selection Actions

Usage

import { SelectionActions } from '@wdzyi/ui';

<SelectionActions
  text={draft}
  onAction={({ action, text, prompt }) => rewrite(action, text, prompt)}
  onChange={setDraft}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

textstring

The passage. A new one starts again.

onAction(request: SelectionActionsRequest) => string | Promise<string>

Makes an edit. It’s given the action’s id, or prompt, the picked text and anything typed, and gives back the new text, now or later.

onChange(text: string) => void

Called with the whole passage when an edit is kept.

actionsSelectionActionsItem[] = Improve, Shorten, Simplify, Proofread

Each has an id, a label, what it says while it works, and an icon drawn in strokes. The first two show at once, and the rest behind the chevron.

placeholderstring = 'Ask for an edit'

What the field in the bar says.

refRef<SelectionActionsHandle>

Gives select(start, end), to pick text by its offsets, and run(action), to start an edit from somewhere else.

Notes

• Dragging across the text picks it, rounded out to whole words. A click picks the sentence under it, and the arrow keys move the pick from one sentence to the next. Enter or Tab goes into the bar.
• The bar floats in a portal, so nothing can clip it. It sits under the last line of the pick, centred on all of it, and goes above when there’s no room below. Left waiting, it’s put away by a scroll. With an edit in it, it follows the text.
• It eases between widths as it goes from the edits to working to Keep and Discard, and the new words come in out of a blur, a word or two at a time.
• Escape puts it away and leaves the passage as it was. Focus moves on with each step, so a whole edit can be made from the keyboard.
• With reduced motion, the new text appears whole and the bar changes width at once.