JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conttext">How hard can it be to achieve this here and now. Will it be difficult or can it be done with great simplicity</div>

<a href="#" class="format bold">test</a>

CSS

.highlight {
    color:#888;
}

JavaScript

$(document).ready(function(){
    $('.format').click(function(){
        var highlight = window.getSelection(),  
        spn = '<span class="highlight">' + highlight + '</span>',
        text = $('.conttext').text(),
        range = highlight.getRangeAt(0),
        startText = text.substring(0, range.startOffset), 
        endText = text.substring(range.endOffset, text.length);
        
        $('.conttext').html(startText + spn + endText);
    });
});