Next editPro
The model's next edit as a ghost in the editor: a multi line completion after the cursor, or a change anywhere in the file with a jump marker. Tab jumps, Tab again accepts.
On this page
ProRename userId to accountId in the signature and the model suggests each call site in turn: Tab jumps to it, Tab again accepts, then a multi line follow up. Plays itself until you click into the editor.
Installation
Usage
import { NextEditGhost } from "@/components/ui/chatcn/pro/next-edit-ghost"
<NextEditGhost path="src/payouts/settle.ts" code={code} cursor={cursor} suggestion={next} onAccept={apply} />The free InlineSuggestion completes text at the end of a field. This one is for code: a complete suggestion continues at the cursor across lines, an edit replaces a line range anywhere. One line edits show word level red and green in place; longer ones show the old lines struck with the new ones under them. When the edit is out of view, a pill at the edge jumps to it.
Examples
States
ProA multi line completion at the cursor, a far edit out of view with the jump pill, a multi line replacement, thinking and suggestions off.
Props
| Prop | Type | Notes |
|---|---|---|
code, path, language | string | |
cursor | { line, column } | 1-based line, 0-based column |
suggestion | NextEdit | null | { kind: "complete", text } or { kind: "edit", startLine, endLine, text } |
pending | boolean | The next suggestion is on its way |
stage, onStageChange | "suggest" | "jumped" | Where a far edit stands |
onAccept | ({ code, cursor }) => void | The code after the edit; applyNextEdit does the same |
onDismiss | () => void | Esc |
disabled, height |
Keyboard
| Key | Action |
|---|---|
Tab | Jump to a far edit, then accept it |
Esc | Dismiss |
Accessibility
- The status bar is a polite live region that says what Tab will do and where the edit is.
- Ghost text is italic gray; removed words are struck and read removed, added words read suggested. Nothing relies on color alone.
Motion
None. Tab is pressed constantly, so jumps scroll instantly and edits land without animation.