KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/Markdown/CodeBlock.tsx
View File

@ -1,8 +1,8 @@
import {FC, useState} from "react"; import { generateRandomString, programmingLanguages } from "@/utils/app/data";
import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import { IconDownload } from "@tabler/icons-react";
import {oneDark, oneLight} from "react-syntax-highlighter/dist/cjs/styles/prism"; import { FC, useState } from "react";
import {IconDownload} from '@tabler/icons-react'; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {generateRandomString, programmingLanguages} from '@/utils/app/data'; import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
interface Props { interface Props {
language: string; language: string;
@ -10,10 +10,14 @@ interface Props {
lightMode: "light" | "dark"; 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 [buttonText, setButtonText] = useState("Copy code");
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
}
navigator.clipboard.writeText(value).then(() => { navigator.clipboard.writeText(value).then(() => {
setButtonText("Copied!"); setButtonText("Copied!");
@ -23,11 +27,11 @@ export const CodeBlock: FC<Props> = ({language, value, lightMode}) => {
}); });
}; };
const downloadAsFile = () => { const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || '.file'; const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`; 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 // user pressed cancel on prompt
return; 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" className="text-white bg-none py-0.5 px-2 rounded focus:outline-none hover:bg-blue-700 text-xs"
onClick={downloadAsFile} onClick={downloadAsFile}
> >
<IconDownload size={16}/> <IconDownload size={16} />
</button> </button>
</div> </div>