Fix Clipboard in safari browser (#69)

* Fix Clipboard for Safari browser

* Update github action to automatically bump package.json version

Author: cham11ng

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy React Example
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 permissions:
   contents: write
@@ -19,8 +19,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
-          cache-dependency-path: 'example/yarn.lock'
+          cache: "yarn"
+          cache-dependency-path: "example/yarn.lock"
 
       - uses: pnpm/[email protected]
         name: Install pnpm
@@ -55,3 +55,12 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./example/build
+
+      - name: "Automated Version Bump"
+        uses: "phips28/gh-action-bump-version@master"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          minor-wording: "Add,add,new"
+          major-wording: "MAJOR,major,Breaking Change,breaking change"
+          patch-wording: "patch,fixes,fix,Fix"

example/src/App.js

@@ -57,7 +57,7 @@ function App() {
             <CopyButton
               className="button button-outline"
               text={copyState.text}
-              onClick={handleTextCopy}
+              onCopy={handleTextCopy}
             >
               {isTextCopied ? 'Text Copied!' : 'Copy Text'}
             </CopyButton>
@@ -75,14 +75,14 @@ function App() {
             <CopyButton
               className="button button-outline"
               imageRef={imageRef}
-              onClick={handleImageCopy}
+              onCopy={handleImageCopy}
             >
               {isImageCopied ? 'Image Copied!' : 'Copy Image'}
             </CopyButton>
             <CopyButton
               className="button button-outline"
               imageURL={copyState.image}
-              onClick={handleNewImageCopy}
+              onCopy={handleNewImageCopy}
             >
               {isImageNewCopied ? 'Image Copied! (New)' : 'Copy Image (New)'}
             </CopyButton>

src/components/CopyButton.tsx

@@ -4,7 +4,7 @@ import { copyImageToClipboard, copyTextToClipboard } from '../utils/clipboard';
 type CopyProps = {
   children: React.ReactNode;
   className?: string;
-  onClick?: () => void;
+  onCopy?: () => void;
   text?: string;
   imageURL?: string;
   imageRef?: React.RefObject<HTMLDivElement>;
@@ -28,7 +28,7 @@ const CopyButton = (props: CopyProps) => {
       copyImageToClipboard(content);
     }
 
-    props.onClick && props.onClick();
+    props.onCopy && props.onCopy();
   };
 
   return (

src/utils/clipboard.ts

@@ -7,7 +7,7 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  * @returns Promise
  */
 export async function copyTextToClipboard(text: string): Promise<void> {
-  if ('clipboard' in navigator) {
+  if (navigator.clipboard) {
     await navigator.clipboard.writeText(text);
   } else {
     copyTextLegacy(text);
@@ -52,7 +52,7 @@ async function getTextBlobFromUrl(url: string): Promise<Blob> {
  *
  * @param  {string} url
  * @param  {HTMLDivElement} element
- * @returns Promise
+ * @returns {Promise<void>}
  */
 export async function copyImageToClipboard(
   content: string | HTMLDivElement
@@ -63,7 +63,7 @@ export async function copyImageToClipboard(
     return;
   }
 
-  if ('clipboard' in navigator) {
+  if (navigator.clipboard) {
     const { type: mimeType } = await getImageBlobFromUrl(content);
     const blobPromise =
       mimeType === 'image/svg'
@@ -72,26 +72,26 @@ export async function copyImageToClipboard(
 
     let clipboardObject: { [key: string]: any };
 
-    if (!isSafari) {
+    if (isSafari) {
       clipboardObject = { [mimeType]: blobPromise };
     } else {
-      const blob = await blobPromise;
-
-      clipboardObject = { [blob.type]: blob };
+      clipboardObject = { [mimeType]: await blobPromise };
     }
 
     try {
-      return await navigator.clipboard.write([
+      await navigator.clipboard.write([
         new window.ClipboardItem(clipboardObject)
       ]);
     } catch (err) {
       console.warn(`Image not supported.`, err);
-
-      return;
     }
+
+    return;
   }
 
-  console.warn("'navigator.clipboard' is not supported. Pass element instead.");
+  console.warn(
+    "'navigator.clipboard' is not supported in this browser. Pass element instead."
+  );
 }
 
 /**