@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

package/src/index.ts

@@ -25,6 +25,7 @@ export {
 export {
 	DefaultErrorFallback,
 	type TLErrorFallbackComponent,
+	type TLErrorFallbackProps,
 } from './lib/components/default-components/DefaultErrorFallback'
 export { DefaultGrid, type TLGridProps } from './lib/components/default-components/DefaultGrid'
 export { type TLShapeErrorFallbackComponent } from './lib/components/default-components/DefaultShapeErrorFallback'
@@ -32,7 +33,10 @@ export {
 	DefaultShapeWrapper,
 	type TLShapeWrapperProps,
 } from './lib/components/default-components/DefaultShapeWrapper'
-export { DefaultSpinner } from './lib/components/default-components/DefaultSpinner'
+export {
+	DefaultSpinner,
+	type TLSpinnerProps,
+} from './lib/components/default-components/DefaultSpinner'
 export { DefaultSvgDefs } from './lib/components/default-components/DefaultSvgDefs'
 export {
 	EditorPortal,

package/src/lib/TldrawEditor.tsx

@@ -46,7 +46,7 @@ import { EditorProvider, useEditor } from './hooks/useEditor'
 import { EditorComponentsProvider } from './hooks/useEditorComponents'
 import { useEvent } from './hooks/useEvent'
 import { useForceUpdate } from './hooks/useForceUpdate'
-import { useShallowObjectIdentity } from './hooks/useIdentity'
+import { useDeepObjectIdentity, useShallowObjectIdentity } from './hooks/useIdentity'
 import { useLocalStore } from './hooks/useLocalStore'
 import { useRefState } from './hooks/useRefState'
 import { useStateAttribute } from './hooks/useStateAttribute'
@@ -106,11 +106,7 @@ export interface TldrawEditorWithoutStoreProps extends TLStoreBaseOptions {
 /** @public */
 export type TldrawEditorStoreProps = TldrawEditorWithStoreProps | TldrawEditorWithoutStoreProps
 
-/**
- * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components.
- *
- * @public
- **/
+/** @public */
 export type TldrawEditorProps = TldrawEditorBaseProps & TldrawEditorStoreProps
 
 /**
@@ -284,7 +280,13 @@ const EMPTY_TOOLS_ARRAY = [] as const
 /** @internal */
 export const TL_CONTAINER_CLASS = 'tl-container'
 
-/** @public @react */
+/**
+ * The editor component without any of the default shapes, tools, or UI. It renders the canvas, or
+ * your own children in its place, with the shape utils, binding utils, tools, and components you
+ * pass in; the `Tldraw` component in the `tldraw` package wraps it with those defaults.
+ *
+ * @public @react
+ */
 export const TldrawEditor = memo(function TldrawEditor({
 	store,
 	components,
@@ -311,18 +313,24 @@ export const TldrawEditor = memo(function TldrawEditor({
 	const ErrorFallback =
 		components?.ErrorFallback === undefined ? DefaultErrorFallback : components?.ErrorFallback
 
-	// Merge deprecated props with options
-	// options values take precedence over the deprecated props
-	const mergedOptions = useMemo(() => {
-		let result = _options
-		if (_textOptions) {
-			result = { ...result, text: result?.text ?? _textOptions }
-		}
-		if (_deepLinks !== undefined) {
-			result = { ...result, deepLinks: result?.deepLinks ?? _deepLinks }
-		}
-		return result
-	}, [_options, _textOptions, _deepLinks])
+	// Merge deprecated props with options (options win). `options` is a dependency of the
+	// editor-creating effect, so it's shallow-stabilised below; the nested objects are
+	// deep-stabilised here first, or an inline `options={{ camera: { ... } }}` would still
+	// recreate the editor on every render. `text` needs the deep comparison as well: `<Tldraw>`
+	// builds a fresh `tipTapConfig` inside it whenever its own `options.text` is a new identity.
+	const camera = useDeepObjectIdentity(_options?.camera)
+	const gridSteps = useDeepObjectIdentity(_options?.gridSteps)
+	const text = useDeepObjectIdentity(_options?.text ?? _textOptions)
+	const mergedDeepLinks = _options?.deepLinks ?? _deepLinks
+	const deepLinkOptions = useDeepObjectIdentity(
+		mergedDeepLinks === true ? undefined : mergedDeepLinks
+	)
+	const deepLinks = mergedDeepLinks === true ? true : deepLinkOptions
+	let mergedOptions = _options
+	if (camera !== undefined) mergedOptions = { ...mergedOptions, camera }
+	if (gridSteps !== undefined) mergedOptions = { ...mergedOptions, gridSteps }
+	if (text !== undefined) mergedOptions = { ...mergedOptions, text }
+	if (deepLinks !== undefined) mergedOptions = { ...mergedOptions, deepLinks }
 
 	// apply defaults. if you're using the bare @tldraw/editor package, we
 	// default these to the "tldraw zero" configuration. We have different
@@ -669,19 +677,25 @@ function TldrawEditorWithReadyStore({
 	useEffect(
 		function handleFocusOnPointerDownForPreserveFocusMode() {
 			if (!editor) return
+			const container = editor.getContainer()
 
 			function handleFocusOnPointerDown() {
 				if (!editor) return
 				editor.focus()
 			}
 
-			function handleBlurOnPointerDown() {
+			function handleBlurOnPointerDown(e: PointerEvent) {
 				if (!editor) return
+				// The same pointerdown bubbles from the container to the body; blurring here would
+				// cancel the interaction the container listener just focused for. Check the composed
+				// path rather than `e.target`: when the editor lives in an open shadow root the target
+				// is retargeted to the shadow host by the time the event reaches the body. (A closed
+				// shadow root truncates the path at the host, so those still blur.)
+				if (e.composedPath().includes(container)) return
 				editor.blur()
 			}
 
 			if (autoFocus && noAutoFocus()) {
-				const container = editor.getContainer()
 				container.addEventListener('pointerdown', handleFocusOnPointerDown)
 				container.ownerDocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)
 

package/src/lib/components/MenuClickCapture.tsx

@@ -29,6 +29,7 @@ export function MenuClickCapture() {
 		isDown: false,
 		isDragging: false,
 		button: 0,
+		pointerId: -1,
 		start: new Vec(),
 	})
 
@@ -69,6 +70,11 @@ export function MenuClickCapture() {
 
 	const handlePointerDown = useCallback(
 		(e: PointerEvent) => {
+			// This overlay tracks a single press. A second pointer landing while one is active —
+			// a palm resting on the glass beside a pen — must not take over the gesture, or its
+			// own cancel would end the press it stole.
+			if (rPointerState.current.isDown) return
+
 			const button = getPointerEventButton(e)
 			if (button !== 0 && button !== 2) return
 
@@ -94,6 +100,7 @@ export function MenuClickCapture() {
 				isDown: true,
 				isDragging: false,
 				button,
+				pointerId: e.pointerId,
 				start: new Vec(e.clientX, e.clientY),
 			}
 
@@ -111,7 +118,7 @@ export function MenuClickCapture() {
 	const handlePointerMove = useCallback(
 		(e: PointerEvent) => {
 			const state = rPointerState.current
-			if (!state.isDown) return
+			if (!state.isDown || state.pointerId !== e.pointerId) return
 
 			// Left-click: wait for the drag threshold before forwarding anything, then
 			// replay pointerdown at the original start so the editor records the
@@ -144,15 +151,17 @@ export function MenuClickCapture() {
 
 	const handlePointerUp = useCallback(
 		(e: PointerEvent) => {
-			const isStaticRightClick =
-				rPointerState.current.button === 2 && !rPointerState.current.isDragging
+			const state = rPointerState.current
+			if (!state.isDown || state.pointerId !== e.pointerId) return
+
+			const isStaticRightClick = state.button === 2 && !state.isDragging
 
 			editor.dispatch({
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
 				...getPointerInfo(editor, e),
-				button: rPointerState.current.button === 2 ? 2 : getPointerEventButton(e),
+				button: state.button === 2 ? 2 : getPointerEventButton(e),
 			})
 
 			if (isStaticRightClick && editor.options.rightClickPanning) {
@@ -183,12 +192,53 @@ export function MenuClickCapture() {
 				isDown: false,
 				isDragging: false,
 				button: 0,
+				pointerId: -1,
 				start: new Vec(e.clientX, e.clientY),
 			}
 		},
 		[editor]
 	)
 
+	const handlePointerCancel = useCallback(
+		(e: PointerEvent) => {
+			const state = rPointerState.current
+			if (!state.isDown || state.pointerId !== e.pointerId) {
+				// Either a right-click press that was forwarded to the canvas, or a pointer this
+				// overlay never tracked. Neither is ours to end, so let the canvas handler decide.
+				canvasEvents.onPointerCancel?.(e)
+				return
+			}
+
+			// The canvas's own cancel handler doesn't know about this element's pointer
+			// state, so without this the overlay stays mounted over the canvas and
+			// swallows the next interaction after the browser cancels a press.
+			if (editor.inputs.getIsPointing()) {
+				editor.interrupt()
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_up',
+					...getPointerInfo(editor, e),
+					// pointercancel reports button -1
+					button: state.button,
+				})
+			} else {
+				editor.markEventAsHandled(e)
+			}
+
+			releasePointerCapture(e.currentTarget, e)
+			setIsPointing(false)
+			rPointerState.current = {
+				isDown: false,
+				isDragging: false,
+				button: 0,
+				pointerId: -1,
+				start: new Vec(e.clientX, e.clientY),
+			}
+		},
+		[canvasEvents, editor]
+	)
+
 	return (
 		showElement && (
 			<div
@@ -198,6 +248,7 @@ export function MenuClickCapture() {
 				onPointerDown={handlePointerDown}
 				onPointerMove={handlePointerMove}
 				onPointerUp={handlePointerUp}
+				onPointerCancel={handlePointerCancel}
 				onContextMenu={(e) => {
 					e.preventDefault()
 					e.stopPropagation()

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

@@ -119,7 +119,13 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 		[editor]
 	)
 
-	const hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])
+	// Gated on debug mode so a flag left on can't strand the user on a blank canvas with no
+	// debug menu to turn it back off.
+	const hideShapes = useValue(
+		'debug_shapes',
+		() => debugFlags.hideShapes.get() && editor.getInstanceState().isDebugMode,
+		[editor]
+	)
 
 	const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])
 	const { Grid } = useEditorComponents()

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

@@ -13,13 +13,21 @@ import { ErrorBoundary } from '../ErrorBoundary'
 const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
 
 /** @public */
-export type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>
+export interface TLErrorFallbackProps {
+	/** The error that was caught. */
+	error: unknown
+	/**
+	 * Only set when the caller renders the fallback with an editor; the editor's own error
+	 * boundaries pass just `error`.
+	 */
+	editor?: Editor
+}
+
+/** @public */
+export type TLErrorFallbackComponent = ComponentType<TLErrorFallbackProps>
 
 /** @public @react */
-export const DefaultErrorFallback: TLErrorFallbackComponent = function DefaultErrorFallback({
-	error,
-	editor,
-}) {
+export function DefaultErrorFallback({ error, editor }: TLErrorFallbackProps) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')
 	const [didCopy, setDidCopy] = useState(false)

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

@@ -1,7 +1,10 @@
 import classNames from 'classnames'
 
+/** @public */
+export type TLSpinnerProps = React.SVGProps<SVGSVGElement>
+
 /** @public @react */
-export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
+export function DefaultSpinner(props: TLSpinnerProps) {
 	return (
 		<svg
 			width={16}

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

@@ -96,6 +96,26 @@ describe('updateShape', () => {
 	})
 })
 
+describe('setErasingShapes', () => {
+	it('sorts a copy of the ids rather than the array the caller passed in', () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		editor.createShapes([
+			{ id: a, type: 'my-custom-shape', props: { w: 100, h: 100, text: undefined } },
+			{ id: b, type: 'my-custom-shape', props: { w: 100, h: 100, text: undefined } },
+		])
+
+		// the store freezes the arrays it owns, so sorting one in place throws
+		const ids = [b, a]
+		Object.freeze(ids)
+
+		editor.setErasingShapes(ids)
+
+		expect(ids).toEqual([b, a])
+		expect(editor.getErasingShapeIds()).toEqual([a, b])
+	})
+})
+
 describe('updateViewportScreenBounds', () => {
 	it('bails without crashing or updating bounds when the container document has no body', () => {
 		const documentSpy = vi
@@ -1101,6 +1121,51 @@ describe('dispatch event emission', () => {
 
 		expect(eventHandler).toHaveBeenCalledWith(pinchEndEvent)
 	})
+
+	it('still ends a pinch when the camera is locked mid-gesture', () => {
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+		testEditor.dispatch(pinchStartEvent)
+		testEditor.emit('tick', 16)
+		expect(testEditor.inputs.getIsPinching()).toBe(true)
+
+		// Locking only stops the camera: pinch_end must still clear isPinching, otherwise
+		// every pointer event is ignored from here on.
+		testEditor.setCameraOptions({ isLocked: true })
+		testEditor.dispatch({ ...pinchStartEvent, name: 'pinch_end' })
+		testEditor.emit('tick', 16)
+		expect(testEditor.inputs.getIsPinching()).toBe(false)
+	})
+
+	it('ignores the stylus eraser button when no eraser tool is registered', () => {
+		const pointerDown = {
+			type: 'pointer' as const,
+			name: 'pointer_down' as const,
+			target: 'canvas' as const,
+			point: { x: 100, y: 100, z: 0.5 },
+			pointerId: 1,
+			button: 5,
+			isPen: true,
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		expect(() => testEditor.dispatch(pointerDown)).not.toThrow()
+		expect(() => testEditor.dispatch({ ...pointerDown, name: 'pointer_up' })).not.toThrow()
+		expect(testEditor.getCrashingError()).toBeNull()
+	})
 })
 
 describe('setTool', () => {