nicolium: do not default to document.execCommand for copy

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/copyable-input.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import Button from '@/components/ui/button';
 import Input from '@/components/ui/input';
+import copy from '@/utils/copy';
 
 interface ICopyableInput {
   /** Text to be copied. */
@@ -18,15 +19,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value, type = 'text', onCopy
   const input = useRef<HTMLInputElement>(null);
 
   const selectInput = () => {
-    input.current?.select();
-
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(value);
-    } else {
-      document.execCommand('copy');
-    }
-
-    onCopy?.();
+    copy(value, onCopy, input.current);
   };
 
   return (

packages/nicolium/src/components/site-error.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { NODE_ENV } from '@/build-config';
@@ -8,6 +8,7 @@ import { useLogo } from '@/hooks/use-logo';
 import { captureSentryException } from '@/sentry';
 import KVStore from '@/storage/kv-store';
 import sourceCode from '@/utils/code';
+import copy from '@/utils/copy';
 import { isNetworkError } from '@/utils/errors';
 import { unregisterSW } from '@/utils/sw';
 
@@ -27,7 +28,6 @@ const SiteError: ErrorRouteComponent = ({ error, info }) => {
   const intl = useIntl();
   const { links, sentryDsn } = useFrontendConfig();
   const { src: logoSrc } = useLogo();
-  const textarea = useRef<HTMLTextAreaElement>(null);
 
   const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
   const [sentryEventId, setSentryEventId] = useState<string>();
@@ -48,12 +48,7 @@ const SiteError: ErrorRouteComponent = ({ error, info }) => {
   };
 
   const handleCopy: React.MouseEventHandler = () => {
-    if (!textarea.current) return;
-
-    textarea.current.select();
-    textarea.current.setSelectionRange(0, 99999);
-
-    document.execCommand('copy');
+    copy(errorText);
   };
 
   useEffect(() => {
@@ -146,14 +141,7 @@ const SiteError: ErrorRouteComponent = ({ error, info }) => {
               <SentryFeedbackForm eventId={sentryEventId} />
             )}
             {errorText && (
-              <Textarea
-                ref={textarea}
-                value={errorText}
-                onClick={handleCopy}
-                isCodeEditor
-                rows={12}
-                readOnly
-              />
+              <Textarea value={errorText} onClick={handleCopy} isCodeEditor rows={12} readOnly />
             )}
 
             {browser && (

packages/nicolium/src/utils/copy.ts

@@ -1,4 +1,4 @@
-const copy = (text: string, onSuccess?: () => void) => {
+const copy = (text: string, onSuccess?: () => void, ref?: HTMLInputElement | null) => {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(text);
 
@@ -6,21 +6,25 @@ const copy = (text: string, onSuccess?: () => void) => {
       onSuccess();
     }
   } else {
-    const textarea = document.createElement('textarea');
-
-    textarea.textContent = text;
-    textarea.style.position = 'fixed';
-
-    document.body.appendChild(textarea);
-
     try {
-      textarea.select();
-      document.execCommand('copy');
+      if (!ref) {
+        const textarea = document.createElement('textarea');
+
+        textarea.textContent = text;
+        textarea.style.position = 'fixed';
+
+        document.body.appendChild(textarea);
+
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+      } else {
+        ref.select();
+        document.execCommand('copy');
+      }
     } catch {
       // Do nothing
     } finally {
-      document.body.removeChild(textarea);
-
       if (onSuccess) {
         onSuccess();
       }