Range and selection object bug in Opera browser when designMode is enabled ? Here is a fix, read on!!

alessandro — Mon, 01 Oct 2007 00:02:00 GMT

Opera ? why oh why :(
Opera has recently started to support rich text editing in it's browser, and honestly speaking, it was just about time they did. Their editor support looks great, and works as mentioned on their wiki pages :

we now have support for rich text editing in web pages via document.designMode. document.designMode is also what Firefox uses for rich text edting. That means Opera does it the same way Firefox does where you make a whole docuent editable, which is usually done on an iframe document or a document embedded with the object tag.

And then, you are encouraged to try and run the midas demo in opera http://www.mozilla.org/editor/midasdemo/. And sure enough it runs. Nice one opera! But if you test it well, you will notice that it blows up suddenly. More specifically you will notice your content magically dissappear when trying to insert a table or any other custom html element insertion supported by your rich text editor(not using execCommand) into a blank area where you have a line break. What ? This one drove me crazy! Not because content was mysteriously vanishing. It was vanishing because the midas demo was not prepared for this bug in opera. What was happening is simply the following :

1. User saw a bit of blank space ?
2. User clicks in the blank space.
3. User does not make a selection, but instead proceeds to add an html table in the cursor location(note where i say html table, since inserting an html table is going to force you to create the table and add it in the desired location by using range object, selection objects) and insert the node. Your not using execCommand anymore here.
4. Wham, the range and selection objects in opera blow up and simply return startOffset and endOffset with a fixed value of 0 and 1, 2 Vs the real node location of the area where you clicked. 0, 1, 2 respectively which represent
0. <html element
1. <head if one exists,
2. <body element

mmm nasty :( The best part is, there was no simple hack i could think of to try to fix this. While i filed a bug with a test case to opera, their bug tracking system does not communicate anything back. It's just one of those, ohh you found a bug ? thanks, we will fix it. Bye bye :p damn, i went into delusional state totally :( Don't even know why i was expecting to be chatting with someone from their team and getting a quick workaround :p Think that is supposedly part of their support provided to premium members. Fair enough :D~

I was pretty desperate to fixing this. I just couldn't believe i've gotten this far with my html editor and now this bug manifests in opera(it was there since the start, i just happened to have noticed it now ;p). I did think of finding this pattern and exiting for opera, that is, doing nothing if the user clicked in a blank area without making a selection. But that just didn't seem right. At the moment my editor supported the exact same features cross browser, so why stop here.

A little bit of mind storming, staring at my screen, replaying the test case i filed to opera and boom! It just occurred to me, what if i inserted a non-breaking-whitespace( ) right before the br so -->>  <br /> ; And what do you know, opera loved that and that blank area was not a blank area anymore :p woohooo CHAMPAGNE!!!

At the time of this writing, almost all third party component vendors that chose to support rich text editing in opera and several of the top opensource or free editors, manifest this bug.

To name a few :

1) tinyMCE,(works around and adds content at the end of document, not cursor location),

2) Spaw(works around and adds content at the end of document, not cursor location),

3) WebWizRichTextEditor,

4) freerichtexteditor (this one does not even handle the exception) ,

5) qWebEditor(content gets deleted) ,

6) Telerik(content gets deleted and exception is thrown),

7) obout (content gets deleted and throws exception)

i was curious to see if they had gotten to actually fixing this, before i filed the bug :p i have not tested others but probably the results are the same.

this is an output of my test case before apply the bug fix :

sel.anchorNode.nodeName: #text
sel.anchorNode content: #1 click in the empty space below this line
sel.focusNode.nodeName: #text
sel.focusNode content: #1 click in the empty space below this line
range.startContainer.nodeName: HTML
range.startOffset: 2
range.startContainer content: html - content too large, truncated
range.endContainer.nodeName: HTML
range.endOffset: 2
range.endContainer content: html - content too large, truncated
range.commonAncestorContainer: html - content too large, truncated

