JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

<textarea id="input" autofocus></textarea>
<button id="process">Process</button>
<textarea id="output"></textarea>

CSS

* {
    box-sizing: border-box;
}
textarea {
    display: block;
    font-family: monospace;
    padding: 5px 7px;
    width: 100%;
    margin: 0;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) inset;
    min-height: 100px;
    resize: vertical;
}
button {
    padding: 4px 12px;
    margin: 6px 0;
    display: block;
}

JavaScript

$(function() {
    $('#process').on('click', function() {
        $('#output').val(process($('#input').val()));
    });
    
    function process(input) {
        try {
            return format(parse(eval(input)));
        } catch(err) {
            return err.message();
        }
    }
    
    function format(scheme) {
        var r = [
            'image: ' + scheme.img,
            'width: ' + scheme.width,
            'height: ' + scheme.height,
            'parts:'
        ];
        for (var code in scheme.parts) {
            var part = scheme.parts[code];
            r.push('  ' + code + ':');
            r.push('    variants:');
            for (var v = 0; v < part.variants.length; v++) {
                var variant = part.variants[v];
                r.push('      - title: ' + variant.title);
                r.push('        price: ' + variant.price);
            }
            if (part.positions) {
                r.push('    positions: [ [ ' + part.positions.join(' ], [ ') + ' ] ]');
            }
        }
        return r.join('\n');
    }
    
    function parse(scheme) {
        for (var name in scheme.parts) {
            var item = scheme.parts[name];
            var part = {
                name: name,
                variants: []
            };
            var varnum = item.length >> 1 || 0;
            part.variants = [];
            for (var i = 0; i < varnum; i++) {
                part.variants.push({ title: item[2*i] || '', price: item[2*i + 1] || '' });
            }
            if (item[varnum * 2]) {
                part.positions = item[varnum * 2].split('|');
            }
            scheme.parts[name] = part;
        }
        return scheme;
    }

    
});