JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="editor">
    <div id="caret"></div>
</div>
<div style="margin-top:50vh;">
    <textarea id="editorValueInput"></textarea>
    <input type="text" id="textBox" placeholder="test">
</div>

CSS

#editor {
    border:1px solid #000;
    padding:4px;
    font-size:0;
    width:95%;
    margin:auto;
    overflow:auto;
    cursor:text;
    -o-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
#editor span {
    white-space:pre;
    display:inline-block;
    line-height:18px;
    font-size:18px;
    vertical-align:middle;
}
#editor br {
    font-size:18px;
}
#caret {
    white-space:pre;
    display:inline-block;
    height:18px;
    width:1px;
    line-height:18px;
    font-size:18px;
    vertical-align:middle;
    margin-left:-.5px;
    margin-right:-.5px;
    -o-transition:all .2s ease;
    -webkit-transition:all .2s ease;
    -moz-transition:all .2s ease;
    -ms-transition:all .2s ease;
    transition:all .2s ease;
}
#editorValueInput {
    position: absolute;
    left:10px;
    top:10px;
    z-index:-1;
    resize:none;
    clip:rect(0, 0px, 0px, 0);
}
html, body {
    padding:0;
    height:100%;
    margin:0;
}

JavaScript

window.onload = function () {
    //initialize variables and functions
    var editor = document.getElementById('editor');
    var caret = document.getElementById('caret');
    var editorValueInput = document.getElementById('editorValueInput');
    editorValueInput.value = '';
    var editorFocus = true;
    var caretOn = true;
    addCaretBlink();
    var tabIndent = 4;
    //var caretInterval = false;
    editorValueInput.focus();
    var charEchoInterval = false;
    var editorMouseDown = false;
    var openHightlightChar = '';
    var autoCompleteChars = ['[]', '\'\'', '\"\"', '{}', '<>', '()'];
    //indicate the completed auto complete status; false = no action needed
    //var activeAutoComplete = {squareBrace:false,singelQuote:false,doubleQuote:false,curlyBrace:false,bracket:false,parens:false};

    //remember that keypress event doesn't work for shift command
    //delete (backspace) or control keys reliably in all browsers
    editorValueInput.onkeypress = function (e) {
        var e = e;
        var textValue = this;

        function handleKeyPress() {
            window.setTimeout(function () {
                var keycode = e.which || e.keyCode;
                if (keycode != 8 && keycode != 13) {
                    var typedCharacter = editorValueInput.value;
                    editorValueInput.value = '';
                    appendValueToCaret(typedCharacter);
                }
            }, 0);
        }
        window.setTimeout(function () {
            handleKeyPress();
        }, 0);
    };

    editorValueInput.onkeydown = function (e) {
        var keycode = e.which || e.keyCode;
        var e = e;
        if (charEchoInterval == false) {
            if (keycode === 8 || keycode === 13 || keycode === 9 || (keycode > 36 && keycode < 41)) {
                if (keycode === 13) {
                    //add line return
                    appendValueToCaret('br');
                }
                if (keycode === 37) {
                   ...