Use clippie module to copy to clipboard (#23801)

Externalize clipboard copying to the
[clippie](https://github.com/silverwind/clippie) module which I feel I
can maintain outside this repo for shared benefit with my other
projects.

The module is feature-equivalent to the previous code and has one
improvement where it sets `aria-hidden` on the fallback textarea,
preventing screen readers from picking it up. Also it support `Array` of
`content` as well to copy multiple items at once, in case it's ever
needed.

1 files changed, 2 insertions, 41 deletions

diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js
index 07c439504e..bcbdae2704 100644
--- a/web_src/js/features/clipboard.js
+++ b/web_src/js/features/clipboard.js
@@ -1,48 +1,9 @@
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {toAbsoluteUrl} from '../utils.js';
+import {clippie} from 'clippie';
 
 const {copy_success, copy_error} = window.config.i18n;
 
-export async function copyToClipboard(content) {
-  if (content instanceof Blob) {
-    const item = new ClipboardItem({[content.type]: content});
-    await navigator.clipboard.write([item]);
-  } else { // text
-    try {
-      await navigator.clipboard.writeText(content);
-    } catch {
-      return fallbackCopyToClipboard(content);
-    }
-  }
-  return true;
-}
-
-// 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;
-}
-
 // For all DOM elements with [data-clipboard-target] or [data-clipboard-text],
 // this copy-to-clipboard will work for them
 export function initGlobalCopyToClipboardListener() {
@@ -61,7 +22,7 @@ export function initGlobalCopyToClipboardListener() {
         e.preventDefault();
 
         (async() => {
-          const success = await copyToClipboard(text);
+          const success = await clippie(text);
           showTemporaryTooltip(target, success ? copy_success : copy_error);
         })();