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

//<div id="out">dsadsa </div>
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>");
        reduce.append(document.createTextNode("[quote=\""+ args_user + ", post:"+args_post+ ", topic:" + args_topic + "\"]"));
        reduce.append($(p).html());
        reduce.append(document.createTextNode("[/quote]"));
        reduce.append("<br><br>");
    
        // $(p).html("<reduce>"+"[quote=" + args_user + ", topic:" + args_topic + "]" + $(p).html() + "[/quote]"+"</reduce>");
        //$("#out").append(p);
        $(o_p).html(reduce);
        $(o_p).attr("REDUCE", true);
        //$("#out").append(reduce);
    });



    var to_be_reduced = $(el).find("[reduce='true']");
    //console.log(to_be_reduced);



    to_be_reduced.replaceWith(function(a,b,c){
        //console.log(a,b,c,this);
        var r = $("<reduce>");
            r.append($(this).contents());
        return r;
        //return "<reduce>" + r + </reduce>";
    });

}



function fix_aside_missing_attr(el){
    var...