Add a toast for missing clipboard permissions. (#4117)

Shows a toast notifying the user that pasting failed due to clipboard
permissions. Resolves
https://github.com/orgs/tldraw/projects/53?pane=issue&itemId=70294454


![image](https://github.com/tldraw/tldraw/assets/2523721/704aaca2-a087-4b5b-a0bc-dd710960a318)


### Change type

- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`

### Test plan

1. Open a new private window.
2. Copy some shapes and paste them. Make sure you don't allow the
clipboard access.
3. You should see the toast.

### Release notes

- Show a toast when pasting failed due to missing clipboard permissions.
This commit is contained in:
Mitja Bezenšek 2024-07-09 14:33:01 +02:00 committed by GitHub
parent 9a3afa2e2a
commit ec0ec71c69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 26 additions and 9 deletions

View file

@ -59,6 +59,8 @@
"action.open-file": "Open file",
"action.pack": "Pack",
"action.paste": "Paste",
"action.paste-error-title": "Pasting failed",
"action.paste-error-description": "Could not paste due to missing clipboard permissions. Please enable the permissions and try again.",
"action.print": "Print",
"action.redo": "Redo",
"action.remove-frame": "Remove frame",

File diff suppressed because one or more lines are too long

View file

@ -86,7 +86,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
const editor = useEditor()
const { addDialog, clearDialogs } = useDialogs()
const { clearToasts } = useToasts()
const { clearToasts, addToast } = useToasts()
const msg = useTranslation()
const insertMedia = useInsertMedia()
@ -944,13 +944,22 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
label: 'action.paste',
kbd: '$v',
onSelect(source) {
navigator.clipboard?.read().then((clipboardItems) => {
paste(
clipboardItems,
source,
source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
)
})
navigator.clipboard
?.read()
.then((clipboardItems) => {
paste(
clipboardItems,
source,
source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
)
})
.catch(() => {
addToast({
title: msg('action.paste-error-title'),
description: msg('action.paste-error-description'),
severity: 'error',
})
})
},
},
{
@ -1427,6 +1436,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
trackEvent,
overrides,
addDialog,
addToast,
insertMedia,
exportAs,
copyAs,

View file

@ -63,6 +63,8 @@ export type TLUiTranslationKey =
| 'action.open-file'
| 'action.pack'
| 'action.paste'
| 'action.paste-error-title'
| 'action.paste-error-description'
| 'action.print'
| 'action.redo'
| 'action.remove-frame'

View file

@ -63,6 +63,9 @@ export const DEFAULT_TRANSLATION = {
'action.open-file': 'Open file',
'action.pack': 'Pack',
'action.paste': 'Paste',
'action.paste-error-title': 'Pasting failed',
'action.paste-error-description':
'Could not paste due to missing clipboard permissions. Please enable the permissions and try again.',
'action.print': 'Print',
'action.redo': 'Redo',
'action.remove-frame': 'Remove frame',