JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://laboratorium.0xab.cd/jquery/fieldselection/0.2.3-test/jquery-fieldselection.js"></script>
<script src="http://laboratorium.0xab.cd/jquery/fieldselection/0.2.3-test/jquery-fieldselection.pack.js"></script>
<input id="bold" type="button" value="B" />
<br />
<textarea id="editor"></textarea>

<div id="resultAsHtml"></div>
<br />
<div id="resultAsText"></div>

JavaScript

$(document).ready(function() {
    
    $("#editor").keyup(Update);
    
    function Update(){
        var text = $(this).val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    }
    
    $("#bold").click(function(){
        var range = $("#editor").getSelection();
        var textToReplaceWith = "[b]"+ range.text + "[/b]";
        $("#editor").replaceSelection(textToReplaceWith , true);
        
        var text = $("#editor").val();
        var result = ParseToHtml(text);
        $("#resultAsHtml").html(result);
        $("#resultAsText").text(result);
    });

    function ParseToHtml(text) {
        text = text.replace("[b]", "<b>");
        text = text.replace("[/b]", "</b>");
        text = text.replace("  ","&nbsp;");
        text = text.replace("\n","</br>");
        return text;
    }

    $("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true);
});