@tldraw/editor 5.5.4 → 5.6.0-canary.0091c91994d6

package/src/lib/test/useDocumentEvents.test.tsx

@@ -5,6 +5,34 @@ import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
 import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
 
+async function renderEditor() {
+	let editor!: Editor
+	const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+	await act(async () => {
+		render(<TldrawEditor store={store} autoFocus onMount={(e) => void (editor = e)} />)
+	})
+	const container = document.querySelector<HTMLElement>(`.${TL_CONTAINER_CLASS}`)!
+	return { editor, container }
+}
+
+function keyDown(container: HTMLElement, init: KeyboardEventInit) {
+	act(() => {
+		container.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
+	})
+}
+
+function keyUp(container: HTMLElement, init: KeyboardEventInit) {
+	act(() => {
+		container.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, ...init }))
+	})
+}
+
+function blurWindow() {
+	act(() => {
+		window.dispatchEvent(new Event('blur'))
+	})
+}
+
 describe('useDocumentEvents drop handling', () => {
 	// The container's native drop listener used to stop propagation before the event reached
 	// React's root, so React onDrop handlers inside the canvas never fired.
@@ -33,28 +61,6 @@ describe('useDocumentEvents drop handling', () => {
 })
 
 describe('useDocumentEvents window blur', () => {
-	async function renderEditor() {
-		let editor!: Editor
-		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
-		await act(async () => {
-			render(<TldrawEditor store={store} autoFocus onMount={(e) => void (editor = e)} />)
-		})
-		const container = document.querySelector<HTMLElement>(`.${TL_CONTAINER_CLASS}`)!
-		return { editor, container }
-	}
-
-	function keyDown(container: HTMLElement, init: KeyboardEventInit) {
-		act(() => {
-			container.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
-		})
-	}
-
-	function blurWindow() {
-		act(() => {
-			window.dispatchEvent(new Event('blur'))
-		})
-	}
-
 	afterEach(() => {
 		cleanup()
 	})
@@ -105,3 +111,128 @@ describe('useDocumentEvents window blur', () => {
 		expect(onEvent).not.toHaveBeenCalled()
 	})
 })
+
+// Browsers report `metaKey` as still true on the keyup of Meta itself.
+const metaKeyUp: KeyboardEventInit = { key: 'Meta', code: 'MetaLeft', metaKey: true }
+
+describe('useDocumentEvents meta release', () => {
+	afterEach(() => {
+		cleanup()
+	})
+
+	// macOS never delivers the keyup of a non-modifier key pressed while Meta is held, so the
+	// arrow from a Cmd+Arrow shortcut stayed held and the next plain arrow nudged diagonally.
+	it('releases keys whose keyup macOS swallowed while Meta was held', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true })
+		expect([...editor.inputs.keys]).toEqual(['MetaLeft', 'ArrowUp'])
+
+		// no keyup for ArrowUp ever arrives
+		keyUp(container, metaKeyUp)
+		expect([...editor.inputs.keys]).toEqual([])
+	})
+
+	// A key held from before Meta went down still gets its own keyup, so releasing it here
+	// would drop a key the user is still holding.
+	it('leaves keys held from before Meta went down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: ' ', code: 'Space' })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual(['Space'])
+	})
+
+	// That key keeps auto-repeating, and once Cmd is down those repeats carry `metaKey`.
+	// Counting them would release a key that is still physically down - and a repeat never
+	// puts it back, since the editor treats key_repeat as a noop.
+	it('leaves a key that was already repeating when Meta went down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true, repeat: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual(['ArrowUp'])
+	})
+
+	// Idle.onKeyUp re-enters shape editing on Enter, so replaying a key_up here stole the
+	// focus that cmd+Enter's a11y action had just put on the style toolbar.
+	it('does not fire tool key_up handlers for the keys it releases', async () => {
+		const { editor, container } = await renderEditor()
+		const keyUps: TLKeyboardEventInfo[] = []
+		editor.on('event', (info) => {
+			if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info)
+		})
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'Enter', code: 'Enter', metaKey: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual([])
+		expect(keyUps.map((info) => info.code)).toEqual(['MetaLeft'])
+	})
+
+	// A still-held modifier keeps its own keyup, and reporting it as up would start the
+	// editor's 150ms release: `ShiftLeft` would leave `inputs.keys` and shrink the nudge step.
+	it('leaves a still-held modifier alone', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Shift', code: 'ShiftLeft', shiftKey: true })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', shiftKey: true, metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', shiftKey: true, metaKey: true })
+
+		keyUp(container, { ...metaKeyUp, shiftKey: true })
+		expect([...editor.inputs.keys]).toEqual(['ShiftLeft'])
+
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 200))
+		})
+		expect([...editor.inputs.keys]).toEqual(['ShiftLeft'])
+		expect(editor.inputs.getShiftKey()).toBe(true)
+	})
+
+	// Letting go of Cmd while still holding the arrow: the arrow is dropped as owed a keyup,
+	// but it is genuinely down, and its repeats say so. Without this, nudging stopped dead
+	// mid-gesture and stayed dead for as long as the key was held.
+	it('takes back a dropped key that is still repeating', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true })
+		keyUp(container, metaKeyUp)
+		expect([...editor.inputs.keys]).toEqual([])
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', repeat: true })
+		expect([...editor.inputs.keys]).toEqual(['ArrowUp'])
+	})
+
+	it('does not disturb keys held without Meta', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyUp(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyDown(container, { key: 'ArrowRight', code: 'ArrowRight' })
+
+		expect([...editor.inputs.keys]).toEqual(['ArrowRight'])
+	})
+
+	// Browsers report `metaKey: true` on Meta's own keyup, which left `getMetaKey()` true
+	// until some later event happened to report it false.
+	it('releases meta itself, though its keyup reports metaKey as still down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		expect(editor.inputs.getMetaKey()).toBe(true)
+
+		keyUp(container, metaKeyUp)
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 200))
+		})
+		expect(editor.inputs.getMetaKey()).toBe(false)
+	})
+})

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

