Flex 4 TextArea: automatic character escaping in HTML/TextFlow links

Question

I'm using the Spark's TextArea that contains links like this:

<a href="https://twitter.com/search?q=%23hashtag" target="_blank">#hashtag</a>

As you can see, this is a link to the Twitter search page for the specific hashtag. The hash-sign must be escaped in the query string. But, I have a problem here: when I click the link, the '%' symbol gets escaped automatically and the URL becomes corrupted (...search?q=%2523hashtag). Can I turn off this automatic escaping?

The '#' sign, if used in the URL, does not become escaped, and therefore the Twitter page does not open correctly in this case. So I cannot use neither '#' nor '%23' in the URL.

I would appreciate any solution for this. Thank you.

Answer 1

Ok... so far, I couldn't find a way to turn off the automatic escaping of the URL when it's clicked. But I've found the workaround instead.

Basically, I add a custom click handler to all the link elements inside the TextFlow and open the links manually when clicked (instead of a built-in TLF behavior). Like this:

public function addLinkHandler( textFlowOrGroupElement: FlowGroupElement ): void
{
    // scan the flow elements
    for ( var f1: int = 0; f1 < textFlowOrGroupElement.numChildren; f1 ++ ) {
        // found element
        var curFlowGroupElement: FlowElement = textFlowOrGroupElement.getChildAt( f1 );

        // if this is the link element, add the click event listener
        if ( curFlowGroupElement is LinkElement ) {
            ( curFlowGroupElement as LinkElement ).addEventListener( FlowElementMouseEvent.CLICK, onLinkClick );
        }
        // if this is another flow group
        else if ( curFlowGroupElement is FlowGroupElement ) {
            // scan this group in turn, recursively
            addLinkHandler( curFlowGroupElement as FlowGroupElement );
        }
    }

}

and here is the click handler for the links:

public function onLinkClick( e: FlowElementMouseEvent ): void
{
    e.stopImmediatePropagation();
    e.preventDefault();

    var linkElement: LinkElement = e.flowElement as LinkElement;

    navigateToURL( new URLRequest( linkElement.href ), '_blank' );
}

So in the end to make the Twitter-hashtag links work correctly in the TextArea, I do this:

addLinkHandler( textArea.textFlow );

P.S. The algorithm of adding the click handlers is based on this post, but optimized.