Fix: replace copy to clipboard component (#28)

Author: peppescg

package-lock.json

@@ -21,15 +21,13 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@types/prismjs": "^1.26.5",
-    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.462.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.0.2",
@@ -61,4 +59,4 @@
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1"
   }
-}
+}

package.json

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { ClipboardCopy } from "lucide-react";
+
+export function CopyToClipboard({
+  text,
+  className,
+}: {
+  className?: string;
+  text: string;
+}) {
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+  };
+
+  return (
+    <button
+      onClick={copyToClipboard}
+      className={clsx(
+        `absolute top-4 right-8 p-2 rounded-md 
+    bg-gray-700/50 hover:bg-gray-700/70 
+    transition-opacity duration-200 
+    opacity-0 group-hover:opacity-100`,
+        className,
+      )}
+    >
+      <ClipboardCopy className="w-5 h-5 text-gray-200" />
+    </button>
+  );
+}

src/components/CopyToClipboard.tsx

@@ -2,9 +2,8 @@ import remarkGfm from "remark-gfm";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { ClipboardCopy } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { CopyToClipboard } from "./CopyToClipboard";
 
 interface Props {
   children: string;
@@ -61,18 +60,7 @@ export function Markdown({ children, className = "" }: Props) {
               >
                 {String(children).replace(/\n$/, "")}
               </SyntaxHighlighter>
-              <CopyToClipboard text={String(children).replace(/\n$/, "")}>
-                <button
-                  className="
-                    absolute top-4 right-8 p-2 rounded-md 
-                    bg-gray-700/50 hover:bg-gray-700/70 
-                    transition-opacity duration-200 
-                    opacity-0 group-hover:opacity-100
-                  "
-                >
-                  <ClipboardCopy className="w-5 h-5 text-gray-200" />
-                </button>
-              </CopyToClipboard>
+              <CopyToClipboard text={String(children).replace(/\n$/, "")} />
             </div>
           ) : (
             <SyntaxHighlighter