Re-allow clipboard copy on non-https sites (#17118)

* Re-allow clipboard copy on non-https sites
* fallback clipboard functions
This commit is contained in:
Netduma Luke M 2021-10-19 11:22:16 +01:00 committed by GitHub
parent eaf493be5d
commit 9f3d5c0a23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -16,6 +16,33 @@ function onError(btn) {
btn.dataset.content = btn.dataset.original; btn.dataset.content = btn.dataset.original;
} }
/**
* Fallback to use if navigator.clipboard doesn't exist.
* Achieved via creating a temporary textarea element, selecting the text, and using document.execCommand.
*/
function fallbackCopyToClipboard(text) {
if (!document.execCommand) return false;
const tempTextArea = document.createElement('textarea');
tempTextArea.value = text;
// avoid scrolling
tempTextArea.style.top = 0;
tempTextArea.style.left = 0;
tempTextArea.style.position = 'fixed';
document.body.appendChild(tempTextArea);
tempTextArea.select();
// if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard
const success = document.execCommand('copy');
document.body.removeChild(tempTextArea);
return success;
}
export default function initGlobalCopyToClipboardListener() { export default function initGlobalCopyToClipboardListener() {
document.addEventListener('click', async (e) => { document.addEventListener('click', async (e) => {
let target = e.target; let target = e.target;
@ -33,7 +60,11 @@ export default function initGlobalCopyToClipboardListener() {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
onSuccess(target); onSuccess(target);
} catch { } catch {
onError(target); if (fallbackCopyToClipboard(text)) {
onSuccess(target);
} else {
onError(target);
}
} }
break; break;
} }