JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<script src="https://rawgithub.com/shaunxcode/jsedn/master/jsedn.js"></script>
<script src="https://rawgithub.com/shaunxcode/ednio/master/ednio.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/clojure/clojure.js"></script>
<script src="https://rawgithub.com/shaunxcode/5766780/raw/349a24df83babcb7d4af97dd32d6f7cb1403ea2a/gistfile1.js"></script>
<h1>EDN Edit</h1>
<div class="Message"></div>
<div class="SourcePane">
    <h2>Source</h2>
    <input type="text" class="Source" placeholder="edn.io resource" />
    <button class="OpenButton">open</button>
    <button class="SaveButton">save</button>
    <button class="FormatButton">format</button>
    <textarea class="Editor" id="edn-editor"></textarea>
</div>
<h2>Preview</h2>
<div></div>

SCSS

body { 
    font-family: helvetica;
}
.Message {
    position: fixed; 
    padding: 5px;
    top: 0;
    right: 50%;
    left: 33%;
    width:200px;
}
.SourcePane {
    textarea { 
        display: block;
        width: 500px;
        height: 500px;
    }
}

CoffeeScript

editor = CodeMirror.fromTextArea document.getElementById("edn-editor"), 
    lineNumbers: true
    lineWrapping: true
    autoMatchParens: true

$(".FormatButton").click ->
    CodeMirror.commands.selectAll editor
    editor.autoFormatRange(
        editor.getCursor(true)
        editor.getCursor(false))
        
$source = $(".Source")
$msg = $(".Message")
msg = (txt) -> 
    $msg.text(txt).fadeIn() 
    $msg.fadeOut 3000

$(".OpenButton").click -> 
    ednio.get($source.val())
        .done (data) -> 
            editor.setValue jsedn.encode data
            msg "#{$source.val()} opened"
        .fail ->
            msg "Could not open #{$source.val()}"
    
$(".SaveButton").click -> 
    ednVal = editor.getValue()
    try 
        ednio.set($source.val(), ednVal)
            .done -> 
                msg "saved"
            .fail -> 
                msg "could not save"
    catch e
        msg "Could not parse edn: #{e}"