JSFiddle - React, Tailwind, and code Playground

by a_robson

HTML

<div id="edit" contentEditable="true">
</div>
<input id="undo" type="button" value="Undo" disabled="true"/>

CSS

#edit {
    border: 1px black solid;
    height: 300px;
    width: 90%;
}

JavaScript

var getCursor = function (element) {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    return preCaretRange.toString().length;
};

var getContent = function (element) {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    var container;
    if( range.startContainer != range.endContainer ) {
        container = range.commonAncestorContainer;            
    } else {
        container = range.startContainer;
    }
    return $( container ).text().substring( range.startOffset, range.endOffset );
};

var undoQueue = [];

var undoLast = function() {
    var step = undoQueue.pop();
    if( step ) {
        step();
    }
    if( !undoQueue.length ) {
        $( "#undo" ).attr("disabled", "true");
    }
};

var queueStep = function( step ) {
    undoQueue.push( step );
    $( "#undo" ).removeAttr("disabled");
};

var queueKeyPress = function( e ) {
    var element = e.target;
    var cursor = getCursor( element );
    var content = getContent( element );
    console.log( e.keyCode + " -> " + content );
    
    var undo = function() {
        console.log( "undoing " + e.keyCode );
        switch( e.keyCode ) {
            case 8:
                console.log( "DELETED!" );
                break;
            default:
                console.log( selection );
                break;                
        }
    };
    queueStep( undo );
};

var onKey = function( e ) {
    queueKeyPress( e );
};


$( "#edit" ).on( "keydown", onKey );
$( "#undo" ).on( "click", undoLast );