Flex TextArea Track Changes, highlight

Last week I was given an assignment to provide highlight effect on certain text ranges in a flex text area. The purpose of this was to first allow a highlighting certain words as spelling mistakes and second to allow highlighting added and deleted text ranges. The spelling checker. The idea of highlighting a text range is not new, its basically finding the position of the first and last character in a range. Getting their boundary rectangles and the reset is just graphics. I developed three basic highlighting effects
1. The normal text background highlight
2. The strike-through highlight
3. The spelling mistake highlight like that of Microsoft word


The biggest challenge was to find a way to allow the user to edit the textarea and keep track of all changes to the positioning of the highlights. I started with the TextInput event handling and adding the size of the text inserted to all boundaries and redrawing. This worked but then I noticed this event does not support backspace or delete. I wasn't also sure it handled copy,cut , paste. The change event doesn't give any indication of what change is being done nor its location in the text. Here I was stuck.

Then I went on investigating an idea of wrapping selections with a specific tag like "span" and setting its class attribute or id attribute to a description of the selection like "key=added&id=10". But when setting the html text it gets reevaluated and so any unknown tags are cleared.
I also tried to use empty tags like to wrap boundaries. Again the dummy htmltext property clears and empty tags. I didn't want to fall back to adding square brackets in those tags so finally I settled to the following:
a. Spelling mistakes: search for words and highlight whenever a change in text occurs
b. Add and Delete: assuming they never overlap, I wrapped them in link with href="event:key-add". I handled the link event and stoped propagation.

To optimize even further I included a timer to validate so as multiple changes result in one update to the textarea. So far it works but i know there is room for some further improvement.

I also added function to select next spelling mistake or next change(added/deleted). Furthermore as seen in the snapshot above, spelling errors can be provided with a list of suggested keywords to replace the clicked word.

Source may be downloaded from http://code.google.com/p/flexlighter/