Pending editsPro

Visual edits made in the preview, collected as numbered markers on the page and one batch above the composer: review each before and after, undo one, discard all, or save them to code without spending credits.

Markdown

On this page

ProFour edits made in the preview, numbered on the page and listed above the composer. Undo one, discard all, or save them to code.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/pending-edits

Usage

tsx

import { PendingEditMarkers, PendingEdits } from "@/components/ui/chatcn/pro/pending-edits"

<PendingEditMarkers markers={markers} activeId={active} onActiveChange={setActive} />
<PendingEdits edits={edits} status={status} onSave={save} onDiscard={undo} onDiscardAll={clear} />

Put the markers in the positioned preview and the bar directly above your composer; with attached (default) its bottom corners square off to sit flush. Markers and rows share the same numbers and highlight each other through activeId.

Examples

States

ProCollapsed, seven edits expanded, saving, saved, and a failed save that says how to fix it.

Props

Prop	Type	Notes
`edits`	`PendingEdit[]`	`target`, `tag`, `property`, `from`, `to`, `kind` (`value`, `color`, `text`)
`status`	`"idle" \| "saving" \| "saved" \| "error"`	Saved shows `savedTo`; error shows `error` with Retry save
`onSave`, `onDiscard`, `onDiscardAll`, `onRetry`	functions
`expanded`, `defaultExpanded`, `onExpandedChange`	`boolean`	The list of edits
`activeId`, `onActiveChange`	`string \| null`	Synced with the markers
`note`	`ReactNode`	Line under the count
`PendingEditMarkers` `markers`	`{ id, rect, label }[]`	Rects relative to the preview

Keyboard

Key	Action
`Tab`	Through the count, Discard all, Save and each Undo
`Enter` `Space` on the count	Show or hide the list

Accessibility

The count is a disclosure button with aria-expanded. Each Undo names its edit, and markers are buttons named with their number and edit.
Color edits read out their values; before values are struck through and the arrow is read as to.
Saved is a status and a failed save is an alert that says how to fix it.

Motion

The list fades up 4 px over 180 ms and the chevron turns in 150 ms. Reduced motion keeps the fade.