From f8b6ee6ab99808e0f28ca55f43be330fa7663e67 Mon Sep 17 00:00:00 2001
From: alex <alex@dytry.ch>
Date: Fri, 26 May 2023 09:24:21 +0100
Subject: [PATCH] remove safari special-casing for paste (#1470)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, we had a bunch of special-casing around paste to support
safari quirks on desktop and ios.

Since upgrading radix-ui and useGesture, these are no longer needed and
were actually causing issues. This diff removes the special casing for
paste and makes it a normal action that get triggered the same way as
any other.

### Change Type
- [x] `patch` — Bug Fix

### Test Plan

1. Copy text outside of tldraw, paste in tldraw with the context menu,
edit menu, and keyboard shortcut
2. Repeat for images outside of tldraw
3. Repeat for shapes inside of tldraw

### Release Notes

[fixes a regression introduced during this release]
---
 packages/ui/api-report.md                     |  8 ++--
 .../ui/src/lib/components/ContextMenu.tsx     | 38 -------------------
 packages/ui/src/lib/components/Menu.tsx       | 33 +---------------
 packages/ui/src/lib/hooks/useActions.tsx      | 25 ++++++------
 .../ui/src/lib/hooks/useClipboardEvents.ts    | 18 +++++----
 .../ui/src/lib/hooks/useContextMenuSchema.tsx |  2 +-
 packages/ui/src/lib/hooks/useMenuSchema.tsx   |  7 +---
 7 files changed, 30 insertions(+), 101 deletions(-)

diff --git a/packages/ui/api-report.md b/packages/ui/api-report.md
index d0128c588..2f7efd0a5 100644
--- a/packages/ui/api-report.md
+++ b/packages/ui/api-report.md
@@ -1025,10 +1025,10 @@ export function useLanguages(): {
 export function useLocalStorageState<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
 
 // @public (undocumented)
-export function useMenuClipboardEvents(source: TLUiEventSource): {
-    copy: () => void;
-    cut: () => void;
-    paste: (data: ClipboardItem[] | DataTransfer, point?: VecLike) => Promise<void>;
+export function useMenuClipboardEvents(): {
+    copy: (source: TLUiEventSource) => void;
+    cut: (source: TLUiEventSource) => void;
+    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
 };
 
 // @public (undocumented)
diff --git a/packages/ui/src/lib/components/ContextMenu.tsx b/packages/ui/src/lib/components/ContextMenu.tsx
index 0b2dd0722..a106198b3 100644
--- a/packages/ui/src/lib/components/ContextMenu.tsx
+++ b/packages/ui/src/lib/components/ContextMenu.tsx
@@ -5,7 +5,6 @@ import * as React from 'react'
 import { useValue } from 'signia-react'
 import { MenuChild } from '../hooks/menuHelpers'
 import { useBreakpoint } from '../hooks/useBreakpoint'
-import { useMenuClipboardEvents } from '../hooks/useClipboardEvents'
 import { useContextMenuSchema } from '../hooks/useContextMenuSchema'
 import { useMenuIsOpen } from '../hooks/useMenuIsOpen'
 import { useReadonly } from '../hooks/useReadonly'
@@ -61,7 +60,6 @@ function ContextMenuContent() {
 	const [_, handleSubOpenChange] = useMenuIsOpen('context menu sub')
 
 	const isReadonly = useReadonly()
-	const { paste } = useMenuClipboardEvents('context-menu')
 	const breakpoint = useBreakpoint()
 	const container = useContainer()
 
@@ -73,42 +71,6 @@ function ContextMenuContent() {
 		switch (item.type) {
 			case 'custom': {
 				switch (item.id) {
-					case 'MENU_PASTE': {
-						return (
-							<_ContextMenu.Item key={item.id}>
-								<Button
-									className="tlui-menu__button"
-									data-wd={`menu-item.${item.id}`}
-									kbd="$v"
-									label="action.paste"
-									disabled={item.disabled}
-									onClick={() => {
-										if (!app.isSafari || (app.isSafari && app.isIos)) {
-											navigator.clipboard.read().then((clipboardItems) => {
-												paste(clipboardItems, app.inputs.currentPagePoint)
-											})
-										}
-									}}
-									onMouseDown={() => {
-										if (app.isSafari && !app.isIos) {
-											// NOTE: This must be a onMouseDown for Safari/desktop, onClick doesn't work at the time of writing... 😒
-											navigator.clipboard.read().then((clipboardItems) => {
-												paste(clipboardItems, app.inputs.currentPagePoint)
-											})
-										}
-									}}
-									// onPointerUp={() => {
-									// 	if (app.isSafari && app.isIos) {
-									// 		// NOTE: This must be a onPointerUp for Safari/mobile, onClick doesn't work at the time of writing... 😒
-									// 		navigator.clipboard.read().then((clipboardItems) => {
-									// 			paste(clipboardItems, app.inputs.currentPagePoint)
-									// 		})
-									// 	}
-									// }}
-								/>
-							</_ContextMenu.Item>
-						)
-					}
 					case 'MOVE_TO_PAGE_MENU': {
 						return <MoveToPageMenu key={item.id} />
 					}
diff --git a/packages/ui/src/lib/components/Menu.tsx b/packages/ui/src/lib/components/Menu.tsx
index 70b80d533..64e56b8cb 100644
--- a/packages/ui/src/lib/components/Menu.tsx
+++ b/packages/ui/src/lib/components/Menu.tsx
@@ -1,8 +1,7 @@
-import { App, preventDefault, useApp } from '@tldraw/editor'
+import { App, useApp } from '@tldraw/editor'
 import * as React from 'react'
 import { MenuChild } from '../hooks/menuHelpers'
 import { useBreakpoint } from '../hooks/useBreakpoint'
-import { useMenuClipboardEvents } from '../hooks/useClipboardEvents'
 import { useMenuSchema } from '../hooks/useMenuSchema'
 import { useReadonly } from '../hooks/useReadonly'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
@@ -37,7 +36,6 @@ function MenuContent() {
 	const menuSchema = useMenuSchema()
 	const breakpoint = useBreakpoint()
 	const isReadonly = useReadonly()
-	const { paste } = useMenuClipboardEvents('menu')
 
 	function getMenuItem(app: App, item: MenuChild, parent: MenuChild | null, depth: number) {
 		switch (item.type) {
@@ -48,35 +46,6 @@ function MenuContent() {
 					return <LanguageMenu key="item" />
 				}
 
-				if (item.id === 'MENU_PASTE') {
-					return (
-						<M.Item
-							key={item.id}
-							data-wd={`menu-item.${item.id}`}
-							kbd="$v"
-							label="action.paste"
-							disabled={item.disabled}
-							onMouseDown={() => {
-								if (app.isSafari && navigator.clipboard?.read) {
-									// NOTE: This must be a onMouseDown for Safari/desktop, onClick doesn't work at the time of writing...
-									navigator.clipboard.read().then((clipboardItems) => {
-										paste(clipboardItems)
-									})
-								}
-							}}
-							onClick={() => {
-								if (app.isSafari) {
-									// noop
-								} else if (navigator.clipboard?.read) {
-									navigator.clipboard.read().then((clipboardItems) => {
-										paste(clipboardItems)
-									})
-								}
-							}}
-							onPointerUp={preventDefault}
-						/>
-					)
-				}
 				return null
 			}
 			case 'group': {
diff --git a/packages/ui/src/lib/hooks/useActions.tsx b/packages/ui/src/lib/hooks/useActions.tsx
index f6424469d..b775d7671 100644
--- a/packages/ui/src/lib/hooks/useActions.tsx
+++ b/packages/ui/src/lib/hooks/useActions.tsx
@@ -64,17 +64,12 @@ function makeActions(actions: ActionItem[]) {
 export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 	const app = useApp()
 
-	// const saveFile = useSaveFile()
-	// const saveFileAs = useSaveFileAs()
-	// const newFile = useNewFile()
-	// const openFile = useOpenFile()
-
 	const { addDialog, clearDialogs } = useDialogs()
 	const { clearToasts } = useToasts()
 
 	const insertMedia = useInsertMedia()
 	const printSelectionOrPages = usePrint()
-	const { cut, copy } = useMenuClipboardEvents('unknown')
+	const { cut, copy, paste } = useMenuClipboardEvents()
 	const copyAs = useCopyAs()
 	const exportAs = useExportAs()
 
@@ -631,9 +626,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				kbd: '$x',
 				readonlyOk: false,
 				onSelect(source) {
-					trackEvent('cut', { source })
 					app.mark('cut')
-					cut()
+					cut(source)
 				},
 			},
 			{
@@ -642,8 +636,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				kbd: '$c',
 				readonlyOk: true,
 				onSelect(source) {
-					trackEvent('copy', { source })
-					copy()
+					copy(source)
 				},
 			},
 			{
@@ -651,9 +644,14 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				label: 'action.paste',
 				kbd: '$v',
 				readonlyOk: false,
-				onSelect() {
-					// must be inlined with a custom menu item
-					// the kbd listed here should have no effect
+				onSelect(source) {
+					navigator.clipboard?.read().then((clipboardItems) => {
+						paste(
+							clipboardItems,
+							source,
+							source === 'context-menu' ? app.inputs.currentPagePoint : undefined
+						)
+					})
 				},
 			},
 			{
@@ -931,6 +929,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 		copyAs,
 		cut,
 		copy,
+		paste,
 		clearDialogs,
 		clearToasts,
 		printSelectionOrPages,
diff --git a/packages/ui/src/lib/hooks/useClipboardEvents.ts b/packages/ui/src/lib/hooks/useClipboardEvents.ts
index 731fb68cf..6bf8dda5e 100644
--- a/packages/ui/src/lib/hooks/useClipboardEvents.ts
+++ b/packages/ui/src/lib/hooks/useClipboardEvents.ts
@@ -539,33 +539,37 @@ const handleNativeOrMenuCopy = (app: App) => {
 }
 
 /** @public */
-export function useMenuClipboardEvents(source: TLUiEventSource) {
+export function useMenuClipboardEvents() {
 	const app = useApp()
 	const trackEvent = useEvents()
 
 	const copy = useCallback(
-		function onCopy() {
+		function onCopy(source: TLUiEventSource) {
 			if (app.selectedIds.length === 0) return
 
 			handleNativeOrMenuCopy(app)
 			trackEvent('copy', { source })
 		},
-		[app, trackEvent, source]
+		[app, trackEvent]
 	)
 
 	const cut = useCallback(
-		function onCut() {
+		function onCut(source: TLUiEventSource) {
 			if (app.selectedIds.length === 0) return
 
 			handleNativeOrMenuCopy(app)
 			app.deleteShapes()
 			trackEvent('cut', { source })
 		},
-		[app, trackEvent, source]
+		[app, trackEvent]
 	)
 
 	const paste = useCallback(
-		async function onPaste(data: DataTransfer | ClipboardItem[], point?: VecLike) {
+		async function onPaste(
+			data: DataTransfer | ClipboardItem[],
+			source: TLUiEventSource,
+			point?: VecLike
+		) {
 			// If we're editing a shape, or we are focusing an editable input, then
 			// we would want the user's paste interaction to go to that element or
 			// input instead; e.g. when pasting text into a text shape's content
@@ -577,7 +581,7 @@ export function useMenuClipboardEvents(source: TLUiEventSource) {
 			} else {
 				// Read it first and then recurse, kind of weird
 				navigator.clipboard.read().then((clipboardItems) => {
-					paste(clipboardItems, app.inputs.currentPagePoint)
+					paste(clipboardItems, source, point)
 				})
 			}
 		},
diff --git a/packages/ui/src/lib/hooks/useContextMenuSchema.tsx b/packages/ui/src/lib/hooks/useContextMenuSchema.tsx
index 99fad62a3..3000edb3b 100644
--- a/packages/ui/src/lib/hooks/useContextMenuSchema.tsx
+++ b/packages/ui/src/lib/hooks/useContextMenuSchema.tsx
@@ -163,7 +163,7 @@ export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvide
 				'clipboard-group',
 				oneSelected && menuItem(actions['cut']),
 				oneSelected && menuItem(actions['copy']),
-				showMenuPaste && menuCustom('MENU_PASTE', { readonlyOk: false })
+				showMenuPaste && menuItem(actions['paste'])
 			),
 			atLeastOneShapeOnPage &&
 				menuGroup(
diff --git a/packages/ui/src/lib/hooks/useMenuSchema.tsx b/packages/ui/src/lib/hooks/useMenuSchema.tsx
index 66c8c4b6f..f5de9705a 100644
--- a/packages/ui/src/lib/hooks/useMenuSchema.tsx
+++ b/packages/ui/src/lib/hooks/useMenuSchema.tsx
@@ -97,12 +97,7 @@ export function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderPr
 						'clipboard-actions',
 						menuItem(actions['cut'], { disabled: noneSelected }),
 						menuItem(actions['copy'], { disabled: noneSelected }),
-						{
-							id: 'MENU_PASTE',
-							type: 'custom',
-							disabled: !showMenuPaste,
-							readonlyOk: false,
-						}
+						menuItem(actions['paste'], { disabled: !showMenuPaste })
 					),
 					menuGroup(
 						'conversions',