JSFiddle - React, Tailwind, and code Playground

HTML

<div rows="10" cols="70" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus quam a lectus congue imperdiet. Mauris faucibus imperdiet eros sed dignissim. Etiam rutrum nisi sit amet massa feugiat blandit. Nulla sed cursus dolor. Fusce at est nibh, et aliquam massa. Cras sit amet sapien sed mi hendrerit elementum vel vel est. Cras at aliquam massa. Pellentesque iaculis, odio dignissim dictum scelerisque, dolor odio gravida est, ut posuere quam lacus eget nibh. Proin aliquet faucibus ligula, a pulvinar lorem feugiat sit amet. Quisque erat felis, pharetra at mattis id, tincidunt nec urna. Vivamus aliquam orci quis ipsum commodo adipiscing. Donec vel nibh tellus, nec pulvinar turpis.</div><br />
<a href="javascript:;" onclick="wrap('div')">Wrap</a>

JavaScript

function wrap(tag) {
    var sel, range;

    if (window.getSelection)
    {
        sel = window.getSelection();     
        if (sel.rangeCount)
        {
            range = sel.getRangeAt(0);          
            var selectedText = range.toString();
            range.deleteContents();
            var newNode = document.createElement("span");
            newNode.style.color = red;
            range.insertNode(newNode ); 
            
            //move the cursor
            range.setStartAfter(newNode);
            range.setEndAfter(newNode); 
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } 
}