@tldraw/editor 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/lib/components/Shape.tsx

@@ -1,14 +1,16 @@
 import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { warnOnce } from '@tldraw/utils'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { Editor } from '../editor/Editor'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditorComponents } from '../hooks/EditorComponentsContext'
 import { useEditor } from '../hooks/useEditor'
 import { useShapeCulling } from '../hooks/useShapeCulling'
 import { Mat } from '../primitives/Mat'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
-import { setStyleProperty } from '../utils/dom'
+import { moveElementInto, setStyleProperty } from '../utils/dom'
 import { OptionalErrorBoundary } from './ErrorBoundary'
 
 /*
@@ -153,11 +155,96 @@ export const Shape = memo(function Shape({
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
+				{util.getAppOwnedElement && <ContentElementSlot id={id} util={util} />}
 			</ShapeWrapper>
 		</>
 	)
 })
 
+/*
+The content element slot hosts an app-owned element provided by the shape util's
+getAppOwnedElement method. The contract: while the shape is mounted, tldraw never
+unmounts, recreates, or relocates the element (the canvas renders shapes in stable
+id-sorted DOM order, so reorders and reparenting never move DOM nodes), and before
+the slot is destroyed — shape deletion, page change, error teardown, or the whole
+editor unmounting — onReleaseAppOwnedElement is called while the slot is still
+connected to the document, so the app can move the element to a new parent with
+Node.moveBefore without resetting its state. That last guarantee relies on this
+being a layout effect: React runs layout effect cleanups before it detaches the
+host nodes of a deleted subtree, which is not true of passive effects.
+*/
+const ContentElementSlot = memo(function ContentElementSlot({
+	id,
+	util,
+}: {
+	id: TLShapeId
+	util: ShapeUtil
+}) {
+	const editor = useEditor()
+	const slotRef = useRef<HTMLDivElement>(null)
+
+	useLayoutEffect(() => {
+		const slot = slotRef.current
+		if (!slot) return
+
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		// getAppOwnedElement is called once per shape mount (the effect deps below are
+		// [editor, id, util], none of which change on a prop edit), so the adopted element is
+		// not refreshed when the shape's props change. A util whose element identity depends on
+		// props must mutate the existing element in place rather than return a new one. Likewise,
+		// if this returns null now and an element only later, the element is never adopted for
+		// this mount — return a stable element up front and populate it asynchronously instead.
+		const element = util.getAppOwnedElement?.(shape)
+		if (!element) return
+
+		// An element that was connected before adoption (e.g. parked off-canvas by the
+		// app between editor sessions) should survive the move without reloading.
+		const wasConnectedBeforeAdoption = element.isConnected
+
+		if (element.parentNode !== slot) {
+			moveElementInto(slot, element)
+		}
+
+		if (process.env.NODE_ENV !== 'production' && wasConnectedBeforeAdoption) {
+			warnIfContentElementReloads(editor, slot, element)
+		}
+
+		return () => {
+			// Note: under React StrictMode (dev only) this effect runs mount → cleanup → mount,
+			// so onReleaseAppOwnedElement fires once even though the shape was not removed, and on
+			// the appendChild fallback path the element is detached and re-adopted (reloading it).
+			// onReleaseAppOwnedElement must therefore be safe to call when the shape still exists;
+			// don't treat it as a definitive "shape removed" signal (check the store if you need
+			// to know). With Node.moveBefore the re-adoption preserves state, so this is benign.
+			const latestShape = editor.getShape(id) ?? shape
+			util.onReleaseAppOwnedElement?.(latestShape, element)
+			if (process.env.NODE_ENV !== 'production' && element.parentNode === slot) {
+				warnOnce(
+					`The content element for shape "${id}" was not reclaimed by onReleaseAppOwnedElement and will be destroyed along with its slot, losing any state it holds.`
+				)
+			}
+		}
+	}, [editor, id, util])
+
+	return <div ref={slotRef} className="tl-content-slot" draggable={false} />
+})
+
+// Dev-mode assertion that adoption kept the platform's state-preservation promise: a
+// load event firing on a previously-connected adopted element means the embed reloaded.
+// load doesn't bubble, but capture-phase listeners on ancestors still observe it.
+function warnIfContentElementReloads(editor: Editor, slot: HTMLElement, element: HTMLElement) {
+	const onLoad = (event: Event) => {
+		if (event.target !== element && !element.contains(event.target as Node)) return
+		warnOnce(
+			'A load event fired on an adopted content element. The element reloaded when it was moved into the shape, losing its state. State-preserving moves need Node.moveBefore (Chromium 133+, Firefox 144+) and a continuously connected element.'
+		)
+	}
+	slot.addEventListener('load', onLoad, { capture: true })
+	editor.timers.setTimeout(() => slot.removeEventListener('load', onLoad, { capture: true }), 1000)
+}
+
 export const InnerShape = memo(
 	function InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {
 		return useStateTracking(

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -32,7 +32,7 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { SelectionBackground, Background, SvgDefs } = useEditorComponents()
+	const { Background, SvgDefs } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
@@ -160,7 +160,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				{isGridMode && Grid && <GridWrapper />}
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
-					{SelectionBackground && <SelectionBackgroundWrapper />}
 					{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}
 				</div>
 				<CanvasOverlays />
@@ -345,21 +344,6 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 	)
 }
 
-function SelectionBackgroundWrapper() {
-	const editor = useEditor()
-	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [
-		editor,
-	])
-	const selectionBounds = useValue(
-		'selection bounds',
-		() => editor.getSelectionRotatedPageBounds(),
-		[editor]
-	)
-	const { SelectionBackground } = useEditorComponents()
-	if (!selectionBounds || !SelectionBackground) return null
-	return <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />
-}
-
 function OnTheCanvasWrapper() {
 	const { OnTheCanvas } = useEditorComponents()
 	if (!OnTheCanvas) return null

package/src/lib/editor/Editor.test.ts

@@ -96,6 +96,42 @@ describe('updateShape', () => {
 	})
 })
 
+describe('updateViewportScreenBounds', () => {
+	it('bails without crashing or updating bounds when the container document has no body', () => {
+		const documentSpy = vi
+			.spyOn(editor, 'getContainerDocument')
+			.mockReturnValue({ body: null } as unknown as Document)
+
+		const prevScreenBounds = editor.getInstanceState().screenBounds
+		const prevInsets = editor.getInstanceState().insets
+
+		try {
+			expect(() => editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))).not.toThrow()
+			// A torn-down document is not measurable, so the bounds are left untouched.
+			expect(editor.getInstanceState().screenBounds).toEqual(prevScreenBounds)
+			expect(editor.getInstanceState().insets).toEqual(prevInsets)
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+
+	it('uses the container document body to calculate right and bottom insets', () => {
+		const documentSpy = vi.spyOn(editor, 'getContainerDocument').mockReturnValue({
+			body: {
+				scrollWidth: 500,
+				scrollHeight: 400,
+			},
+		} as unknown as Document)
+
+		try {
+			editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))
+			expect(editor.getInstanceState().insets).toEqual([true, true, true, true])
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+})
+
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
 		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))

package/src/lib/editor/Editor.ts

@@ -409,9 +409,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this._tickManager = new TickManager(this)
 		this.disposables.add(() => this._tickManager.dispose())
 		this.disposables.add(() => {
-			// Reset camera state to 'idle' so the store isn't left stuck at 'moving'
-			// when tick events stop (e.g. React strict mode disposes while camera is moving)
-			this.off('tick', this._decayCameraStateTimeout)
 			this._setCameraState('idle')
 		})
 
@@ -419,6 +416,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.disposables.add(() => this.fonts.dispose())
 
 		this.inputs = new InputsManager(this)
+		this.disposables.add(() => this.inputs.dispose())
 		this.performance = new PerformanceManager(this)
 		this.disposables.add(() => this.performance.dispose())
 		this.collaborators = new CollaboratorsManager(this)
@@ -1179,6 +1177,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.store.dispose()
 		this.isDisposed = true
 		this.emit('dispose')
+		this.removeAllListeners()
 	}
 
 	/* ------------------ Themes (shadowing the theme manager) ------------------ */
@@ -1551,6 +1550,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.history.getMarkIdMatching(idSubstring)
 	}
 
