JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="txtarea">this is a **test**</textarea>
<button data-marker="**">Bold (toggle)</button>
<button data-marker="~~">Strike through (toggle)</button>
<button data-marker="*">Italics (toggle)</button>

JavaScript

function toggleMarker(marker, el) {
    var markerLength = marker.length;
    var startPos, endPos, selection, range;

    if (document.selection != undefined) { // IE
        el.focus();
        range = document.selection.createRange();
        selection = range.text;
    } else if (el.selectionStart != undefined) { // Firefox
        startPos = el.selectionStart;
        endPos   = el.selectionEnd;
        selection = el.value.substring(startPos, endPos);
    }
    
    if (!selection.length){
    		return;
    }
    
    
    
    if (el.value.substring(startPos-markerLength,startPos) === marker
    		&& el.value.substring(endPos,endPos+markerLength) === marker
    ){
    		el.value = el.value.substring(0,startPos-markerLength) +
    							selection + 
                  el.value.substring(endPos+markerLength);
    }
    else{
    		el.value = el.value.substring(0,startPos) + marker + 
    							selection + marker + el.value.substring(endPos);
    }
    
}

$(document).on('mousedown', 'button', function(e) {
  toggleMarker( $(this).data('marker'), $('#txtarea').get(0) ).text;
});