Pasting invalid markup generate empty paragraphs with IE

[mkoepke]

I have a customer experiencing problems pasting html code generated by FrontPage into the editor. Taking the following snippet:

<span style="background-color: #FFFFFF">
<div align="center">
<p align="justify"><span style="FONT-WEIGHT: 400"><font size="1"><u><strong>
<font face="Tahoma" color="#cc0000" size="2">Attention</font></strong></u><strong><font face="Tahoma" color="#cc0000" size="2">:</font></strong></font><font size="2" face="Tahoma"> </font>
<font style="MARGIN: 0px" face="Tahoma" size="2"><span style="FONT-WEIGHT: 400; BACKGROUND-COLOR: #ffff00"> Avoid The </span><span style="FONT-WEIGHT: 700; BACKGROUND-COLOR: #ffff00">Costly-Mistakes</span><span style="FONT-WEIGHT: 400; BACKGROUND-COLOR: #ffff00"> That Beginning Real Estate Investors Make When Buying Minnesota Investment Property!</span></font><font face="Tahoma" size="2">
</font> </span></p>
<p align="center"><font size="1"><font color="#CC0000">
<span style="font-weight: 400"><font face="Tahoma" size="4"><strong>&quot;Free 
Investor's Guide Reveals Everything <u>You</u> <em>Need <br>
To Know</em> About Investing In Minnesota Real Estate!&quot;&nbsp;</strong></font></span></font><font style="FONT-SIZE: 1pt" face="Tahoma" color="#283193"><br>
&nbsp;</font><span style="FONT-WEIGHT: 400; FONT-STYLE: italic"><font style="FONT-SIZE: 2pt" face="Tahoma">
</font></span></font></p>
<p align="justify"><font face="Tahoma" size="2">&quot;The Key To <b>Building Wealth</b> And<b> Preparing For Retirement</b> 
By Investing In Minnesota Real Estate -&nbsp;Depends On 
<b>Where</b> You Invest And <b>How</b> <b>Effectively</b> You Manage Your Properties...&quot;&nbsp;</font><br>
<font size="1"><span style="FONT-WEIGHT: 400"><strong style="font-weight: 400">
<font color="#000000" size="2" face="Tahoma">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ~&nbsp;Alex Anderson - Minnesota Investment Property Specialist</font></strong></span></font><font size="2" face="Tahoma">
</font></p>

1. With IE (7.0) paste above code in source mode
2. Switch to wysiwyg mode. Text is fine.
3. Go to source. Beginning source is

   <p><span style="background-color: #ffffff">
   <div align="center">
   <p align="justify">
   

4. Switch out of source mode. Text still looks right.
5. Go back to source mode. Beginning source is now

   <p>
   <p>&nbsp;</p>
   </p>
   <div align="center">
   

6. Switch out of source mode. Text is now 2 lines down
7. go back to source mode. Beginning text is

   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <div align="center">
   

8. Wysiwyg now shows text 6 lines down.
9. Toggling back and forth stops the behavior with

   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   

With FF 2.0.02 Performing the above tests with FF works correctly. Source reveals:

<p><span style="background-color: rgb(255, 255, 255);">
<div align="center">

with no bizarre behavior as with IE. One small issue though is the above code in FF has the wysiwyg text starting with one blank line at the beginning. With IE in step 2 above, the text was flush at the editor top.

Good one, huh? :-)

[fredck]

Inputing invalid markup will certainly generate unpredictable results, not only because of the editor code, but also (and mainly) because of browsers' DOM parsers, which often are buggy (specially IE's).

This is something really hard to handle, because of the hundreds of invalid things to consider. In such cases, it's better to not give access to the source view for users that don't know how to use it properly. I know, sometimes they really want it, so they must also be aware about the consequences.

In the described case, the editor tries to fix things when switching to source the first time. Then, the fix in interpreted in a different way by the browser, and the editor generates a different output again. It continues until the code stabilize and become valid (three times in this case).

I don't see much chances for a fix for now. We could think about a custom HTML parser that fixes the input text, but this is a huge work, with impacts also in the loading performance.

[fredck]

We've been thinking about creating a text parser which generates the source view, based on the editing area innerHTML, which would also make a code cleanup. We are not yet sure we'll be really creating it, but if we go that way, that code could be useful to try to provide a fix for this ticket too.

[w.olchawa]

Confirmed with IE and IE7. Work fine with FF2.