JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

Input Visual:
<br>
<textarea id="input_view"></textarea>
<textarea id="output_view"></textarea>
<div id="output_html_view"></div>

CSS

textarea {
    white-space:pre-wrap;
}
#input_view {
    width:300px;
    height:350px;
}
#output_view {
    width:300px;
    height:350px;
}
#output_html_view {
    width:300px;
    border:1px dashed green;
    padding:10px;
}
aside.quote blockquote {
    margin-top: 0;
}
aside.quote {
    margin-top: 1em;
    margin-bottom: 1em;
}
blockquote {
    background-color: #e9e9e9;
    border-left: 5px solid #cfcfcf;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
}
aside.quote .title {
    border-left: 5px solid #cfcfcf;
    background-color: #e9e9e9;
    color: #646464;
    padding: 12px 12px 1px 12px;
    -webkit-user-select: none;
}
aside.quote .title {
    border-left: 5px solid #cfcfcf;
    background-color: #e9e9e9;
    color: #646464;
    padding: 12px 12px 1px 12px;
    -webkit-user-select: none;
}
aside.quote .title img {
    margin-top: -4px;
}
img {
    padding: 1px;
    vertical-align: middle;
}
.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result {
    background: #dcdcdc;
    border-left: 5px solid #cacaca;
}
.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result {
    background: #dcdcdc;
    border-left: 5px solid #cacaca;
}
blockquote>*:last-child {
    margin-bottom: 0 !important;
}

JavaScript

var str = '[quote="tar, post:2, topic:1111"]\n[quote="tar, post:1, topic:2222"]\nLevel 2\n[/quote]\n\nLevel 1\n\n[quote="tar, post:1, topic:3333"]\nLevel 2\n[/quote]\nLevel 1\n[/quote]\n\n[quote="tar, post:1, topic:4444"]\nLevel 1\n[/quote]\n\n\nnot in any level';

//var str = '[quote="tar, post:2, topic:1111"]\n[quote="tar, post:1, topic:2222"]\nLevel 2\n[/quote]\n\nLevel 1\n\n[quote="tar, post:1, topic:3333"]\nLevel 2\n[/quote]\nLevel 1\n[/quote]\n\n[quote="tar, post:1, topic:4444"]\nLevel 1\n[/quote]\n\nSome Stuff\n\n[quote="tar, post:2, topic:5555"]';



$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};


function update_output(str) {
    $("#output_view")[0].value = str;
    $("#output_html_view").html(str);
}

function update_input(str) {
    $("#input_view").html(str);
}


var ParseQuote = function () {
    // Note: used  (.|[\r\n]+) to match any other content. to support new line. [\s\S]+ does not work. 
    var re = /(\[quote.+\])|(\[\/quote\])|(.|[\r\n]+)/g;
    var opens = 0;
    var closed = 0;
    var _buffer = [];
    // parse arguments passed in open block tag
    // "username, post:0, topic:0"
    // return a hash 
    // {username:username, post:0, topic:0}
    function parse_handle(str) {
        var rx = /\[quote=\"(.+)\"\]/;
        var m1 = str.match(rx);
        var parg = {};
        var no_name_args = ["username", "post", "topic"];
        if (m1) {
            var args = m1[1].split(",");
            for (var i=0; i<args.length ;i++) {
                var k_v = args[i].trim().split(":", 2);
                if (k_v.length == 2) {
                    parg[k_v[0]] = k_v[1];
                } else {
                    if (no_name_args.length > 0) {
                        parg[no_name_args.shift()] = k_v[0];
                    }
                }
            }
            console.log(parg);
        }
        console.log("params:", m1[1]);
        return parg;
    }

    function...