Inline text diff
The agent's edits to a piece of copy, accepted or rejected one by one.
A piece of copy with the agent's edits marked inline — the old words struck, the suggestion added.
Each edit opens a small toolbar to accept or reject it, and the header takes the rest all at
once. An edit the agent isn't sure of is tinted and shows a note above its buttons. Once every edit
is decided, the buttons give way to a short doneLabel.
PickChoose a plan that fits your teamgrows with your studio. Every plan includescomes with unlimited projects, and you can cancel at any timeyour first month is free.
Usage
<!-- include core.css + inline-text-diff.css -->
<div data-c="inline-text-diff">
<div class="itd panel">
<div class="itd-h">
<div class="itd-ht"><b>Pricing intro</b><span class="muted itd-st">4 edits to review</span></div>
<div class="itd-a">
<button class="pill ghost sm itd-no">Reject all</button>
<button class="pill primary sm itd-ok">Accept all</button>
</div>
</div>
<p class="itd-t"><!-- plain text with <span class="itd-c"><del>old</del><ins>new</ins></span> edits --></p>
<p class="itd-f muted" aria-live="polite"></p>
<div class="itd-bar" role="dialog" aria-label="Edit"><!-- Accept / Reject --></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | What the copy is, like "Pricing intro". |
parts | TextPart[] | The copy in order: plain strings, with the edits between them. |
decisions | Record<string, EditDecision> | Controlled map of what was decided for each edit, by key. Leave an edit out while it waits. |
defaultDecisions | Record<string, EditDecision> | The uncontrolled initial decisions. |
onDecisionsChange | (decisions) => void | Called whenever the decisions change, with the full map by key. |
doneLabel | string | The line that replaces the buttons once every edit is decided. |
labels | { accept?; reject?; acceptAll?; rejectAll? } | Overrides for the button labels. |
TextEdit.from | string | The words the copy has now, shown struck. |
TextEdit.to | string | The words the agent suggests instead. |
TextEdit.note | string | Why the agent isn't sure of this one; the edit is marked and the note shows above its buttons. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The struck
and added words tint from the --dm-del and --dm-add tokens, an unsure edit uses the --dm-warn
tokens, and the toolbar sits on a raised surface with the pop shadow — so it all reads against the
dark stage; in Soft the card and its pills are rounder.