Using Squiggly with Spark TextArea causes TLF formatting to disappear

Question

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

Answer 1

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.