Use clippie module to copy to clipboard

package.json

@@ -19,6 +19,7 @@
  "add-asset-webpack-plugin": "2.0.1",
  "ansi-to-html": "0.7.2",
  "asciinema-player": "3.2.0",
+ "clippie": "3.1.4",
  "css-loader": "6.7.3",
  "dropzone": "6.0.0-beta.2",
  "easymde": "2.18.0",

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);
  })();
 

web_src/js/features/copycontent.js

@@ -1,11 +1,11 @@
-import {copyToClipboard} from './clipboard.js';
+import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {convertImage} from '../utils.js';
 
 const {i18n} = window.config;
 
 async function doCopy(content, btn) {
- const success = await copyToClipboard(content);
+ const success = await clippie(content);
  showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
 }
 

web_src/js/features/repo-code.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import {svg} from '../svg.js';
 import {invertFileFolding} from './file-fold.js';
 import {createTippy} from '../modules/tippy.js';
-import {copyToClipboard} from './clipboard.js';
+import {clippie} from 'clippie';
 import {toAbsoluteUrl} from '../utils.js';
 
 export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/;
@@ -190,7 +190,7 @@ export function initRepoCodeView() {
  currentTarget.closest('tr').outerHTML = blob;
  });
  $(document).on('click', '.copy-line-permalink', async (e) => {
- const success = await copyToClipboard(toAbsoluteUrl(e.currentTarget.getAttribute('data-url')));
+ const success = await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url')));
  if (!success) return;
  document.querySelector('.code-line-button')?._tippy?.hide();
  });