JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="editor">
    <div id="caret"></div>
</div>
<div style="margin-top:50vh;">
    <!--textarea listening for paste events-->
    <textarea id="pastingReceiver"></textarea>
</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;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#editor span {
    white-space:pre;
    display:inline-block;
    line-height:18px;
    font-size:18px;
    vertical-align:middle;
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
#editor br {
    line-height:12px;
}
#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 editorFocus = true;
    var caretOn = true;
    addCaretBlink();
    var tabIndent = 4;
    //var caretInterval = false;
    var draggingEditor = false;
    var pastedText = [];
    var charEchoInterval = false;
    var editorMouseDown = false;
    var highlightStartNode = null;
    var highlightEndNode = null;
    var openHightlightChar = '';
    var autoCompleteChars = ['[]', '\'\'', '\"\"', '{}', '<>', '()'];
    //remember that keypress event doesn't work for shift command
    //delete (backspace) or control keys reliably in all browsers
    window.onkeypress = function (e) {
        //if editor has focus; wait for browser rendering; append new text to caret
        if (editorFocus == true) {
            window.setTimeout(function () {
                var keycode = e.which || e.keyCode;
                if (keycode != 8 && keycode != 13 && keycode != 9 && (keycode)) {
                    appendValueToCaret(String.fromCharCode(keycode));
                }
            }, 0);
        }
    };
    window.onkeydown = function (e) {
        if (editorFocus == true) {
            var keycode = e.which || e.keyCode;
            if (keycode === 8 || keycode === 13 || keycode === 9 || (keycode > 36 && keycode < 41)) {
                if (keycode === 9) {
                    //tab key
                    addTabWhiteSpace();
                    return false;
                }
                if (keycode === 8) {
                    //delete (backspace) key
                    deleteSpanChar();
                }
                if (keycode > 36 && keycode < 41) {
                    //arrow keys
                    if (keycode === 37) {
                        //left arrow key
                        moveCaretAbsolute(1, true);
                    }
                    if (keycode === 39) {
    ...