JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<div class="container">
</div>
<div class="handle">
</div>

CSS

html, body { height: 100%; }

.container {
  min-height: 200px;
  background:red;
}

.handle {
  background: #f7f7f7;
  height: 20px;
  user-select: none;
  cursor: row-resize;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.handle:before {
  content: '\2261'; /* https://en.wikipedia.org/wiki/Triple_bar */
  color: #999;
  position: absolute;
  left: 50%;
}

.handle:hover {
  background: #f0f0f0;
}

.handle:hover:before {
  color: #000;
}

JavaScript

let $handle = document.querySelector(".handle");
let $container = document.querySelector(".container");

let cm = CodeMirror($container, { lineNumbers: true });

function height_of($el) {
	return parseInt(window.getComputedStyle($el).height.replace(/px$/, ""));
}

const MIN_HEIGHT = 200;

var start_x;
var start_y;
var start_h;

function on_drag(e) {
  cm.setSize(null, Math.max(MIN_HEIGHT, (start_h + e.y - start_y)) + "px");
}

function on_release(e) {
  console.log("end");
  document.body.removeEventListener("mousemove", on_drag);
  window.removeEventListener("mouseup", on_release);
}

$handle.addEventListener("mousedown", function (e) {    
  console.log("start");
  start_x = e.x;
  start_y = e.y;
  start_h = height_of($container);

	document.body.addEventListener("mousemove", on_drag);
  window.addEventListener("mouseup", on_release);
});