JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable" contenteditable="true" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui natus fugit repellendus alias dolorem quibusdam dolor minima quis vitae recusandae perspiciatis perferendis debitis modi rem odit sunt eligendi et!
</div>
<button id="highlight" onclick="wrap('span');" >Highlight</button>

CSS

#editable { border: 1px solid blue; min-width: 20px; min-height: 20px; overflow: hidden; font-size: 16px;  }

.highlight {
    background:yellow;
}

JavaScript

function wrap(tag) {
    var sel, range;
    
    if (window.getSelection) {
        sel = window.getSelection();
        
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('[' + tag + ']' + selectedText + '[/' + tag + ']'));
        }
    }
    else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.text = '[' + tag + ']' + selectedText + '[/' + tag + ']';
    }

}