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 = {
'copy': this._handleCopy.bind(this),
'paste': this._handlePaste.bind(this),
'pasteOnWindows': this._handlePasteOnWindow.bind(this)
'focus': this._handleFocus.bind(this)
};
// ===== EVENT HANDLERS =====
@ -40,7 +39,7 @@ export default class Clipboard {
}
}
async _handlePaste(e) {
async _handleFocus() {
try {
if (navigator.permissions && navigator.permissions.query) {
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.
}
let data;
if (navigator.clipboard.readText) {
try {
data = await navigator.clipboard.readText();
const data = await navigator.clipboard.readText();
this.onpaste(data);
} catch (e) {
/* Do nothing */
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 =====
@ -77,15 +65,13 @@ export default class Clipboard {
grab() {
if (!Clipboard.isSupported) return;
this._target.addEventListener('copy', this._eventHandlers.copy);
// this._target.addEventListener('paste', this._eventHandlers.paste);
window.addEventListener('paste', this._eventHandlers.pasteOnWindows);
this._target.addEventListener('focus', this._eventHandlers.focus);
}
ungrab() {
if (!Clipboard.isSupported) return;
this._target.removeEventListener('copy', this._eventHandlers.copy);
// this._target.removeEventListener('paste', this._eventHandlers.paste);
window.removeEventListener('paste', this._eventHandlers.pasteOnWindows);
this._target.removeEventListener('focus', this._eventHandlers.focus);
}
}

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 () {
const text = 'Another random string for testing';
const clipboard = new Clipboard();
clipboard.onpaste = pasterText => expect(pasterText).to.equal(text);
clipboard.onpaste = pastedText => expect(pastedText).to.equal(text);
if (Clipboard.isSupported) {
const clipboardData = new DataTransfer();
clipboardData.setData("text/plain", text);
const clipboardEvent = new ClipboardEvent('paste', { clipboardData });
// Force initialization since the constructor is broken in Firefox
if (!clipboardEvent.clipboardData.items.length) {
clipboardEvent.clipboardData.items.add(text, "text/plain");
if (navigator.clipboard.readText) {
navigator.clipboard.readText.restore();
sinon.stub(navigator.clipboard, "readText").returns(text);
}
await clipboard._handlePaste(clipboardEvent);
await clipboard._handleFocus();
if (navigator.clipboard.readText) {
expect(navigator.clipboard.readText).to.have.been.called;
}