feat(ui): migrate all clipboard stuff to useClipboard

invokeai/frontend/web/src/common/hooks/useCopyImageToClipboard.ts

@@ -1,26 +1,15 @@
+import { useClipboard } from 'common/hooks/useClipboard';
 import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
-import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
 import { toast } from 'features/toast/toast';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useCopyImageToClipboard = () => {
   const { t } = useTranslation();
-
-  const isClipboardAPIAvailable = useMemo(() => {
-    return Boolean(navigator.clipboard) && Boolean(window.ClipboardItem);
-  }, []);
+  const clipboard = useClipboard();
 
   const copyImageToClipboard = useCallback(
     async (image_url: string) => {
-      if (!isClipboardAPIAvailable) {
-        toast({
-          id: 'PROBLEM_COPYING_IMAGE',
-          title: t('toast.problemCopyingImage'),
-          description: "Your browser doesn't support the Clipboard API.",
-          status: 'error',
-        });
-      }
       try {
         const blob = await convertImageUrlToBlob(image_url);
 
@@ -28,12 +17,12 @@ export const useCopyImageToClipboard = () => {
           throw new Error('Unable to create Blob');
         }
 
-        copyBlobToClipboard(blob);
-
-        toast({
-          id: 'IMAGE_COPIED',
-          title: t('toast.imageCopied'),
-          status: 'success',
+        clipboard.writeImage(blob, () => {
+          toast({
+            id: 'IMAGE_COPIED',
+            title: t('toast.imageCopied'),
+            status: 'success',
+          });
         });
       } catch (err) {
         toast({
@@ -44,8 +33,8 @@ export const useCopyImageToClipboard = () => {
         });
       }
     },
-    [isClipboardAPIAvailable, t]
+    [clipboard, t]
   );
 
-  return { isClipboardAPIAvailable, copyImageToClipboard };
+  return copyImageToClipboard;
 };