Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 01:01:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add safari clipboard copy support (#486)

Browse Source
This commit is contained in:
David Nguyen
2023-10-17 12:40:36 +11:00
committed by GitHub
parent 8d2e50d1fe
commit 4b09693862
8 changed files with 163 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/lib/client-only/hooks/use-copy-to-clipboard.ts
View File

@ -1,21 +1,28 @@
import { useState } from 'react';
export type CopiedValue = string | null;
export type CopyFn = (_text: string) => Promise<boolean>;
export type CopyFn = (_text: CopyValue, _blobType?: string) => Promise<boolean>;
type CopyValue = Promise<string> | string;
export function useCopyToClipboard(): [CopiedValue, CopyFn] {
const [copiedText, setCopiedText] = useState<CopiedValue>(null);
const copy: CopyFn = async (text) => {
const copy: CopyFn = async (text, blobType = 'text/plain') => {
if (!navigator?.clipboard) {
console.warn('Clipboard not supported');
return false;
}
const isClipboardApiSupported = Boolean(typeof ClipboardItem && navigator.clipboard.write);
// Try to save to clipboard then save it in the state if worked
try {
await navigator.clipboard.writeText(text);
setCopiedText(text);
isClipboardApiSupported
? await handleClipboardApiCopy(text, blobType)
: await handleWriteTextCopy(text);
setCopiedText(await text);
return true;
} catch (error) {
console.warn('Copy failed', error);
@ -24,5 +31,30 @@ export function useCopyToClipboard(): [CopiedValue, CopyFn] {
}
};
/**
* Handle copying values to the clipboard using the ClipboardItem API.
*
* Works in all browsers except FireFox.
*
* https://caniuse.com/mdn-api_clipboarditem
*/
const handleClipboardApiCopy = async (value: CopyValue, blobType = 'text/plain') => {
try {
await navigator.clipboard.write([new ClipboardItem({ [blobType]: value })]);
} catch (e) {
// Fallback attempt.
await handleWriteTextCopy(value);
}
};
/**
* Handle copying values to the clipboard using `writeText`.
*
* Works in all browsers except Safari for async values.
*/
const handleWriteTextCopy = async (value: CopyValue) => {
await navigator.clipboard.writeText(await value);
};
return [copiedText, copy];
}