fix(deps): drop react-copy-to-clipboard dependency (#8041)

sanity-io · Dec 14, 2024 · 37b3065 · 37b3065
1 parent ded659e
commit 37b3065
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 36 deletions.
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
@@ -183,7 +183,6 @@
     "@sentry/react": "^8.33.0",
     "@tanstack/react-table": "^8.16.0",
     "@tanstack/react-virtual": "3.0.0-beta.54",
-    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-is": "^18.3.0",
     "@types/shallow-equals": "^1.0.0",
     "@types/speakingurl": "^13.0.3",
@@ -238,7 +237,6 @@
     "quick-lru": "^5.1.1",
     "raf": "^3.4.1",
     "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
-    "react-copy-to-clipboard": "^5.0.4",
     "react-fast-compare": "^3.2.0",
     "react-focus-lock": "^2.8.1",
     "react-i18next": "14.0.2",

diff --git a/packages/sanity/src/structure/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx b/packages/sanity/src/structure/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
@@ -7,7 +7,6 @@ import {
 } from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text, useToast} from '@sanity/ui'
 import {useCallback} from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
 import {SanityDefaultPreview, Translate, useSchema, useTranslation} from 'sanity'
 
 import {Button} from '../../../ui-components'
@@ -232,28 +231,36 @@ export function ConfirmDeleteDialogBody({
                                 {documentId || 'unavailable'}
                               </Text>
                               {documentId && (
-                                <CopyToClipboard
-                                  text={documentId}
+                                <Button
+                                  mode="bleed"
+                                  icon={CopyIcon}
+                                  tooltipProps={{
+                                    content: t(
+                                      'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
+                                    ),
+                                  }}
                                   // eslint-disable-next-line react/jsx-no-bind
-                                  onCopy={() => {
-                                    toast.push({
-                                      title: t(
-                                        'confirm-delete-dialog.cdr-table.id-copied-toast.title',
-                                      ),
-                                      status: 'success',
-                                    })
+                                  onClick={() => {
+                                    navigator.clipboard
+                                      .writeText(documentId)
+                                      .then(() => {
+                                        toast.push({
+                                          status: 'success',
+                                          title: t(
+                                            'confirm-delete-dialog.cdr-table.id-copied-toast.title',
+                                          ),
+                                        })
+                                      })
+                                      .catch(() => {
+                                        toast.push({
+                                          status: 'error',
+                                          title: t(
+                                            'confirm-delete-dialog.cdr-table.id-copied-toast.title-failed',
+                                          ),
+                                        })
+                                      })
                                   }}
-                                >
-                                  <Button
-                                    mode="bleed"
-                                    icon={CopyIcon}
-                                    tooltipProps={{
-                                      content: t(
-                                        'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
-                                      ),
-                                    }}
-                                  />
-                                </CopyToClipboard>
+                                />
                               )}
                             </DocumentIdFlex>
                           </td>

diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
@@ -181,6 +181,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'confirm-delete-dialog.cdr-table.document-id.label': 'Document ID',
   /** The toast title when the copy button has been clicked */
   'confirm-delete-dialog.cdr-table.id-copied-toast.title': 'Copied document ID to clipboard!',
+  /** The toast title when the copy button has been clicked but copying failed */
+  'confirm-delete-dialog.cdr-table.id-copied-toast.title-failed': 'Failed to copy document ID',
   /** The header for the project ID column in the list of cross-dataset references found */
   'confirm-delete-dialog.cdr-table.project-id.label': 'Project ID',
   /** The text in the "Delete anyway" button in the confirm delete dialog that confirms the action */

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml