add copy to clipboard to web editor (#9009)

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -15,6 +15,7 @@ export interface Props {
   displayText?: string;
   className?: string;
   color?: ComponentProps<typeof Button>['color'];
+  indicatorPosition?: 'left' | 'right';
 }
 
 export function CopyButton({
@@ -23,12 +24,30 @@ export function CopyButton({
   displayText = 'copied',
   className,
   color,
+  indicatorPosition = 'right',
   children,
 }: PropsWithChildren<Props>) {
   const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
 
+  function copiedIndicator() {
+    return (
+      <span
+        className={clsx(
+          copiedSuccessfully && styles.fadeout,
+          styles.copyButton,
+          'mx-1',
+          'vertical-center'
+        )}
+      >
+        <Icon icon={Check} />
+        {displayText && <span className="space-left">{displayText}</span>}
+      </span>
+    );
+  }
+
   return (
     <div className={styles.container}>
+      {indicatorPosition === 'left' && copiedIndicator()}
       <Button
         className={className}
         color={color}
@@ -37,21 +56,11 @@ export function CopyButton({
         title="Copy Value"
         type="button"
         icon={Copy}
+        disabled={!copyText}
       >
         {children}
       </Button>
-
-      <span
-        className={clsx(
-          copiedSuccessfully && styles.fadeout,
-          styles.copyButton,
-          'space-left',
-          'vertical-center'
-        )}
-      >
-        <Icon icon={Check} />
-        {displayText && <span className="space-left">{displayText}</span>}
-      </span>
+      {indicatorPosition === 'right' && copiedIndicator()}
     </div>
   );
 }

app/react/components/buttons/CopyButton/useCopy.ts

@@ -1,6 +1,12 @@
 import { useEffect, useState } from 'react';
 
-export function useCopy(copyText: string, fadeDelay = 1000) {
+export type CopyTextType = string | (() => string);
+
+export function useCopy(
+  copyText: CopyTextType,
+  fadeDelay = 1000,
+  context: HTMLElement = document.body
+) {
   const [copiedSuccessfully, setCopiedSuccessfully] = useState(false);
 
   useEffect(() => {
@@ -15,19 +21,25 @@ export function useCopy(copyText: string, fadeDelay = 1000) {
   }, [copiedSuccessfully, fadeDelay]);
 
   function handleCopy() {
+    const text = typeof copyText === 'function' ? copyText() : copyText;
+
+    if (!text) {
+      return;
+    }
+
     // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
     // https://caniuse.com/?search=clipboard
     if (navigator.clipboard) {
-      navigator.clipboard.writeText(copyText);
+      navigator.clipboard.writeText(text);
     } else {
       // https://stackoverflow.com/a/57192718
       const inputEl = document.createElement('textarea');
-      inputEl.value = copyText;
-      document.body.appendChild(inputEl);
+      inputEl.value = text;
+      context.appendChild(inputEl);
       inputEl.select();
       document.execCommand('copy');
       inputEl.hidden = true;
-      document.body.removeChild(inputEl);
+      context.removeChild(inputEl);
     }
     setCopiedSuccessfully(true);
   }