@tldraw/editor 5.5.0-next.a2698a88ecfb → 5.5.0-next.b6a9f7cd7be2

package/src/lib/hooks/useCanvasEvents.ts

@@ -19,6 +19,9 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			let isSecondaryClickPointerDown = false
+			// The button each accepted press started with, by pointer id. pointercancel
+			// reports button -1, so the synthetic pointer_up needs the original.
+			const pointerDownButtons = new Map<number, number>()
 
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
@@ -45,6 +48,15 @@ export function useCanvasEvents() {
 
 				setPointerCapture(e.currentTarget, e)
 
+				// Only remember presses the editor will act on. A rejected palm in pen mode
+				// must not overwrite the button of the pen press it lands on top of, or the
+				// pen's pointercancel would release the wrong button and skip the
+				// stylus-eraser tool restore.
+				const isPenMode = editor.getInstanceState().isPenMode
+				if (!editor.inputs.getIsPinching() && !(isPenMode && e.pointerType !== 'pen')) {
+					pointerDownButtons.set(e.pointerId, button)
+				}
+
 				editor.dispatch({
 					type: 'pointer',
 					target: 'canvas',
@@ -56,6 +68,7 @@ export function useCanvasEvents() {
 
 			function onPointerUp(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
+				pointerDownButtons.delete(e.pointerId)
 				const button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)
 				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
 
@@ -91,6 +104,34 @@ export function useCanvasEvents() {
 				isSecondaryClickPointerDown = false
 			}
 
+			function onPointerCancel(e: React.PointerEvent) {
+				if (editor.wasEventAlreadyHandled(e)) return
+				const pointerDownButton = pointerDownButtons.get(e.pointerId)
+				pointerDownButtons.delete(e.pointerId)
+				// In pen mode a cancelled touch is usually a rejected palm, and the pen's own
+				// interaction must survive it.
+				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
+
+				releasePointerCapture(e.currentTarget, e)
+
+				// Nothing to end if the press itself was filtered out (pen mode, unsupported
+				// button), or if this pointer never started an accepted press.
+				if (!editor.inputs.getIsPointing() || pointerDownButton === undefined) return
+
+				// The browser has taken the pointer (edge swipe, incoming call) and will never send
+				// pointerup, so end the gesture here or the tool stays stuck in its pointing or
+				// dragging state and the next touch continues it.
+				editor.interrupt()
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_up',
+					...getPointerInfo(editor, e),
+					button: pointerDownButton,
+				})
+				isSecondaryClickPointerDown = false
+			}
+
 			function onPointerEnter(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
@@ -201,6 +242,7 @@ export function useCanvasEvents() {
 			return {
 				onPointerDown,
 				onPointerUp,
+				onPointerCancel,
 				onPointerEnter,
 				onPointerLeave,
 				onDragOver,

package/src/lib/hooks/useIdentity.tsx

@@ -1,4 +1,4 @@
-import { areArraysShallowEqual, areObjectsShallowEqual } from '@tldraw/utils'
+import { areArraysShallowEqual, areObjectsShallowEqual, isEqual } from '@tldraw/utils'
 import { useRef } from 'react'
 
 function useIdentity<T>(value: T, isEqual: (a: T, b: T) => boolean): T {
@@ -49,3 +49,14 @@ const areNullableObjectsShallowEqual = (
 export function useShallowObjectIdentity<T extends object | null | undefined>(obj: T): T {
 	return useIdentity(obj, areNullableObjectsShallowEqual)
 }
+
+/**
+ * For small option objects that may nest (e.g. camera constraints), where a shallow comparison
+ * would still see a fresh identity on every render. Functions and class instances inside still
+ * compare by reference, so an inline callback or a fresh `Extension.configure()` counts as a change.
+ *
+ * @internal
+ */
+export function useDeepObjectIdentity<T extends object | null | undefined>(obj: T): T {
+	return useIdentity(obj, isEqual)
+}

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,5 @@
 import { atom, transact } from '@tldraw/state'
+import { noop } from '@tldraw/utils'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -127,6 +128,7 @@ export class LicenseManager {
 		...NO_FEATURES,
 	})
 	public verbose = true
+	private isDisposed = false
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
 		this.isTest = process.env.NODE_ENV === 'test'
@@ -144,6 +146,9 @@ export class LicenseManager {
 
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
+				// replaced by a manager for a newer key: this one's messages, tracking ping and state
+				// would describe a key the app no longer uses
+				if (this.isDisposed) return
 				const licenseState = getLicenseState(
 					result,
 					(messages: string[]) => this.outputMessages(messages),
@@ -160,11 +165,17 @@ export class LicenseManager {
 				})
 			})
 			.catch((error) => {
+				if (this.isDisposed) return
 				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
 			})
 	}
 
+	/** Ignore the pending validation: nothing is logged, tracked or set once the manager is replaced. */
+	dispose() {
+		this.isDisposed = true
+	}
+
 	/**
 	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
 	 * recomputes when license validation resolves.
@@ -247,8 +258,9 @@ export class LicenseManager {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}
 
+		// best-effort: a blocked or offline request must not surface as an unhandled rejection
 		// eslint-disable-next-line no-restricted-globals
-		fetch(url.toString())
+		fetch(url.toString()).catch(noop)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

package/src/lib/license/LicenseProvider.test.tsx

@@ -0,0 +1,76 @@
+import { act, render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { LicenseFromKeyResult, LicenseManager } from './LicenseManager'
+import { LICENSE_TIMEOUT, LicenseProvider, useLicenseContext } from './LicenseProvider'
+
+const NO_KEY: LicenseFromKeyResult = { isLicenseParseable: false, reason: 'no-key-provided' }
+
+describe('LicenseProvider', () => {
+	const managers: LicenseManager[] = []
+	function Probe() {
+		managers.push(useLicenseContext())
+		return null
+	}
+	const renderWithKey = (licenseKey: string | undefined) => (
+		<LicenseProvider licenseKey={licenseKey}>
+			<Probe />
+		</LicenseProvider>
+	)
+
+	beforeEach(() => {
+		managers.length = 0
+	})
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
+	it('creates a new license manager when the license key changes', async () => {
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const initial = managers.at(-1)!
+
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		const changed = managers.at(-1)!
+		expect(changed).not.toBe(initial)
+
+		// same key again: the manager is stable
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		expect(managers.at(-1)).toBe(changed)
+	})
+
+	it('shows the editor again when a new key arrives after the gate closed', async () => {
+		// validation never settles so the test drives the state by hand
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockReturnValue(new Promise(() => {}))
+		vi.useFakeTimers()
+
+		const rendered = await act(async () => render(renderWithKey('expired-key')))
+		const expired = managers.at(-1)!
+		act(() => expired.state.set('expired'))
+		act(() => vi.advanceTimersByTime(LICENSE_TIMEOUT))
+		expect(rendered.queryByTestId('tl-license-expired')).not.toBeNull()
+
+		await act(async () => rendered.rerender(renderWithKey('fresh-key')))
+		expect(rendered.queryByTestId('tl-license-expired')).toBeNull()
+		expect(managers.at(-1)).not.toBe(expired)
+	})
+
+	it('ignores the validation result of a manager replaced by a new key', async () => {
+		const resolvers: ((result: LicenseFromKeyResult) => void)[] = []
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockImplementation(
+			() => new Promise((resolve) => resolvers.push(resolve))
+		)
+		const track = vi.spyOn(LicenseManager.prototype as any, 'maybeTrack')
+
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const orphan = managers.at(-1)!
+		await act(async () => rendered.rerender(renderWithKey('real-key')))
+		expect(managers.at(-1)).not.toBe(orphan)
+
+		await act(async () => resolvers[0](NO_KEY))
+		expect(orphan.state.get()).toBe('pending')
+		expect(track).not.toHaveBeenCalled()
+
+		await act(async () => resolvers[1](NO_KEY))
+		expect(managers.at(-1)!.state.get()).toBe('unlicensed')
+	})
+})

package/src/lib/license/LicenseProvider.tsx

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
@@ -46,21 +46,35 @@ export function LicenseProvider({
 	licenseKey?: string
 	children: ReactNode
 }) {
-	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	// Keyed on the license key: the editor is recreated when the key changes, and must not be
+	// handed a manager that validated the old key.
+	const licenseManager = useMemo(() => new LicenseManager(licenseKey), [licenseKey])
 	const licenseState = useValue(licenseManager.state)
-	const [showEditor, setShowEditor] = useState(true)
+	// The manager whose LICENSE_TIMEOUT elapsed; compared by identity so a new key un-gates the editor.
+	const [gatedManager, setGatedManager] = useState<LicenseManager | null>(null)
+	const showEditor = gatedManager !== licenseManager
+
+	// Dispose only the replaced manager, never on cleanup: strict mode re-runs effects with the
+	// same manager, and disposing it there would silence the live one.
+	const previousManager = useRef<LicenseManager | null>(null)
+	useEffect(() => {
+		if (previousManager.current && previousManager.current !== licenseManager) {
+			previousManager.current.dispose()
+		}
+		previousManager.current = licenseManager
+	}, [licenseManager])
 
 	// When license expires or no license in production, show for 5 seconds then hide
 	useEffect(() => {
 		if (shouldHideEditorAfterDelay(licenseState) && showEditor) {
 			// eslint-disable-next-line no-restricted-globals
 			const timer = setTimeout(() => {
-				setShowEditor(false)
+				setGatedManager(licenseManager)
 			}, LICENSE_TIMEOUT)
 
 			return () => clearTimeout(timer)
 		}
-	}, [licenseState, showEditor])
+	}, [licenseManager, licenseState, showEditor])
 
 	// If license is expired or no license in production and 5 seconds have passed, don't render anything (blank screen)
 	if (shouldHideEditorAfterDelay(licenseState) && !showEditor) {

package/src/lib/test/preserveFocus.test.tsx

@@ -0,0 +1,81 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { TldrawEditor } from '../TldrawEditor'
+
+// The `tldraw_preserve_focus` search param switches the editor into preserve-focus mode, where
+// a pointerdown inside the container focuses the editor and a pointerdown elsewhere blurs it.
+describe('preserve-focus mode', () => {
+	const mounted: Element[] = []
+
+	beforeEach(() => {
+		window.history.replaceState(null, '', '?tldraw_preserve_focus')
+	})
+
+	afterEach(() => {
+		window.history.replaceState(null, '', '/')
+		for (const el of mounted.splice(0)) el.remove()
+	})
+
+	function pointerDown(target: EventTarget) {
+		act(() => {
+			target.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }))
+		})
+	}
+
+	async function mount(root: Element | ShadowRoot) {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		const container = document.createElement('div')
+		root.appendChild(container)
+		mounted.push(container)
+		let editor: Editor | undefined
+		let unmount = () => {}
+		await act(async () => {
+			unmount = render(
+				<TldrawEditor
+					store={store}
+					onMount={(e) => {
+						editor = e
+					}}
+				/>,
+				{ container }
+			).unmount
+		})
+		return { editor: editor!, unmount }
+	}
+
+	it('focuses on a canvas pointerdown and blurs on a pointerdown outside', async () => {
+		const { editor } = await mount(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('keeps focus when the editor is inside an open shadow root', async () => {
+		// The body listener sees the event retargeted to the shadow host, so a check on
+		// `e.target` alone would blur the editor right after the container focused it.
+		const host = document.createElement('div')
+		document.body.appendChild(host)
+		mounted.push(host)
+		const { editor } = await mount(host.attachShadow({ mode: 'open' }))
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('removes the body listener on unmount', async () => {
+		const { editor, unmount } = await mount(document.body)
+		const blur = vi.spyOn(editor, 'blur')
+
+		act(() => unmount())
+		pointerDown(document.body)
+		expect(blur).not.toHaveBeenCalled()
+	})
+})

package/src/lib/utils/deepLinks.test.ts

@@ -81,6 +81,21 @@ describe('parseDeepLinkString', () => {
 		expect(() => parseDeepLinkString('v')).toThrow('Invalid deep link string')
 	})
 
+	it('throws on a viewport link with no area', () => {
+		expect(() => parseDeepLinkString('v0.0.0.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.0.200')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.200.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.-200.-100')).toThrow('Invalid deep link string')
+	})
+
+	it('accepts a viewport link positioned at the origin', () => {
+		expect(parseDeepLinkString('v0.0.200.100')).toEqual({
+			type: 'viewport',
+			bounds: new Box(0, 0, 200, 100),
+			pageId: undefined,
+		})
+	})
+
 	it('throws on an unknown link type', () => {
 		expect(() => parseDeepLinkString('xabc')).toThrow('Invalid deep link string')
 	})

package/src/lib/utils/deepLinks.ts

@@ -74,9 +74,14 @@ export function parseDeepLinkString(deepLinkString: string): TLDeepLink {
 		case 'v': {
 			const [x, y, w, h, pageId] = deepLinkString.slice(1).split('.')
 			const bounds = new Box(Number(x), Number(y), Number(w), Number(h))
-			// Number('abc') is NaN rather than an error, so without this check a malformed
-			// viewport link would bypass the caller's fallback and park the camera at the origin
-			if (![bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite)) {
+			// Number('abc') is NaN rather than an error, and a box with no area parses cleanly but
+			// can only be zoomed to by clamping to max zoom at its corner. Both bypass the caller's
+			// fallback and park the camera at the origin, so both count as an invalid link here.
+			const isUsableViewport =
+				[bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite) &&
+				bounds.w > 0 &&
+				bounds.h > 0
+			if (!isUsableViewport) {
 				throw Error('Invalid deep link string')
 			}
 			return {

package/src/lib/utils/sync/LocalIndexedDb.test.ts

@@ -106,6 +106,34 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	it('commits a write that is still in flight when the db is closed', async () => {
+		const db = new LocalIndexedDb('test-0')
+		const write = db.storeSnapshot({ schema, snapshot: { 'shape:1': { id: 'shape:1' } } })
+		await db.close()
+		await write
+
+		const reopened = new LocalIndexedDb('test-0')
+		expect((await reopened.load())?.records).toEqual([{ id: 'shape:1' }])
+		await reopened.close()
+	})
+
+	it('rejects a transaction that aborts after its requests succeeded while closing', async () => {
+		const db = new LocalIndexedDb('test-0')
+		let closing: Promise<void> | undefined
+		// A commit can fail after every request succeeded, so the request promises cannot report it.
+		// @ts-expect-error Exercise the transaction boundary directly to inject a commit failure.
+		const write = db.tx('readwrite', ['records'], async (tx) => {
+			await tx.objectStore('records').put({ id: 'shape:1' }, 'shape:1')
+			closing = db.close()
+			tx.abort()
+		})
+		try {
+			await expect(write).rejects.toMatchObject({ name: 'AbortError' })
+		} finally {
+			await closing
+		}
+	})
+
 	describe('#storeChanges', () => {
 		it('allows merging changes into an existing store', async () => {
 			const db = new LocalIndexedDb('test-0')

package/src/lib/utils/sync/LocalIndexedDb.ts

@@ -141,26 +141,22 @@ export class LocalIndexedDb {
 			assert(!this.isClosed, 'db is closed')
 			const db = await this.getDb()
 			const tx = db.transaction(names, mode)
-			// need to add a catch here early to prevent unhandled promise rejection
-			// during react-strict-mode where this tx.done promise can be rejected
-			// before we have a chance to await on it
-			const done = tx.done.catch((e: unknown) => {
-				if (!this.isClosed) {
-					throw e
-				}
-			})
+			// Commit failures may arrive before the callback finishes; observe them immediately
+			// while preserving the rejection for the await below.
+			const done = tx.done
+			done.catch(noop)
 			try {
 				return await cb(tx)
 			} finally {
-				if (!this.isClosed) {
-					await done
-				} else {
-					tx.abort()
-				}
+				// let the transaction commit even if close() was called meanwhile, otherwise a
+				// persist racing an unmount is silently rolled back
+				await done
 			}
 		})()
 		this.pendingTransactionSet.add(txPromise)
-		txPromise.finally(() => this.pendingTransactionSet.delete(txPromise))
+		// not `.finally()`: the promise it returns would re-reject with nobody observing it
+		const cleanup = () => this.pendingTransactionSet.delete(txPromise)
+		txPromise.then(cleanup, cleanup)
 		return txPromise
 	}
 
@@ -208,17 +204,19 @@ export class LocalIndexedDb {
 			const schemaStore = tx.objectStore(Table.Schema)
 			const sessionStateStore = tx.objectStore(Table.SessionState)
 
+			const requests: Promise<unknown>[] = []
 			for (const [id, record] of Object.entries(changes.added)) {
-				await recordsStore.put(record, id)
+				requests.push(recordsStore.put(record, id))
 			}
 
 			for (const [_prev, updated] of Object.values(changes.updated)) {
-				await recordsStore.put(updated, updated.id)
+				requests.push(recordsStore.put(updated, updated.id))
 			}
 
 			for (const id of Object.keys(changes.removed)) {
-				await recordsStore.delete(id)
+				requests.push(recordsStore.delete(id))
 			}
+			await Promise.all(requests)
 
 			schemaStore.put(schema.serialize(), Table.Schema)
 			if (sessionStateSnapshot && sessionId) {
@@ -254,9 +252,9 @@ export class LocalIndexedDb {
 
 			await recordsStore.clear()
 
-			for (const [id, record] of Object.entries(snapshot)) {
-				await recordsStore.put(record, id)
-			}
+			await Promise.all(
+				Object.entries(snapshot).map(([id, record]) => recordsStore.put(record, id))
+			)
 
 			schemaStore.put(schema.serialize(), Table.Schema)