JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://rawgit.com/nathancahill/Split.js/master/split.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<a class="switch" href="#">horizontal</a>
<a class="switch" href="#">vertical</a>
<div class="editor">
  
</div>

<textarea id="code-0">function findSequence(goal) {}</textarea>
<textarea id="code-1">function findSequence(goal) {}</textarea>
<textarea id="code-2">function findSequence(goal) {}</textarea>

CSS

.editor {
    height: 240px;
    border: 1px solid #ddd;
  }

  .split {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
  }

  .gutter {
    background-color: #eee;
  }

  .gutter.gutter-horizontal {
    cursor: ew-resize;
  }
  
  .gutter.gutter-horizontal:after {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    left: -5px;
    border: solid 1px red;
    position: relative;
    z-index: 200;
  }

  .gutter.gutter-vertical {
    cursor: ns-resize;
  }

  .split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
  }

CoffeeScript

layout = []
layout["horizontal"] = """
  <div class="split split-horizontal doc-a"></div>
  <div class="split split-horizontal doc-b"></div>
  <div class="split split-horizontal doc-c"></div>
"""

layout["vertical"] = """
  <div class="split split-vertical doc-a"></div>
  <div class="split split-vertical doc-b"></div>
  <div class="split split-vertical doc-c"></div>
"""
window.cmDoc = []
window.cmDoc[0] = document.getElementById("code-0")
window.cmDoc[1] = CodeMirror.Doc("")
window.cmDoc[2] = CodeMirror.Doc("")

switchers = [].slice.call(document.querySelectorAll(".switch"))
editor    = document.querySelector(".editor")

for switcher in switchers
  switcher.addEventListener "click", ->
    direction = this.innerHTML
    newLay    = Elements.from(layout[direction])
    editor.empty()
    editor.adopt newLay
    panels    = [].slice.call(document.querySelectorAll(".split"))

    Split panels,
      sizes: [33, 33, 33]
      minSize: 40
      gutterSize: 5
      direction: direction
    
    panels.each (panel, index) ->
      
      cm = CodeMirror panel,
        lineNumbers: true
        linkedDoc = document.getElementById("code-#{index}")
      cm.setValue linkedDoc.value
      cm.on "change", (cm) ->
        console.log cm.getValue(), panel.currentIndex
        linkedDoc.value = cm.getValue()