JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div class="cooked">
          <aside class="quote" data-post="39156" data-topic="1000"><div class="title" style="cursor: pointer;">
<div class="quote-controls"><i class="fa fa-chevron-down" title="expand/collapse"></i><a href="/t/the-1-million-s-likes-s-high-club/1000/39156" title="go to the quoted post" class="back"></a></div>
<img width="20" height="20" src="//what.thedailywtf.com/user_avatar/what.thedailywtf.com/loopback0/40/13519.png" class="avatar">loopback0:</div>
<blockquote>
<p>It says every day but I'm still logged in there from 2+ days ago.</p>
  <aside class="quote" data-post="39170" data-topic="1000"><div class="title" style="cursor: pointer;">
<div class="quote-controls"><i class="fa fa-chevron-down" title="expand/collapse"></i><a href="/t/the-1-million-s-likes-s-high-club/1000/39170" title="go to the quoted post" class="back"></a></div>
<img width="20" height="20" src="//what.thedailywtf.com/user_avatar/what.thedailywtf.com/boomzilla/40/13465.png" class="avatar">boomzilla:</div>
<blockquote><p>Nah...somewhere around here</p></blockquote></aside>
<p>Every Discoday, presumably.</p>
</blockquote></aside>

<p>Nah...somewhere around here, <a class="mention" href="/users/riking">@riking</a> reported that the wipe process is broken. <code>:schockedface:</code></p>

<p></p><pre><code class="lang-auto hljs bash">        <span class="hljs-string">"0"</span>: <span class="hljs-string">"The site seems to be working fine."</span>,
        <span class="hljs-string">"250"</span>: <span class="hljs-string">"The site seems to be working..."</span>,
        <span class="hljs-string">"300"</span>: <span class="hljs-string">"The site seems to be offline."</span>,
        <span class="hljs-string">"350"</span>: <span class="hljs-string">"The site seems to be very offline."</span></code></pre><p></p>
        </div>
              
              <div id="out">OUT</div>
              <div id="code">OUT</div>
              
              <textarea id="wmd-input">aaaaa
     ...

CSS

#out{
    border:1px dashed red;
    margin-top:20px;
    
}

#wmd-input {
    
    width:300px;
    height:200px;
}

JavaScript

function getFirstAndLastTextNodes(el){
    var res = el.find("*").contents().filter(function(){
    console.log("A");
    return this.nodeType ===3;
    });
    if(res.length === 0) return;
    
    var f = 0;
    var l = res.length-1;
    
    if(f===l){
        return [res[0],res[0],"SAME"]
    } else{
        return [res[0],res[l],"DIFF"]
    }
}

//<div id="out">dsadsa </div>

function onebox_handler(el){
 var oneboxes  = el.find("aside.onebox");
    oneboxes.each(function(i,itm){
        var link = $(itm).find('h4 a:first');
        $(itm).html("\n\n"+ link.attr("href") + "\n\n");
    });
}

function quote_handler(el){
    
var reply_quote = el.find("aside.quote>blockquote");
console.warn(reply_quote);

$($(reply_quote).get().reverse()).each(function (i, itm) {

        //console.log("ITEM:", itm);
        //var o_p = $(itm).parent("aside")[0];
        $(itm).attr("reduce", true);
        var o_p = $(itm).closest("aside")[0];
        //debugger;
        var p = o_p.cloneNode(true);
        var title = $(p).find("div.title");
        //var img = $(title).find("img.avatar");
        var img = $(title).find("img");
        //console.log(img);
        $(p).attr("img", img.attr("src"));
    
        //    var avatar_src = img.attr("src");
        var avatar_src = img.attr("src") || "/user_avatar/what.thedailywtf.com/bot/40/";
        title.remove(); //cleanup
        var args_topic = $(p).attr("data-topic");
        var args_post = $(p).attr("data-post");
        var  args_user = $(p).attr("data-user");
        //var args_user = avatar_src.match(/\/user_avatar\/what.thedailywtf.com\/([A-z0-9]+)\//)[1];
        var reduce = $("<reduce>");
        if(title.length===0){
             reduce.append(document.createTextNode("[quote]\n\n"));
             reduce.append($(p).html());
             reduce.append(document.createTextNode("[/quote]"));
        } else{
            reduce.append(document.createTextNode("[quote=\""+ args_user + ", post:"+args_post+ ", topic:" +...