fix(tldraw): don't steal selection when pasting mid-interaction (tldraw#8976)

## Overview

In order to keep an in-progress interaction intact when content is
pasted mid-gesture, this PR stops `defaultHandleExternalTldrawContent`
from selecting the pasted shapes while the user is dragging a handle,
translating, resizing, or rotating.

This is an **alternative** to tldraw#8968 for the same underlying problem
(tldraw#8305). Where tldraw#8968 keeps the binding-hint overlay alive by gating the
overlay's `isActive`/`getOverlays` on the interaction state, this PR
instead avoids the root cause for the paste case: the pasted content no
longer steals selection from the shape being manipulated. Opened as a
draft so the two approaches can be compared side by side.

When the user pastes tldraw content while mid-interaction — for example
dragging an arrow's endpoint handle — the default handler used to
`select` the newly pasted shapes. That stole selection from the shape
under manipulation and interrupted the gesture (the arrow's in-progress
binding hint, for instance, disappeared until the drag ended). With this
change the selection is left untouched while mid-interaction, so the
gesture continues uninterrupted. When not mid-interaction, paste still
selects the pasted content as before.

Because we no longer reselect mid-interaction, the selection bounds
before and after paste are identical, which would make the paste "puff"
overlap check always pass. The puff is meant to signal that the
newly-selected pasted content landed on the old selection, so it's now
skipped while mid-interaction.

## Scope note

The known undo-grouping quirk tracked in tldraw#8969 (paste landing in the
same undo entry as the drag) is **intentionally left out of scope**
here, to keep this change focused and comparable to tldraw#8968.

Thanks to @SomeHats for suggesting this approach in
tldraw#8968 (comment).

## Change type

- [x] `bugfix`

## Test plan

1. Create a shape and an arrow bound to it.
2. Start dragging the arrow's free endpoint handle.
3. While still dragging, paste some tldraw content.
4. The arrow stays selected and its binding hint remains visible; the
pasted content is added without stealing selection.
5. Paste while idle — the pasted content is selected as normal.

- [x] Unit tests added in `SelectTool.test.ts` covering dragging a
handle, translating, resizing, the no-puff case, and the idle
(still-selects) case.

## Release notes

- Pasting content while dragging, translating, resizing, or rotating no
longer steals selection from the shape being manipulated.

## Code changes

| Area | Files | +/- |
| --- | --- | --- |
| Core | `defaultExternalContentHandlers.ts` | +19/-1 |
| Tests | `SelectTool.test.ts` | +134/-0 |

Relates to tldraw#8305. Alternative to tldraw#8968.

Author: frolic

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -624,12 +624,31 @@ export async function defaultHandleExternalTldrawContent(
 			}
 		}
 
+		// While the user is mid-interaction (dragging a handle, translating,
+		// resizing, or rotating), selecting the pasted content would steal the
+		// selection from the shape being manipulated and interrupt the
+		// interaction — e.g. an arrow's in-progress binding hint disappears
+		// until the drag ends. Leave the selection alone in those cases.
+		const isMidInteraction = editor.isInAny(
+			'select.dragging_handle',
+			'select.translating',
+			'select.resizing',
+			'select.rotating'
+		)
+
 		editor.putContentOntoCurrentPage(content, {
 			point: point,
-			select: true,
+			select: !isMidInteraction,
 		})
 		const selectedBoundsAfter = editor.getSelectionPageBounds()
 		if (
+			// When mid-interaction we don't select the pasted content, so the
+			// selection is unchanged and the before/after bounds are identical —
+			// the overlap check would always pass. The selection flash below
+			// signals that the newly-selected pasted content landed on the old
+			// selection, which is meaningless when we didn't change the
+			// selection, so skip it.
+			!isMidInteraction &&
 			selectionBoundsBefore &&
 			selectedBoundsAfter &&
 			selectionBoundsBefore?.collides(selectedBoundsAfter)

packages/tldraw/src/test/SelectTool.test.ts

@@ -1,5 +1,6 @@
 import { IndexKey, ShapeUtil, TLFrameShape, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { defaultHandleExternalTldrawContent } from '../lib/defaultExternalContentHandlers'
 import { defaultOverlayUtils } from '../lib/defaultOverlayUtils'
 import { TestEditor } from './TestEditor'
 
@@ -261,6 +262,140 @@ describe('DraggingHandle', () => {
 	})
 })
 
