JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable" class="editable">pranks</div>

CSS

.editable {
    max-height:300px;
    border: 1px solid #eee;
    padding: 5px;
    border: 1px solid #000;
    outline: none;
    width: 300px;
    min-height: 40px;
}
.red {
    color: #ff0000;
}

JavaScript

var editable = document.getElementById('editable');
editable.contentEditable = true;
var text = editable.innerHTML;
text = text.replace(/prank/g, '<span class="red">Prank</span>');
editable.innerHTML = text;

$("editable").addEvent('keypress', function (e) {
    var element = this;
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
    console.log(element);
        e.stop();
    }
});