From 1789351ab55b6af78ea64c28247ee7172c782983 Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Thu, 23 Mar 2023 08:20:02 -0600
Subject: [PATCH] handle code copy error

---
 components/Markdown/CodeBlock.tsx | 126 +++++++++++++++---------------
 1 file changed, 65 insertions(+), 61 deletions(-)

diff --git a/components/Markdown/CodeBlock.tsx b/components/Markdown/CodeBlock.tsx
index 89d2d25..e4cf103 100644
--- a/components/Markdown/CodeBlock.tsx
+++ b/components/Markdown/CodeBlock.tsx
@@ -1,71 +1,75 @@
-import {FC, useState} from "react";
-import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
-import {oneDark, oneLight} from "react-syntax-highlighter/dist/cjs/styles/prism";
-import {IconDownload} from '@tabler/icons-react';
-import {generateRandomString, programmingLanguages} from '@/utils/app/data';
+import { generateRandomString, programmingLanguages } from "@/utils/app/data";
+import { IconDownload } from "@tabler/icons-react";
+import { FC, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface Props {
-    language: string;
-    value: string;
-    lightMode: "light" | "dark";
+  language: string;
+  value: string;
+  lightMode: "light" | "dark";
 }
 
-export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
-    const [buttonText, setButtonText] = useState("Copy code");
+export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
+  const [buttonText, setButtonText] = useState("Copy code");
 
-    const copyToClipboard = () => {
-        navigator.clipboard.writeText(value).then(() => {
-            setButtonText("Copied!");
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
 
-            setTimeout(() => {
-                setButtonText("Copy code");
-            }, 2000);
-        });
-    };
-    const downloadAsFile = () => {
-        const fileExtension = programmingLanguages[language] || '.file';
-        const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
-        const fileName = window.prompt('Enter file name', suggestedFileName);
+    navigator.clipboard.writeText(value).then(() => {
+      setButtonText("Copied!");
 
-        if(!fileName){
-            // user pressed cancel on prompt
-            return;
-        }
+      setTimeout(() => {
+        setButtonText("Copy code");
+      }, 2000);
+    });
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || ".file";
+    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
+    const fileName = window.prompt("Enter file name", suggestedFileName);
 
-        const blob = new Blob([value], { type: "text/plain" });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.download = fileName;
-        link.href = url;
-        link.style.display = "none";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-    };
-    return (
-        <div className="relative text-[16px]">
-            <div className="flex items-center justify-end">
-                <button
-                    className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
-                    onClick={copyToClipboard}
-                >
-                    {buttonText}
-                </button>
-                <button
-                    className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
-                    onClick={downloadAsFile}
-                >
-                    <IconDownload size={16}/>
-                </button>
-            </div>
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
 
-            <SyntaxHighlighter
-                language={language}
-                style={lightMode === "light" ? oneLight : oneDark}
-            >
-                {value}
-            </SyntaxHighlighter>
-        </div>
-    );
+    const blob = new Blob([value], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <div className="relative text-[16px]">
+      <div className="flex items-center justify-end">
+        <button
+          className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
+          onClick={copyToClipboard}
+        >
+          {buttonText}
+        </button>
+        <button
+          className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
+          onClick={downloadAsFile}
+        >
+          <IconDownload size={16} />
+        </button>
+      </div>
+
+      <SyntaxHighlighter
+        language={language}
+        style={lightMode === "light" ? oneLight : oneDark}
+      >
+        {value}
+      </SyntaxHighlighter>
+    </div>
+  );
 };