crabapples
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: sync local clipboard to remote on canvas focus

This commit is contained in:
Juanjo Diaz 2022-11-28 19:17:24 +01:00 committed by rodion
parent 9f3b7f7182
commit c3151a101e
2 changed files with 12 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
core/clipboard.js
View File

@ -10,8 +10,7 @@ export default class Clipboard {
this._eventHandlers = { this._eventHandlers = {
'copy': this._handleCopy.bind(this), 'copy': this._handleCopy.bind(this),
'paste': this._handlePaste.bind(this), 'focus': this._handleFocus.bind(this)
'pasteOnWindows': this._handlePasteOnWindow.bind(this)
}; };
// ===== EVENT HANDLERS ===== // ===== EVENT HANDLERS =====
@ -40,7 +39,7 @@ export default class Clipboard {
} }
} }
async _handlePaste(e) { async _handleFocus() {
try { try {
if (navigator.permissions && navigator.permissions.query) { if (navigator.permissions && navigator.permissions.query) {
const permission = await navigator.permissions.query({ name: "clipboard-read", allowWithoutGesture: false }); const permission = await navigator.permissions.query({ name: "clipboard-read", allowWithoutGesture: false });
@ -50,26 +49,15 @@ export default class Clipboard {
// Some browsers might error due to lack of support, e.g. Firefox. // Some browsers might error due to lack of support, e.g. Firefox.
} }
let data;
if (navigator.clipboard.readText) { if (navigator.clipboard.readText) {
try { try {
data = await navigator.clipboard.readText(); const data = await navigator.clipboard.readText();
this.onpaste(data);
} catch (e) { } catch (e) {
/* Do nothing */ /* Do nothing */
return; return;
} }
} else if (e.clipboardData) {
data = e.clipboardData.getData('text/plain');
} }
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 =====
@ -77,15 +65,13 @@ export default class Clipboard {
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('focus', this._eventHandlers.focus);
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('focus', this._eventHandlers.focus);
window.removeEventListener('paste', this._eventHandlers.pasteOnWindows);
} }
} }

14
tests/test.clipboard.js
View File

@ -46,16 +46,14 @@ describe('Automatic Clipboard Sync', function () {
it('should copy local pasted data to the server clipboard', async function () { it('should copy local pasted data to the server clipboard', async function () {
const text = 'Another random string for testing'; const text = 'Another random string for testing';
const clipboard = new Clipboard(); const clipboard = new Clipboard();
clipboard.onpaste = pasterText => expect(pasterText).to.equal(text);
clipboard.onpaste = pastedText => expect(pastedText).to.equal(text);
if (Clipboard.isSupported) { if (Clipboard.isSupported) {
const clipboardData = new DataTransfer(); if (navigator.clipboard.readText) {
clipboardData.setData("text/plain", text); navigator.clipboard.readText.restore();
const clipboardEvent = new ClipboardEvent('paste', { clipboardData }); sinon.stub(navigator.clipboard, "readText").returns(text);
// Force initialization since the constructor is broken in Firefox
if (!clipboardEvent.clipboardData.items.length) {
clipboardEvent.clipboardData.items.add(text, "text/plain");
} }
await clipboard._handlePaste(clipboardEvent); await clipboard._handleFocus();
if (navigator.clipboard.readText) { if (navigator.clipboard.readText) {
expect(navigator.clipboard.readText).to.have.been.called; expect(navigator.clipboard.readText).to.have.been.called;
} }