Pasting a large amount of text in a TextArea leads to a script execution timeout

Question

(Flex 3) I have a TextArea component which needs to hold the user's clipboard content. The TextArea does the job relatively well for most cases but when pasting a large amount of data, I can't seem to get the content in the component at all due to the script execution timeout.

I've done a fair deal on investigation to try and hopefully find how I could make this work. I found that the TextArea is using a IUITextField (which is in my case an instance of TextField at runtime) do handle the job of obtaining the pasting data and then throws an event when it is done.

I have found no way to take a look at the source of TextField as it is a class in the playerglobal.swc library.

Is there a way for me to maybe see the source of that class or is there something I'm missing in my approach to figure out a way to make this work?

P.S: I know there would be alternate way to achieve the results I'm looking for but I would like to make this particular solution work.

Answer 1

Since the TextField doesn't want to accept our paste event we will find someone else who will. Here is the mx:TextArea workaround:

MXML:

<mx:Canvas id="canvas" paste="pasteHandler(event)">
    <mx:TextArea id="textArea" textInput="if (event.text.length > 1) event.preventDefault();" 
     keyDown="keyDown(event)" mouseEnabled="false"/>
</mx:Canvas>

AS:

private function keyDown(event:KeyboardEvent):void{
    //When CTRL-V is pressed set focus to canvas
    if(event.keyCode==86 && event.ctrlKey)
        canvas.setFocus();
}

You also need enable the clipboard items on the Canvas's ContextMenu and reset focus to TextArea when finished with the paste.

Got the paste-blocking solution from: flex: how to prevent PASTE (ctrl+V) in a flex3 textinput?

Answer 2

This problem will often occur when large amounts of antialiased text are added to the display list. Once the text is rendered, everything is fine again. You can go around this problem, if you're handling predefined text, by splitting large portions of text into a lot of small ones, and adding them to the stage piece by piece (say, 20 lines of text at a time), waiting one frame between each, allowing the screen to refresh.

I haven't tried this yet, but I would suggest adding an event listener to the TextArea and checking on Event.RENDER, if the text was changed. If this is true, you could remove all text that was added since the last render event, and frame by frame re-add it much like in the example above.

Also, try using native instead of embedded fonts and switching off antialiasing, or reducing its quality.

Answer 3

Unfortunately, I think that you can't intercept all types of user input event on text fields using Flex 3.

If you can switch to Flex 4 (thus using the new FTE), then you should add a listener on the TextOperationEvent.CHANGING event , that is a cancellable event. In the handler, you could verify the amount of text that is being added and, if it is too much, cancel the event (event.preventDefault()) and add it in multiple frames.

The nice thing about this event is that it fires also for event such as "delete key pressed with selected text", or cut/copy/paste/delete operations. In fact, I use it to apply early validation to some kind of text fields, that I couldn't detect in any way with Flex 3.

EDIT

Maybe I found a solution.. I noticed that the "restrict" property, that allows to filter the characters allowed in a text field, is supported in the built-in TextField class, and it is not a feature added by the wrapping Flex component: interesting for our porpuse.

So I tried to play with it, and I discovered that setting restrict="" on your TextArea will prevent blocking the UI on paste of a large block of text, because it is applied "early" at the player level. The nice thing is that, even with this setting, the TextArea will still dispatch the textInput event, so you can monitor the paste event and decide what to do with the new text: update the text property in a single step, start an incremental update or just ignore the event.

Copy and paste the following code to see an example (tested with Flex 3.6 and Flash Player 11):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    minWidth="955" minHeight="600"
    layout="vertical"
    horizontalAlign="center">

    <mx:Script>
        <![CDATA[

            protected function generateClipboard():void {
                var largeData:String = "";
                while (largeData.length < 1000000) {
                    largeData += "Lorem ipsum ... ";
                }
                System.setClipboard(largeData);
            }

            protected function ontextarea1_textInput(event:TextEvent):void {
                if (event.text.length < 100) {
                    // NAIVE CODE: just to demonstrate that you can
                    // programmatically modify the text.. you should "merge"
                    // the new text with existing content here
                    textArea.text += event.text;
                } else {
                    // do something here, like starting
                    // to add text block by block in
                    // multiple frames
                }
            }

        ]]>
    </mx:Script>

    <mx:TextArea id="textArea" width="100%" height="100%" restrict="" textInput="ontextarea1_textInput(event)"/>

    <mx:Button click="generateClipboard()" label="Set clipboard"/>

