Undo/redo for flex textField.

(click on the image to see demo video, source won’t be available for that it’s a client project, IP reserved)

As most of you know, undo/redo had long been part of the basic user experience all users would expect for pretty much every apps out there, let alone in a full-fledged RIA these days (hey “rich” ain’t there in RIA for nothing !), but this is not the case for flex/flash apps,

I’ve been wanting this for quite sometime now, to be precise, ever since flex first come out a couple of years ago I’ve been thinking why there’s no undo/redo capability for all the textfield-based component (TextInput, TextArea and RichTextEditor, that is).

and fortunately enough recently a client asked for this feature added to the app I’m working on, so I got a chance to finally have it implemented.

*Basic features include

-built against flash.text.TextField, so all text components in flex framework supported.

-has built-in UndoManager but user could supply custom UndoManager too, as long as it implements IUndoManager. (who doesn’t ?)

-unlimited level of undo and redo

-undo by single character (TextMate any one ? or a stream of words (a.k.a normal mode)

-correctly handle delete and backspace keys for mac

-support built-in RichTextEditor, hence all text format modifications could be handled too

-handles right-click context menu (“Cut” and “Paste”) in AIR.

-easy to use, var tm:TextManager = new TextManager( tf ); one line of code and it could undo/redo everything.

-support double-byte languages like Chinese, Korean and Japanese (this is not really a feature for that flash player support unicode natively

*Some of the problems I ran into include

1. there’s no easy way to handle cut and paste short cut keys within browser, cmd-X and cmd-V will be “eaten” by containing browser, under Stand Alone player case, the player shell will eat the event, I know this could be dealt with old-school javascript tricks but I would rather refrain from going that direction because then developers will have to remember adding that piece of junk js to the browser and handle ExternalInterface.

After playing with various keyboard events finally I find a way to handle cut and paste with a combination of key events, all native flash player event hence no js, no interface, no nothing, just drop the swf in there and magic happens.

2. right-click menu
Seems to me there’s NO WAY to handle “Cut” and “Paste” menu command in browser version, and worst yet, there’s no way to disable the menu (in flash player 10 there’s ContextMenu.clipboardMenu = false, but, it’s not applicable to textField, ouch !). I could just have my finger crossed and hope user won’t be using that right click menu.

Good news is it could be handled correctly in AIR, and better yet, the project I’m working on, is an AIR app

3. I tried to have it implemented in a strict MVC way, but the traditional textfield in flash player 9 didn’t provide some of the low-level functionalities I need, so a bunch of quick hacks were threw in, but good thing is the new text engine in flash player 10 looks real promising, let alone the Text Layout Framework(TLF), I’m looking forward to work on that sooner than later.

*What’s next ?

Some people asked is it possible to turn this into a full-blown text editor, sure you can, but there’s already Buzzword and Google Docs providing such services, and like a 1000+ editors on the desktop ( TextMate, TextWrangler, Smultron, EmEditor, NotePad++, to name a few), so I don’t really see the value in creating such thing, but I could be wrong, if so, please kindly let me know !