JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
<div id="editorContainer">
  <div id="editor"></div>
</div>
<input id="resizeContainer" type="button" value="Resize Container" />
<input id="resizeContainerAndEditor" type="button" value="Resize Container and Editor" />

CSS

#editorContainer {
    width: 200px;
    height: 100px;
    position: relative;
    background-color: red;
}
#editor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
var value = '';
for(var idx= 0; idx < 200; idx++) {
	value += '\r\n';
}
editor.setValue(value);
var clicked = false;
var resizeFirstEditor = function (resizeEditor) {
    var feContainer = document.getElementById('editorContainer');
    var width = '600px';
    if(clicked) {
        width = '200px';
    }
    feContainer.setAttribute("style", "height:" + width);
	feContainer.style.height= width;
    clicked = !clicked;
    if(resizeEditor) {
    	editor.resize();
    }
};

var btn = document.getElementById('resizeContainer');
btn.addEventListener('click', function () {
    resizeFirstEditor();
});
var btn = document.getElementById('resizeContainerAndEditor');
btn.addEventListener('click', function () {
    resizeFirstEditor(true);
});