Merge pull request #359 from zoontek/fix-safari-copy

Author: pvinis

src/components/common/CopyFileButton.js

@@ -3,7 +3,6 @@ import styled from '@emotion/styled'
 import { Button, Popover } from 'antd'
 import { getFileApiURL, replaceWithProvidedAppName } from '../../utils'
 import { CopyOutlined } from '@ant-design/icons'
-import copy from 'copy-to-clipboard'
 
 const popoverContentOpts = {
   default: 'Copy raw contents',
@@ -16,6 +15,29 @@ const CopyFileButton = styled(
       popoverContentOpts.default
     )
 
+    const fetchContent = () =>
+      fetch(getFileApiURL({ packageName, version, path }))
+        .then((response) => response.json())
+        .then((json) => window.atob(json.content))
+        .then((content) => replaceWithProvidedAppName(content, appName))
+
+    const copyContent = () => {
+      // From https://wolfgangrittner.dev/how-to-use-clipboard-api-in-firefox/
+      if (typeof ClipboardItem && navigator.clipboard.write) {
+        const item = new ClipboardItem({
+          'text/plain': fetchContent().then(
+            (content) => new Blob([content], { type: 'text/plain' })
+          ),
+        })
+
+        return navigator.clipboard.write([item])
+      } else {
+        return fetchContent().then((content) =>
+          navigator.clipboard.writeText(content)
+        )
+      }
+    }
+
     if (!open) {
       return null
     }
@@ -30,12 +52,9 @@ const CopyFileButton = styled(
             setPopoverContent(popoverContentOpts.default)
           }}
           onClick={() => {
-            fetch(getFileApiURL({ packageName, version, path }))
-              .then((response) => response.json())
-              .then((json) => window.atob(json.content))
-              .then((content) => replaceWithProvidedAppName(content, appName))
-              .then((content) => copy(content))
-              .then(() => setPopoverContent(popoverContentOpts.copied))
+            copyContent().then(() =>
+              setPopoverContent(popoverContentOpts.copied)
+            )
           }}
         />
       </Popover>