Problems with inlinegraphics in richeditabletext in flash player 10.1

[9208349234]

Hi,

I've remarked a strange behaviour with fp 10.1 and TLF. If I create a TLF Textflow programmatically with an embedded inlinegraphicselement and set the richeditabletext so that i can select text (to copy it via a context menu), the image will disappear as soon as i click into the richeditable text.

Here's A snippet:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               >
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.InlineGraphicElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TextFlow;
            
            [Embed(source="bullet.png")]
            [Bindable]
            public static var bigBulletCls:Class;
            
            private function createTLF():TextFlow{
                var tf:TextFlow = new TextFlow();
                var s:SpanElement;
                var p:ParagraphElement;
                var img:InlineGraphicElement;
                
                img = new InlineGraphicElement();
                img.source = bigBulletCls;
                p = new ParagraphElement();
                p.paragraphStartIndent = 15;
                p.paragraphSpaceBefore = 15;
                p.textIndent = -13;
                p.addChild(img);
                s=new SpanElement();
                s.text='test';
                p.addChild(s);
                tf.addChild(p);
                /*img = new InlineGraphicElement();
                img.source = "bullet.png";
                p = new ParagraphElement();
                p.paragraphStartIndent = 15;
                p.paragraphSpaceBefore = 15;
                p.textIndent = -13;
                p.addChild(img);
                s=new SpanElement();
                s.text='test';
                p.addChild(s);
                tf.addChild(p);*/
                return tf;
            }
            
        ]]>
    </fx:Script>
        <fx:Metadata>
    </fx:Metadata>
    <s:VGroup mouseEnabled="true">
                <s:RichEditableText id="frontText" 
                                    width="580"  
                                    lineBreak="toFit" left="0" right="0" top="0" bottom="0"  
                                    paddingRight="0" 
                                    editable="false" mouseChildren="false" mouseEnabled="true" 
                                    focusEnabled="false" textFlow="{createTLF()}" 
                                    >
                </s:RichEditableText>
    </s:VGroup>
</s:Application>

I've investigated a bit more, and have noticed that if only one inlinegraphicelement is included that loads a non-embedded graphics (i.e. assign a path-string to the source attribute), then no images disappear upon entering the richeditabletext... (see the commented part in the above example)

Is that somehow a bug? I would like to have all my graphics included, so that nothing but the swf has to be deployed...

[dave_cragg]

No help I'm afraid, but I just noticed something similar.

I find if the InlineGraphicElement is inserted to the parent ParagraphElement using myParagragraphElement.addChildAt(), then it will not disappear when clicking in the RichEditabeText. (I use this approach to allow inserting bullets during editing )

But if the TextFlow is built using TextFlowUtil.importFromString(flowString), and then the source of any inlineGraphicElements in the textFlow is set after, then the problem you describe occurs.  (I use this approach when laying out the content from a saved source )

1. This seems to work:

var peCur:ParagraphElement = functionThatReturnsSelectedParagraphElement();

...

var ige:InlineGraphicElement = new InlineGraphicElement();

ige.styleName = "bulletImage";

ige.source = new bulletGraphic();

peCur.addChildAt(0,ige);

2. This doesn't (but it did before)

var tf:TextFlow = TextFlowUtil.importFromString(flowString);

var bulletFlowArray:Array = tf.getElementsByStyleName("bulletImage");

for each (var ig:InlineGraphicElement in bulletFlowArray)

{

    ig.source = new bulletGraphic();

}

I'd thought the problem may have been introduced with the recent version of the Text Layout Framework that comes with Flex SDK 4.1, but as you mentioned Flash Player 10.1, I guess that might be it. In my case it would be AIR 2.

[rdermer]

This is a TLF bug.  It's fixed in our 2.0 code.  The bug in the original post reproduces in TLF 1.0 and TLF 1.1.

I can workaround it like this (I tried this in 1.1 but not 1.0):

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               >
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.InlineGraphicElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TextFlow;
           
            [Embed(source="../bin/smiling.png")]
            [Bindable]
            public static var bigBulletCls:Class;
           
            private function createTLF():TextFlow{
                var tf:TextFlow = new TextFlow();
                var s:SpanElement;
                var p:ParagraphElement;
                var img:InlineGraphicElement;
               
                img = new InlineGraphicElement();
                img.source = bigBulletCls;
                p = new ParagraphElement();
                p.paragraphStartIndent = 15;
                p.paragraphSpaceBefore = 15;
                p.textIndent = -13;
                p.addChild(img);
                s=new SpanElement();
                s.text='test';
                p.addChild(s);
                tf.addChild(p);
               
                /*img = new InlineGraphicElement();
                img.source = bullet.png;
                p = new ParagraphElement();
                p.paragraphStartIndent = 15;
                p.paragraphSpaceBefore = 15;
                p.textIndent = -13;
                p.addChild(img);
                s=new SpanElement();
                s.text='test';
                p.addChild(s);
                tf.addChild(p);*/
                return tf;
            }
           
            public function handlerCreationComplete(elem:RichEditableText):void
            {
                elem.textFlow = createTLF();
                elem.selectRange(0,0);
                elem.selectRange(-1,-1);
            }
           
        ]]>
    </fx:Script>
    <fx:Metadata>
    </fx:Metadata>
    <s:VGroup mouseEnabled="true">
        <s:RichEditableText id="frontText"
                            width="580" 
                            lineBreak="toFit" left="0" right="0" top="0" bottom="0" 
                            paddingRight="0"
                            editable="false" mouseChildren="false" mouseEnabled="true"
                            focusEnabled="false" creationComplete="handlerCreationComplete(frontText)"
                            >
        </s:RichEditableText>
    </s:VGroup>
</s:Application>

Richard

[dave_cragg]

Thanks for that, Richard. It helped me find a fix.