Suppose the following HTML in ContentEditable:
<div><b>Hello, World!</b></div>
If you enter a CR between "Hello" and "World!", then HTML will be like
<div><b>Hello, </b></div> <div><b>World!</b></div>
It will *NOT* be like
<div><b>Hello, </div> <div>World!</b></div>
So ContentEditable encloses a text with the b tag in each div instead of having the b tag across two divs.
Lets see more example. Suppose the following HTML in ContentEditable:
<div>1111<span style="color:red;font-size:32px;">2222</span>3333</div>
If you enter a CR in "2222", then HTML will be like
<div>1111<span style="color:red;font-size:32px;">22</span></div> <div><span style="color:red;font-size:32px;">22</span>3333</div>
If you remove the CR, then HTML will be like
<div>1111<span style="color:red;font-size:32px;">22</span> <span style="color: red; font-size: 32px;">22</span>3333</div>
OK, so ContentEditable will *NOT* undo spliting the span tag (Chrome)
But in FireFox, if you remove the CR, then HTML will be like
<div>1111<span style="color:red;font-size:32px;">2222</span>3333</div>
OK, so ContentEditable does restore the span in FireFox
Suppose the following HTML in ContentEditable:
<div style="color:red;font-size:32px;">Hello World!</div>
If you enter a CR between "Hello" and "World!", then HTML will be like
<div style="color:red;font-size:32px;">Hello </div> <div style="color:red;font-size:32px;">World!</div>
If you remove the CR, then HTML will be like
<div style="color:red;font-size:32px;">Hello World!</div>
This time, ContentEditable undos spliting the div tag in both Chrome and FireFox
Suppose the following HTML in ContentEditable:
<div>begin<a href="http://www.yahoo.com/" target="blank">Yahoo!</a>end</div>
If you enter a CR in "Yahoo!", then HTML will be like
<div>begin<a href="http://www.yahoo.com/" target="blank">Ya</a></div> <div><a href="http://www.yahoo.com/" target="blank">hoo!</a>end</div>
If you remove the CR, then HTML will be like
<div>begin<a href="http://www.yahoo.com/" target="blank">Yah</a> <a href="http://www.yahoo.com/" target="blank">oo!</a>end</div>
Nope! ContentEditable does not undo spliting the a tag! (Chrome)
But in FireFox, if you remove the CR, then HTML will be like
<div>begin<a href="http://www.yahoo.com/" target="blank">Yahoo!</a>end</div>
OK, so ContentEditable does restore the a tag in FireFox
Whenever they break a div into two divs with a CR, it will copy the span,a tag and place each of them into a div.
A draw back of enclosing each text with the b tag is that it could fragment a TextNode into many TextNods. So you need to merge consectiove TextNodes into one TextNode.