W3C home > Mailing lists > Public > whatwg@whatwg.org > August 2011

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

From: Eric U <ericu@google.com>
Date: Tue, 2 Aug 2011 14:32:17 -0700
Message-ID: <CAHvSExcGJW1vU-Ncaam0cvY+kdHjC2GGnj-at9Xc9BE_PueJ4w@mail.gmail.com>
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
Received on Tuesday, 2 August 2011 14:32:17 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:35 UTC