document.execCommand weird results in FireFox

Question

WYSIWYG text format function

/*
 * myEditor - iframe element
 */
function doFormat(what) {

    var cWin = $('#myEditor', window.parent.document)[0].contentWindow; 

    cWin.$('body').attr({ 'contentEditable': true, 'designMode': 'On'} );

    var what = 'justifyright';

    cWin.document.execCommand(what, false, arguments[2]);

    cWin.$('body').attr({'contentEditable': 'false'} );
    return;
}

HTML:

<span id="obj_123" contenteditable="true"> 
    text<br /> 
    moretext<br /> 
    alot of text <br /> 
</span>

If clicked or highlighted PART (only if part selected) of the span contents and called function doFormat (with any justify function)

the results are:

<span id="obj_123" contenteditable="true"> 
    text<br /> 
</span>

<div align="right">
    <span id="obj_123" contenteditable="true">
        moretext<br /> 
    </span>
</div>

<span id="obj_123" contenteditable="true">
    alot of text <br /> 
</span>

expected results:

<span id="obj_123" contenteditable="true"> 
    text<br /> 

    <div align="right">
        moretext<br /> 
    </div>
    alot of text <br /> 
</span>

as if it copies the parent node and then replicates it each time when formatting occures.

other execCommand calls like bold/italic/underline etc works as supposed.

I would appreciate any help on this topic. Thank you very much.

edit: added a fiddle test case http://jsfiddle.net/n7SgJ/

Answer 1

Turns out this happens only if the rich text wrapper is a SPAN tag. Everything works if DIV tag is used.

Is there a reasonable explanation for this?