JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<script src="http://tomprogramming.com/Files/rangy-core.js"></script>
<script src="http://tomprogramming.com/Files/rangy-cssclassapplier.js"></script>
<div contenteditable='true' id="editable-01">I am the very model of a modern major general</div>

<button id="highlight-word">Highlight current word</button>

CSS

[contenteditable=true] {
padding:20px;
    border:1px dashed red;
}

JavaScript

rangy.init();
document.execCommand("styleWithCSS", true);
var editable = $("#editable-01");
var button = $("#highlight-word");

var whitespaceRegex = /\s+/ig;
var isWhitespace = function(c){
    return whitespaceRegex.test(c);
}
button.on('mousedown', function(e){
//    e.preventDefault();
});
button.on("click", function(){
    var range = rangy.getSelection().getRangeAt(0);
    if (range.collapsed){
        var text = range.startContainer.textContent;
        if (whitespaceRegex.test(text)){
            var startIndex = range.startOffset;
            var endIndex = startIndex;
            for(var i = startIndex-1; i < text.length; i++){
                if (isWhitespace(text.substr(i,1))){
                    endIndex = i;
                    break;
                }
            }
            for(var i = startIndex; i >= 0; i--){
                if (isWhitespace(text.substr(i,1))){
                    startIndex = i + 1;
                    break;
                }
            }
            var rng = rangy.createRange();
            rng.setStart(range.startContainer, startIndex);
            rng.setEnd(range.startContainer, endIndex);
            rangy.getSelection().setSingleRange(rng);
        }else{
            //no whitespace, select whole thing
            var rng = rangy.createRange();
            rng.selectNode(range.startContainer);
            rangy.getSelection().setSingleRange(rng);
        }
    }
});