JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/interactjs@1.4.11/dist/interact.min.js"></script>
<button id="btnInsertImage">Insert Image</button>
  <div class="container-wrap">
  <div class="container-content" contenteditable="true">This is the content of the container. The content is provided along with the image.
    The image will be moved around and resized as required. The image can move within the boundary of the container.</div>
  </div>
  <button id="btnSubmit">Submit</button>
  
  <div class="out-container-wrap">
  </div>

CSS

.resize-drag{
  z-index: 200;
  position: absolute;
  border: 2px dashed #ccc;
}
.out-container-content	,.container-content{
  background-color: #fafcaa;
  height: 340px;
}
#btnInsertImage{
  margin-bottom: 10px;
}

JavaScript

$('#btnInsertImage').on('click', function(){
var $img = document.createElement('img');
      $img.setAttribute('src','https://via.placeholder.com/800x800');
      $img.setAttribute('class','resize-drag');
      document.querySelector(".container-wrap").appendChild($img);
      
      var rect = document.querySelector(".container-wrap").getBoundingClientRect();
      $img.style.left =  rect.left;
      $img.style.top = rect.top;
})

$('#btnSubmit').on('click', function(){
//cleanup
      var $out = document.querySelector(".out-container-wrap");
      while ($out.hasChildNodes()) {
          $out.removeChild($out.lastChild);
      }
      
      //get source
      var source = document.querySelector('.container-wrap')
      
      //get data
      var data = getSource(source);
      
      //add data to target
      setSource($out,data);
});

function resizeMoveListener(event){
        var target = event.target,
      		x = (parseFloat(target.dataset.x) || 0),
      		y = (parseFloat(target.dataset.y) || 0);
    
	        // update the element's style
	        target.style.width  = event.rect.width + 'px';
	        target.style.height = event.rect.height + 'px';
	    
	        // translate when resizing from top or left edges
	        x += event.deltaRect.left;
	        y += event.deltaRect.top;
	        updateTranslate(target,x,y);
      }
      
      function dragMoveListener (event) {
        var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.dataset.x) || 0) + event.dx,
        y = (parseFloat(target.dataset.y) || 0) + event.dy;
        updateTranslate(target,x,y);
      }
      
      function updateTranslate(target, x, y){
        // translate the element
        target.style.webkitTransform =
        target.style.transform =
          'translate(' + x + 'px, ' + y + 'px)';
    
        // update the position attributes
        target.dataset.x = x;
        target.dataset.y =  y;
   ...