JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div id="wrap">
  <div id="wrap_top">
    <div id="wrap_opt">
      <ul id="options">
        <li>
        <label for="mime">MIME-type:</label>
        <select id="mime" size="3" class="sel_3">
        <option value="">none</option>
        <option value="text/csv" selected>text/csv</option>
        <option value="text/plain">text/plain</option>
        </select>
        </li><li>
        <label for="charset">Charset encoding:</label>
        <select id="charset" size="4">
        <option value="copy">Copy</option>
        <option value="utf8">UTF-8</option>
        <option value="utf16be" selected>UTF-16 Big Endian</option>
        <option value="utf16le">UTF-16 Little Endian</option>
        </select>
        </li><li>
        <label for="eol">End of line:</label>
        <select id="eol" size="4">
        <option value="lf">LF</option>
        <option value="crlf" selected>CRLF</option>
        <option value="cr">CR</option>
        <option value="lfcr">LFCR</option>
        </select>
        </li><li>
        <label for="method">Open document using:</label>
        <select id="method" size="2" class="sel_2">
        <option value="window.open">Window Open</option>
        <option value="link" selected>Link</option>
        </select>
        </li><li>
          <input type="checkbox" id="bom" title="Include Byte Orde Mark" checked /><label for="bom" class="inl" title="Include Byte Orde Mark">BOM</label>
          <input type="checkbox" id="tab" title="Use tab as delimiter and not comma." /><label for="tab" class="inl" title="Use tab as delimiter and not comma.">Tab</label>
        </li>
      </ul>
    </div>
    <div id="rig">
      <textarea id="in" spellcheck="false">name,city,state
Ԁסกၔ,seattle,washington
ðomer,≄⌢⌣⌤⌥,⌦⌧⌨</textarea>
      <textarea id="out" spellcheck="false"></textarea>
    </div>
  </div>
  <button id="go">Display esc-data</button>
  <button id="down">Download</button>
</div>

CSS

* {
    margin : 0;
    padding: 0;
}
button,
label,
select,
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit] {
    cursor: pointer;
}
#wrap {
    position : relative;
    width    : 860px;
    height   : 490px;
    margin   : 10px auto;
    border   : 1px solid #888;
}
#wrap_top {
    position : relative;
    height   : 420px;
}
#wrap_opt {
    position : relative;
    height   : 390px;
    float    : left;
}
#options {
    list-style : none;
}
#rig {
    float  : right;
    margin : 15px 15px 2px 2px;
    width  : 640px;
}
#in,
#out {
    border : 1px solid #888;
    width  : 100%;
    height : 225px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    font-size: 8pt;
}
#in {
    font-size: 28pt;
}
label,
button,
select {
    font   : 10pt Arial;
    padding: 2px 5px;
    width  : 170px;
}
label {
    display: block;
    margin : 5px 5px 2px 5px;
    /*border: 1px solid orange;*/
}
button,
select {
    margin : 1px 15px 5px 15px;
    border: 1px solid #aaa;
}
.sel_2 {
    height : 32pt;
}
.sel_3 {
    height : 45pt;
}
input {
    margin: 5px 5px 5px 15px;
    vertical-align: middle;
}
.inl {
    display: inline!important;
}

JavaScript

/* NOTE: This code has been updated from the one found at SO.
 *
 * Old : http://jsfiddle.net/kimiliini/HM4rW/10
 */
function DataEnc(a) {
    this.config(a);
}
/*
* http://www.iana.org/assignments/character-sets/character-sets.xhtml
* */
DataEnc._enctype = {
        u8    : ['u8', 'utf8'],
        // RFC-2781, Big endian should be presumed if none given
        u16be : ['u16', 'u16be', 'utf16', 'utf16be', 'ucs2', 'ucs2be'],
        u16le : ['u16le', 'utf16le', 'ucs2le']
};
DataEnc._BOM = {
        'none'     : '',
        'UTF-8'    : '%ef%bb%bf', // Discouraged
        'UTF-16BE' : '%fe%ff',
        'UTF-16LE' : '%ff%fe'
};
DataEnc.prototype = {
    // Basic setup
    config : function(a) {
        var opt = {
            charset: 'u8',
            mime   : 'text/csv',
            base64 : 0,
            bom    : 0
        }, p;
        a = a || {};
        for (p in opt) {
            if (opt.hasOwnProperty(p))   
                this[p] = a.hasOwnProperty(p) ? a[p] : opt[p];
        }
        this.buf  = '';
        this.lead = '';
        this.__intro();
        return this;
    },
    // Create lead based on config
    // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
    __intro : function() {
        var
            g = [],
            c = this.charset || '',
            b = 'none'
        ;
        if (this.mime && this.mime !== '')
            g.push(this.mime);
        if (c !== '') {
            c = c.replace(/[-\s]/g, '').toLowerCase();
            if (DataEnc._enctype.u8.indexOf(c) > -1) {
                c = 'UTF-8';
                if (this.bom)
                    b = c;
                this.enc = this.utf8;
            } else if (DataEnc._enctype.u16be.indexOf(c) > -1) {
                c = 'UTF-16BE';
                if (this.bom)
                    b = c;
                this.enc = this.utf16be;
            } else if (DataEnc._enctype.u16le.indexOf(c) > -1) {
                c = 'UTF-16LE';
                if (this.bom)
             ...