<pacem-history> gives any value an undo and a redo: bind it to the state, call undo() and redo(). Editors, configurators, "deleted · undo" toasts: wherever a user may change their mind.

<pacem-history id="history" state="{{ #title.value, twoway }}"></pacem-history>

<pacem-button disabled="{{ !#history.canUndo }}" on-click="#history.undo()">undo</pacem-button>

Usage

Record. Every new state is a step. Bind it two-way to the thing you track: undo and redo write the restored value back to it.

Move. undo() and redo() step through; canUndo and canRedo tell when they can (bind your buttons' disabled to them). reset() forgets the steps and keeps the current state; maxlength caps how many steps are kept.

React. Each move fires its own event (push, undo, redo, reset), with state, canUndo and canRedo in its detail.

Steps are told apart by value for plain values, by reference for objects and arrays: give the history a new object (or array) per change, never the same one edited in place.

Bound to a field, every keystroke is a step. Set a debounce on the field (e.g. debounce="600") and each pause in the typing becomes one step instead.

Examples

Undo, a sentence at a time

The field is debounced: type, pause, type again, then undo. Each pause is one step.

"Deleted · Undo"

Delete a message, then change your mind: every delete is a new array, so the history can bring the old one back.