JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<button>test</button>
<textarea></textarea>

CSS

textarea {
    width: 100%;
}

JavaScript

// undo and redo replacement

$('button').on('click', function () {
    $('textarea').val($('textarea').val() + 'test').trigger('keydown');
});

var arrUndoStack = [], arrRedoStack = [];

$('textarea').data('old_val', $('textarea').val());
$('textarea').on('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && event.keyCode === 90 && arrUndoStack.length > 0) {
        event.preventDefault();
        
        arrRedoStack.push(arrUndoStack.pop());
        $('textarea').val(arrUndoStack[arrUndoStack.length - 1]);
                
    } else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === 90 && arrRedoStack.length > 0) {
        event.preventDefault();
        
        arrUndoStack.push(arrRedoStack.pop());
        $('textarea').val(arrUndoStack[arrUndoStack.length - 1]);
        
    } else if ($('textarea').val() !== $('textarea').data('old_val')) {
        if (arrRedoStack.length > 0) {
            arrRedoStack = [];
        }
        clearTimeout($('textarea').data('timeOutID'));
        setTimeout(function () {
            if (arrUndoStack[arrUndoStack.length - 1] !== $('textarea').val()) {
                arrUndoStack.push($('textarea').val());
            }
        }, 225);
    }
    
    $('textarea').data('old_val', $('textarea').val());
});