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.

assets/translations/main.json

@@ -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",

packages/tldraw/src/lib/ui/context/actions.tsx

@@ -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) => {
+					navigator.clipboard
-						paste(
+						?.read()
-							clipboardItems,
+						.then((clipboardItems) => {
-							source,
+							paste(
-							source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
+								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,

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -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'

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -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',