From 3ed9e2f47e6d0213fbe635120de5dc6b75e16c2b Mon Sep 17 00:00:00 2001
From: "Archit Jain (Alexa AI)" <architj@amazon.com>
Date: Mon, 2 Sep 2024 00:53:14 -0700
Subject: [PATCH] Use navigator.clipboard API when available

---
 src/js/components/CopyToClipboard.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/js/components/CopyToClipboard.js b/src/js/components/CopyToClipboard.js
index 62ea78d..c8e51f3 100644
--- a/src/js/components/CopyToClipboard.js
+++ b/src/js/components/CopyToClipboard.js
@@ -25,21 +25,32 @@ export default class extends React.PureComponent {
         }
     }
 
-    handleCopy = () => {
-        const container = document.createElement('textarea');
+    copyText = async (textToCopy) => {
+        if (navigator.clipboard) {
+            return await navigator.clipboard.writeText(textToCopy);
+        } else {
+            const container = document.createElement('textarea');
+            container.innerHTML = textToCopy;
+            document.body.appendChild(container);
+            container.select();
+            document.execCommand('copy');
+            document.body.removeChild(container);
+            
+        }
+
+    }
+    
+    handleCopy = async () => {
         const { clickCallback, src, namespace } = this.props;
 
-        container.innerHTML = JSON.stringify(
+        const textToCopy = JSON.stringify(
             this.clipboardValue(src),
             null,
             '  '
         );
 
-        document.body.appendChild(container);
-        container.select();
-        document.execCommand('copy');
+        await copyText(textToCopy);
 
-        document.body.removeChild(container);
 
         this.copiedTimer = setTimeout(() => {
             this.setState({