4 Replies Latest reply: Feb 28, 2011 4:23 PM by beimon RSS

    Using Squiggly with Spark TextArea causes TLF formatting to disappear

    JKringen Community Member

      We are using a Spark TextArea component in our application to offer more enhanced text formatting options to our users. Yesterday we downloaded Squiggly since it's the only one available that seems to support the spark components. It is highlighting misspelled words correctly and does have a nice right-click context menu with suggestions, etc. However, when we select a word from the suggestion list and it replaces it in the text area, it seems to replace the entire contents of the textarea as plain text. Any formatting on the text such as bold, italics, font sizes, underlines, all immediately disappear once the misspelled word is replaced. We're using the SpellUI implementation. Below is some of the snippets of the code we're using to implement SpellUI:

       

      protected function createTextArea():void {

        _textArea = new TextArea();

        _textArea.editable = true;

        _textArea.enabled = true;

        _textArea.textFlow = TextConverter.importToFlow(XML(dataModel.value)[0], TextConverter.TEXT_LAYOUT_FORMAT);

        _textArea.textFlow.flowComposer.updateAllControllers();

        _textArea.addEventListener(FlexEvent.CREATION_COMPLETE, setupSpellCheck, false, 0, true);

      }


      private function setupSpellCheck(event:Event=null):void {

        logger.debug("setupSpellCheck", "Setting up spell check system...");

        _textArea.removeEventListener(FlexEvent.CREATION_COMPLETE, setupSpellCheck);

        resourceManager.localeChain = [localeStr];

        enableSpellCheck();

        enableSpellCheckContextMenu();

      }


      private function enableSpellCheck():void {

        SpellUI.enableSpelling(_textArea, localeStr);

      }


      private function enableSpellCheckContextMenu():void {

        var contextMenu:Object = {add:resourceManager.getString('SquigglyContextMenu', 'add'),

                                               enable:resourceManager.getString('SquigglyContextMenu', 'enable'),

                                               disable:resourceManager.getString('SquigglyContextMenu', 'disable')};

        SpellUI.setSpellingMenuEntries(contextMenu);

      }

       

      As you can see, we're constructing a new TextArea control and setting it's textFlow by importing an existing textflow XML that we have saved in our database. Once the TextArea has dispatched the FlexEvent.CREATION_COMPLETE, we are setting up the spell check system and everything works ok until you actually correct a misspelled word by selecting it from the right-click suggestions list. The text initially imported may have any number of styles applied to it as I mentioned above. Once the spelling replacement occurs, all the formatting is wiped out for the entire text area.

       

      Any thoughts?

       

      -Jason Kringen

        • 1. Re: Using Squiggly with Spark TextArea causes TLF formatting to disappear
          JKringen Community Member

          Just to give some more details, here's the TextFlow output from our TextArea before using the spell check word replacement:

           

          <TextFlow columnCount="inherit" columnGap="inherit" columnWidth="inherit" lineBreak="inherit" paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" verticalAlign="inherit" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><p direction="ltr" justificationRule="auto" justificationStyle="auto" leadingModel="auto" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" textAlign="start" textAlignLast="start" textIndent="0" textJustify="interWord"><span>Text goes in here. </span><span alignmentBaseline="useDominantBaseline" backgroundAlpha="1" backgroundColor="transparent" baselineShift="0" breakOpportunity="auto" cffHinting="horizontalStem" color="#000000" digitCase="default" digitWidth="default" dominantBaseline="auto" fontFamily="Arial" fontLookup="embeddedCFF" fontSize="28" fontStyle="normal" fontWeight="bold" kerning="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" textAlpha="1" textDecoration="none" textRotation="auto" trackingLeft="0" trackingRight="0" typographicCase="default">misspeled</span><span> jhkjd het </span></p></TextFlow>

           

          And here is the TextFlow output immediately after replacing a misspelled word:

           

          <TextFlow columnCount="inherit" columnGap="inherit" columnWidth="inherit" lineBreak="inherit" paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" verticalAlign="inherit" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><p><span>Text goes in here. misspeled jhkjd get </span></p></TextFlow>

           

          So it's obviously stripping out all of the TLF formatting and simply leaving the blank <p> and <span> tags without any of the formatting details.

           

           

          • 2. Re: Using Squiggly with Spark TextArea causes TLF formatting to disappear
            purweli Community Member

            I've got the same problem with the text flow. Everything disappears once the correct word is selected. Any suggestions to get over the problem is highly appreciated.

            • 3. Re: Using Squiggly with Spark TextArea causes TLF formatting to disappear
              Xie Fang Community Member

              Currently the support for TLF is limited. Text replacement doesn't work well when the TextArea has rich formatted text. The Squiggly dev team will continue to improve the support for TLF and Spark components.

               

              As for workaround, you can try to use the non-UI SpellChecker class with your own UI handling code.

              • 4. Re: Using Squiggly with Spark TextArea causes TLF formatting to disappear
                beimon

                We have recently released Squiggly 0.5 which has native TLF support, along with fixes to Spark component formatting issues.

                 

                Please give it a try and let us know if it meets your needs.

                 

                - Bruce, Adobe