JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<textarea id="my-mark" class="cr-mark-ed" name=""></textarea>

CSS

.cr-mark-ed{}

JavaScript

$('textarea').after('<div cvlass="cr-mark">sdsdsdd</div>')
(function($) {
    $('#my-mark').after('<div class="cr-mark"><div class="my-button-panel"><span class="b">b</span><span class="code">code</span><span class="pre">pre</span></div></div>');
    $('#my-mark').appendTo('.cr-mark');
    function wrapText(elementID, openTag, closeTag) {
        var textArea = $('#' + elementID);
        var len = textArea.val().length;
        var start = textArea[0].selectionStart;
        var end = textArea[0].selectionEnd;
        var selectedText = textArea.val().substring(start, end);
        var replacement = openTag + selectedText + closeTag;
        textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
    }
    
    
    $(document).on('click', '.b', function() {
        wrapText("my-mark", "<b>", "</b>");
        $('#prev').html($('#my-mark').val())
    });
    
     $(document).on('click', '.code', function() {
        wrapText("my-mark", "<code>", "</code>");
        $('#prev').html($('#my-mark').val())
    });
    
    
})(jQuery);