JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is text which is marked. This is not.</p>
<input type="button" id="makeBold" value="Make BOLD" />
<input type="button" id="toggleBold" value="Toggle BOLD" />

JavaScript

$('#makeBold').click(function () {
    makeBold();
});
$('#toggleBold').click(function () {
    toggleBold();
});

function toggleBold() {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("bold", null, false);
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange && document.selection.type != "None") {
        // IE case
        range = document.selection.createRange();
        range.execCommand("bold", null, false);
    }
}

function makeBold() {
    var selection = window.getSelection();
    if (selection.rangeCount) {
        var range = selection.getRangeAt(0).cloneRange();
        var newNode = document.createElement("b");
        range.surroundContents(newNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}