JSFiddle - React, Tailwind, and code Playground

by gibito

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
Select something below:

<div contenteditable="true" id="container">Pile of cheese</div>

CSS

#container {
    border: solid blue 1px;
    background-color: lightgoldenrodyellow;
}

JavaScript

document.getElementById("container").onkeyup = function() {
    var sel = rangy.getSelection();
    var savedSel = sel.saveCharacterRanges(this);
    
    
    
    this.innerHTML = "<b>PILE OF CHEESE</b>";
    
    
    
    
    sel.restoreCharacterRanges(this, savedSel);
};