Paste from clipboard in overwrite mode - input cursor moves to the end of text node

227 Views Asked by At

Our target browser is IE8 as the application is a legacy one and has got some com dependency.We are showing content inside a content-editable div. One of the requirements is to be able to replace texts inside the div when the browser is in "overwrite" mode. Paste is working fine but the input cursor is always moving to the end after the paste. We are using rangy-core, version: 1.3.1 for range/selection related logic. Unable to figure out what is going wrong here. Need help.

enter image description here

The following code is called when the document is loaded:

    $("#info").on("paste", function (e) {
    var clipboardData = window.clipboardData.getData("Text");
    clipboardData = clipboardData.replace(/(^ *)|(\r\n|\n|\r)/gm, "");
    if (isOverwriteEnabled()) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        pasteCopiedData(clipboardData);
    }
});

Related code snippets for reference:

function isOverwriteEnabled() {
try {
    // try the MSIE way
    return document.queryCommandValue("OverWrite");
} catch (ex) {
    // not MSIE => not supported
    return false;
}
}

function pasteCopiedData(clipboardData) {
var json = getCurrentNodeWithOffset();
handleTextOverwrite(json, clipboardData);
}

function getCurrentNodeWithOffset() {
var json = {};
var selectedObj = rangy.getSelection();
var range = selectedObj.getRangeAt(0);
json.node = selectedObj.anchorNode.nodeType === 3 ? selectedObj.anchorNode : findImmediateTextNode(selectedObj.anchorNode, range.startOffset);
json.offset = selectedObj.anchorNode.nodeType === 3 ? range.startOffset : json.node.nodeValue.length - 1;
return json;
}

function handleTextOverwrite(json, textToReplace) {

var lenToCopy = textToReplace.length;
var offsetPos = json.offset;
var jsonNode = json.node;

try {
    while (lenToCopy > 0) {
        var toCopy = jsonNode.nodeValue.length - offsetPos;
        var startPos = textToReplace.length - lenToCopy;

        if (lenToCopy <= toCopy) {
            json.node.nodeValue = jsonNode.nodeValue.substr(0, offsetPos) + textToReplace.substr(startPos) + jsonNode.nodeValue.substr(offsetPos + lenToCopy);
            lenToCopy = 0;
        }
        else {
            var copiedPos = startPos + toCopy;
            jsonNode.nodeValue = jsonNode.nodeValue.substr(0, offsetPos) + textToReplace.substr(startPos, toCopy);

            lenToCopy -= copiedPos;
            var nextJsonNode = findNextTextNode(jsonNode);

            if (!nextJsonNode) {
                //do the remaining paste in jsonNode
                jsonNode.nodeValue = jsonNode.nodeValue + textToReplace.substr(copiedPos);
                lenToCopy = 0;
            }
            else {
                jsonNode = nextJsonNode;
            }
        }

        offsetPos = 0;
    }

    setCaret(json.node, json.offset);
}
catch (ex) {

}
}

function setCaret(node, pos) {
var el = document.getElementById("info");
var rangyRange = rangy.createRange(el);
var sel = rangy.getSelection();
rangyRange.setStart(node, pos + 1);
rangyRange.setEnd(node, pos + 1);
rangyRange.collapse(true);
sel.removeAllRanges();
sel.addRange(rangyRange);    
}

Please let me know if more information is required.

0

There are 0 best solutions below