handle code copy error

This commit is contained in:
Mckay Wrigley 2023-03-23 08:20:02 -06:00
parent 71a770c24e
commit 1789351ab5
1 changed files with 65 additions and 61 deletions

View File

@ -1,8 +1,8 @@
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;
@ -10,10 +10,14 @@ interface Props {
lightMode: "light" | "dark";
}
export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
const [buttonText, setButtonText] = useState("Copy code");
const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
}
navigator.clipboard.writeText(value).then(() => {
setButtonText("Copied!");
@ -23,11 +27,11 @@ export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
});
};
const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || '.file';
const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt('Enter file name', suggestedFileName);
const fileName = window.prompt("Enter file name", suggestedFileName);
if(!fileName){
if (!fileName) {
// user pressed cancel on prompt
return;
}
@ -56,7 +60,7 @@ export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
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}/>
<IconDownload size={16} />
</button>
</div>