JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<p>
<b>Bold1</b></br>
<b>Bold2</b></br>
<b>Bold3</b>
</p>


<div class="cooked">
          <aside class="quote" data-post="16" data-topic="47733"><div class="title" style="cursor: pointer;">
<div class="quote-controls"><i class="fa fa-chevron-down" title="expand/collapse"></i><a  title="go to the quoted post" class="back"></a></div>
<img width="20" height="20" src="//what.thedailywtf.com/user_avatar/what.thedailywtf.com/anonymous234/40/19308.png" class="avatar">anonymous234:</div>
              <blockquote><p>Best way to <b>guarantee</b> uniqueness.</p></blockquote></aside>

<p><code>Typos password</code></p>

              <p>Wh<b>o</b>ah, what are all these files??? Where did my stuff go???</p>
        </div>

JavaScript

$(window).on("keyup", function (e) {
    if (e.keyCode = 81) { //q
        runCode();
    }
})



function runCode() {
    var ls = window.lastSelection = window.getSelection();

    console.log(window.lastSelection);
    var is_extending = ls.baseNode !== ls.extentNode;
    console.log("base == extent node?", is_extending);
    //get_all_involved_nodes(ls,ls.baseNode, ls.extentNode);
    get_all_involved_nodes2(ls)
}


function is_node_in_quote(n){
    var reached_root = false;
    var mi=50;
    console.log($(n).parents());
    console.log("has cooked root", $(n).parents("div.cooked"));
    /*while(reached_root === false & mi>0){
        mi--;
        
    }
    */
    
}


function find_common_ancestors(elm1,elm2){
    console.log("---------------------------------");
    console.log($(elm1).parents(), $(elm2).parents());
    console.log("---------------------------------");
}
    


function get_all_involved_nodes2(s) {
    var nodes = [];
    var node_agg = [];
    
    console.log("--------------------------INVOVLED-------------------------");
    var r = s.getRangeAt(0);
    console.log(r);
    find_common_ancestors(r.startContainer,r.endContainer);
    var cur_elm = r.startContainer;
    var last_element = r.endContainer;
    var common_element = r.commonAncestorContainer;
    //is_node_in_quote(cur_elm);
    var mi = 10;
    var moved_to_next_sibling = false; //when iterating if flag is true, it indicate that we traversed to the parent element since there where no more nextSiblings.
    var moved_to_parent = false;
    var was_text_node = false;
    
    while ( mi != 0) {
        mi--;
        //console.log(cur_elm);
        //console.log($(cur_elm).text());
        if (cur_elm.nodeType == 3) { //#text
            was_text_node = true;
            if($(cur_elm).text().replace(/[\n\r\s]+/g,"").length  == 0 && false){
                console.log("EMTPY");
            } else{
                console.log(">",cur_elm.parentNode.tagName + " ."...