I built a lightweight track changes engine for contenteditable editors in vanilla JS. No dependencies, ~400 lines of code.
It uses the Myers diff algorithm (same as git diff) to compute the minimal edit script between the original and current text, then renders additions as <ins> and deletions as <del> inline - all inside the same editor.
Features:
- Word level and letter level (character) diffing
- Undo/redo with cursor position memory
- Clean preview toggle (strips deletions, shows final output)
- Punctuation-aware tokenizer (editing around periods/commas won't false-flag)
- Text-level operations for Enter/Backspace to keep the DOM predictable
I'm planning to ship this as a plugin for TinyMCE, Froala, Quill, and CKEditor — most of which offer track changes in premium tiers.
Would love feedback on the diff engine and the approach to cursor management in contenteditable (which was the hardest part by far).
umasood•17h ago
vikasbatra11•17h ago