fix(ui): passing Promise into ClipboardItem to make it work in Safari

throwing Error in getBaseLayerBlob, instead of returning nil
using copyBlobToClipboard for both Canvas and Text2Image clipboard functionality

Author: parnas

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts

@@ -3,7 +3,7 @@ import { startAppListening } from '..';
 import { $logger } from 'app/logging/logger';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
-import { copyBlobToClipboard } from 'features/canvas/util/copyBlobToClipboard';
+import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
 import { t } from 'i18next';
 
 export const addCanvasCopiedToClipboardListener = () => {
@@ -15,10 +15,12 @@ export const addCanvasCopiedToClipboardListener = () => {
         .child({ namespace: 'canvasCopiedToClipboardListener' });
       const state = getState();
 
-      const blob = await getBaseLayerBlob(state);
+      try {
+        const blob = getBaseLayerBlob(state);
 
-      if (!blob) {
-        moduleLog.error('Problem getting base layer blob');
+        copyBlobToClipboard(blob);
+      } catch (err) {
+        moduleLog.error(String(err));
         dispatch(
           addToast({
             title: t('toast.problemCopyingCanvas'),
@@ -29,8 +31,6 @@ export const addCanvasCopiedToClipboardListener = () => {
         return;
       }
 
-      copyBlobToClipboard(blob);
-
       dispatch(
         addToast({
           title: t('toast.canvasCopiedClipboard'),

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts

@@ -15,10 +15,11 @@ export const addCanvasDownloadedAsImageListener = () => {
         .child({ namespace: 'canvasSavedToGalleryListener' });
       const state = getState();
 
-      const blob = await getBaseLayerBlob(state);
-
-      if (!blob) {
-        moduleLog.error('Problem getting base layer blob');
+      let blob;
+      try {
+        blob = await getBaseLayerBlob(state);
+      } catch (err) {
+        moduleLog.error(String(err));
         dispatch(
           addToast({
             title: t('toast.problemDownloadingCanvas'),

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts

@@ -14,10 +14,11 @@ export const addCanvasImageToControlNetListener = () => {
       const log = logger('canvas');
       const state = getState();
 
-      const blob = await getBaseLayerBlob(state);
-
-      if (!blob) {
-        log.error('Problem getting base layer blob');
+      let blob;
+      try {
+        blob = await getBaseLayerBlob(state);
+      } catch (err) {
+        log.error(String(err));
         dispatch(
           addToast({
             title: t('toast.problemSavingCanvas'),

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts

@@ -13,10 +13,11 @@ export const addCanvasSavedToGalleryListener = () => {
       const log = logger('canvas');
       const state = getState();
 
-      const blob = await getBaseLayerBlob(state);
-
-      if (!blob) {
-        log.error('Problem getting base layer blob');
+      let blob;
+      try {
+        blob = await getBaseLayerBlob(state);
+      } catch (err) {
+        log.error(String(err));
         dispatch(
           addToast({
             title: t('toast.problemSavingCanvas'),

invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts

@@ -9,7 +9,7 @@ export const getBaseLayerBlob = async (state: RootState) => {
   const canvasBaseLayer = getCanvasBaseLayer();
 
   if (!canvasBaseLayer) {
-    return;
+    throw new Error('Problem getting base layer blob');
   }
 
   const {

…tures/canvas/util/copyBlobToClipboard.ts …tures/system/util/copyBlobToClipboard.tsinvokeai/frontend/web/src/features/canvas/util/copyBlobToClipboard.ts renamed to invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts invokeai/frontend/web/src/features/canvas/util/copyBlobToClipboard.ts renamed to invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts

@@ -1,10 +1,13 @@
 /**
  * Copies a blob to the clipboard by calling navigator.clipboard.write().
  */
-export const copyBlobToClipboard = (blob: Blob) => {
+export const copyBlobToClipboard = (
+  blob: Promise<Blob>,
+  type = 'image/png'
+) => {
   navigator.clipboard.write([
     new ClipboardItem({
-      [blob.type]: blob,
+      [type]: blob,
     }),
   ]);
 };

invokeai/frontend/web/src/features/ui/hooks/useCopyImageToClipboard.ts

@@ -1,6 +1,7 @@
 import { useAppToaster } from 'app/components/Toaster';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
 
 export const useCopyImageToClipboard = () => {
   const toaster = useAppToaster();
@@ -22,13 +23,13 @@ export const useCopyImageToClipboard = () => {
         });
       }
       try {
-        const response = await fetch(image_url);
-        const blob = await response.blob();
-        await navigator.clipboard.write([
-          new ClipboardItem({
-            [blob.type]: blob,
-          }),
-        ]);
+        const getImageBlob = async () => {
+          const response = await fetch(image_url);
+          return await response.blob();
+        };
+
+        copyBlobToClipboard(getImageBlob());
+
         toaster({
           title: t('toast.imageCopied'),
           status: 'success',