diff --git a/frontend/src/Components/Link/ClipboardButton.tsx b/frontend/src/Components/Link/ClipboardButton.tsx index 09095ae743..dfce115ac9 100644 --- a/frontend/src/Components/Link/ClipboardButton.tsx +++ b/frontend/src/Components/Link/ClipboardButton.tsx @@ -1,3 +1,4 @@ +import copy from 'copy-to-clipboard'; import React, { useCallback, useEffect, useState } from 'react'; import FormInputButton from 'Components/Form/FormInputButton'; import Icon from 'Components/Icon'; @@ -37,10 +38,16 @@ export default function ClipboardButton({ const handleClick = useCallback(async () => { try { - await navigator.clipboard.writeText(value); + if ('clipboard' in navigator) { + await navigator.clipboard.writeText(value); + } else { + copy(value); + } + setState('success'); - } catch (_) { + } catch (e) { setState('error'); + console.error(`Failed to copy to clipboard`, e); } }, [value]); diff --git a/package.json b/package.json index b3c4378c66..17a5fe5490 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@types/react-dom": "18.2.25", "classnames": "2.3.2", "connected-react-router": "6.9.3", + "copy-to-clipboard": "3.3.3", "element-class": "0.2.2", "filesize": "10.0.7", "fuse.js": "6.6.2", diff --git a/yarn.lock b/yarn.lock index 2f8aa32331..7f50c6454f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2598,7 +2598,21 @@ copy-anything@^2.0.1: dependencies: is-what "^3.14.1" -core-js-compat@^3.37.1, core-js-compat@^3.38.0: +copy-to-clipboard@3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0" + integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA== + dependencies: + toggle-selection "^1.0.6" + +core-js-compat@^3.37.1: + version "3.38.0" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.38.0.tgz#d93393b1aa346b6ee683377b0c31172ccfe607aa" + integrity sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A== + dependencies: + browserslist "^4.23.3" + +core-js-compat@^3.38.0: version "3.38.1" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.38.1.tgz#2bc7a298746ca5a7bcb9c164bcb120f2ebc09a09" integrity sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw== @@ -6812,6 +6826,11 @@ to-space-case@^1.0.0: dependencies: to-no-case "^1.0.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== + "tough-cookie@^2.3.3 || ^3.0.1 || ^4.0.0": version "4.1.4" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"