JSFiddle - React, Tailwind, and code Playground

HTML

<button class="boldtrigger">Bold</button>

<div class="text">Testing the waters</div>

CSS

.bold { font-weight: bold; }

JavaScript

$(".boldtrigger").click(function() {
    var selection = getSelText();
    console.log('selected value', selection);
    //only bold text that is selected
    //get contents of .text
    //replace selected section with <span class="selectedText"></span>
    //ex:  user selects the word "the" with the mouse:
    //<div class="text">Testing the waters</div> becomes:
    //<div class="text">Testing <span class="selectedText">the</span> waters</div>
    //then bold contents of .selectedText
    $(".text").toggleClass("bold");
});

function getSelText()
{
    var txt = '';
     if (window.getSelection)
     { txt = window.getSelection(); }
     else if (document.getSelection)
     { txt = document.getSelection(); }
     else if (document.selection)
     { txt = document.selection.createRange().text; }
    else return;
    return txt;
}