Fix paste at point (#4104)

This PR fixes the paste at point logic.

### Change type

- [x] `bugfix`

### Test plan

1. copy, paste (in original position)
2. hold shift to paste at cursor
3. turn on paste at cursor mode
4. copy, paste (at cursor)
5. hold shift to paste in original position

packages/editor/api-report.md

@@ -720,11 +720,11 @@ export const defaultUserPreferences: Readonly<{
     color: "#02B1CC" | "#11B3A3" | "#39B178" | "#55B467" | "#7B66DC" | "#9D5BD2" | "#BD54C6" | "#E34BA9" | "#EC5E41" | "#F04F88" | "#F2555A" | "#FF802B";
     edgeScrollSpeed: 1;
     isDynamicSizeMode: false;
+    isPasteAtCursorMode: false;
     isSnapMode: false;
     isWrapMode: false;
     locale: "ar" | "ca" | "cs" | "da" | "de" | "en" | "es" | "fa" | "fi" | "fr" | "gl" | "he" | "hi-in" | "hr" | "hu" | "id" | "it" | "ja" | "ko-kr" | "ku" | "my" | "ne" | "no" | "pl" | "pt-br" | "pt-pt" | "ro" | "ru" | "sl" | "sv" | "te" | "th" | "tr" | "uk" | "vi" | "zh-cn" | "zh-tw";
     name: "New User";
-    pasteAtCursor: false;
 }>;
 
 // @public
@@ -3365,6 +3365,8 @@ export interface TLUserPreferences {
     // (undocumented)
     isDynamicSizeMode?: boolean | null;
     // (undocumented)
+    isPasteAtCursorMode?: boolean | null;
+    // (undocumented)
     isSnapMode?: boolean | null;
     // (undocumented)
     isWrapMode?: boolean | null;
@@ -3372,8 +3374,6 @@ export interface TLUserPreferences {
     locale?: null | string;
     // (undocumented)
     name?: null | string;
-    // (undocumented)
-    pasteAtCursor?: boolean | null;
 }
 
 // @public (undocumented)
@@ -3475,6 +3475,8 @@ export class UserPreferencesManager {
     // (undocumented)
     getIsDynamicResizeMode(): boolean;
     // (undocumented)
+    getIsPasteAtCursorMode(): boolean;
+    // (undocumented)
     getIsSnapMode(): boolean;
     // (undocumented)
     getIsWrapMode(): boolean;
@@ -3483,8 +3485,6 @@ export class UserPreferencesManager {
     // (undocumented)
     getName(): string;
     // (undocumented)
-    getPasteAtCursor(): boolean;
-    // (undocumented)
     getUserPreferences(): {
         animationSpeed: number;
         color: string;

packages/editor/src/lib/config/TLUserPreferences.ts

@@ -22,7 +22,7 @@ export interface TLUserPreferences {
 	isSnapMode?: boolean | null
 	isWrapMode?: boolean | null
 	isDynamicSizeMode?: boolean | null
-	pasteAtCursor?: boolean | null
+	isPasteAtCursorMode?: boolean | null
 }
 
 interface UserDataSnapshot {
@@ -47,7 +47,7 @@ const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUserPrefere
 	isSnapMode: T.boolean.nullable().optional(),
 	isWrapMode: T.boolean.nullable().optional(),
 	isDynamicSizeMode: T.boolean.nullable().optional(),
-	pasteAtCursor: T.boolean.nullable().optional(),
+	isPasteAtCursorMode: T.boolean.nullable().optional(),
 })
 
 const Versions = {
@@ -92,7 +92,7 @@ function migrateSnapshot(data: { version: number; user: any }) {
 		data.user.isDynamicSizeMode = false
 	}
 	if (data.version < Versions.AddPasteAtCursor) {
-		data.user.pasteAtCursor = false
+		data.user.isPasteAtCursorMode = false
 	}
 
 	// finally
@@ -137,7 +137,7 @@ export const defaultUserPreferences = Object.freeze({
 	isSnapMode: false,
 	isWrapMode: false,
 	isDynamicSizeMode: false,
-	pasteAtCursor: false,
+	isPasteAtCursorMode: false,
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>
 
 /** @public */

packages/editor/src/lib/editor/managers/UserPreferencesManager.ts

@@ -98,7 +98,10 @@ export class UserPreferencesManager {
 		)
 	}
 
-	@computed getPasteAtCursor() {
-		return this.user.userPreferences.get().pasteAtCursor ?? defaultUserPreferences.pasteAtCursor
+	@computed getIsPasteAtCursorMode() {
+		return (
+			this.user.userPreferences.get().isPasteAtCursorMode ??
+			defaultUserPreferences.isPasteAtCursorMode
+		)
 	}
 }

packages/tldraw/src/lib/ui/components/menu-items.tsx

@@ -630,7 +630,9 @@ export function ToggleDynamicSizeModeItem() {
 export function TogglePasteAtCursorItem() {
 	const actions = useActions()
 	const editor = useEditor()
-	const pasteAtCursor = useValue('paste at cursor', () => editor.user.getPasteAtCursor(), [editor])
+	const pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [
+		editor,
+	])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-paste-at-cursor']} checked={pasteAtCursor} />
 }
 

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

@@ -1159,7 +1159,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				onSelect(source) {
 					trackEvent('toggle-paste-at-cursor', { source })
 					editor.user.updateUserPreferences({
-						pasteAtCursor: !editor.user.getPasteAtCursor(),
+						isPasteAtCursorMode: !editor.user.getIsPasteAtCursorMode(),
 					})
 				},
 				checkbox: true,

packages/tldraw/src/lib/ui/hooks/clipboard/pasteTldrawContent.ts

@@ -9,12 +9,10 @@ import { Editor, TLContent, VecLike } from '@tldraw/editor'
  * @internal
  */
 export function pasteTldrawContent(editor: Editor, clipboard: TLContent, point?: VecLike) {
-	const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined)
-
 	const selectionBoundsBefore = editor.getSelectionPageBounds()
 	editor.mark('paste')
 	editor.putContentOntoCurrentPage(clipboard, {
-		point: p,
+		point: point,
 		select: true,
 	})
 	const selectedBoundsAfter = editor.getSelectionPageBounds()

packages/tldraw/src/lib/ui/hooks/useClipboardEvents.ts

@@ -7,6 +7,7 @@ import {
 	TLExternalContentSource,
 	TLGeoShape,
 	TLTextShape,
+	Vec,
 	VecLike,
 	isNonNull,
 	preventDefault,
@@ -669,22 +670,27 @@ export function useNativeClipboardEvents() {
 			// input instead; e.g. when pasting text into a text shape's content
 			if (editor.getEditingShapeId() !== null || disallowClipboardEvents(editor)) return
 
+			// Where should the shapes go?
+			let point: Vec | undefined = undefined
+			let pasteAtCursor = false
+
+			// | Shiftkey | Paste at cursor mode | Paste at point? |
+			// |    N 		|         N            |       N 				 |
+			// |    Y 		|         N            |       Y 				 |
+			// |    N 		|         Y            |       Y 				 |
+			// |    Y 		|         Y            |       N 				 |
+			if (editor.inputs.shiftKey) pasteAtCursor = true
+			if (editor.user.getIsPasteAtCursorMode()) pasteAtCursor = !pasteAtCursor
+			if (pasteAtCursor) point = editor.inputs.currentPagePoint
+
 			// First try to use the clipboard data on the event
 			if (e.clipboardData && !editor.inputs.shiftKey) {
-				if (editor.user.getPasteAtCursor()) {
-					handlePasteFromEventClipboardData(editor, e.clipboardData, editor.inputs.currentPagePoint)
-				} else {
-					handlePasteFromEventClipboardData(editor, e.clipboardData)
-				}
+				handlePasteFromEventClipboardData(editor, e.clipboardData, point)
 			} else {
 				// Or else use the clipboard API
 				navigator.clipboard.read().then((clipboardItems) => {
 					if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
-						if (e.clipboardData && editor.user.getPasteAtCursor()) {
-							handlePasteFromClipboardApi(editor, clipboardItems)
-						} else {
-							handlePasteFromClipboardApi(editor, clipboardItems, editor.inputs.currentPagePoint)
-						}
+						handlePasteFromClipboardApi(editor, clipboardItems, point)
 					}
 				})
 			}