JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<textarea id="test"></textarea>

CSS

body {
    text-align:center;
    margin-top:30px;
}
textarea {
    min-height:200px;
    width:300px;
    border:1px solid #999;
    padding:10px;
    font-family:monaco;
    font-size:12px;
}
textarea:focus {
    outline:none;
    border-color:#333;
}

JavaScript

var Coder = Coder || (function(d){
	
    var editor;
    var tab;
    
    var keyMap = [
        	{ open: "\"", close: "\"", canBreak: false },
            { open: "'", close: "'", canBreak: false },
            { open: "(", close: ")", canBreak: false },
            { open: "[", close: "]", canBreak: true },
            { open: "{", close: "}", canBreak: true }
        ],
        cursor = {
            get: function doGetCaretPosition(){
				var CaretPos = 0;
                if (document.selection) {
            		editor.focus ();
                    var Sel = document.selection.createRange();
            		Sel.moveStart ('character', -editor.value.length);
            		CaretPos = Sel.text.length;
                } else if (editor.selectionStart || editor.selectionStart == '0'){
                    CaretPos = editor.selectionStart;
                }
                return (CaretPos);
            },
            set: function(pos){
            	if(editor.setSelectionRange){
                    editor.focus();
                    editor.setSelectionRange(pos,pos);
                } else if (editor.createTextRange) {
                    var range = editor.createTextRange();console.log(range);
                    range.collapse(true);
                    range.moveEnd('character', pos);
                    range.moveStart('character', pos);
                    range.select();
                }
            }
        },
        interceptTab = function(e){
            if(e.keyCode == 9) {
                e.preventDefault();
                
                var pos = cursor.get(),
                    val = editor.value,
                    left = val.substring(0,pos),
                    right = val.substring(pos),
                    edited = left + tab + right;
               	editor.value = edited;
                cursor.set(pos+tab.length);
                return false;
            }
            return true;
        },
        interceptEnter = function(e){
        ...