[whatwg] Fixing undo on the Web - UndoManager and Transaction

Ryosuke Niwa rniwa at webkit.org
Tue Aug 2 14:43:31 PDT 2011

On Tue, Aug 2, 2011 at 2:32 PM, Eric U <ericu at google.com> wrote:
> Could you add an example of the user typing e.g. "h"
> ... "e" ... "l" ... "l" ... "o", via an app that's doing the DOM
> modifications, using managed transactions, such that a browser
> undo/redo will act on the whole word "hello"?  It looks like you'd
> have an open transaction for a while, adding a letter at a time, and
> then you'd close it at some point?

For example,

myEditor.undoManager.transact(insertChar('h'), removeChar,
myEditor.undoManager.transact(insertChar('e'), removeChar,
reinsertChar('e'), true);
myEditor.undoManager.transact(insertChar('l'), removeChar, reinsertChar('l'),
myEditor.undoManager.transact(insertChar('l'), removeChar, reinsertChar('l'),
myEditor.undoManager.transact(insertChar('o'), removeChar, reinsertChar('o'),

where insertChar, removeChar, and reinsertChar are sensible DOM mutation
functions will insert 5 manual transactions in one transaction group.  The
idea is that you decide whether you want new transaction to be a part of the
last transaction or not.  If you want it to be, then merge=true and
merge=false otherwise.

Another example:

myEditor.undoManager.transact(insertChar('o'), removeChar,
myEditor.undoManager.transact(insertChar('k'), removeChar,
reinsertChar('k'), true);
myEditor.undoManager.transact(insertBR, removeBR, reinsertBR);
myEditor.undoManager.transact(insertChar('h'), removeChar, reinsertChar('h'),
myEditor.undoManager.transact(insertChar('i'), removeChar, reinsertChar('i'),

will insert two transactions that insert "o" and "k" as one transaction
group, and then three transactions that insert br, "h", and "i" as another
transaction group.  So when the first undo is executed, br and "hi" will be
removed (i.e. the last three transactions are unapplied), and the second
undo will remove "ok" (the first two transactions are unapplied).

- Ryosuke

More information about the whatwg mailing list