JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textcontent" contenteditable="true" style="overflow:auto;"><p>Enter text</p></div>
<button type="button" class="btn btn-primary" id="setBold">Bold</button>

JavaScript

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } 
    else {
        //get selected position
        var selObj = document.getSelection();
        //get range of selected position
        var selRange = selObj.getRangeAt(0);
        //Insert node with dummy text 'd'
        var newNode = document.createTextNode('d');
        selRange.insertNode(newNode);
        selObj.removeAllRanges();
        selObj.addRange(selRange);

        //Execute command on dummy
        document.execCommand('bold');

        //Delete dummy from range
        selRange.setStart(newNode, 0);
        selRange.setEnd(newNode, 1);
        selRange.deleteContents();

        selObj.removeAllRanges();
        selObj.addRange(selRange);
        //Focus on empty element
        $('#textcontent').focus();
   }
});