JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<head>
    <title>Text Editor (test)</title>

<script type="text/javascript">
$(function(){
    updCont();//in case existing text
    var ht = window.innerHeight - $("#dvInput").css("height").replace(/[^.0-9]/g, '') - 30;
    if(ht<200) ht = 200;//display height minimum (may extend a bit below page)
    $("#dvCont").css("height", ht + "px");
    $("#txtCont").keydown(function(e){
        var curKey = e.which ? e.which : e.key;
        if(e.ctrlKey && e.shiftKey){
            if([56,190,80,65,83,76,85,79].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 56) fmt("bull");// *
            else if(curKey == 190) fmt("indnt");// >
            else if(curKey == 80) fmt("para");// P
            else if(curKey == 65) fmt("href");// A
            else if(curKey == 83) fmt("spn");// S
            else if(curKey == 76) fmt("li");// L
            else if(curKey == 85) fmt("ul");// U
            else if(curKey == 79) fmt("ol");// O
        }else if(e.ctrlKey){
            if([66,73,13,85].indexOf(curKey)>-1)
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            if(curKey == 66) fmt("bld");// B
            else if(curKey == 73) fmt("ital");// I
            else if(curKey == 85) fmt("uLine");// U
            else if(curKey == 13) fmt("crlf");// [enter]
        }
        updCont();
    });
//    $("#inp").keydown(function(e){alert(e.which)})
});
function updCont(){
    $("#dvCont").html($("#txtCont").val());//stuff the display div with textarea html text
}
function fmt(inAct){
    //common needs
    var oTxt = $("#txtCont");
    var s = oTxt[0].selectionStart;
    var e = oTxt[0].selectionEnd;
    var raVal = [oTxt.val().substring(0, s), oTxt.val().substring(s, e), oTxt.val().substring(e), s, e];
    var ofstStart = 0;
    var ofstEnd = 0;
    if(inAct=="bld"){
        oTxt.val(raVal[0] + "<b>" + raVal[1]  + "</b>" + raVal[2]);
        //if you don't want text...