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

[Eric U]

On Tue, Aug 2, 2011 at 2:17 PM, Ryosuke Niwa <rniwa at webkit.org> wrote:
> On Tue, Aug 2, 2011 at 1:51 PM, Eric U <ericu at google.com> wrote:
>>
>> I think the manual transaction is what I'd want to make undo/redo in
>> the edit menu work with jV
>> [https://addons.mozilla.org/en-US/firefox/addon/jv/]*.
>
> That's great to hear!  I've spent so much time reconciling the way managed
> transactions and manual transactions interact so it's good to know my work
> wasn't put into vain.
>>
>> It looks like using manual transactions would be the straightforward
>> way to make this work...I assume it could also be made to work with
>> managed transactions, but I'm having trouble picturing how that would
>> look from this early spec.  Perhaps you could add a little sample code
>> of an app making a number of small changes and merging them into a
>> single undo record after each?
>
> Sure. The following example will add two transactions each inserting "hello"
> and <br> before the selection anchor and groups them into one transaction
> group:
> myEditor.undoManager.transact(
>   new ManualTransaction(
>     function () {
>       this.text = document.createTextNode('hello');
>       this.nodeBefore = window.getSelection().anchorNode;
>       this.nodeBefore.parentNode.insertBefore(this.text, this.nodeBefore);
>     },
>     function () { this.text.parentNode.removeChild(this.text); },
>     function () { this.nodeBefore.parentNode.insertBefore(this.text,
> this.nodeBefore); })
>   );
> myEditor.undoManager.transact(
>   new ManualTransaction(
>     function () {
>       this.br = document.createElement('br');
>       this.nodeBefore = window.getSelection().anchorNode;
>       this.nodeBefore.parentNode.insertBefore(this.br, this.nodeBefore);
>     },
>     function () { this.br.parentNode.removeChild(this.br); },
>     function () { this.nodeBefore.parentNode.insertBefore(this.br,
> this.nodeBefore); }
>   ), true);

Ah, sorry--I wasn't clear.  How to do it with manual transactions was
pretty obvious.  That's one of the things I like about the API--it's
very straightforward.

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?

Thanks,

     Eric