@@ -484,3 +484,76 @@ test('a buffered newer schema reports a load error without announcing a successf
 	client.close()
 	expect(client.db.storeSnapshot).not.toHaveBeenCalled()
 })
+
+test('a client created on the same key while a closed client is still flushing waits for that flush', async () => {
+	const inFlightWrite = promiseWithResolve<void>()
+	const { client, tick } = testClient()
+	client.db.storeSnapshot.mockImplementationOnce(() => inFlightWrite)
+	await tick()
+	client.store.put([PageRecordType.create({ name: 'first', index: 'a0' as IndexKey })])
+	await tick()
+	expect(client.db.storeSnapshot).toHaveBeenCalledTimes(1) // still in flight
+	client.store.put([PageRecordType.create({ name: 'during write', index: 'a1' as IndexKey })])
+	client.close()
+
+	// remount on the same key while the old client is still flushing
+	const loadSpy = vi.spyOn(LocalIndexedDb.prototype, 'load')
+	const next = testClient()
+	await tick()
+	// reading now would miss the queued edit, then erase it on the first write
+	expect(loadSpy).not.toHaveBeenCalled()
+	expect(next.onLoad).not.toHaveBeenCalled()
+
+	inFlightWrite.resolve()
+	await tick()
+	expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
+	for (let i = 0; i < 20; i++) await Promise.resolve()
+	await next.tick()
+	expect(loadSpy).toHaveBeenCalledTimes(1)
+	expect(next.onLoad).toHaveBeenCalledTimes(1)
+	loadSpy.mockRestore()
+})
+
+test('two clients closing on the same key flush in order', async () => {
+	const writes: string[] = []
+	const inFlightWrite = promiseWithResolve<void>()
+
+	const a = testClient()
+	const b = testClient()
+	await a.tick()
+	await b.tick()
+	// hold a's first write in flight
+	a.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('a')
+		return inFlightWrite
+	})
+	a.client.db.storeChanges.mockImplementation(() => {
+		writes.push('a')
+		return Promise.resolve()
+	})
+	b.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+	b.client.db.storeChanges.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+
+	a.client.store.put([PageRecordType.create({ name: 'a1', index: 'a0' as IndexKey })])
+	await a.tick()
+	expect(writes).toEqual(['a']) // in flight
+	a.client.store.put([PageRecordType.create({ name: 'a2', index: 'a1' as IndexKey })])
+	a.client.close()
+
+	b.client.store.put([PageRecordType.create({ name: 'b1', index: 'a2' as IndexKey })])
+	b.client.close()
+	await b.tick()
+	// b's snapshot landing first would lose a's queued changes
+	expect(writes).toEqual(['a'])
+
+	inFlightWrite.resolve()
+	await a.tick()
+	await b.tick()
+	expect(writes).toEqual(['a', 'a', 'b'])
+})

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