</mx:Application>

The tricky part will be correctly set the text on the textInput event, and the "incremental" load of large text.

Answer 4

In the Spark TextArea the Paste Event fires correctly. There might be a cleaner way to do this but this is the solution I found.

MXML:

<s:TextArea id="textArea" changing="changeHandler(event)" 
paste="pasteHandler(event)" />

AS:

private var pastedText:String;
private var textPosition:int=0;
//Number of characters to read per frame
private var chunkSize:int=1000;

private function changeHandler(event:TextOperationEvent):void{
    if(String(event.operation)=="[object PasteOperation]"){
        event.preventDefault();
    }
}

private function pasteHandler(event:Event):void{
    pastedText = String(Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT));
    this.addEventListener(Event.ENTER_FRAME,frameHandler);
}

private function frameHandler(event:Event):void{
    if( textPosition + chunkSize > pastedText.length ){
        chunkSize = pastedText.length - textPosition;
        this.removeEventListener(Event.ENTER_FRAME,frameHandler);
    }
    textArea.text += pastedText.substr(textPosition,chunkSize);
    textPosition += chunkSize;
}

Answer 5

Its impossible with such large texts (you mentioned that the text is around 7MB).

If you look at the source of mx:TextArea, it inserts text simply be setting its TextField text property to the string you entered:
From TextArea.as around line 2050:

 if (textChanged || htmlTextChanged)
    {
        // If the 'text' and 'htmlText' properties have both changed,
        // the last one set wins.
        if (isHTML)
            textField.htmlText = explicitHTMLText;
        else
            textField.text = _text;

        textFieldChanged(false, true)

        textChanged = false;
        htmlTextChanged = false;
    }

If you make a sample app with a TextField and try to set its text property with a large string, you will get script timeouts. (i got timeout when i tried it with a string length of 1MB):

   import flash.text.TextField;
    tf = new TextField();
    addChild(tf);
    tf.multiline = true;
    tf.wordWrap = true;
    tf.width= 600
    tf.height = 500
    var str:String = "";
    for (var i:int=0; i<100000; i++) {
        str = str+"0123456789"
    }
    tf.text = str

This is the simplest possible way to display text, and it timeouts. Flex will try to do a dozen of more things with this textfield before laying out...so it will give up at much smaller size texts too.

The only possible solution is to make a custom textfield, and add the text gradually - Adobe recommends to use TextField.appendText():

import flash.text.TextField;
public function test(){
    tf = new TextField();
    addChild(tf);
    tf.multiline = true;
    tf.wordWrap = true;
    tf.width= 600
    tf.height = 500
    addEventListener(Event.ENTER_FRAME,onEF);
}

private var cnt:int = 0;

private function onEF(event:Event):void{
    if (cnt>200) return;
    trace (cnt);
    var str:String = "";
        //pasting around 50K at once seems ideal.
    for (var i:int=0; i<5000; i++) {
        str = str+"0123456789"
    }
    tf.appendText(str);
    cnt++;
}

This script manages to add 10MB of text into the TextField... although after adding 1MB it gets increasingly slower (it took around 1 sec for an iteration at the end). And if you try to do anything with this textfield (for example resizing, modifying text not with appendText(), adding it to the stage after its complete...) you will get script timeout.

So the complete solution is to capture the paste event canvas wrapper trick (William's solution), and then add the text gradually to a custom component, that uses appendText to add text. (use flash.text.TextField, and add it to the stage with mx_internal::$addChild() ). I have not tested, whether you can remove the resulting monstrosity with removeChild without triggering a script timeout :).