JSFiddle - React, Tailwind, and code Playground

by athanazio

HTML

<script src="http://ace.ajax.org/build/src/ace.js"></script>
<div class="myeditor" id="editor1">var x = 5;
var y = 10;
function repeat() {
  return x+y;
}

console.log(add(x,y));
</div>

CSS

.ace_editor {
    width:100%;
    height:300px;
}

.readonly-highlight{
    background-color: red;
    opacity: 0.2;
    position: absolute;
}

JavaScript

$(function() {
    var editor     = ace.edit("editor1")
        , session  = editor.getSession()
        , Range    = require("ace/range").Range
        , range    = new Range(2, 0, 2, 20)
        , markerId = session.addMarker(range, "readonly-highlight");
    
    session.setMode("ace/mode/javascript");
    editor.keyBinding.addKeyboardHandler({
        handleKeyboard : function(data, hash, keyString, keyCode, event) {
            if (hash === -1 || (keyCode <= 40 && keyCode >= 37)) return false;
            
            if (intersects(range)) {
                return {command:"null", passEvent:false};
            }
        }
    });
    
    before(editor, 'onPaste', preventReadonly);
    before(editor, 'onCut',   preventReadonly);
    
    range.start  = session.doc.createAnchor(range.start);
    range.end    = session.doc.createAnchor(range.end);
    range.end.$insertRight = true;
    
    function before(obj, method, wrapper) {
        var orig = obj[method];
        obj[method] = function() {
            var args = Array.prototype.slice.call(arguments);
            return wrapper.apply(this, function(){
                return orig.apply(obj, origArgs);
            }, args);
        }
        
        return obj[method];
    }
    
    function intersects(range) {
        return editor.getSelectionRange().intersects(range);
    }
    
    function preventReadonly(next) {
        if (intersects(range)) return;
        next();
    }
});