@@ -1,7 +1,7 @@
 import { Signal, transact } from '@tldraw/state'
 import { RecordsDiff, SerializedSchema, UnknownRecord, squashRecordDiffs } from '@tldraw/store'
 import { TLStore } from '@tldraw/tlschema'
-import { assert } from '@tldraw/utils'
+import { assert, noop } from '@tldraw/utils'
 import {
 	TAB_ID,
 	TLSessionStateSnapshot,
@@ -64,6 +64,9 @@ export class BroadcastChannelMock {
 
 const BC = typeof BroadcastChannel === 'undefined' ? BroadcastChannelMock : BroadcastChannel
 
+// Flushes still running for closed clients, by key. See connect() and close().
+const pendingFlushes = new Map<string, Promise<void>>()
+
 /** @internal */
 export class TLLocalSyncClient {
 	private disposables = new Set<() => void>()
@@ -238,6 +241,11 @@ export class TLLocalSyncClient {
 			this.channel.close()
 		})
 
+		// our first write is a full snapshot, so it would erase whatever a client that just closed
+		// on this key is still flushing
+		await pendingFlushes.get(this.persistenceKey)
+		if (this.didDispose) return
+
 		try {
 			data = await this.db.load({ sessionId: this.sessionId })
 		} catch (error: any) {
@@ -313,8 +321,6 @@ export class TLLocalSyncClient {
 		if (this.didDispose) return
 		this.debug('closing')
 		this.didDispose = true
-		// Store listeners normally run on the next frame; collect the last edits before removal.
-		this.store._flushHistory()
 		this.disposables.forEach((d) => d())
 		if (this.scheduledPersistTimeout) {
 			clearTimeout(this.scheduledPersistTimeout)
@@ -323,7 +329,18 @@ export class TLLocalSyncClient {
 		if (typeof window !== 'undefined' && (window as any).tlsync === this) {
 			delete (window as any).tlsync
 		}
-		this.flushAndCloseDb()
+		// flush now when the key is idle: close() runs during teardown, where a deferred write may
+		// never run. wait when it isn't, or our snapshot lands first and gets overwritten.
+		// connect() awaits this, so it must never reject
+		const previous = pendingFlushes.get(this.persistenceKey)
+		const flush = (previous ? previous.then(() => this.flushAndCloseDb()) : this.flushAndCloseDb())
+			.catch(noop)
+			.then(() => {
+				if (pendingFlushes.get(this.persistenceKey) === flush) {
+					pendingFlushes.delete(this.persistenceKey)
+				}
+			})
+		pendingFlushes.set(this.persistenceKey, flush)
 	}
 
 	/**
@@ -332,17 +349,16 @@ export class TLLocalSyncClient {
 	 * store), and only when something is queued: shouldDoFullDBWrite stays true until the first
 	 * persist, so an unconditional flush would rewrite the whole document on every no-op close.
 	 */
-	private flushAndCloseDb() {
+	private flushAndCloseDb(): Promise<void> {
 		// A persist in flight can't be joined (persistIfNeeded bails while one is running) and,
 		// now that we're disposed, won't schedule a follow-up. Edits queued during that write
 		// would be lost if the db closed now, so wait for it and flush again.
 		if (this.persistPromise) {
-			this.persistPromise.then(() => this.flushAndCloseDb())
-			return
+			return this.persistPromise.then(() => this.flushAndCloseDb())
 		}
 		if (this.didLoad && this.diffQueue.length > 0) this.persistIfNeeded()
 		// the db waits for the transaction the flush just opened before actually closing
-		this.db.close()
+		return this.db.close()
 	}
 
 	private isPersisting = false

package/src/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.5.4'
+export const version = '5.6.0-canary.0091c91994d6'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-09-30T10:03:27.724Z',
-	patch: '2026-10-28T10:37:09.495Z',
+	minor: '2026-10-28T11:15:20.344Z',
+	patch: '2026-10-28T11:15:20.344Z',
 }