JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>

<input id="pasteArea" style="height: 100px; width: 100px; background-color: gray;" />
<img id="pastedImage" src="" />
<input id="targetArea" />
</body>
</html>

JavaScript

document.getElementById('pasteArea').onpaste = function (event) {
  console.log(event);
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
	JSON.stringify(items)
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById("pastedImage").src = event.target.result;
      document.getElementById("targetArea").value = "![" + event.timeStamp + "](" + event.target.result + ")";
      event.target.value = event.target.result;
    };
    reader.readAsDataURL(blob);
  }
};