+describe('Pasting during an interaction', () => {
+	// Regression for #8305: pasting tldraw content mid-interaction should not
+	// steal the selection from the shape being manipulated. The paste handler
+	// leaves the selection alone while dragging/translating/resizing/rotating,
+	// so the interacted shape stays selected (and an arrow's binding hint stays
+	// visible) without needing the tool to reselect on completion.
+
+	it('does not steal selection while dragging an arrow handle, keeping the binding hint visible', async () => {
+		const overlayEditor = new TestEditor({ overlayUtils: defaultOverlayUtils })
+		const arrowId = createShapeId('hintArrow')
+		const targetId = createShapeId('hintTarget')
+		const clipboardId = createShapeId('hintClipboard')
+		overlayEditor.createShapes([
+			{ id: targetId, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: clipboardId, type: 'geo', x: 400, y: 400, props: { w: 50, h: 50 } },
+			{
+				id: arrowId,
+				type: 'arrow',
+				x: 150,
+				y: 150,
+				props: { start: { x: 0, y: 0 }, end: { x: 120, y: 0 } },
+			},
+		])
+		// Bind the arrow's start to the target so a binding survives an end-handle drag.
+		overlayEditor.createBindings([
+			{
+				fromId: arrowId,
+				toId: targetId,
+				type: 'arrow',
+				props: {
+					terminal: 'start',
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+					isExact: false,
+					isPrecise: false,
+				},
+			},
+		])
+
+		// Snapshot a shape to paste through the real external-content path.
+		const content = overlayEditor.getContentFromCurrentPage([clipboardId])!
+
+		const hasBindingHint = () =>
+			overlayEditor.overlays.getCurrentOverlays().some((o) => o.type === 'arrow_binding_hint')
+
+		const arrow = overlayEditor.getShape(arrowId)!
+		const endHandle = overlayEditor.getShapeHandles(arrow)!.find((h) => h.id === 'end')!
+
+		overlayEditor.select(arrowId)
+		overlayEditor.pointerDown(arrow.x + endHandle.x, arrow.y + endHandle.y, {
+			target: 'handle',
+			shape: arrow,
+			handle: endHandle,
+		})
+		overlayEditor.pointerMove(arrow.x + endHandle.x + 20, arrow.y + endHandle.y)
+		overlayEditor.expectToBeIn('select.dragging_handle')
+		expect(hasBindingHint()).toBe(true)
+
+		// Paste a shape mid-drag.
+		const countBefore = overlayEditor.getCurrentPageShapes().length
+		await defaultHandleExternalTldrawContent(overlayEditor, { content })
+		expect(overlayEditor.getCurrentPageShapes().length).toBeGreaterThan(countBefore)
+
+		// Selection is left alone, so the arrow stays selected and the hint stays up.
+		expect(overlayEditor.getOnlySelectedShapeId()).toBe(arrowId)
+		expect(hasBindingHint()).toBe(true)
+
+		overlayEditor.pointerUp()
+		expect(overlayEditor.getSelectedShapeIds()).toEqual([arrowId])
+	})
+
+	it('does not steal selection while translating a shape', async () => {
+		const content = editor.getContentFromCurrentPage([ids.box1])!
+
+		editor.select(ids.box1)
+		editor.pointerDown(150, 150, { target: 'shape', shape: editor.getShape(ids.box1)! })
+		editor.pointerMove(250, 250)
+		editor.expectToBeIn('select.translating')
+
+		const countBefore = editor.getCurrentPageShapes().length
+		await defaultHandleExternalTldrawContent(editor, { content })
+		expect(editor.getCurrentPageShapes().length).toBeGreaterThan(countBefore)
+		expect(editor.getOnlySelectedShapeId()).toBe(ids.box1)
+
+		editor.pointerUp()
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+	})
+
+	it('does not steal selection while resizing a shape', async () => {
+		const content = editor.getContentFromCurrentPage([ids.box1])!
+
+		editor.select(ids.box1)
+		editor.pointerDown(200, 200, { target: 'selection', handle: 'bottom_right' })
+		editor.pointerMove(250, 250)
+		editor.expectToBeIn('select.resizing')
+
+		const countBefore = editor.getCurrentPageShapes().length
+		await defaultHandleExternalTldrawContent(editor, { content })
+		expect(editor.getCurrentPageShapes().length).toBeGreaterThan(countBefore)
+		expect(editor.getOnlySelectedShapeId()).toBe(ids.box1)
+
+		editor.pointerUp()
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+	})
+
+	it('does not flash the selection (isChangingStyle) while mid-interaction', async () => {
+		const content = editor.getContentFromCurrentPage([ids.box1])!
+
+		editor.select(ids.box1)
+		editor.pointerDown(150, 150, { target: 'shape', shape: editor.getShape(ids.box1)! })
+		editor.pointerMove(250, 250)
+		editor.expectToBeIn('select.translating')
+
+		// The paste flash's overlap check compares the selection bounds before
+		// and after paste. Mid-interaction we don't reselect, so those bounds
+		// are identical and the check would always pass — isChangingStyle must
+		// stay false.
+		await defaultHandleExternalTldrawContent(editor, { content })
+		expect(editor.getInstanceState().isChangingStyle).toBe(false)
+	})
+
+	it('still selects pasted content when not mid-interaction', async () => {
+		const content = editor.getContentFromCurrentPage([ids.box1])!
+
+		editor.selectNone()
+		editor.expectToBeIn('select.idle')
+
+		await defaultHandleExternalTldrawContent(editor, { content })
+
+		const selected = editor.getOnlySelectedShapeId()
+		expect(selected).not.toBeNull()
+		expect(selected).not.toBe(ids.box1)
+	})
+})
+
 describe('PointingLabel', () => {
 	it('Enters from pointing_arrow_label and exits to idle', () => {
 		editor.createShapes([