JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://gleap.org/static/special/parsley-standalone.min.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="http://moxiecode.cachefly.net/tinymce/v8/css/all.min.css?v=8">
<script src="http://gleap.org/static/special/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="http://gleap.org/static/special/tooltipster.css">
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
<script src="http://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<div id="test-controls">
    <div class="form-group" id="non-free-dropdown">
        <label for="pre-dropdown-Test_Dropdown" class="control-label">Test Dropdown</label>
        <select class="papel-dropdown form-control" id="pre-dropdown-Test_Dropdown">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
    <div class="form-group" id="free-dropdown">
        <label for="pre-dropdown-Test_Dropdown_Free" class="control-label">Test Dropdown Freetext</label>
        <input type="text" data-required="true" class="papel-dropdown-freetext form-control" id="pre-dropdown-Test_Dropdown_Free" />
    </div>
    <div class="form-group">
        <label for="pre-essay-Test_Essay" class="control-label">Test Essay *</label>
        <p class="essay-prompt form-control-static">Test Prompt</p>
        <div class="character-limit">Max characters: 10</div>
        <textarea class="papel-essay form-control" id="pre-essay-Test_Essay" name="pre-essay-Test_Essay"></textarea>
        <div id="target" class="character-count-holder">Characters entered: <span class="test-tooltip" title="You have exceeded the maximum character count." id="character-count">0</span> of max 10.</div>
    </div>
    <div...

CSS

.papel-subsection {
    margin-bottom: 45px;
}
.papel-enumeration-table {
    margin: 15px 0 50px 0;
}
.default-checkbox {
    margin-top: 5px;
}
.instructions {
    font-size: 13px;
    color: #505050;
    margin: 20px;
}
.parsley-error {
    border-color: #b94a48;
    background-color: #EC9C99;
    color: white;
}
.section-controls-holder {
    text-align: right;
    padding: 15px;
}
.character-count-holder {
    font-size: 16px;
    padding: 10px;
    background-color: #E0E0E0;
}
.error-tooltip {
    border-radius: 0px;
    border: 1px solid #AC2925;
    background: #D9534F;
    color: #fff;
}
.error-tooltip .tooltipster-content {
    font-size: 14px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 16px;
    padding: 8px 10px;
}
.glyphicon-title {
    margin-bottom: 7px;
    width: 100%;
    padding: 3px;
    border-bottom: solid 1px white;
}
.glyphicon-content {
    font-weight: bold;
    position: relative;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: -2px;
    left: 5px;
}
#test-controls {
    display: none;
}

JavaScript

var DROPDOWN_SELECTED_OPTION_TEMPLATE = Handlebars.compile(
    '#{{ . }} :selected');
var DEFAULT_NUMBER_INPUT_TEMPLATE = Handlebars.compile(
    '#{{ . }}-default');
var DEFAULT_TEXT_INPUT_TEMPLATE = DEFAULT_NUMBER_INPUT_TEMPLATE;
var LAST_ROW_SELECTOR_TEMPLATE = Handlebars.compile('#{{ . }}');
var ENUM_TABLE_ROW_CODE_TEMPLATE = Handlebars.compile(
    '<tr>{{#each vals }}<td>{{ . }}</td>{{/each}}' +
    '<td class="del-control-holder">{{{ delControl }}}</td></tr>'
);
var REMOVE_ROW_CONTROL = '<a class="del-enum-table-ctrl" href="#">delete</a>';
var ENUM_TABLE_DELETE_LINK_SELECTOR = '.del-enum-table-ctrl';
var ENUM_TABLE_CUT_OFF = 4; //'-val'.length;

function createEmptyParseResults () {
    return {
        errors: [],
        parsedValues: {}
    };
}


function parseDropdownNode (results, targetID, freetext) {
    var jquerySelector;
    var passedValidation;

    if (freetext) {
        jquerySelector = '#' + targetID;
        passedValidation = $(jquerySelector).parsley( 'validate' );
    } else {
        jquerySelector = DROPDOWN_SELECTED_OPTION_TEMPLATE(targetID);
        passedValidation = true;
    }
    
    if (passedValidation) {
        results.parsedValues[targetID] = $(jquerySelector).val();
    } else {
        results.errors.push(targetID);
    }
}


function parseEssayNode (results, targetID, required, maxChars) {
    var editor;
    var currentValueHTML;
    var currentValueText;
    
    jquerySelector = '#' + targetID;
    editor = tinyMCE.get(targetID);
    currentValueText = tinymce.trim(editor.getContent({format: 'text'}));
    currentValueHTML = tinymce.trim(editor.getContent());
    
    if (currentValueText.length > maxChars) {
        results.errors.push(targetID);
        return;
    }
    
    if (currentValueText === '') {
        if (required)
            results.errors.push(targetID);
        return;
    }
    
    results.parsedValues[targetID] = currentValueHTML;
}


function parseNumInput(results, targetID, required,...