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

[Ryosuke Niwa]

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,
reinsertChar('h'));
myEditor.undoManager.transact(insertChar('e'), removeChar,
reinsertChar('e'), true);
myEditor.undoManager.transact(insertChar('l'), removeChar, reinsertChar('l'),
true);
myEditor.undoManager.transact(insertChar('l'), removeChar, reinsertChar('l'),
true);
myEditor.undoManager.transact(insertChar('o'), removeChar, reinsertChar('o'),
true);

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,
reinsertChar('o'));
myEditor.undoManager.transact(insertChar('k'), removeChar,
reinsertChar('k'), true);
myEditor.undoManager.transact(insertBR, removeBR, reinsertBR);
myEditor.undoManager.transact(insertChar('h'), removeChar, reinsertChar('h'),
true);
myEditor.undoManager.transact(insertChar('i'), removeChar, reinsertChar('i'),
true);

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