JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="font_styles">
    <i class="fas fa-bold" id="bold"></i>
    <i class="fas fa-italic" id="italic"></i>
    <i class="fas fa-list-ul" id="list_ul"></i>
    <i class="fas fa-list-ol" id="list_ol"></i>
</div>

<textarea id="message"></textarea>

JavaScript

function fontStyles()
{
    var bold = document.getElementById("bold");
    var italic = document.getElementById("italic");
    var listUl = document.getElementById("list_ul");
    var listOl = document.getElementById("list_ol");
    var message = document.getElementById('message');
    
    if(bold !== null)
    {
        bold.addEventListener("click", function(){
            setMessageContent(message, "**", "", "**", false);
            message.focus();
        });
    }
    
    if(italic !== null)
    {
        italic.addEventListener("click", function(){
            setMessageContent(message, "//", "", "//", false);
            message.focus();
        });
    }
    
    if(listUl !== null)
    {
        listUl.addEventListener("click", function(){
            setMessageContent(message, "\n- ", "", "", true);
            message.focus();
        });
    }
    
    if(listOl !== null)
    {
        listOl.addEventListener("click", function(){
            setMessageContent(message, "\n1) ", "", "", true);
            message.focus();
        });
    }
}

function setMessageContent(message, before, text, after, rowing)
{
    var start = message.selectionStart;
    var end = message.selectionEnd;
    var content = message.value;
    var left = content.slice(0, start);
    var right = content.slice(end);
    var isSelected = start === end ? false : true;
    var string = "";
    var caretOffset;
    
    if(isSelected)
    {
        var center = content.slice(start, end);
        
        if(rowing)
        {
            var rows = center.split("\n");
            var isCascading = false;
            string += left;
            
            for(var i = 0; i < rows.length; i++)
            {
                var row = rows[i];
                if(row === "") continue;
                
                before.indexOf("\n1") !== -1 ? isCascading = true : isCascading = false;
                
                if(isCascading)
                    string +=  "\n" + (i + 1) +...