add fallback for copying to clipboard over http (#1)

getumbrel · Aug 15, 2023 · 8916066 · 8916066
1 parent b453471
commit 8916066
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/ui/components/Chat/ChatMessage.tsx b/ui/components/Chat/ChatMessage.tsx
@@ -102,15 +102,30 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
   };
 
   const copyOnClick = () => {
-    if (!navigator.clipboard) return;
-
-    navigator.clipboard.writeText(message.content).then(() => {
-      setMessageCopied(true);
-      setTimeout(() => {
-        setMessageCopied(false);
-      }, 2000);
-    });
+    // fallback to allow copying to clipboard over http
+    const copyToClipboardFallback = (text: string) => {
+      let textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "absolute";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      textArea.remove();
+    };
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(message.content);
+    } else {
+      copyToClipboardFallback(message.content);
+    }
+
+    setMessageCopied(true);
+    setTimeout(() => {
+      setMessageCopied(false);
+    }, 2000);
   };
+
 
   useEffect(() => {
     setMessageContent(message.content);

diff --git a/ui/components/Markdown/CodeBlock.tsx b/ui/components/Markdown/CodeBlock.tsx
@@ -20,17 +20,28 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      return;
+    // fallback to allow copying to clipboard over http
+    const copyToClipboardFallback = (text: string) => {
+      let textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "absolute";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      textArea.remove();
+    };
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(value);
+    } else {
+      copyToClipboardFallback(value);
     }
-
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    });
+
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
   };
   const downloadAsFile = () => {
     const fileExtension = programmingLanguages[language] || '.file';