Merge pull request #4124 from ProjectMirador/copy-to-clipboard

Replace react-copy-to-clipboard with our own callback.

package.json

@@ -43,6 +43,7 @@
     "@react-aria/live-announcer": "^3.1.2",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "deepmerge": "^4.2.2",
     "dompurify": "^3.0.0",
     "i18next": "^21.0.0 || ^22.0.0 || ^23.0.0 || ^24.0.0",
@@ -54,7 +55,6 @@
     "prop-types": "^15.6.2",
     "rdndmb-html5-to-touch": "^8.0.0",
     "re-reselect": "^5.0.0",
-    "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
     "react-dnd-multi-backend": "^8.0.0",

src/components/WorkspaceExport.jsx

@@ -1,4 +1,4 @@
-import { useId, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -12,8 +12,8 @@ import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import PropTypes from 'prop-types';
+import copy from 'copy-to-clipboard';
 import { useTranslation } from 'react-i18next';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { WorkspaceDialog } from './WorkspaceDialog';
 
 /**
@@ -24,7 +24,12 @@ export function WorkspaceExport({
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
   const titleId = useId();
-  const exportedState = JSON.stringify(exportableState, null, 2);
+  const exportedState = useMemo(() => JSON.stringify(exportableState, null, 2), [exportableState]);
+  const onCopyClick = useCallback(() => {
+    copy(exportedState);
+    setCopied(true)
+  }, [exportedState, setCopied])
+
 
   if (copied) {
     return (
@@ -45,7 +50,6 @@ export function WorkspaceExport({
       />
     );
   }
-
   return (
     <WorkspaceDialog
       aria-labelledby={titleId}
@@ -79,12 +83,7 @@ export function WorkspaceExport({
 
       <DialogActions>
         <Button onClick={handleClose}>{t('cancel')}</Button>
-        <CopyToClipboard
-          onCopy={() => setCopied(true)}
-          text={exportedState}
-        >
-          <Button variant="contained" color="primary">{t('copy')}</Button>
-        </CopyToClipboard>
+        <Button onClick={onCopyClick} variant="contained" color="primary">{t('copy')}</Button>
       </DialogActions>
     </WorkspaceDialog>
   );