qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🐛 Fix copy react component to clipboard in Safari

Browse Source
This commit is contained in:
pheralb 2024-04-09 23:46:13 +01:00
parent 6000cbb6a5
commit 37486f48e4
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/copySvg.svelte
View File

@ -104,8 +104,8 @@
}); });
}; };
// Copy as React component: // Convert SVG as React component:
const copyToClipboardAsReactComponent = async (tsx: boolean) => { const convertSvgReactComponent = async (tsx: boolean) => {
const svgUrlToCopy = getSvgUrl(); const svgUrlToCopy = getSvgUrl();
optionsOpen = false; optionsOpen = false;
@ -122,7 +122,7 @@
body: JSON.stringify({ code: content, typescript: tsx, name: title }) body: JSON.stringify({ code: content, typescript: tsx, name: title })
}); });
const data = await getCode.json(); const data = await getCode.json();
await navigator.clipboard.writeText(data); await copyReactContent(data);
toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, { toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, {
description: `${svgInfo.title} - ${svgInfo.category}` description: `${svgInfo.title} - ${svgInfo.category}`
}); });
@ -135,6 +135,18 @@
isLoading = false; isLoading = false;
} }
}; };
// Copy React content:
const copyReactContent = async (content: string) => {
try {
const clipboardItem = new ClipboardItem({
'text/plain': new Blob([content], { type: 'text/plain' })
});
await navigator.clipboard.write([clipboardItem]);
} catch (error) {
await navigator.clipboard.writeText(content);
}
};
</script> </script>
<Popover.Root open={optionsOpen} onOpenChange={(isOpen) => (optionsOpen = isOpen)}> <Popover.Root open={optionsOpen} onOpenChange={(isOpen) => (optionsOpen = isOpen)}>
@ -162,7 +174,7 @@
class={cn(buttonStyles, 'rounded-md w-full')} class={cn(buttonStyles, 'rounded-md w-full')}
title="Copy as React component" title="Copy as React component"
disabled={isLoading} disabled={isLoading}
on:click={() => copyToClipboardAsReactComponent(true)} on:click={() => convertSvgReactComponent(true)}
> >
<ReactIcon iconSize={18} color="#2563eb" /> <ReactIcon iconSize={18} color="#2563eb" />
<span>Copy TSX</span> <span>Copy TSX</span>
@ -171,7 +183,7 @@
class={cn(buttonStyles, 'rounded-md w-full')} class={cn(buttonStyles, 'rounded-md w-full')}
title="Copy as React component" title="Copy as React component"
disabled={isLoading} disabled={isLoading}
on:click={() => copyToClipboardAsReactComponent(false)} on:click={() => convertSvgReactComponent(false)}
> >
<ReactIcon iconSize={18} color="#60a5fa" /> <ReactIcon iconSize={18} color="#60a5fa" />
<span>Copy JSX</span> <span>Copy JSX</span>