From a516b8c6978a9469b49e58021c8e8ce4c35dc518 Mon Sep 17 00:00:00 2001 From: Juanjo Diaz Date: Sun, 13 Nov 2022 16:39:52 +0100 Subject: [PATCH] fix: solve issue with paste event not triggering on the canvas element --- core/clipboard.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/core/clipboard.js b/core/clipboard.js index 29b2a356..90fbb8be 100644 --- a/core/clipboard.js +++ b/core/clipboard.js @@ -4,7 +4,8 @@ export default class Clipboard { this._eventHandlers = { 'copy': this._handleCopy.bind(this), - 'paste': this._handlePaste.bind(this) + 'paste': this._handlePaste.bind(this), + 'pasteOnWindows': this._handlePasteOnWindow.bind(this) }; // ===== EVENT HANDLERS ===== @@ -57,18 +58,28 @@ export default class Clipboard { this.onpaste(data); } + // For some reason, the paste event doesn't trigger on the canvas element. + // As a workaround, we capture it on the window and check if the active + // element is the canvas. + async _handlePasteOnWindow(e) { + if (document.activeElement !== this._target) return; + this._eventHandlers.paste(e); + } + // ===== PUBLIC METHODS ===== grab() { if (!Clipboard.isSupported) return; this._target.addEventListener('copy', this._eventHandlers.copy); - this._target.addEventListener('paste', this._eventHandlers.paste); + // this._target.addEventListener('paste', this._eventHandlers.paste); + window.addEventListener('paste', this._eventHandlers.pasteOnWindows); } ungrab() { if (!Clipboard.isSupported) return; this._target.removeEventListener('copy', this._eventHandlers.copy); - this._target.removeEventListener('paste', this._eventHandlers.paste); + // this._target.removeEventListener('paste', this._eventHandlers.paste); + window.removeEventListener('paste', this._eventHandlers.pasteOnWindows); } }