JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<div contenteditable="true" id="editor"><u><strong>T</strong>es<strong>t</strong></u></div>
<textarea id="html" rows="5" cols="50"></textarea>

CSS

strong {
    font-weight: bold;
}

JavaScript

function isNodeInsideElementWithTagName(node, tagName) {
    tagName = tagName.toLowerCase();
    while (node) {
        if (node.nodeType == 1 && node.tagName.toLowerCase() == tagName) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

function wrapSelection(tagName) {
    var range, textNode, i, len, j, jLen, el;
    var ranges = rangy.getSelection().getAllRanges();
    for (i = 0, len = ranges.length; i < len; ++i) {
        range = ranges[i];
        range.splitBoundaries();
        textNodes = range.getNodes([3]/* Array of node types to retrieve */);
        for (j = 0, jLen = textNodes.length; j < jLen; ++j) {
            textNode = textNodes[j];
            if (!isNodeInsideElementWithTagName(textNode, tagName)) {
                el = document.createElement(tagName);
                textNode.parentNode.insertBefore(el, textNode);
                el.appendChild(textNode);
            }
        }
    }
}

rangy.init();
var sel = rangy.getSelection();
var range = rangy.createRange();
var editorEl = document.getElementById("editor");
range.selectNodeContents(editorEl);
sel.setSingleRange(range);

wrapSelection("strong");
document.getElementById("html").value = editorEl.innerHTML;