JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="drag">holder</div>
<div id="source" style="height: 200px; overflow: auto;">
<div data-css="holder">
</div>
</div>
<button>get code</button><br>
<pre id="html" style="width: 400px; height: 200px;  overflow: auto;"></pre>

CSS

.drag {
    border: 5px solid rgba(0,0,0,0.1);
    padding: 0.2em;
    width: 4em;
    cursor: move;
    background: rgba(255,255,255,0.5);
    text-align: center;
}
pre {
 border: dashed 1px grey;   
}
.active {
   border: solid 1px orange;        
}
*[data-css=holder],
*[data-css=sub-holder] {
    border: dashed 1px grey;  
    display: block;
    margin: 1em; 
    padding: 1em;    
}
.drop {
    border: 1px solid gray;
    margin: 5em auto;
    padding: 1em;
}

JavaScript

jQuery.fn.selectText = function(){ // selection of text
   var doc = document;
   var element = this[0];
   //console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

function replaceAll(find, replace, str) { // replace all 
  return str.replace(new RegExp(find, 'g'), replace);
}


$(".drag").draggable();
var counter = 0;
var subcounter = 0;
var lastcounter = 0;
$('button').click(function() {
  
    $('div[data-css="holder"] > div').addClass($('div[data-css="holder"] > div').text()).html('');
  
  
    var notFilteredCode = $('div[data-css="holder"]')[0].outerHTML;
    var sourceHTML = $('div[data-css="holder"]').html();
    var filteredCode = replaceAll(' data-css="sub-holder" contenteditable="true"','', notFilteredCode);
    filteredCode = replaceAll(' data-css="holder" class="ui-droppable"','', filteredCode);
    
   $('#html').text(filteredCode);
});
$('div[data-css="holder"]').droppable({
    accept: ".drag",
    drop: function( event, ui ) {
        $(".drag").animate({
    left: '0',
    top: '0'
  }, 500, function() {
    // Animation complete.
  });            
        
        $(ui.draggable);
        counter += 1;
       
        $(this).append('\t<div data-css="sub-holder">class-name-' + counter + '</div>\n');
        
        $('div[data-css="sub-holder"]').attr('contenteditable', 'true').focus().selectText();
        //$('div[data-css="sub-holder"]').click(function() {
          //   $(this).focus().selectText();
        //}) 
            $('div[data-css="sub-holder"]:focus').selectText();
    }
});