JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="editable"contentEditable="true"><input type="button" value="Button"></input> Did Steve tell you that?</div>

CSS

#editable {border: 1px solid #F0F0F0;}

JavaScript

function getLastTextNodeIn(node) {
    while (node) {
        if (node.nodeType == 3) {
            return node;
        } else {
            node = node.lastChild;
        }
    }
}

function isRangeAfterNode(range, node) {
    
    var nodeRange, lastTextNode;
    if (range.compareBoundaryPoints) {
        nodeRange = document.createRange();
        lastTextNode = getLastTextNodeIn(node);
        if(lastTextNode)
            nodeRange.selectNodeContents(lastTextNode);
        nodeRange.collapse(false);
        return range.compareBoundaryPoints(range.START_TO_END, nodeRange) > -1;
    } else if (range.compareEndPoints) {
        if (node.nodeType == 1) {
            nodeRange = document.body.createTextRange();
            nodeRange.moveToElementText(node);
            nodeRange.collapse(false);
            return range.compareEndPoints("StartToEnd", nodeRange) > -1;
        } else {
            return false;
        }
    }
}


$("#editable").bind("keydown", function (event) {
    var sel, range, node, nodeToDelete, nextNode, nodeRange;
    if (event.keyCode == 8 || event.keyCode == 46) {
        // Get the DOM node containing the start of the selection
        if (window.getSelection && window.getSelection().getRangeAt) {
            range = window.getSelection().getRangeAt(0);
        } else if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
        }
        
        if (range) {
            node = this.lastChild;
            if( node && node.nodeValue == ""){
                node = node.previousSibling;
            }
            if( node && node.nodeType != 3 ){
                while (node) {
                    if ( isRangeAfterNode(range, node) ) {
                        nodeToDelete = node;
                        break;
                    } else {
                        node = node.previousSibling;
                    }
                }
                
                if (nodeToDelete)...