JSFiddle - React, Tailwind, and code Playground

HTML

<textarea style="width:300px" id="one">Type here or paste</textarea>
<br />
Log: <br />
<textarea id="log" cols="30" rows="30"></textarea>

JavaScript

function getNewInsertion(oldValue, newValue, newPosition) {

    var type='';
    var from=0;
    var length=0;
    var text='';

    if(oldValue.length > newValue.length) {
        type = 'deletion';
        changeLength = oldValue.length - newValue.length;
        pos = newPosition;
        text = oldValue.substr(pos, changeLength);
    } else {
        type = 'insertion';
        changeLength = newValue.length - oldValue.length;
        pos = newPosition - changeLength;
        text = newValue.substr(pos, changeLength);
    }

    log("-------------------------");   
    log("Changed-text: "+text);
    log("Type: "+type);
    log("Position: "+pos);


    return {text:text, type:type, position: pos, changeLength: changeLength};
}



$(function() {

    $("#one").data("old_value", $("#one").val());

    $("#one").bind("paste cut keydown",function(e) {
        var that = this;
        setTimeout(function() {
                if(typeof $(that).data("old_value") == "undefined") {
                    $(that).data("old_value",$(that).val());
                }

            
                getNewInsertion($(that).data("old_value"), $(that).val(), e.target.selectionStart);
                $(that).data("old_value",$(that).val());
            },200);

    })

}); 

function log(val) {
    $("#log").val(val + "\n" + $("#log").val());
}