From 4db98bc19c16d18a048a1903289f90aa97427a77 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Fri, 6 Oct 2023 14:05:29 +1100 Subject: [PATCH] fix: add copy fallback --- .../lib/client-only/hooks/use-copy-to-clipboard.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/lib/client-only/hooks/use-copy-to-clipboard.ts b/packages/lib/client-only/hooks/use-copy-to-clipboard.ts index eeb4805de..78867b62a 100644 --- a/packages/lib/client-only/hooks/use-copy-to-clipboard.ts +++ b/packages/lib/client-only/hooks/use-copy-to-clipboard.ts @@ -34,18 +34,23 @@ export function useCopyToClipboard(): [CopiedValue, CopyFn] { /** * Handle copying values to the clipboard using the ClipboardItem API. * - * Allows us to copy async values for Safari. Does not work in FireFox. + * Works in all browsers except FireFox. * * https://caniuse.com/mdn-api_clipboarditem */ const handleClipboardApiCopy = async (value: CopyValue, blobType = 'text/plain') => { - await navigator.clipboard.write([new ClipboardItem({ [blobType]: value })]); + try { + await navigator.clipboard.write([new ClipboardItem({ [blobType]: value })]); + } catch (e) { + // Fallback to attempt. + await handleWriteTextCopy(value); + } }; /** * Handle copying values to the clipboard using `writeText`. * - * Will not work in Safari for async values. + * Works in all browsers except Safari for async values. */ const handleWriteTextCopy = async (value: CopyValue) => { await navigator.clipboard.writeText(await value);