JSFiddle - React, Tailwind, and code Playground
HTML
Press Ctrl+V:<br /><br />
<canvas style="border:1px solid grey;" id="cc" width="300" height="300"></canvas>
JavaScript
var CLIPBOARD = new CLIPBOARD_CLASS('cc');
//cliboard pasting class
function CLIPBOARD_CLASS(canvas_id){
var _self = this;
var canvas = document.getElementById(canvas_id);
var ctx = document.getElementById(canvas_id).getContext("2d");
var ctrl_pressed = false;
var reading_dom = false;
var text_top = 15;
var pasteCatcher;
var paste_mode;
//handlers
document.addEventListener('keydown', function(e){ _self.on_keyboard_action(e); }, false); //firefox fix
document.addEventListener('keyup', function(e){ _self.on_keyboardup_action(e); }, false); //firefox fix
document.addEventListener('paste', function(e){ _self.paste_auto(e); }, false); //official paste handler
//constructor - prepare
this.init = function(){
//if using auto
if(window.Clipboard) return true;
pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("id", "paste_ff");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
pasteCatcher.style.marginLeft = "-20px";
pasteCatcher.style.width = "10px";
document.body.appendChild(pasteCatcher);
document.getElementById('paste_ff').addEventListener('DOMSubtreeModified', function(){
reading_dom = false;
if(paste_mode == 'auto' || ctrl_pressed == false) return true;
//if paste handle failed - capture pasted object manually
if(pasteCatcher.children.length == 1){
if(pasteCatcher.firstElementChild.src != undefined){
//image
_self.paste_createImage(pasteCatcher.firstElementChild.src);
}
else{
//html
setTimeout(function(){
if(reading_dom == true) return false;
_self.paste_createText(pasteCatcher.innerHTML, false);
reading_dom = true;
}, 10);
}
}
else if(pasteCatcher.children.length == 0){
//text
setTimeout(function(){
if(reading_dom == true) return false;
_self.paste_createText(pasteCatcher.innerHTML, false);
reading_dom = true;
},...