tldraw 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/shapes/note/noteHelpers.ts

@@ -3,6 +3,7 @@ import {
 	IndexKey,
 	TLNoteShape,
 	TLShape,
+	TLShapeId,
 	Vec,
 	compact,
 	createShapeId,
@@ -94,29 +95,34 @@ export interface AvailableNoteAdjacentPositionsOpts {
 	extraHeight: number
 	noteWidth: number
 	noteHeight: number
+	/**
+	 * Notes whose adjacent positions should not be offered, e.g. the notes being dragged,
+	 * which would otherwise snap to their own slots.
+	 */
+	excludeShapeIds?: TLShapeId[]
 }
 
 /**
- * Get all of the available note adjacent positions, excluding the selected shapes.
+ * Get all of the available note adjacent positions, excluding those around `excludeShapeIds`.
  *
  * @internal */
 export function getAvailableNoteAdjacentPositions(
 	editor: Editor,
 	opts: AvailableNoteAdjacentPositionsOpts
 ) {
-	const { rotation, scale, extraHeight, noteWidth, noteHeight } = opts
-	const selectedShapeIds = new Set(editor.getSelectedShapeIds())
+	const { rotation, scale, extraHeight, noteWidth, noteHeight, excludeShapeIds = [] } = opts
+	const excludedShapeIds = new Set(excludeShapeIds)
 	const minSize =
 		(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin + extraHeight) ** 2
 	const allCenters = new Map<TLNoteShape, Vec>()
 	const positions: (Vec | undefined)[] = []
 
-	// Get all the positions that are adjacent to the selected note shapes
+	// Get all the positions that are adjacent to the candidate note shapes
 	for (const shape of editor.getCurrentPageShapes()) {
 		if (
 			!editor.isShapeOfType(shape, 'note') ||
 			scale !== shape.props.scale ||
-			selectedShapeIds.has(shape.id)
+			excludedShapeIds.has(shape.id)
 		) {
 			continue
 		}
@@ -126,7 +132,7 @@ export function getAvailableNoteAdjacentPositions(
 		// If the note has a different rotation, we can't use its adjacent positions
 		if (rotation !== transform.rotation()) continue
 
-		// Save the unselected note shape's center
+		// Save the candidate note shape's center
 		allCenters.set(shape, editor.getShapePageBounds(shape)!.center)
 
 		// And push its position to the positions array
@@ -135,7 +141,8 @@ export function getAvailableNoteAdjacentPositions(
 				getNoteAdjacentPositions(editor, {
 					pagePoint: transform.point(),
 					pageRotation: rotation,
-					growY: shape.props.growY,
+					// page units, like the base positions (see PointingHandle)
+					growY: shape.props.growY * shape.props.scale,
 					extraHeight,
 					scale,
 					noteWidth,
@@ -191,8 +198,11 @@ export function getNoteShapeForAdjacentPosition(
 	// Start from the top of the stack, and work our way down
 	const allShapesOnPage = editor.getCurrentPageShapesSorted()
 
+	// Squared, in page units, to compare against Dist2 below. A neighbour that has grown
+	// (growY) sits further from the ideal slot centre, so the radius is a full note plus margin.
 	const minDistance =
-		(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin ** 2) ** shape.props.scale
+		((Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin) * shape.props.scale) **
+		2
 
 	for (let i = allShapesOnPage.length - 1; i >= 0; i--) {
 		const otherNote = allShapesOnPage[i]

package/src/lib/shapes/note/toolStates/Pointing.ts

@@ -115,7 +115,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onComplete() {
-		this.complete()
+		// Not a release: see BaseBoxShapeTool's Pointing state for why this cancels.
+		this.cancel()
 	}
 
 	override onCancel() {

package/src/lib/shapes/shared/crop.ts

@@ -551,7 +551,13 @@ export function getCroppedImageDataForReplacedImage(
 	let crop = defaultCrop
 	let newDisplayW = origDisplayW
 	let newDisplayH = origDisplayH
-	const isOriginalCrop = isEqual(imageShape.props.crop, defaultCrop)
+	// Compare the bounds, not the whole object: an explicit `isCircle: false` must still count
+	// as the original crop.
+	const isOriginalCrop =
+		!!imageShape.props.crop &&
+		isEqual(imageShape.props.crop.topLeft, defaultCrop.topLeft) &&
+		isEqual(imageShape.props.crop.bottomRight, defaultCrop.bottomRight) &&
+		!imageShape.props.crop.isCircle
 
 	if (isOriginalCrop) {
 		newDisplayW = origDisplayW

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -55,6 +55,24 @@ describe(TextShapeTool, () => {
 			props: { richText: toRichText('Hello') },
 		})
 	})
+
+	it('Records the deletion of an empty text shape so redo cannot resurrect it', () => {
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+
+		// Exiting without typing deletes the empty shape (TextShapeUtil.onEditEnd)
+		editor.cancel()
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		// The creation and the deletion squash to nothing, so neither undo nor redo brings it back
+		editor.undo()
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.redo()
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+	})
 })
 
 describe('When selecting the tool', () => {
@@ -280,6 +298,21 @@ describe('When resizing', () => {
 		expect(editor.getCurrentPageShapes().length).toBe(1)
 	})
 
+	it('removes the pending text shape when another tool is selected mid-drag', () => {
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		vi.advanceTimersByTime(200)
+		editor.pointerMove(100, 100)
+		editor.expectToBeIn('select.resizing')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		editor.setCurrentTool('geo')
+		editor.expectToBeIn('geo.idle')
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		expect(editor.getSelectedShapeIds()).toEqual([])
+		editor.pointerUp(100, 100)
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+	})
+
 	it('preserves the top left when the text has a fixed width', () => {
 		editor.setCurrentTool('text')
 		const x = 0

package/src/lib/shapes/text/toolStates/Idle.ts

@@ -3,7 +3,7 @@ import {
 	cancelUpdateHoveredShapeId,
 	updateHoveredShapeId,
 } from '../../../tools/selection-logic/updateHoveredShapeId'
-import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
+import { startEditingShape } from '../../../tools/SelectTool/selectHelpers'
 
 export class Idle extends StateNode {
 	static override id = 'idle'
@@ -34,7 +34,7 @@ export class Idle extends StateNode {
 			const onlySelectedShape = this.editor.getOnlySelectedShape()
 			if (!this.editor.canEditShape(onlySelectedShape)) return
 			this.editor.setCurrentTool('select')
-			startEditingShapeWithRichText(this.editor, onlySelectedShape.id, { info })
+			startEditingShape(this.editor, onlySelectedShape, { info })
 		}
 	}
 

package/src/lib/shapes/text/toolStates/Pointing.ts

@@ -21,6 +21,9 @@ export class Pointing extends StateNode {
 	enterTime = 0
 	override onEnter(): void {
 		this.enterTime = Date.now()
+		// Only the drag-to-create path sets a mark. Without this reset, a later cancel
+		// would bail to a mark left over from a previous text shape and undo unrelated work.
+		this.markId = ''
 	}
 
 	override onExit() {

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -175,14 +175,16 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 		}
 	}, [isEditing, isLoaded])
 
+	const hasVideo = !!asset?.props.src && !!url && isLoaded
+
 	return (
 		<>
 			<HTMLContainer
 				id={shape.id}
 				style={{
 					color: 'var(--tl-color-text-3)',
-					backgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',
-					border: asset ? 'none' : '1px solid var(--tl-color-low-border)',
+					backgroundColor: hasVideo ? 'transparent' : 'var(--tl-color-low)',
+					border: hasVideo ? 'none' : '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div className="tl-counter-scaled">

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -16,12 +16,17 @@ export class Erasing extends StateNode {
 		this.info = info
 
 		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const pressedShapeIds = new Set(this.editor.getErasingShapeIds())
 		this.excludedShapeIds = new Set(
 			this.editor
 				.getCurrentPageShapes()
 				.filter((shape) => {
 					//If the shape is locked, we shouldn't erase it
 					if (this.editor.isShapeOrAncestorLocked(shape)) return true
+					// A frame the press hit on its outline stays marked: a press just inside the outline
+					// is within the frame's bounds, so the containment check below would otherwise
+					// unmark it on the first move while a press just outside would erase it
+					if (this.editor.isShapeFrameLike(shape) && pressedShapeIds.has(shape.id)) return false
 					//If the shape is a group or frame-like, check we're inside it when we start erasing
 					if (this.editor.isShapeOfType(shape, 'group') || this.editor.isShapeFrameLike(shape)) {
 						const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)

package/src/lib/tools/HandTool/childStates/OneFingerZooming.ts

@@ -47,6 +47,16 @@ export class OneFingerZooming extends StateNode {
 		this.complete()
 	}
 
+	override onPointerDown() {
+		// A second touch resets the input origin to the new pointer, so continuing
+		// the zoom would jump the camera. Yield before the pinch begins.
+		this.parent.transition('idle')
+	}
+
+	override onComplete() {
+		this.parent.transition('idle')
+	}
+
 	override onCancel() {
 		this.parent.transition('idle')
 	}

package/src/lib/tools/SelectTool/SelectTool.ts

@@ -84,5 +84,9 @@ export class SelectTool extends StateNode {
 		if (this.editor.getCurrentPageState().editingShapeId) {
 			this.editor.setEditingShape(null)
 		}
+		// Leaving crop mode for another tool would otherwise keep the image in its cropping state
+		if (this.editor.getCroppingShapeId()) {
+			this.editor.setCroppingShape(null)
+		}
 	}
 }

package/src/lib/tools/SelectTool/childStates/Brushing.ts

@@ -36,6 +36,10 @@ export class Brushing extends StateNode {
 
 		this.isWrapMode = editor.user.getIsWrapMode()
 
+		// Accel-pressing a resize or rotate handle brushes instead of resizing or rotating,
+		// and the handle's hover cursor would otherwise stay up for the whole brush.
+		editor.setCursor({ type: 'default', rotation: 0 })
+
 		this.viewportDidChange = false
 
 		let isInitialCheck = true

package/src/lib/tools/SelectTool/childStates/Crop/Crop.ts

@@ -28,6 +28,10 @@ export class Crop extends StateNode {
 		}
 	}
 	override onCancel() {
+		// Parents handle events before children, so a cancel during a child's drag would unwind
+		// the whole session here before the child bails to its own mark. Only idle's escape ends
+		// the session; mid-drag children revert just their own change and return to idle.
+		if (this.getCurrent()?.id !== 'idle') return
 		if (!this.didExit) {
 			this.didExit = true
 			this.editor.bailToMark(this.markId)

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -333,13 +333,12 @@ export class DraggingHandle extends StateNode {
 
 		if (canSnap && (isSnapMode ? !ctrlKey : ctrlKey)) {
 			// We're snapping
-			const pageTransform = editor.getShapePageTransform(shape.id)
-			if (!pageTransform) throw Error('Expected a page transform')
-
 			const snap = snaps.handles.snapHandle({ currentShapeId: shapeId, handle: nextHandle })
 
 			if (snap) {
-				snap.nudge.rot(-editor.getShapeParentTransform(shape)!.rotation())
+				// The nudge is in page space and `point` is in the shape's own space, so the shape's
+				// full page rotation (not just its parent's) has to come off
+				snap.nudge.rot(-editor.getShapePageTransform(shape.id).rotation())
 				point.add(snap.nudge)
 				nextHandle = { ...initialHandle, x: point.x, y: point.y }
 			}

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -440,6 +440,7 @@ export class Idle extends StateNode {
 					// Call the shape's double click handler
 					const change = util.onDoubleClick?.(shape)
 					if (change) {
+						this.editor.markHistoryStoppingPoint('double click shape')
 						this.editor.updateShapes([change])
 						return
 					}
@@ -472,6 +473,7 @@ export class Idle extends StateNode {
 				const changes = util.onDoubleClickHandle?.(shape, handle)
 
 				if (changes) {
+					this.editor.markHistoryStoppingPoint('double click handle')
 					this.editor.updateShapes([changes])
 				} else {
 					// If the shape's double click handler has not created a change,
@@ -589,7 +591,7 @@ export class Idle extends StateNode {
 					}
 					return
 				}
-				this.nudgeSelectedShapes(false)
+				this.nudgeSelectedShapes(info, false)
 				return
 			}
 		}
@@ -635,7 +637,7 @@ export class Idle extends StateNode {
 					)
 					return
 				}
-				this.nudgeSelectedShapes(true)
+				this.nudgeSelectedShapes(info, true)
 				break
 			}
 			case 'Tab': {
@@ -754,13 +756,18 @@ export class Idle extends StateNode {
 		startEditingShapeWithRichText(this.editor, id, { info })
 	}
 
-	private nudgeSelectedShapes(ephemeral = false) {
+	private nudgeSelectedShapes(info: TLKeyboardEventInfo, ephemeral = false) {
 		const {
 			editor: {
 				inputs: { keys },
 			},
 		} = this
 
+		// Space+arrow pages the camera and Alt+arrow is the change-page shortcut; both
+		// events still reach this state, so without this guard the selection also
+		// moves one unit (#10397)
+		if (info.altKey || this.editor.inputs.getIsSpacebarPanning()) return
+
 		// We want to use the "actual" shift key state,
 		// not the one that's in the editor.inputs.shiftKey,
 		// because that one uses a short timeout on release

package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts

@@ -148,7 +148,7 @@ export class PointingArrowLabel extends StateNode {
 	}
 
 	override onComplete() {
-		this.cancel()
+		this.complete()
 	}
 
 	override onInterrupt() {

package/src/lib/tools/SelectTool/childStates/PointingCanvas.ts

@@ -45,6 +45,10 @@ export class PointingCanvas extends StateNode {
 		this.complete()
 	}
 
+	override onCancel() {
+		this.parent.transition('idle')
+	}
+
 	override onInterrupt() {
 		this.parent.transition('idle')
 	}

package/src/lib/tools/SelectTool/childStates/PointingHandle.ts

@@ -7,7 +7,10 @@ import {
 	TLPointerEventInfo,
 	Vec,
 } from '@tldraw/editor'
-import { updateArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
+import {
+	clearArrowTargetState,
+	updateArrowTargetState,
+} from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 import {
 	getNoteAdjacentPositions,
@@ -55,6 +58,8 @@ export class PointingHandle extends StateNode {
 
 	override onExit() {
 		this.editor.setHintingShapes([])
+		// onEnter shows the arrow's binding target; a click without a drag would leave it showing
+		clearArrowTargetState(this.editor)
 		this.editor.setCursor({ type: 'default', rotation: 0 })
 	}
 

package/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -65,7 +65,10 @@ export class PointingShape extends StateNode {
 		const focusedGroupId = this.editor.getFocusedGroupId()
 		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
-		const additiveSelectionKey = info.shiftKey || info.accelKey
+		// Alt suppresses additive selection here as it does on enter and in
+		// selectOnCanvasPointerUp; otherwise shift+alt or ctrl+alt releasing over
+		// a selected shape would toggle it out of the selection.
+		const additiveSelectionKey = (info.shiftKey || info.accelKey) && !info.altKey
 
 		const hitShape =
 			this.editor.getShapeAtPoint(currentPagePoint, {

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -2,8 +2,6 @@ import {
 	Box,
 	HALF_PI,
 	Mat,
-	PI,
-	PI2,
 	SelectionCorner,
 	SelectionEdge,
 	StateNode,
@@ -19,6 +17,7 @@ import {
 	isAccelKey,
 	isShapeId,
 	kickoutOccludedShapes,
+	rotateSelectionHandle,
 } from '@tldraw/editor'
 import { getEnclosedShapeIds } from '../../../shapes/frame/FrameShapeTool'
 import { batchMeasureGeoLabels, setBatchLabelSizeCache } from '../../../shapes/geo/GeoShapeUtil'
@@ -44,6 +43,9 @@ export class Resizing extends StateNode {
 	// A switch to detect when the user is holding ctrl
 	private didHoldCommand = false
 
+	// Set by complete() and cancel(); see onExit for what happens when neither ran
+	private didFinish = false
+
 	// we transition into the resizing state from the geo pointing state, which starts with a shape of size w: 1, h: 1,
 	// so if the user drags x: +50, y: +50 after mouseDown, the shape will be w: 51, h: 51, which is too many pixels, alas
 	// so we allow passing a further offset into this state to negate such issues
@@ -56,6 +58,7 @@ export class Resizing extends StateNode {
 
 		this.info = info
 		this.didHoldCommand = false
+		this.didFinish = false
 
 		if (typeof info.onInteractionEnd === 'string') {
 			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
@@ -127,6 +130,8 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
+		this.didFinish = true
+
 		// Call onResizeCancel callback before resetting
 		const { shapeSnapshots } = this.snapshot
 
@@ -134,6 +139,7 @@ export class Resizing extends StateNode {
 			const current = this.editor.getShape(shape.id)
 			if (current) {
 				const util = this.editor.getShapeUtil(shape)
+				if (!util.canResize(shape)) return
 				util.onResizeCancel?.(shape, current)
 			}
 		})
@@ -153,6 +159,8 @@ export class Resizing extends StateNode {
 	}
 
 	private complete() {
+		this.didFinish = true
+
 		kickoutOccludedShapes(this.editor, this.snapshot.selectedShapeIds)
 
 		this.handleResizeEnd()
@@ -179,12 +187,15 @@ export class Resizing extends StateNode {
 	}
 
 	private handleResizeStart() {
+		// Non-resizable shapes are in the snapshot only to be repositioned, so they don't get the
+		// resize lifecycle callbacks (matching Editor.resizeShape).
 		const { shapeSnapshots } = this.snapshot
 
 		const changes: TLShapePartial[] = []
 
 		shapeSnapshots.forEach(({ shape }) => {
 			const util = this.editor.getShapeUtil(shape)
+			if (!util.canResize(shape)) return
 			const change = util.onResizeStart?.(shape)
 			if (change) {
 				changes.push(change)
@@ -204,6 +215,7 @@ export class Resizing extends StateNode {
 		shapeSnapshots.forEach(({ shape }) => {
 			const current = this.editor.getShape(shape.id)!
 			const util = this.editor.getShapeUtil(shape)
+			if (!util.canResize(shape)) return
 			const change = util.onResizeEnd?.(shape, current)
 			if (change) {
 				changes.push(change)
@@ -545,6 +557,12 @@ export class Resizing extends StateNode {
 		if (this.info.isCreating && this.editor.getHintingShapeIds().length > 0) {
 			this.editor.setHintingShapes([])
 		}
+		// Exited mid-creation without complete() or cancel(), e.g. a tool shortcut pressed while
+		// dragging out a text box: the shape created at the drag threshold was never committed and
+		// would otherwise be left behind, empty and invisible (#10401)
+		if (this.info.isCreating && !this.didFinish) {
+			this.editor.bailToMark(this.markId)
+		}
 	}
 
 	private _createSnapshot() {
@@ -583,17 +601,16 @@ export class Resizing extends StateNode {
 
 			const util = editor.getShapeUtil(shape)
 
-			// If the shape can resize, add it to the resizing shapes snapshots
-			if (util.canResize(shape)) {
-				const pageTransform = editor.getShapePageTransform(shape)!
-				shapeSnapshots.set(shape.id, {
-					shape,
-					bounds: editor.getShapeGeometry(shape).bounds,
-					pageTransform,
-					pageRotation: Mat.Decompose(pageTransform).rotation,
-					isAspectRatioLocked: util.isAspectRatioLocked(shape),
-				})
-			}
+			// Shapes that can't resize are snapshotted too: getResizeShapePartial repositions them
+			// so they keep their place in the selection instead of being left behind.
+			const pageTransform = editor.getShapePageTransform(shape)!
+			shapeSnapshots.set(shape.id, {
+				shape,
+				bounds: editor.getShapeGeometry(shape).bounds,
+				pageTransform,
+				pageRotation: Mat.Decompose(pageTransform).rotation,
+				isAspectRatioLocked: util.isAspectRatioLocked(shape),
+			})
 
 			// Special case:
 			// For frames, we don't want to resize children but we DO want to get a snapshot of their children so that we can restore their
@@ -670,23 +687,3 @@ export class Resizing extends StateNode {
 }
 
 type Snapshot = ReturnType<Resizing['_createSnapshot']>
-
-const ORDERED_SELECTION_HANDLES: (SelectionEdge | SelectionCorner)[] = [
-	'top',
-	'top_right',
-	'right',
-	'bottom_right',
-	'bottom',
-	'bottom_left',
-	'left',
-	'top_left',
-]
-
-export function rotateSelectionHandle(handle: SelectionEdge | SelectionCorner, rotation: number) {
-	// first find out how many tau we need to rotate by
-	rotation = rotation % PI2
-	const numSteps = Math.round(rotation / (PI / 4))
-
-	const currentIndex = ORDERED_SELECTION_HANDLES.indexOf(handle)
-	return ORDERED_SELECTION_HANDLES[(currentIndex + numSteps) % ORDERED_SELECTION_HANDLES.length]
-}

package/src/lib/tools/SelectTool/childStates/ScribbleBrushing.ts

@@ -23,9 +23,9 @@ export class ScribbleBrushing extends StateNode {
 	newlySelectedShapeIds = new Set<TLShapeId>()
 
 	override onEnter() {
-		this.initialSelectedShapeIds = new Set<TLShapeId>(
-			this.editor.inputs.getShiftKey() ? this.editor.getSelectedShapeIds() : []
-		)
+		// Captured regardless of shift so cancel() can restore it like the rectangle
+		// brush does (#10429); shift only decides whether it merges into the live selection.
+		this.initialSelectedShapeIds = new Set<TLShapeId>(this.editor.getSelectedShapeIds())
 		this.newlySelectedShapeIds = new Set<TLShapeId>()
 		this.size = 0
 		this.hits.clear()

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -170,6 +170,9 @@ export class Translating extends StateNode {
 		this.editor.duplicateShapes(Array.from(this.editor.getSelectedShapeIds()))
 
 		this.snapshot = getTranslatingSnapshot(this.editor)
+		// The manager ignores startDraggingShapes while it is running, so it has to be
+		// cleared or it keeps reparenting the originals instead of the clones
+		this.dragAndDropManager.clear()
 		this.handleStart()
 		this.updateShapes()
 	}
@@ -179,6 +182,8 @@ export class Translating extends StateNode {
 		this.snapshot = this.selectionSnapshot
 		this.reset()
 		this.markId = this.editor.markHistoryStoppingPoint('translate')
+		// Same as in startCloning: the manager is still tracking the (now deleted) clones
+		this.dragAndDropManager.clear()
 		this.updateShapes()
 	}
 
@@ -439,6 +444,7 @@ function getTranslatingSnapshot(editor: Editor) {
 			extraHeight: noteSnapshot.shape.props.growY ?? 0,
 			noteWidth: dv.noteWidth,
 			noteHeight: dv.noteHeight,
+			excludeShapeIds: selectedShapeIds,
 		})
 		noteCenterOffset = new Vec(dv.noteWidth / 2, dv.noteHeight / 2)
 	}

package/src/lib/tools/SelectTool/selectHelpers.ts

@@ -48,3 +48,24 @@ export function startEditingShapeWithRichText(
 		editor.emit('select-all-text', { shapeId: shape.id })
 	}
 }
+
+/**
+ * Start editing any editable shape. Shapes with rich text go through
+ * `startEditingShapeWithRichText`; editable shapes without it (frame, video, embed) would
+ * make that helper throw, so they enter the editing state directly.
+ *
+ * @internal
+ */
+export function startEditingShape(
+	editor: Editor,
+	shape: TLShape,
+	options: { selectAll?: boolean; info?: TLEventInfo } = {}
+) {
+	if (!editor.canEditShape(shape)) return
+	if (hasRichText(shape)) {
+		startEditingShapeWithRichText(editor, shape, options)
+		return
+	}
+	editor.setEditingShape(shape)
+	editor.setCurrentTool('select.editing_shape', { ...options.info, target: 'shape', shape })
+}

package/src/lib/ui/TldrawUi.tsx

@@ -75,7 +75,6 @@ interface TldrawUiContentProps {
 const TldrawUiInner = React.memo(function TldrawUiInner({
 	children,
 	hideUi,
-	...rest
 }: TldrawUiContentProps & { children: ReactNode }) {
 	// The hideUi prop should prevent the UI from mounting.
 	// If we ever need want the UI to mount and preserve state, then
@@ -89,7 +88,7 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 	return (
 		<>
 			{children}
-			{hideUi ? null : <TldrawUiContent {...rest} />}
+			{hideUi ? null : <TldrawUiContent />}
 		</>
 	)
 })