PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix "copy as png" in firefox when dom.events.asyncClipboard.clipboardItem is enabled (#1342)

Browse source 
Fixes the issue outlined in #1325.

### Test Plan
In firefox

1. Enable clipboard in firefox by going to `about:config` and enabling
`dom.events.asyncClipboard.clipboardItem` (remember to turn it off
afterwards)
2. Test that `copy-as -> PNG` copies the image

In other browsers

1. Test that `copy-as -> PNG` still copies the image

### Release Notes

- Fix "copy as png" in firefox when
`dom.events.asyncClipboard.clipboardItem` is enabled
This commit is contained in:
Orange Mug 2023-05-11 07:59:45 +01:00 committed by GitHub
parent 9d5f3fb2fd
commit 88e6f441b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/ui/src/lib/hooks/useCopyAs.ts
View file

@ -47,28 +47,46 @@ export function useCopyAs() {
case 'jpeg':
case 'png': {
const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'
const blobPromise = getExportedImageBlob(app, ids, format).then((blob) => {
if (blob) {
if (window.navigator.clipboard) {
return blob
}
throw new Error('Copy not supported')
} else {
addToast({
id: 'copy-fail',
icon: 'warning-triangle',
title: msg('toast.error.copy-fail.title'),
description: msg('toast.error.copy-fail.desc'),
})
throw new Error('Copy not possible')
}
})
window.navigator.clipboard.write([
new ClipboardItem({
// Note: This needs to use the promise based approach for safari/ios to not bail on a permissions error.
[mimeType]: getExportedImageBlob(app, ids, format).then((blob) => {
if (blob) {
if (window.navigator.clipboard) {
return blob
}
throw new Error('Copy not supported')
} else {
addToast({
id: 'copy-fail',
icon: 'warning-triangle',
title: msg('toast.error.copy-fail.title'),
description: msg('toast.error.copy-fail.desc'),
})
throw new Error('Copy not possible')
}
window.navigator.clipboard
.write([
new ClipboardItem({
// Note: This needs to use the promise based approach for safari/ios to not bail on a permissions error.
[mimeType]: blobPromise,
}),
}),
])
])
.catch((err: any) => {
// Firefox will fail with the above if `dom.events.asyncClipboard.clipboardItem` is enabled.
// See <https://github.com/tldraw/tldraw/issues/1325>
if (!err.toString().match(/^TypeError: DOMString not supported/)) {
console.error(err)
}
blobPromise.then((blob) => {
window.navigator.clipboard.write([
new ClipboardItem({
// Note: This needs to use the promise based approach for safari/ios to not bail on a permissions error.
[mimeType]: blob,
}),
])
})
})
break
}