Create a shared copy-to-clipboard method with web fallback

Author: pimterry

src/components/common/copy-button.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 
 import { Icon } from "../../icons";
 import { styled } from '../../styles';
-import { logError } from '../../errors';
 
 import { clickOnEnter } from '../component-utils';
 import { PillButton } from './pill';
 import { IconButton } from './icon-button';
-
-const clipboardSupported = !!navigator.clipboard;
+import { copyToClipboard } from '../../util/ui';
 
 const CopyIconButton = styled(IconButton)`
     color: ${p => p.theme.mainColor};
@@ -49,8 +47,6 @@ export const CopyButtonIcon = (p: {
     content: string,
     onClick: () => void
 }) => {
-    if (!clipboardSupported) return null;
-
     const [success, showSuccess] = useTemporaryFlag();
 
     return <CopyIconButton
@@ -67,8 +63,6 @@ export const CopyButtonIcon = (p: {
 }
 
 export const CopyButtonPill = (p: { content: string, children?: React.ReactNode }) => {
-    if (!clipboardSupported) return null;
-
     const [success, showSuccess] = useTemporaryFlag();
 
     return <PillButton
@@ -85,13 +79,4 @@ export const CopyButtonPill = (p: { content: string, children?: React.ReactNode
         />
         { p.children }
     </PillButton>;
-}
-
-async function copyToClipboard(content: string) {
-    try {
-        await navigator.clipboard!.writeText(content);
-    } catch (e) {
-        console.log('Failed to copy to the clipboard');
-        logError(e);
-    }
 }

src/components/view/filters/search-filter.tsx

@@ -5,7 +5,7 @@ import { action, computed, observable } from 'mobx';
 import { trackUndo } from 'mobx-shallow-undo';
 
 import { css, styled } from '../../../styles';
-import { isCmdCtrlPressed } from '../../../util/ui';
+import { copyToClipboard, isCmdCtrlPressed } from '../../../util/ui';
 
 import {
     Filter,
@@ -390,16 +390,14 @@ export class SearchFilter<T> extends React.Component<{
             activeFilters.indexOf(f),
         ['desc']);
 
-        if (filtersToCopy.length > 0 && !!navigator.clipboard) {
+        if (filtersToCopy.length > 0) {
             const serialization = filtersToCopy.map(t => t.serialize()).join(' ');
-            navigator.clipboard.writeText(serialization);
+            copyToClipboard(serialization);
             e.preventDefault();
         }
     }
 
     private onCut = (e: React.ClipboardEvent) => {
-        if (!navigator.clipboard) return;
-
         this.onCopy(e);
         this.deleteSelectedFilters();
     }

src/util/ui.ts

@@ -180,4 +180,37 @@ export function useSize(ref: React.RefObject<HTMLElement>, defaultValue: number)
     }, []);
 
     return spaceAvailable;
+}
+
+export async function copyToClipboard(textToCopy: string) {
+    if (navigator.clipboard) {
+        // This will be available on secure domains in supported browsers. It requires
+        // permissions, but not during Electron usage. We ignore permissions here -
+        // if this fails (on secure web usage outside Electron) we'll use the fallback.
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            return; // If this succeeds, we're done
+        } catch (e) {
+            console.warn('Copy to clipboard with navigator.clipboard failed', e);
+            // Didn't succeed - keep going
+        }
+    }
+
+    // This should work everywhere, as long as this method is called from an
+    // event handler:
+    const textArea = document.createElement("textarea");
+    try {
+        textArea.value = textToCopy;
+        textArea.style.position = "absolute";
+        textArea.style.left = "-9999px";
+
+        document.body.prepend(textArea);
+        textArea.select();
+        document.execCommand('copy');
+    } catch (e) {
+        console.warn('Copy to clipboard fallback failed', e);
+        throw e;
+    } finally {
+        textArea.remove();
+    }
 }