handle code copy error
This commit is contained in:
Mckay Wrigley
parent
71a770c24e
commit
1789351ab5
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue