tldraw 5.3.1 → 5.4.0-canary.042da660fa66

package/src/lib/ui/hooks/useKeyboardShortcuts.ts

@@ -1,7 +1,6 @@
 /*!
- * The kbd-string splitter (`getKeys`) and the form-input filter pattern in `shouldSkipEvent`
- * (including its list of non-text INPUT types) are adapted from hotkeys-js, which this hook
- * previously depended on.
+ * The form-input filter pattern in `shouldSkipEvent` (including its list of non-text INPUT
+ * types) is adapted from hotkeys-js, which this hook previously depended on.
  *
  * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE
  * Copyright (c) 2015-present, Kenny Wong
@@ -19,6 +18,7 @@ import {
 } from '@tldraw/editor'
 import { useEffect } from 'react'
 import { useActions } from '../context/actions'
+import { splitKbd } from '../kbd-utils'
 import { useCommentingEnabled } from './useCommentingEnabled'
 import { useReadonly } from './useReadonly'
 import { useTools } from './useTools'
@@ -360,7 +360,7 @@ const PHYSICAL_KEY_MAP: Record<string, string> = {
  */
 export function parseKbd(kbd: string): ParsedKbd[] {
 	const out: ParsedKbd[] = []
-	for (const shortcut of getKeys(kbd)) {
+	for (const shortcut of splitKbd(kbd.replace(/\s/g, ''))) {
 		const parsed = parseShortcut(shortcut)
 		if (parsed) out.push(parsed)
 	}
@@ -472,7 +472,7 @@ function shouldSkipEvent(e: KeyboardEvent): boolean {
  * @internal
  */
 export function getHotkeysStringFromKbd(kbd: string) {
-	return getKeys(kbd)
+	return splitKbd(kbd.replace(/\s/g, ''))
 		.map((kbd) => {
 			let str = ''
 
@@ -505,21 +505,3 @@ export function getHotkeysStringFromKbd(kbd: string) {
 		})
 		.join(',')
 }
-
-// Split a kbd string on commas, treating an empty entry produced by "x,," as a literal
-// trailing comma on the previous entry. Verbatim port of the splitter from hotkeys-js
-// (MIT, see top-of-file attribution).
-function getKeys(key: string) {
-	if (typeof key !== 'string') key = ''
-	key = key.replace(/\s/g, '')
-	const keys = key.split(',')
-	let index = keys.lastIndexOf('')
-
-	for (; index >= 0; ) {
-		keys[index - 1] += ','
-		keys.splice(index, 1)
-		index = keys.lastIndexOf('')
-	}
-
-	return keys
-}

package/src/lib/ui/kbd-utils.test.ts

@@ -0,0 +1,11 @@
+import { kbd } from './kbd-utils'
+
+describe('kbd', () => {
+	it('displays a comma key with modifiers', () => {
+		expect(kbd('shift+,,shift+alt+,')).toEqual([...kbd('shift+.').slice(0, -1), ','])
+	})
+
+	it('preserves spaces in atomic key labels', () => {
+		expect(kbd('[[Page Up]]')).toEqual(['Page Up'])
+	})
+})

package/src/lib/ui/kbd-utils.ts

@@ -1,5 +1,14 @@
 import { tlenv } from '@tldraw/editor'
 
+/*!
+ * `splitKbd` is adapted from hotkeys-js.
+ *
+ * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE
+ * Copyright (c) 2015-present, Kenny Wong
+ * Copyright (c) 2011-2013 Thomas Fuchs (https://github.com/madrobby/keymaster)
+ * Source: https://github.com/jaywcjlove/hotkeys-js
+ */
+
 // N.B. We rework these Windows placeholders down below.
 const cmdKey = tlenv.isDarwin ? '⌘' : '__CTRL__'
 const ctrlKey = tlenv.isDarwin ? '⌃' : '__CTRL__'
@@ -7,11 +16,8 @@ const altKey = tlenv.isDarwin ? '⌥' : '__ALT__'
 
 /** @public */
 export function kbd(str: string) {
-	if (str === ',') return [',']
-
 	return (
-		str
-			.split(',')[0]
+		(splitKbd(str)[0] ?? '')
 			// If the string contains [[Tab]], we don't split these up
 			// as they're meant to be atomic.
 			.split(/(\[\[[^\]]+\]\])/g)
@@ -47,6 +53,23 @@ export function kbd(str: string) {
 	)
 }
 
+// Split a kbd string on commas, treating an empty entry produced by "x,," as a literal
+// trailing comma on the previous entry.
+/** @internal */
+export function splitKbd(key: string) {
+	if (!key) return []
+	const keys = key.split(',')
+	let index = keys.lastIndexOf('')
+
+	for (; index >= 0; ) {
+		keys[index - 1] += ','
+		keys.splice(index, 1)
+		index = keys.lastIndexOf('')
+	}
+
+	return keys
+}
+
 /** @public */
 export function kbdStr(str: string) {
 	return '— ' + kbd(str).join(' ')

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.3.1'
+export const version = '5.4.0-canary.042da660fa66'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:39:54.978Z',
-	patch: '2026-08-14T10:46:20.010Z',
+	minor: '2026-08-19T12:47:12.111Z',
+	patch: '2026-08-19T12:47:12.111Z',
 }

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/TldrawEditor.test.tsx

@@ -13,6 +13,7 @@ import {
 	createTLStore,
 	noop,
 	react,
+	tleditors,
 	toRichText,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
@@ -181,6 +182,7 @@ describe('<TldrawEditor />', () => {
 
 		// mounted after render:
 		expect(editor.getIsMounted()).toBe(true)
+		expect(tleditors.getMounted()).toEqual([editor])
 
 		// getIsMounted is reactive:
 		const mountedValues: boolean[] = []
@@ -191,6 +193,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/bookmark-shapes.test.ts

@@ -1,5 +1,6 @@
 import { AssetRecordType, TLBookmarkShape, createShapeId, getHashForString } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { defaultHandleExternalUrlAsset } from '../lib/defaultExternalContentHandlers'
 import {
 	createBookmarkFromUrl,
 	getBookmarkShapeHeight,
@@ -482,3 +483,112 @@ describe('createBookmarkFromUrl', () => {
 		expect(editor.getShapeGeometry(redone.id).bounds.height).toBe(shortHeight)
 	})
 })
+
+describe('defaultHandleExternalUrlAsset', () => {
+	const url = 'https://example.com/some/page'
+
+	let opts: any
+	let fetchMock: ReturnType<typeof vi.fn>
+
+	beforeEach(() => {
+		opts = {
+			toasts: { addToast: vi.fn(), removeToast: vi.fn(), clearToasts: vi.fn() },
+			msg: (id: string) => id,
+		}
+	})
+
+	afterEach(() => {
+		vi.unstubAllGlobals()
+	})
+
+	function mockResponseBody(html: string) {
+		fetchMock = vi.fn().mockResolvedValue({ text: async () => html })
+		vi.stubGlobal('fetch', fetchMock)
+	}
+
+	function mockPageHead(head: string) {
+		mockResponseBody(`<html><head>${head}</head><body></body></html>`)
+	}
+
+	it('leaves the image and favicon empty when the page provides neither', async () => {
+		mockPageHead('<title>Example</title>')
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('')
+		expect(asset.props.favicon).toBe('')
+	})
+
+	it('resolves relative image and favicon urls against the page', async () => {
+		mockPageHead(
+			'<meta property="og:image" content="/img/preview.png" />' +
+				'<link rel="icon" href="favicon.ico" />'
+		)
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('https://example.com/img/preview.png')
+		expect(asset.props.favicon).toBe('https://example.com/some/favicon.ico')
+	})
+
+	it('leaves absolute image urls alone', async () => {
+		mockPageHead('<meta property="og:image" content="https://cdn.example.com/preview.png" />')
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('https://cdn.example.com/preview.png')
+	})
+
+	it('toasts and returns a blank bookmark when the fetch throws', async () => {
+		const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+		fetchMock = vi.fn().mockRejectedValue(new Error('CORS'))
+		vi.stubGlobal('fetch', fetchMock)
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(opts.toasts.addToast).toHaveBeenCalledWith(
+			expect.objectContaining({ severity: 'error' })
+		)
+		expect(asset.props.src).toBe(url)
+		expect(asset.props.image).toBe('')
+		expect(asset.props.title).toBe('')
+
+		consoleSpy.mockRestore()
+	})
+
+	// Pins behaviour we'd like to change, so that changing it is deliberate.
+	describe('behaviour to revisit', () => {
+		it('extracts nothing at all from a cross-origin page', async () => {
+			// `mode: 'no-cors'` makes the response opaque cross-origin, and an
+			// opaque body always reads as ''.
+			mockResponseBody('')
+
+			const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+			expect(fetchMock).toHaveBeenCalledWith(url, expect.objectContaining({ mode: 'no-cors' }))
+			expect(asset.props.image).toBe('')
+			expect(asset.props.favicon).toBe('')
+			expect(asset.props.description).toBe('')
+			expect(asset.props.title).toBe(url)
+			expect(opts.toasts.addToast).not.toHaveBeenCalled()
+		})
+
+		it('ignores twitter card tags, og:image:secure_url and <title>', async () => {
+			mockPageHead(
+				'<title>Example</title>' +
+					'<meta property="og:image:secure_url" content="https://cdn.example.com/secure.png" />' +
+					'<meta name="twitter:image" content="https://cdn.example.com/twitter.png" />' +
+					'<meta name="twitter:title" content="Example, from twitter" />' +
+					'<meta name="description" content="A plain meta description" />'
+			)
+
+			const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+			// cloudflare-workers-unfurl reads all four of these; this handler
+			// reads only the plain `og:` tags.
+			expect(asset.props.image).toBe('')
+			expect(asset.props.description).toBe('')
+			expect(asset.props.title).toBe(url)
+		})
+	})
+})

package/src/test/commands/alignShapes.test.tsx

@@ -38,14 +38,14 @@ describe('when less than two shapes are selected', () => {
 describe('when multiple shapes are selected', () => {
 	it('does, undoes and redoes command', () => {
 		editor.markHistoryStoppingPoint('align')
-		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
 		vi.advanceTimersByTime(1000)
 
-		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 225, y: 225 })
 		editor.undo()
-		editor.expectShapeToMatch({ id: ids.boxB, y: 100 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 100, y: 100 })
 		editor.redo()
-		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 225, y: 225 })
 	})
 
 	it('aligns top', () => {
@@ -114,28 +114,37 @@ describe('when multiple shapes are selected', () => {
 		)
 	})
 
+	it('aligns center on both axes', () => {
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
+		vi.advanceTimersByTime(1000)
+
+		editor.expectShapeToMatch(
+			{ id: ids.boxA, x: 200, y: 200 },
+			{ id: ids.boxB, x: 225, y: 225 },
+			{ id: ids.boxC, x: 200, y: 200 }
+		)
+	})
+
 	it('aligns center, when shapes are rotated', () => {
 		editor.updateShapes([
 			{
 				id: ids.boxA,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.2,
 			},
 			{
 				id: ids.boxB,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.4,
 			},
 			{
 				id: ids.boxC,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.6,
 			},
 		])
 
-		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		vi.advanceTimersByTime(1000)
-		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
 		vi.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([

package/src/test/commands/clipboard.test.ts

@@ -1,6 +1,9 @@
-import { createShapeId, TLArrowShape } from '@tldraw/editor'
+import { act, renderHook } from '@testing-library/react'
+import { createShapeId, EditorContext, TLArrowShape } from '@tldraw/editor'
+import { createElement } from 'react'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
+import { useMenuClipboardEvents } from '../../lib/ui/hooks/useClipboardEvents'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -481,3 +484,35 @@ describe('When copying and pasting', () => {
 		expect(pastedPoint).toMatchObject({ x: 150, y: 150 }) // center of group
 	})
 })
+
+describe('When cutting', () => {
+	function renderCut() {
+		const { result } = renderHook(() => useMenuClipboardEvents(), {
+			wrapper: ({ children }) => createElement(EditorContext.Provider, { value: editor }, children),
+		})
+		return result.current.cut
+	}
+
+	it('marks a history stopping point so undo does not roll back earlier changes', async () => {
+		// the cut writes to the clipboard before it deletes anything
+		Object.assign(window.navigator, { clipboard: { write: vi.fn() } })
+		globalThis.ClipboardItem = class {} as any
+
+		const cut = renderCut()
+		editor.createShape({ id: ids.box1, type: 'geo', x: 0, y: 0 })
+		editor.markHistoryStoppingPoint('rename page')
+		editor.renamePage(editor.getCurrentPageId(), 'My page')
+		editor.select(ids.box1)
+
+		await act(async () => {
+			await cut('menu')
+		})
+		expect(editor.getShape(ids.box1)).toBeUndefined()
+
+		editor.undo()
+
+		// the cut is undone, but the page rename before it is not
+		expect(editor.getShape(ids.box1)).toBeDefined()
+		expect(editor.getCurrentPage().name).toBe('My page')
+	})
+})