Editor Tracked Changes Profile Block for React

Edit CHUNKS (the paragraph in order, as plain text and as places where an edit sits) and EDITS (each one's kind, its number and the wording before and after; an insertion has an empty before and a deletion an empty after). The clean copy, its word count, the counts in the foot and the lists are all worked out from them, so nothing is typed twice. Keep a space inside the changed wording, as in Word, so a rejected insertion leaves no double space.

The paragraph as it reads with the edits you have accepted. A rejected edit is put back as it was written, and an edit still to decide also keeps its original wording until you decide, which the line under the copy says. Its word count is counted from the text, and an unseen copy of the longest version holds the panel's height, so deciding never moves the controls below.

All of it. The decisions live in the page and nothing is saved or sent. In your own app send each decision to the document you are editing, and treat Accept all and Reject all as one change with an undo.

Each edit says what it is three ways: its tag in the text, the line through or under the wording, and a word and a glyph in the list. The text reads "Deleted" or "Inserted" before each changed phrase for a screen reader, and each pair of buttons is a named group, Decision for edit 1, whose buttons say Accept edit 1 and Reject edit 1. Both buttons can be pressed off, which puts the edit back to still to decide. The status line is a polite live region present from the start.

The credits wrap under the name, the paragraph keeps its sheet and each edit's buttons sit under its change. The foot's two buttons share one row. The text and the clean copy keep their height as you decide.