+	/**
+	 * Whether the editor is currently replaying history (i.e. an undo or redo is being applied).
+	 *
+	 * @internal
+	 */
+	isReplayingHistory(): boolean {
+		return this.history.isReplaying()
+	}
+
 	/**
 	 * Coalesces all changes since the given mark into a single change, removing any intermediate marks.
 	 *
@@ -3068,8 +3076,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return baseCamera
 	}
 
-	private _getFollowingPresence(targetUserId: string | null) {
-		const visited = [this.user.getId()]
+	private _getFollowingPresence(targetUserId: TLUserId | null) {
+		const visited = [this.user.getRecordId()]
 		const collaborators = this.getCollaborators()
 		let leaderPresence = null as null | TLInstancePresence
 		while (targetUserId && !visited.includes(targetUserId)) {
@@ -4029,16 +4037,34 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.once('stop-camera-animation', cancel)
 
+		const dirZ = direction.z ?? 0
+
 		const moveCamera = (elapsed: number) => {
 			const { x: cx, y: cy, z: cz } = this.getCamera()
-			const movementVec = Vec.Mul(direction, (currentSpeed * elapsed) / cz)
+
+			// Pan movement from x/y direction
+			const dx = (direction.x * (currentSpeed * elapsed)) / cz
+			const dy = (direction.y * (currentSpeed * elapsed)) / cz
+
+			let newCx = cx + dx
+			let newCy = cy + dy
+			let newCz = cz
+
+			// animate zoom if z direction is passed in
+			if (dirZ !== 0) {
+				newCz = cz * (1 + dirZ * currentSpeed * elapsed)
+				// Adjust x/y to keep the viewport center fixed while zooming
+				const center = this.getViewportScreenCenter()
+				newCx += center.x / newCz - center.x / cz
+				newCy += center.y / newCz - center.y / cz
+			}
 
 			// Apply friction
 			currentSpeed *= 1 - friction
 			if (currentSpeed < speedThreshold) {
 				cancel()
 			} else {
-				this._setCamera(new Vec(cx + movementVec.x, cy + movementVec.y, cz))
+				this._setCamera(new Vec(newCx, newCy, newCz))
 			}
 		}
 
@@ -4060,7 +4086,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @param opts - The camera move options.
 	 * @public
 	 */