Always the same output for any blank area i click. Notice how anchorNode is always the first element in the document and the
start container is <html element, startOffset/endOffset is 2 which is the <body element. And the commonAncestorContainer is the <html element again :(

And now after the bug fix for the same operation that generated the above output :

sel.anchorNode.nodeName: #text
sel.anchorNode content:
sel.focusNode.nodeName: #text
sel.focusNode content:
range.startContainer.nodeName: BODY
range.startOffset: 5
range.startContainer content: body - content too large, truncated
range.endContainer.nodeName: BODY
range.endOffset: 5
range.endContainer content: body - content too large, truncated
range.commonAncestorContainer: body - content too large, truncated

ohh beautiful :D Notice how anchorNode content is empty, thats because it contains a   and the   is exactly the spot where we clicked, exactly what i'd expect to get :p

Following is the test case i filed to opera bug report, except here i have included my little non-breaking-whitespace fix.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    #1 click in the empty space below this line
    <br />
    <br />
    #2 click in the empty space below this line
    <br />
    <br />
    <span>#3 click in the empty space below this line</span>
    <br />
    <br />
    <div>
        #4 click in the empty space below this line</div>
    <br />
    <br />
    #5 click in the empty div below this line
    <div style="background: yellow; border: 1px solid green; height: 20px">
        &nbsp;</div>
    <div id="testresult" style="border: 1px dashed red; color: red;">
        <span style="text-decoration: underline">Test results</span><br />
        <br />
    </div>
</body>
<script type="text/javascript">

document.designMode = 'on';
    // to test in firefox comment above line and uncomment below 
    //document.body.designMode = 'on'; 
    window.onload = init;
    function init()
    {
        fixOperaRangeSelectionBug();
        document.onmouseup = function(e){
            var textNode = document.createTextNode('This text is inserted in the location i clicked. works perfectly in safari and firefox(and now opera, after this workaround)');
            var sel = window.getSelection();
            var range = sel.getRangeAt(0);
            // with insertNode we are manipulating the dom, and causing a mutation
            // because of which you will see startOffset and endOffset changing.
            // however, commenting the insertNode line out, you can clearly see that
            // startOffset and endOffset return a fixed value of 0 and 1, 2 Vs the real node
            // location of the area where you clicked. 0, 1, 2 respectively which represent
            //  0)html, 1)<head if one exists, 2) the body.
            
            range.insertNode(textNode);//insert our node
            // now move the cursor to the last line of our inserted text.
            range.setStartAfter(textNode);
            range.setEndAfter(textNode);
            sel.addRange(range);
            var testResult = document.getElementById('testresult');
            testResult.innerHTML += '<br />' + 'sel.anchorNode.nodeName: ' + sel.anchorNode.nodeName;
            testResult.innerHTML += '<br />' + 'sel.anchorNode content: ' + getContents(sel.anchorNode);
            testResult.innerHTML += '<br />' + 'sel.focusNode.nodeName: ' + sel.focusNode.nodeName;
            testResult.innerHTML += '<br />' + 'sel.focusNode content: ' + getContents(sel.focusNode);
            testResult.innerHTML += '<br />' + 'range.startContainer.nodeName: ' + range.startContainer.nodeName;
            testResult.innerHTML += '<br />' + 'range.startOffset: ' + range.startOffset;
            testResult.innerHTML += '<br />' + 'range.startContainer content: ' + getContents(range.startContainer);
            testResult.innerHTML += '<br />' + 'range.endContainer.nodeName: ' + range.endContainer.nodeName;
            testResult.innerHTML += '<br />' + 'range.endOffset: ' + range.endOffset;
            testResult.innerHTML += '<br />' + 'range.endContainer content: ' + getContents(range.endContainer);
            testResult.innerHTML += '<br />' + 'range.commonAncestorContainer: ' + getContents(range.commonAncestorContainer);
            testResult.innerHTML += '<hr />';
        }
    }
    function getContents(node)
    {
        if (node == null)
            return 'null';
        var nodeName = node.nodeName.toLowerCase();
        var flag1 =  (nodeName == 'html' || nodeName == 'head' || nodeName == 'body');
        if (node.nodeType == 1 && !flag1)// element node
            return node.innerHTML;
        else if (node.nodeType == 3 && !flag1)// textnode
            return node.nodeValue;
        else if (flag1)
            return nodeName + ' - content too large, truncated';
    }
    function fixOperaRangeSelectionBug()
    {
        var brCollection = document.body.getElementsByTagName('br');
        for (var num1 = 0;num1 < brCollection.length; num1++)
        {
            var br = brCollection[num1];
            var prevSibling = br.previousSibling;
            if (prevSibling != null)
            {
                var hasNbsp = isNbsp(prevSibling);
                if (!hasNbsp)
                {
                    // insert the invisible non-breaking-whitespace
                    br.parentNode.insertBefore(document.createTextNode('\u00A0'), br);
                }
            }
        }
    }
    function isNbsp(textNode)
    {
        if (textNode.nodeType != 3)
            return false;
        var pat = /\u00A0/;
        return textNode.nodeValue.match(pat);
    }

</script>
</html>

update : August - 09 - 2007

I had completely forgotten apart from filing this bug report, i had also made a post on the opera groups and here is the response i got

posted on google groups.

Apparently, it seems like they have fixed this in their new code base, which is not out yet, so this workaround sticks until then :D

Alessandro Zifiglio : Opera

Range and selection object bug in Opera browser when designMode is enabled ? Here is a fix, read on!!