Inline edit boxPro

A document you select in and press Cmd K to edit with an instruction. The edit streams into the page where it will land, so you read it in context before you accept.

Markdown

On this page

ProA note to residents. Select a sentence, press Cmd K, and the friendlier version streams into the page to accept.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/inline-edit-box

Usage

tsx

import { InlineEditBox } from "@/components/ui/chatcn/pro/inline-edit-box"

<InlineEditBox
  value={doc}
  onValueChange={setDoc}
  onEdit={({ instruction, selection, before, after }, { signal }) =>
    rewrite({ instruction, selection, before, after }, { signal })
  }
/>

Select text and press Cmd K, or use the Edit chip that appears under a selection. With nothing selected, Cmd K takes the paragraph around the caret. The box opens under the selection, lined up with its start, and flips above when there is no room. onEdit receives the instruction, the selection and the text on either side, and returns the replacement as a promise or as a stream of chunks; the page shows the selection struck and the new words after it as they arrive. Accept puts the edit in and the new words fade from tinted to plain; Reject or Escape restores your selection; typing a new instruction asks for a different take, with the last one passed as previous.

Examples

States

ProAsking, writing, reviewing the edit in place, could not edit, empty, and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The document, controlled or not
`onEdit`	`(request, { signal }) => Promise<string> \| AsyncIterable<string>`	`request` has `instruction`, `selection`, `before`, `after`, `previous?`
`onAccept`	`({ start, end, text }) => void`	The range replaced and the new text
`defaultEdit`	`{ start, end, instruction?, result? }`	Open on a selection, or in review
`readOnly`	`boolean`	No typing; selecting and Cmd K still work
`disabled`, `placeholder`
`labels`	`Partial<InlineEditBoxLabels>`	Every string, for translation

Keyboard

Key	Action
Cmd K or Ctrl K	Edit the selection, or the paragraph at the caret
Enter	Send the instruction. In review with nothing typed, accept
Cmd Enter or Ctrl Enter	Accept the edit
Escape	Stop a running edit, reject a suggestion, or close the box

Accessibility

The box is a labelled dialog the document points to with aria-describedby; focus moves into it on open and back to the selection on close.
The page is a real textarea, so caret, selection, keyboard selection and spellcheck are native. During review it is read only so the range cannot drift.
The struck and added words are del and ins, with tint and strike as a backup to color. The error is an alert that says how to fix it.

Motion

The box enters from the selection at 0.97 scale and transparent in 150 ms. Streamed words append with no per word effect. After Accept the new words fade from the added tint to plain in 300 ms. Reduced motion: the box and the tint appear and go without movement or fades.