JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="textRegions_1__Text1" rows="2" name="textRegions[1].Text" cols="20" class="editer" val="1">
    <color ="#ffffff">This is text</color>
    </div>
<button val="h1" id="header" class="textEditingButton">Header Text</button>

<button val="strong" id="bold" class="textEditingButton">First Paragraph Text</button>
<button val="text" id="bold" class="textEditingButton">Following Paragraph Text</button>
<select id = "colourSelect">
  <option value="#a92175">Purple</option>
  <option value="#ef6726">Orange</option>
  <option value="#787ba5">Blue</option>
  <option value="#539f8d">Green</option>
  <option value="#43477a">DarkBlue</option>
</select> 
<br/><button id="formatting" class="clearFormating">Clear All Formatting</button>

CSS

div.editer {
    width: 500px;
    height: 200px;
    border: 1px solid #ccc;
    overflow:scroll;
}

JavaScript

jQuery(function($) {
$('.textEditingButton').click(function(){
    var $input = $(this);
    var htmlCon = $input.attr('val');
    var highlight = window.getSelection();
    if(highlight)
    {
        //need to get id of selected string, rather than replacing the word, as 
        var span = '<'+htmlCon+'>' + highlight + '<'+htmlCon+'>';
        var text = $('#textRegions_1__Text1').html();
        $('#textRegions_1__Text1').html(text.replace(highlight, span));
    }
    else
    {
        //I need to somehow make whats now typed into the div within the selected tags.
    }
});
});

$('#formatting').click(function(){
    var formattedText = $('#textRegions_1__Text1').html();
    var newFormattedText = $(formattedText).text();
    if(newFormattedText)
    {
    $('#textRegions_1__Text1').html(newFormattedText);
    }
});