fix: copy image to clipboard in Firefox

cheminfo · Jan 24, 2024 · 21ce320 · 21ce320
1 parent 313c3bd
commit 21ce320
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 32 deletions.
diff --git a/src/component/hooks/useExport.tsx b/src/component/hooks/useExport.tsx
@@ -25,8 +25,8 @@ export default function useExport() {
       const hideLoading = await alert.showLoading(
         'Exporting as NMRium process in progress',
       );
-      setTimeout(() => {
-        copyPNGToClipboard(rootRef, 'nmrSVG');
+      setTimeout(async () => {
+        await copyPNGToClipboard(rootRef, 'nmrSVG');
         hideLoading();
         alert.success('Image copied to clipboard');
       }, 0);

diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
@@ -110,9 +110,9 @@ export default function MoleculePanelHeader({
     exportAsSVG(rootRef, `molSVG${currentIndex} `, 'molFile');
   }, [rootRef, currentIndex]);
 
-  const saveAsPNGHandler = useCallback(() => {
+  const saveAsPNGHandler = useCallback(async () => {
     if (!rootRef) return;
-    copyPNGToClipboard(rootRef, `molSVG${currentIndex} `);
+    await copyPNGToClipboard(rootRef, `molSVG${currentIndex} `);
     alert.success('MOL copied as PNG to clipboard');
   }, [rootRef, alert, currentIndex]);
 
@@ -149,7 +149,7 @@ export default function MoleculePanelHeader({
             break;
           }
           case 'png':
-            saveAsPNGHandler();
+            void saveAsPNGHandler();
             break;
           case 'svg':
             saveAsSVGHandler();

diff --git a/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx b/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx
@@ -124,7 +124,7 @@ export default function AnalysisChart(props: PlotChartPros) {
 
   function handleCopy() {
     if (chartParentRef.current) {
-      copyPNGToClipboard(
+      void copyPNGToClipboard(
         chartParentRef.current,
         svgId,
         css({ text: { fill: 'black' } }),

diff --git a/src/component/utility/export.ts b/src/component/utility/export.ts
@@ -4,8 +4,6 @@ import JSZip from 'jszip';
 import lodashGet from 'lodash/get';
 import { JpathTableColumn, SpectraTableColumn } from 'nmr-load-save';
 
-import { newClipboardItem, write } from '../../utils/clipboard/clipboard';
-
 /**
  * export the experiments result in JSON format
  * @param data
@@ -161,31 +159,34 @@ function copyDataURLClipboardFireFox(image) {
   img.remove();
 }
 
-function copyBlobToClipboard(canvas: HTMLCanvasElement) {
-  canvas.toBlob((b) => {
-    if (!b) return;
-
-    (async () => {
-      const clip = await newClipboardItem({
-        [b.type]: b,
-      });
+async function resolveBlob(b: Blob): Promise<Blob> {
+  return new Promise((resolve) => {
+    resolve(b);
+  });
+}
 
-      await write([clip]);
-    })()
-      .catch(() => {
-        const png = canvas.toDataURL('image/png', 1);
-        copyDataURLClipboardFireFox(png);
-        URL.revokeObjectURL(png);
-      })
-      .then(() => {
-        // eslint-disable-next-line no-console
-        console.log('experiment copied.');
-      })
-      .catch(reportError);
+async function writeImageToClipboard(image: Blob, isSafari = false) {
+  await navigator.clipboard.write([
+    new ClipboardItem({ [image.type]: isSafari ? resolveBlob(image) : image }),
+  ]);
+}
+async function copyBlobToClipboard(canvas: HTMLCanvasElement) {
+  canvas.toBlob(async (b) => {
+    if (!b) return;
+    const isSafari = /^(?<safari>(?!chrome|android).)*safari/i.test(
+      navigator.userAgent,
+    );
+    if (typeof ClipboardItem !== 'undefined') {
+      await writeImageToClipboard(b, isSafari).catch(reportError);
+    } else {
+      const png = canvas.toDataURL('image/png', 1);
+      copyDataURLClipboardFireFox(png);
+      URL.revokeObjectURL(png);
+    }
   });
 }
 
-function copyPNGToClipboard(
+async function copyPNGToClipboard(
   rootRef: HTMLDivElement,
   elementID: string,
   css?: SerializedStyles,
@@ -204,16 +205,16 @@ function copyPNGToClipboard(
 
     const img = new Image();
     const url = URL.createObjectURL(blob);
-    img.addEventListener('load', () => {
+    img.addEventListener('load', async () => {
       context?.drawImage(img, 0, 0);
-      copyBlobToClipboard(canvas);
+      await copyBlobToClipboard(canvas);
     });
     img.src = url;
   } catch (error) {
     if (error instanceof ReferenceError) {
       // eslint-disable-next-line no-alert
       alert(
-        'Your browser does not support this feature, please use Google Chrome',
+        'Your browser does not support this feature, please use Google Chrome or Firefox',
       );
     }
     // TODO: handle error.