fix: solve issue with paste event not triggering on the canvas element

This commit is contained in:
Juanjo Diaz 2022-11-13 16:39:52 +01:00 committed by rodion
parent d2ea65b5c7
commit a516b8c697
1 changed files with 14 additions and 3 deletions

View File

@ -4,7 +4,8 @@ export default class Clipboard {
this._eventHandlers = { this._eventHandlers = {
'copy': this._handleCopy.bind(this), 'copy': this._handleCopy.bind(this),
'paste': this._handlePaste.bind(this) 'paste': this._handlePaste.bind(this),
'pasteOnWindows': this._handlePasteOnWindow.bind(this)
}; };
// ===== EVENT HANDLERS ===== // ===== EVENT HANDLERS =====
@ -57,18 +58,28 @@ export default class Clipboard {
this.onpaste(data); 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 ===== // ===== PUBLIC METHODS =====
grab() { grab() {
if (!Clipboard.isSupported) return; if (!Clipboard.isSupported) return;
this._target.addEventListener('copy', this._eventHandlers.copy); 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() { ungrab() {
if (!Clipboard.isSupported) return; if (!Clipboard.isSupported) return;
this._target.removeEventListener('copy', this._eventHandlers.copy); 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);
} }
} }