-	zoomToUser(userId: string, opts: TLCameraMoveOptions = { animation: { duration: 500 } }): this {
+	zoomToUser(userId: TLUserId, opts: TLCameraMoveOptions = { animation: { duration: 500 } }): this {
 		const presence = this.getCollaborators().find((c) => c.userId === userId)
 
 		if (!presence) return this
@@ -4139,6 +4165,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		const doc = this.getContainerDocument()
+		// If the container's document has been torn down (e.g. an iframe being
+		// removed), its body is null and there's nothing meaningful to measure.
+		if (!doc.body) return this
+
 		const insets = [
 			// top
 			screenBounds.minY !== 0,
@@ -4400,7 +4430,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/**
 	 * Collect user IDs referenced by a set of shapes via shape-specific props
-	 * (e.g. `textFirstEditedBy` on notes).
+	 * (e.g. `textLastEditedBy` on notes).
 	 *
 	 * @internal
 	 */
@@ -4432,11 +4462,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	startFollowingUser(userId: string): this {
+	startFollowingUser(userId: TLUserId): this {
 		// if we were already following someone, stop following them
 		this.stopFollowingUser()
 
-		const thisUserId = this.user.getId()
+		const thisUserId = this.user.getExternalId()
 
 		if (!thisUserId) {
 			console.warn('You should set the userId for the current instance before following a user')
@@ -8084,32 +8114,53 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	resizeShape(shape: TLShapeId | TLShape, scale: VecLike, opts: TLResizeShapeOptions = {}): this {
+		const partial = this.getResizeShapePartial(shape, scale, opts)
+		if (partial) this.updateShapes([partial])
+		return this
+	}
+
+	/**
+	 * Get the update for a resized shape without committing it to the store. Interactions that
+	 * resize many shapes at once use this to collect all of the updates and commit them in a
+	 * single batch. Returns null when there is nothing to update.
+	 *
+	 * Shapes that are rotated out of alignment with the scale axis cannot be resized with a
+	 * single update; those shapes are resized immediately (as `resizeShape` would do) and null
+	 * is returned.
+	 *
+	 * @internal
+	 */
+	getResizeShapePartial(
+		shape: TLShapeId | TLShape,
+		scale: VecLike,
+		opts: TLResizeShapeOptions = {}
+	): TLShapePartial | null {
 		const id = typeof shape === 'string' ? shape : shape.id
-		if (this.getIsReadonly()) return this
+		if (this.getIsReadonly()) return null
 
 		if (!Number.isFinite(scale.x)) scale = new Vec(1, scale.y)
 		if (!Number.isFinite(scale.y)) scale = new Vec(scale.x, 1)
 
 		const initialShape = opts.initialShape ?? this.getShape(id)
-		if (!initialShape) return this
+		if (!initialShape) return null
 
 		const scaleOrigin = opts.scaleOrigin ?? this.getShapePageBounds(id)?.center
-		if (!scaleOrigin) return this
+		if (!scaleOrigin) return null
 
 		const pageTransform = opts.initialPageTransform
 			? Mat.Cast(opts.initialPageTransform)
 			: this.getShapePageTransform(id)
-		if (!pageTransform) return this
+		if (!pageTransform) return null
 
 		const pageRotation = pageTransform.rotation()
 
-		if (pageRotation == null) return this
+		if (pageRotation == null) return null
 
 		const scaleAxisRotation = opts.scaleAxisRotation ?? pageRotation
 
 		const initialBounds = opts.initialBounds ?? this.getShapeGeometry(id).bounds
 
-		if (!initialBounds) return this
+		if (!initialBounds) return null
 
 		const isAspectRatioLocked =
 			opts.isAspectRatioLocked ?? this.getShapeUtil(initialShape).isAspectRatioLocked(initialShape)
@@ -8119,7 +8170,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// from whichever axis is being scaled the least, to avoid the shape getting bigger
 			// than the bounds of the selection
 			// const minScale = Math.min(Math.abs(scale.x), Math.abs(scale.y))
-			return this._resizeUnalignedShape(id, scale, {
+			this._resizeUnalignedShape(id, scale, {
 				...opts,
 				initialBounds,
 				scaleOrigin,
@@ -8128,6 +8179,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				isAspectRatioLocked,
 				initialShape,
 			})
+			return null
 		}
 
 		const util = this.getShapeUtil(initialShape)
@@ -8140,7 +8192,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
-		let didResize = false
+		let workingShape: TLShape | null = null
 
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
@@ -8172,7 +8224,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// need to adjust the shape's x and y points in case the parent has moved since start of resizing
 			const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint)
 
-			let workingShape = initialShape
+			workingShape = initialShape
 			if (!opts.skipStartAndEndCallbacks) {
 				workingShape = applyPartialToRecordWithProps(
 					initialShape,
@@ -8194,10 +8246,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			)
 
-			if (resizedShape) {
-				didResize = true
-			}
-
 			workingShape = applyPartialToRecordWithProps(workingShape, {
 				id,
 				type: initialShape.type as any,
@@ -8213,40 +8261,47 @@ export class Editor extends EventEmitter<TLEventMap> {
 				)
 			}
 
-			this.updateShapes([workingShape])
+			if (resizedShape) {
+				return workingShape
+			}
 		}
 
-		if (!didResize) {
-			// reposition shape (rather than resizing it) based on where its resized center would be
+		// the shape was not resized by its util, so reposition it (rather than resizing it)
+		// based on where its resized center would be
 
-			const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center)
-			// get the model changes from the shape util
-			const newPageCenter = this._scalePagePoint(
-				initialPageCenter,
-				scaleOrigin,
-				scale,
-				scaleAxisRotation
-			)
+		const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center)
+		// get the model changes from the shape util
+		const newPageCenter = this._scalePagePoint(
+			initialPageCenter,
+			scaleOrigin,
+			scale,
+			scaleAxisRotation
+		)
 
-			const initialPageCenterInParentSpace = this.getPointInParentSpace(
-				initialShape.id,
-				initialPageCenter
-			)
-			const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter)
+		const initialPageCenterInParentSpace = this.getPointInParentSpace(
+			initialShape.id,
+			initialPageCenter
+		)
+		const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter)
 
-			const delta = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace)
-			// apply the changes to the model
-			this.updateShapes([
-				{
-					id,
-					type: initialShape.type as any,
-					x: initialShape.x + delta.x,
-					y: initialShape.y + delta.y,
-				},
-			])
+		const delta = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace)
+
+		if (workingShape) {
+			// the util's onResize ran but returned no change; keep the working update (which may
+			// include changes from onResizeStart / onResizeEnd) and reposition the shape
+			return {
+				...workingShape,
+				x: initialShape.x + delta.x,
+				y: initialShape.y + delta.y,
+			}
 		}
 
-		return this
+		return {
+			id,
+			type: initialShape.type as any,
+			x: initialShape.x + delta.x,
+			y: initialShape.y + delta.y,
+		}
 	}
 
 	/** @internal */
@@ -10126,6 +10181,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (ids.length === 0) return undefined
 
+		// Text geometry is measured from the loaded font, so the export's bounds - and the
+		// layout of any text within it - depend on the right fonts having loaded. Wait for them
+		// before we measure; otherwise an export taken before fonts finish loading (e.g. right
+		// after the editor mounts) is sized and laid out with fallback-font metrics.
+		await this.fonts.loadRequiredFontsForCurrentPage(this.options.maxFontsToLoadBeforeRender)
+
 		return exportToSvg(this, ids, opts)
 	}
 
@@ -11172,8 +11233,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 						inputs.setIsPointing(true)
 						inputs.setIsDragging(false)
 
-						// If pen mode is off but we're not already in pen mode, turn that on
-						if (!isPenMode && isPen) this.updateInstanceState({ isPenMode: true })
+						// If pen mode is off, turn it on for direct-display pen input only (e.g. Apple
+						// Pencil on an iPad or a Surface Pen on a touchscreen). Indirect desktop tablet
+						// styluses still draw as pens, but should not auto-enable pen mode.
+						if (!isPenMode && info.isPenDirect) {
+							this.updateInstanceState({ isPenMode: true })
+							// Once pen mode is on, touch input is ignored, so we discard the
+							// in-progress touch interaction .
+							this.interrupt()
+						}
 
 						// On devices with erasers (like the Surface Pen or Wacom Pen), button 5 is the eraser
 						if (info.button === STYLUS_ERASER_BUTTON) {
@@ -11323,7 +11391,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 									// Don't pass right-click panning events to the state chart
 									// as it causes unintended shape selection on release
 									if (slideSpeed > 0) {
-										this.slideCamera({ speed: slideSpeed, direction: slideDirection })
+										this.slideCamera({
+											speed: slideSpeed,
+											direction: { x: slideDirection.x, y: slideDirection.y, z: 0 },
+										})
 									}
 									this._selectedShapeIdsAtPointerDown = []
 									this._didCaptureSelectionAtPointerDown = false
@@ -11332,7 +11403,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}
 
 							if (slideSpeed > 0) {
-								this.slideCamera({ speed: slideSpeed, direction: slideDirection })
+								this.slideCamera({
+									speed: slideSpeed,
+									direction: { x: slideDirection.x, y: slideDirection.y, z: 0 },
+								})
 							}
 						} else {
 							if (info.button === STYLUS_ERASER_BUTTON) {
@@ -11447,6 +11521,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 				info.name = 'right_click'
 			}
 
+			// The context menu is a select-tool surface: every item acts on the
+			// current selection. Route a right-click through the select tool before
+			// the event reaches the state chart, so the select tool's idle resolves
+			// the selection at the click point (select the shape under the pointer,
+			// or clear it) no matter which tool was active. Without this, opening the
+			// menu from another tool leaves a stale selection that doesn't match the
+			// click (#8828). Guarded on the select tool existing, since the bare
+			// editor can be configured without it.
+			if (
+				info.name === 'right_click' &&
+				this.getCurrentToolId() !== 'select' &&
+				this.getStateDescendant('select')
+			) {
+				this.setCurrentTool('select')
+			}
+
 			// If a left click pointer event, send the event to the click manager.
 			const { isPenMode } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
 			if (info.isPen === isPenMode) {