tldraw 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.4.0-next.ef99ab47e5ce'
+export const version = '5.4.0'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:52:36.664Z',
-	patch: '2026-08-05T11:52:36.664Z',
+	minor: '2026-09-02T11:04:02.901Z',
+	patch: '2026-09-02T11:04:02.901Z',
 }

package/src/lib/ui.css

@@ -2104,7 +2104,8 @@ tldraw? probably.
 	align-items: center;
 }
 
-.tlui-people-menu__user__color {
+.tlui-people-menu__user__color,
+.tlui-people-menu__user__edit {
 	flex-shrink: 0;
 }
 
@@ -2150,7 +2151,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item {
-	position: relative;
+	display: flex;
+	align-items: center;
 }
 
 .tlui-people-menu__item:last-of-type .tlui-button__menu {
@@ -2158,7 +2160,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__button {
-	padding: 0 11px;
+	padding-inline-start: 12px;
+	padding-inline-end: 0px;
 	overflow: hidden;
 }
 
@@ -2168,7 +2171,7 @@ tldraw? probably.
 	align-items: auto;
 	justify-content: flex-start;
 	flex-grow: 2;
-	gap: 11px;
+	gap: 12px;
 }
 
 .tlui-people-menu__name {
@@ -2179,18 +2182,9 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__follow {
-	position: absolute;
-	top: 0px;
-	inset-inline-end: 0px;
-	max-width: 40px;
 	flex-shrink: 0;
 }
 
-.tlui-people-menu__item[data-follow='true'],
-.tlui-people-menu__item:has(.tlui-button:focus-visible) {
-	padding-inline-end: 36px;
-}
-
 .tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
 .tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
 	opacity: 1;
@@ -2201,9 +2195,6 @@ tldraw? probably.
 		opacity: 0;
 	}
 
-	.tlui-people-menu__item:hover {
-		padding-right: 36px;
-	}
 	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {
 		opacity: 1;
 	}

package/src/test/ClickManager.test.ts

@@ -263,6 +263,24 @@ it('Cancels when click moves', () => {
 	expect(event.name).toBe('pointer_up')
 })
 
+it('Does not cancel a double click on a small move when the container is offset', () => {
+	// click points are client coordinates; comparing them against the container-relative
+	// screen point used to cancel on any movement at all in an offset container
+	editor.setScreenBounds({ x: 300, y: 100, w: 1080, h: 720 })
+	const events: any[] = []
+	editor.addListener('event', (info) => events.push(info))
+
+	editor.pointerDown(500, 400).pointerMove(501, 400).pointerUp(501, 400).pointerDown(501, 400)
+
+	expect(events).toMatchObject([
+		{ name: 'pointer_down' },
+		{ name: 'pointer_move' },
+		{ name: 'pointer_up' },
+		{ name: 'pointer_down' },
+		{ name: 'double_click', type: 'click', phase: 'down' },
+	])
+})
+
 it('Resets when the focus layer changes', () => {
 	const boxId = editor.testShapeID('box')
 	const otherBoxId = editor.testShapeID('otherBox')

package/src/test/Editor.test.tsx

@@ -913,6 +913,9 @@ describe('instance.isReadonly', () => {
 		expect(editor.getIsReadonly()).toBe(false)
 		mode.set('readonly')
 		expect(editor.getIsReadonly()).toBe(true)
+
+		// syncing the mode is not a user edit, so it must not show up in the undo history
+		expect(editor.getCanUndo()).toBe(false)
 	})
 })
 

package/src/test/EraserTool.test.ts

@@ -411,6 +411,22 @@ describe('When clicking and dragging', () => {
 		expect(editor.getShape(ids.box3)).not.toBeDefined()
 	})
 
+	it.each([
+		['exactly on the outline', 300],
+		['a pixel inside the outline', 301],
+		['a pixel outside the outline', 299],
+	])('Keeps erasing a frame pressed %s when the drag begins', (_label, x) => {
+		editor.setCurrentTool('eraser')
+		editor.pointerDown(x, 50) // on frame1's left edge, not its children
+		expect(editor.getErasingShapeIds()).toEqual([ids.frame1])
+		editor.pointerMove(325, 50) // drag inward, still in the frame, clear of box4
+		vi.advanceTimersByTime(16)
+		editor.expectToBeIn('eraser.erasing')
+		expect(editor.getErasingShapeIds()).toEqual([ids.frame1])
+		editor.pointerUp()
+		expect(editor.getShape(ids.frame1)).not.toBeDefined()
+	})
+
 	it('Only erases masked shapes when pointer is inside the mask', () => {
 		editor.setCurrentTool('eraser')
 		editor.pointerMove(425, 0)
@@ -423,8 +439,8 @@ describe('When clicking and dragging', () => {
 		editor.pointerUp()
 		expect(editor.getShape(ids.box3)).toBeDefined()
 
-		editor.pointerMove(375, 0)
-		editor.pointerDown() // Above the not-masked part of box3
+		editor.pointerMove(375, 20)
+		editor.pointerDown() // Inside frame1 (clear of its outline), above the not-masked part of box3
 		editor.pointerMove(375, 500) // Through the masked part of box3
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		expect(editor.getErasingShapeIds()).toEqual([ids.box3])

package/src/test/HandTool.test.ts

@@ -39,6 +39,27 @@ describe(HandTool, () => {
 		expect(editor.getCamera().z).toBeGreaterThan(before)
 	})
 
+	it('Ends one-finger zoom when a second touch starts, instead of jumping the zoom', () => {
+		editor.setCurrentTool('hand')
+		editor.updateInstanceState({ isCoarsePointer: true })
+
+		editor.pointerDown(100, 100).pointerUp(100, 100)
+		editor.pointerDown(100, 100)
+		vi.advanceTimersByTime(editor.options.multiClickDurationMs)
+		editor.expectToBeIn('hand.one_finger_zooming')
+
+		editor.pointerMove(100, 120)
+		const zoomBeforeSecondTouch = editor.getCamera().z
+		expect(zoomBeforeSecondTouch).toBeGreaterThan(1)
+
+		// A second finger lands far away and moves; the pan/zoom must yield rather than
+		// treat the new pointer as a continuation of the first one.
+		editor.pointerDown(300, 400, { pointerId: 2 })
+		editor.expectToBeIn('hand.idle')
+		editor.pointerMove(300, 420, { pointerId: 2 })
+		expect(editor.getCamera().z).toBe(zoomBeforeSecondTouch)
+	})
+
 	it('Zooms in (not one-finger zoom) when a coarse pointer double-taps and releases', () => {
 		editor.setCurrentTool('hand')
 		editor.updateInstanceState({ isCoarsePointer: true })

package/src/test/LaserTool.test.ts

@@ -1,3 +1,4 @@
+import { PageRecordType } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
@@ -385,6 +386,51 @@ describe('LaserTool', () => {
 		})
 	})
 
+	describe('Page changes', () => {
+		it('clears the trail when the current page changes', () => {
+			editor.setCurrentTool('laser')
+
+			editor.pointerDown(0, 0)
+			for (let i = 1; i <= 10; i++) {
+				editor.pointerMove(i * 5, i * 5)
+				vi.advanceTimersByTime(16)
+			}
+			editor.pointerUp()
+			expect(editor.getInstanceState().scribbles.length).toBeGreaterThan(0)
+
+			const page2Id = PageRecordType.createId('page2')
+			editor.createPage({ id: page2Id, name: 'Page 2' })
+			editor.setCurrentPage(page2Id)
+			vi.advanceTimersByTime(16)
+
+			expect(editor.getInstanceState().scribbles).toEqual([])
+		})
+
+		it('starts a fresh session on the new page after a page change', () => {
+			editor.setCurrentTool('laser')
+
+			editor.pointerDown(0, 0)
+			editor.pointerMove(10, 10)
+			vi.advanceTimersByTime(16)
+			editor.pointerUp()
+
+			const page2Id = PageRecordType.createId('page2')
+			editor.createPage({ id: page2Id, name: 'Page 2' })
+			editor.setCurrentPage(page2Id)
+			vi.advanceTimersByTime(16)
+
+			editor.pointerDown(0, 50)
+			for (let i = 1; i <= 10; i++) {
+				editor.pointerMove(i * 5, 50 + i * 5)
+				vi.advanceTimersByTime(16)
+			}
+			editor.pointerUp()
+
+			// Only the stroke drawn on the new page is visible
+			expect(editor.getInstanceState().scribbles.length).toBe(1)
+		})
+	})
+
 	describe('Edge cases', () => {
 		it('handles rapid pointer up/down', () => {
 			editor.setCurrentTool('laser')

package/src/test/ScribbleManager.test.ts

@@ -1,3 +1,4 @@
+import { PageRecordType } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
@@ -341,6 +342,24 @@ describe('ScribbleManager', () => {
 
 				expect(editor.scribbles.isSessionActive(sessionId)).toBe(false)
 			})
+
+			it('clears sessions started on another page when the current page changes', () => {
+				const sessionId = editor.scribbles.startSession({ selfConsume: false })
+				const item = editor.scribbles.addScribbleToSession(sessionId, {})
+				for (let i = 0; i < 10; i++) {
+					editor.scribbles.addPointToSession(sessionId, item.id, i * 5, i * 5)
+					editor.scribbles.tick(16)
+				}
+				expect(editor.getInstanceState().scribbles.length).toBe(1)
+
+				const page2Id = PageRecordType.createId('page2')
+				editor.createPage({ id: page2Id, name: 'Page 2' })
+				editor.setCurrentPage(page2Id)
+				editor.scribbles.tick(16)
+
+				expect(editor.getInstanceState().scribbles).toEqual([])
+				expect(editor.scribbles.isSessionActive(sessionId)).toBe(false)
+			})
 		})
 	})
 

package/src/test/SelectTool.test.ts

@@ -3,6 +3,7 @@ import {
 	ShapeUtil,
 	TLArrowShape,
 	TLFrameShape,
+	TLGeoShape,
 	createShapeId,
 	toRichText,
 } from '@tldraw/editor'
@@ -47,6 +48,13 @@ describe('TLSelectTool.Idle', () => {
 		editor.expectToBeIn('select.pointing_canvas')
 	})
 
+	it('Returns to idle when a canvas press is cancelled', () => {
+		editor.pointerDown(10, 10, { target: 'canvas' })
+		editor.expectToBeIn('select.pointing_canvas')
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+	})
+
 	it('Nudges selected shapes on arrow key down', () => {
 		const shape = editor.getShape(ids.box1)!
 		editor.select(shape.id)
@@ -56,6 +64,47 @@ describe('TLSelectTool.Idle', () => {
 		expect(nudgedShape).toBeDefined()
 		expect(nudgedShape?.x).toBe(101)
 	})
+
+	it('Does not nudge selected shapes on arrow key down while spacebar panning', () => {
+		const shape = editor.getShape(ids.box1)!
+		editor.select(shape.id)
+		editor.keyDown(' ')
+		expect(editor.inputs.getIsSpacebarPanning()).toBe(true)
+		editor.keyDown('ArrowRight')
+		editor.keyRepeat('ArrowRight')
+		editor.keyUp('ArrowRight')
+		editor.keyUp(' ')
+		expect(editor.getShape(shape.id)).toMatchObject({ x: 100, y: 100 })
+	})
+
+	it('Does not nudge selected shapes on arrow key down while alt is held', () => {
+		const shape = editor.getShape(ids.box1)!
+		editor.select(shape.id)
+		editor.keyDown('Alt')
+		editor.keyDown('ArrowRight')
+		editor.keyRepeat('ArrowRight')
+		editor.keyUp('ArrowRight')
+		editor.keyUp('Alt')
+		expect(editor.getShape(shape.id)).toMatchObject({ x: 100, y: 100 })
+	})
+
+	it('Makes a shape double click change its own undo step', () => {
+		const shape = editor.getShape<TLGeoShape>(ids.box1)!
+		expect(shape.props.geo).toBe('rectangle')
+
+		// Alt+double-click swaps a rectangle to a check-box via GeoShapeUtil.onDoubleClick
+		editor.keyDown('Alt')
+		editor.doubleClick(150, 150, { target: 'shape', shape }, { altKey: true })
+		editor.keyUp('Alt')
+
+		expect(editor.getShape<TLGeoShape>(ids.box1)!.props.geo).toBe('check-box')
+		expect(editor.getOnlySelectedShapeId()).toBe(ids.box1)
+
+		editor.undo()
+
+		expect(editor.getShape<TLGeoShape>(ids.box1)!.props.geo).toBe('rectangle')
+		expect(editor.getOnlySelectedShapeId()).toBe(ids.box1)
+	})
 })
 
 // todo: turn on feature flag for these tests or remove them
@@ -501,6 +550,42 @@ describe('PointingLabel', () => {
 		editor.expectToBeIn('select.idle')
 	})
 
+	it('Keeps the dragged label position on complete', () => {
+		editor.createShapes([
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 100,
+				y: 100,
+				props: {
+					richText: toRichText('Test Label'),
+					start: { x: 0, y: 0 },
+					end: { x: 100, y: 0 },
+				},
+			},
+		])
+		const shape = editor.getShape<TLArrowShape>(ids.arrow1)!
+		const initialLabelPosition = shape.props.labelPosition
+
+		editor.pointerDown(150, 100, {
+			target: 'shape',
+			shape,
+		})
+		editor.pointerMove(160, 100)
+		editor.expectToBeIn('select.pointing_arrow_label')
+		editor.pointerMove(190, 100)
+
+		const draggedLabelPosition = editor.getShape<TLArrowShape>(ids.arrow1)!.props.labelPosition
+		expect(draggedLabelPosition).not.toBe(initialLabelPosition)
+
+		// A menu opening or an undo keypress mid-drag completes the interaction
+		editor.complete()
+		editor.expectToBeIn('select.idle')
+		expect(editor.getShape<TLArrowShape>(ids.arrow1)!.props.labelPosition).toBe(
+			draggedLabelPosition
+		)
+	})
+
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
 		editor.createShapes([
 			{
@@ -744,6 +829,31 @@ describe('When double clicking a selection handle that registers as a canvas eve
 
 		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('arrow')
 	})
+
+	it('Undoes an arrowhead toggled by handle double-click without undoing the selection', () => {
+		const id = createShapeId()
+		overlayEditor
+			.createShapes([
+				{
+					id,
+					type: 'arrow',
+					x: 100,
+					y: 100,
+					props: { start: { x: 0, y: 0 }, end: { x: 100, y: 100 } },
+				},
+			])
+			.selectNone()
+		overlayEditor.markHistoryStoppingPoint('before selecting arrow')
+		overlayEditor.select(id)
+
+		overlayEditor.doubleClick(200, 200)
+		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('none')
+
+		overlayEditor.undo()
+
+		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('arrow')
+		expect(overlayEditor.getSelectedShapeIds()).toEqual([id])
+	})
 })
 
 describe('When editing shapes', () => {

package/src/test/TldrawEditor.test.tsx

@@ -13,6 +13,7 @@ import {
 	createTLStore,
 	noop,
 	react,
+	tleditors,
 	toRichText,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
@@ -95,6 +96,21 @@ describe('<TldrawEditor />', () => {
 		)
 	})
 
+	it('runs the teardown returned by the store onMount option when unmounted', async () => {
+		const teardown = vi.fn()
+		const storeOnMount = vi.fn(() => teardown)
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [], onMount: storeOnMount })
+		const rendered = await renderTldrawComponent(
+			<TldrawEditor store={store} tools={defaultTools} initialState="select" />,
+			{ waitForPatterns: false }
+		)
+		expect(storeOnMount).toHaveBeenCalledTimes(1)
+		expect(teardown).not.toHaveBeenCalled()
+
+		act(() => rendered.unmount())
+		expect(teardown).toHaveBeenCalledTimes(1)
+	})
+
 	it('throws if the store has different shapes to the ones passed in', async () => {
 		const spy = vi.spyOn(console, 'error').mockImplementation(noop)
 		// expect(() =>
@@ -181,6 +197,7 @@ describe('<TldrawEditor />', () => {
 
 		// mounted after render:
 		expect(editor.getIsMounted()).toBe(true)
+		expect(tleditors.getMounted()).toEqual([editor])
 
 		// getIsMounted is reactive:
 		const mountedValues: boolean[] = []
@@ -191,6 +208,7 @@ describe('<TldrawEditor />', () => {
 		// the unmount event fired and the mounted state flipped back to false:
 		expect(onUnmount).toHaveBeenCalledTimes(1)
 		expect(editor.getIsMounted()).toBe(false)
+		expect(tleditors.getMounted()).toEqual([])
 		expect(mountedValues).toEqual([true, false])
 
 		stop()

package/src/test/VideoShapeUtil.test.tsx

@@ -0,0 +1,126 @@
+import { act, fireEvent } from '@testing-library/react'
+import { AssetRecordType, Editor, TLAssetId, TLShapeId, createShapeId } from '@tldraw/editor'
+import { Tldraw } from '../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+const LOADING_BACKGROUND = 'var(--tl-color-low)'
+const LOADING_BORDER = '1px solid var(--tl-color-low-border)'
+
+let editor: Editor
+let videoShapeId: TLShapeId
+let videoAssetId: TLAssetId
+
+function getShapeContainer() {
+	const container = document.getElementById(videoShapeId)
+	expect(container).toBeTruthy()
+	return container!
+}
+
+beforeEach(async () => {
+	videoShapeId = createShapeId('video')
+	videoAssetId = AssetRecordType.createId('videoAsset')
+
+	const result = await renderTldrawComponentWithEditor((onMount) => <Tldraw onMount={onMount} />, {
+		waitForPatterns: false,
+	})
+	editor = result.editor
+})
+
+describe('VideoShapeUtil loading state', () => {
+	it('shows the loading plate when the asset record is missing', async () => {
+		await act(async () => {
+			editor.createShapes([
+				{ id: videoShapeId, type: 'video', x: 0, y: 0, props: { w: 100, h: 100 } },
+			])
+		})
+
+		const container = getShapeContainer()
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+	})
+
+	it('shows the loading plate while the asset is uploading (no src)', async () => {
+		await act(async () => {
+			editor.createAssets([
+				{
+					id: videoAssetId,
+					type: 'video',
+					typeName: 'asset',
+					props: {
+						w: 100,
+						h: 100,
+						name: 'video.mp4',
+						isAnimated: true,
+						mimeType: 'video/mp4',
+						src: '',
+					},
+					meta: {},
+				},
+			])
+			editor.createShapes([
+				{
+					id: videoShapeId,
+					type: 'video',
+					x: 0,
+					y: 0,
+					props: { w: 100, h: 100, assetId: videoAssetId },
+				},
+			])
+		})
+
+		const container = getShapeContainer()
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+	})
+
+	it('shows the loading plate until the video loads, then goes transparent', async () => {
+		await act(async () => {
+			editor.createAssets([
+				{
+					id: videoAssetId,
+					type: 'video',
+					typeName: 'asset',
+					props: {
+						w: 100,
+						h: 100,
+						name: 'video.mp4',
+						isAnimated: true,
+						mimeType: 'video/mp4',
+						src: 'http://localhost/video.mp4',
+					},
+					meta: {},
+				},
+			])
+			editor.createShapes([
+				{
+					id: videoShapeId,
+					type: 'video',
+					x: 0,
+					y: 0,
+					props: { w: 100, h: 100, assetId: videoAssetId },
+				},
+			])
+		})
+
+		// Wait for the async asset URL resolution so the <video> element renders
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 0))
+		})
+
+		const container = getShapeContainer()
+		const video = container.querySelector('video')
+		expect(video).toBeTruthy()
+
+		// The video element exists but hasn't fired loadeddata yet
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+
+		await act(async () => {
+			fireEvent.loadedData(video!)
+		})
+
+		expect(container.style.backgroundColor).toBe('transparent')
+		// jsdom doesn't round-trip the `border: none` shorthand, so check the style directly
+		expect(container.style.borderStyle).toBe('none')
+	})
+})

package/src/test/actions-menu-readonly.test.tsx

@@ -0,0 +1,37 @@
+import { act } from '@testing-library/react'
+import { Editor } from '@tldraw/editor'
+import { Tldraw } from '../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+let editor: Editor
+let rendered: Awaited<ReturnType<typeof renderTldrawComponentWithEditor>>['rendered']
+
+beforeEach(async () => {
+	// Pin the quick actions into the menu panel so the test does not depend on jsdom's viewport width
+	;({ editor, rendered } = await renderTldrawComponentWithEditor(
+		(onMount) => <Tldraw onMount={onMount} options={{ actionShortcutsLocation: 'menu' }} />,
+		{ waitForPatterns: true }
+	))
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe('actions menu in readonly mode', () => {
+	it('shows the actions menu button when not readonly', async () => {
+		expect(await rendered.findByTestId('actions-menu.button')).toBeTruthy()
+	})
+
+	it.each(['select', 'hand', 'zoom', 'eraser'])(
+		'hides the actions menu button in readonly mode with the %s tool',
+		async (toolId) => {
+			act(() => {
+				editor.updateInstanceState({ isReadonly: true })
+				editor.setCurrentTool(toolId)
+			})
+			expect(editor.getCurrentToolId()).toBe(toolId)
+			expect(rendered.queryByTestId('actions-menu.button')).toBeNull()
+		}
+	)
+})