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

126
components/Markdown/CodeBlock.tsx
View File

@ -1,71 +1,75 @@
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;
value: string; value: string;
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 = () => {
navigator.clipboard.writeText(value).then(() => { if (!navigator.clipboard || !navigator.clipboard.writeText) {
setButtonText("Copied!"); return;
}
setTimeout(() => { navigator.clipboard.writeText(value).then(() => {
setButtonText("Copy code"); setButtonText("Copied!");
}, 2000);
});
};
const downloadAsFile = () => {
const fileExtension = programmingLanguages[language] || '.file';
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt('Enter file name', suggestedFileName);
if(!fileName){ setTimeout(() => {
// user pressed cancel on prompt setButtonText("Copy code");
return; }, 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" }); if (!fileName) {
const url = URL.createObjectURL(blob); // user pressed cancel on prompt
const link = document.createElement("a"); return;
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 const blob = new Blob([value], { type: "text/plain" });
language={language} const url = URL.createObjectURL(blob);
style={lightMode === "light" ? oneLight : oneDark} const link = document.createElement("a");
> link.download = fileName;
{value} link.href = url;
</SyntaxHighlighter> link.style.display = "none";
</div> 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>
);
}; };