3 Replies Latest reply on Mar 17, 2011 5:14 AM by Cedmo55

    TLF: Automatically bounces image URLs to lower case?

    rfkrocktk

      I have a nasty problem with TLF. I store user messages on my server in HTML by using the TextConverter API to export all of my textflow objects to HTML. When I retrieve messages from the server, I convert them back from HTML into a textflow using the TextConverter API.

       

      Importing HTML back into TextFlow breaks everything. All of my <img> source properties (src) are bounced to lowercase, breaking many of my images. This example demonstrates the problem:

       

      <?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" xmlns:local="*"
                backgroundColor="#DDDDDD">
           
           <s:VGroup width="100%" height="100%" horizontalAlign="center"
                     verticalAlign="middle">
                <s:Group>
                     <s:Rect width="100%" height="100%"
                               radiusX="10" radiusY="10">
                          <s:fill>
                               <s:SolidColor color="#FFFFFF"/>
                          </s:fill>
                          <s:filters>
                               <s:DropShadowFilter color="#000000"
                                    quality="2" angle="90" strength="0.4"/>
                          </s:filters>
                     </s:Rect>
                     <s:VGroup width="500" left="10" right="10" top="10"
                               bottom="10">
                          <s:Label text="Broken &lt;img/&gt; Example:" fontWeight="bold"
                               fontSize="20"/>
                          <s:RichEditableText editable="false" width="100%" lineBreak="toFit">
      To see the inherent problem with using the &lt;img/&gt; tag in TLF 
      alongside the TextConverter class, type an image tag into the first
      box. (ie: &lt;img src="http://beetlemed.com/assets/user/avatar/DeFaUlT.jpg"/&gt;)
      Then, look at the tag in the second box. <s:br/><s:br/>
      What's the problem? <s:span fontWeight="bold" fontSize="15" textDecoration="underline">It automatically bounces
      the image source property's case down to lowercase no matter what, often breaking image links.</s:span>
                          </s:RichEditableText>
                          <s:Label text="Compose:" fontWeight="bold"/>
                          <s:TextArea id="composeInput" width="100%" height="150"/>
                          <s:Label text="Converted HTML Output:" fontWeight="bold"/>
                          <s:TextArea id="htmlOutput" editable="false"
                               width="100%" height="150"
                               text="{getConvertedText(composeInput.text)}"/>
                          <s:Label text="Rendered Output:" fontWeight="bold"/>
                          <s:TextArea id="rendereredOutput" editable="false"
                               width="100%" height="150"
                               textFlow="{TextConverter.importToFlow(composeInput.text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"/>
                     </s:VGroup>
                </s:Group>
           </s:VGroup>
           
           <fx:Script>
                <![CDATA[
                     import flashx.textLayout.conversion.ConversionType;
                     import flashx.textLayout.conversion.TextConverter;
                     
                     public function getConvertedText(value:String):String {
                          return String(TextConverter.export(
                               TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT),
                               TextConverter.TEXT_FIELD_HTML_FORMAT,
                               ConversionType.STRING_TYPE));
                     }
                ]]>
           </fx:Script>
      </s:Application>
      

       

      Run the application and type an image tag into the first box, but be sure to use some uppercase letters to see the effect. (Ie: try typing in <img src="DEFAULT.JPG"/>) Now, look at the second box. See how it was changed to be <img src="default.jpg"/> ? This breaks many of my images.

       

      Is this a known bug, or is there a known workaround?