Rangy and IE8 - positioning caret after element at end of paragraph

Question

I'm using Rangy to perform several operations in a rich text editor (designmode = "on"). One of these functions is pasting formatted content which can represent certain pre-defined characters the user has created before-hand. All of the text content is held in paragraph elements. The user may start with this:

<p>The following is a special character: |</p>

where the pipe (|) is the caret position. They then choose to paste one of the 'special' characters via a button on the editor to end up with this:

<p>The following is a special character: <span class="read-only" contenteditable="false">SPECIAL</span>|</p>

The action uses Rangy behind the scenes to maintain the position of the caret (SelectionSaveRestoreModule) during the internal paste process which could be post-paste-processing the text in the editor and which likely messes up the position of the cursor otherwise.

However, in IE8 the caret cannot be placed after the <span> since there appears to be a bug which makes it an invalid position. As a result the cursor appears before the <span> element and it is not even possible to move the cursor after the span with the keyboard cursor controls. In fact, it even prevents the cursor moving on to any following paragraphs.

I have experimented with several techniques over recent days, including placing extra characters after the <span>s with some success. However those extra characters obviously cause confusion for the user when they appear and are not ideal. Using the zero-width space is visually better but attempting to tidy them up after the paste operation causes issues.

I need a 'tidy' method of supporting this user requirement for the special characters and I freely accept I may be approaching this in the wrong way.

Answer 1

I have a solution which seems to be working in my tests so far, but when I look at it it still fills me with a feeling that there must be a better way (not to mention a sense of dread).

What this code tries to do is place a zero-width-space after any read-only span which is at the end of a paragraph. It does this by inspecting the nodes after these elements to determine if there is actually text in them. At the same time it removes any zero-width-spaces which may still be in the text from previous inspections which are now no longer needed.

var ZWS = '\ufeff';

jQuery(_doc.body).find('p').each(function () {
    var lastContentEditable = undefined;
    // Look through the root contents of each paragraph to remove no-longer require zws fixes
    jQuery(this).contents().each(function () {
         if (this.nodeType === 3) {
            if (this.nodeValue.indexOf(ZWS) != -1) {
                // Text node containing a ZWS - remove for now
                this.nodeValue = this.nodeValue.replace(new RegExp(ZWS, 'g'), '');
            }

            // Does this node now contain text?
            if (this.nodeValue.length > 0 && lastContentEditable) {
                // Found text after a read-only node, ergo we do not need to modify that read-only node at the end
                lastContentEditable = undefined;
            }
        } else if (this.nodeType === 1 && this.getAttribute('contenteditable') === "false") {
            // Indicate that this is currently the last read-only node
            lastContentEditable = this;
        }
    });

    if (lastContentEditable) {
        // It appears that there is a read-only element at the end of the paragraph.
        // Add the IE8 fix zws after it.
        var node = document.createTextNode(ZWS);
        jQuery(lastContentEditable).after(node);
    }

});