@tldraw/editor 5.1.0 → 5.2.0-canary.05c017c18b15

package/src/lib/editor/managers/ClickManager/ClickManager.test.ts

@@ -122,7 +122,7 @@ describe('ClickManager', () => {
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
 			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 
 		it('should generate double_click up event on pointer_up after double_click down', () => {
@@ -139,12 +139,34 @@ describe('ClickManager', () => {
 			expect(result.phase).toBe('up')
 		})
 
-		it('should dispatch double_click settle event after timeout in pendingTriple', () => {
+		it('should dispatch double_click settle-down event after timeout in pendingOverflow (pointer held)', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
+			// no pointer_up between or after — pointer is still down at settle time
+
+			vi.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'double_click',
+					phase: 'settle-down',
+				})
+			)
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should dispatch double_click settle-up event after timeout in pendingOverflow (pointer released)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
 
 			vi.advanceTimersByTime(350)
 
@@ -152,124 +174,84 @@ describe('ClickManager', () => {
 				expect.objectContaining({
 					type: 'click',
 					name: 'double_click',
-					phase: 'settle',
+					phase: 'settle-up',
 				})
 			)
 			expect(clickManager.clickState).toBe('idle')
 		})
 	})
 
-	describe('triple and quadruple click detection', () => {
-		it('should detect triple click on third pointer_down', () => {
+	describe('overflow click handling', () => {
+		it('should enter overflow on the third pointer_down without emitting another click', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const thirdDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
-			const result = clickManager.handlePointerEvent(thirdDown) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(thirdDown)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingQuadruple')
+			expect(result).toBe(thirdDown)
+			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should detect quadruple click on fourth pointer_down', () => {
+		it('should keep overflow active on further clicks', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second (double_click)
-			clickManager.handlePointerEvent(pointerDown) // third (triple_click)
-			const result = clickManager.handlePointerEvent(pointerDown) as TLClickEventInfo // fourth
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingOverflow')
-		})
-
-		it('should handle overflow state after quadruple click', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerDown) // fifth
+			clickManager.handlePointerEvent(pointerDown) // third (overflow)
+			const result = clickManager.handlePointerEvent(pointerDown) // fourth
 
 			expect(result).toBe(pointerDown)
 			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should generate triple_click up event on pointer_up after triple_click down', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('up')
-		})
-
-		it('should generate quadruple_click up event on pointer_up after quadruple_click down', () => {
+		it('should not emit double_click up events while in overflow', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
 			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(pointerUp)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('up')
+			expect(result).toBe(pointerUp)
+			expect(clickManager.clickState).toBe('overflow')
 		})
-	})
 
-	describe('timeout behavior and settle events', () => {
-		it('should dispatch triple_click settle event after timeout in pendingQuadruple', () => {
+		it('should return to idle after overflow timeout without dispatching a settle event', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
+			clickManager.handlePointerEvent(pointerDown) // third -> overflow
 
 			vi.advanceTimersByTime(350)
 
-			expect(editor.dispatch).toHaveBeenCalledWith(
-				expect.objectContaining({
-					type: 'click',
-					name: 'triple_click',
-					phase: 'settle',
-				})
-			)
+			expect(editor.dispatch).not.toHaveBeenCalled()
 			expect(clickManager.clickState).toBe('idle')
 		})
+	})
 
-		it('should dispatch quadruple_click settle event after timeout in pendingOverflow', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+	describe('timeout behavior and settle events', () => {
+		it('should track press/release state across the pending window (settle-down then release → settle-up)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down) // second press — pointer is down...
+			clickManager.handlePointerEvent(up) // ...but released before timeout
 
 			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
-					type: 'click',
-					name: 'quadruple_click',
-					phase: 'settle',
+					name: 'double_click',
+					phase: 'settle-up',
 				})
 			)
-			expect(clickManager.clickState).toBe('idle')
 		})
 
 		it('should use different timeout durations for different states', () => {
@@ -316,7 +298,7 @@ describe('ClickManager', () => {
 
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 	})
 
@@ -396,7 +378,7 @@ describe('ClickManager', () => {
 
 			clickManager.handlePointerEvent(pointerDown)
 			clickManager.handlePointerEvent(pointerDown) // double click
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 
 			clickManager.cancelDoubleClickTimeout()
 
@@ -416,9 +398,7 @@ describe('ClickManager', () => {
 			// Get to overflow state
 			clickManager.handlePointerEvent(pointerDown) // 1
 			clickManager.handlePointerEvent(pointerDown) // 2
-			clickManager.handlePointerEvent(pointerDown) // 3
-			clickManager.handlePointerEvent(pointerDown) // 4
-			clickManager.handlePointerEvent(pointerDown) // 5 -> overflow
+			clickManager.handlePointerEvent(pointerDown) // 3 -> overflow
 
 			expect(clickManager.clickState).toBe('overflow')
 

package/src/lib/editor/managers/ClickManager/ClickManager.ts

@@ -4,13 +4,7 @@ import type { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 
 /** @public */
-export type TLClickState =
-	| 'idle'
-	| 'pendingDouble'
-	| 'pendingTriple'
-	| 'pendingQuadruple'
-	| 'pendingOverflow'
-	| 'overflow'
+export type TLClickState = 'idle' | 'pendingDouble' | 'pendingOverflow' | 'overflow'
 
 const MAX_CLICK_DISTANCE = 40
 
@@ -26,6 +20,8 @@ export class ClickManager {
 
 	private _previousScreenPoint?: Vec
 
+	private _isPressingWhilePending = false
+
 	@bind
 	_getClickTimeout(state: TLClickState, id = uniqueId()) {
 		this._clickId = id
@@ -34,30 +30,12 @@ export class ClickManager {
 			() => {
 				if (this._clickState === state && this._clickId === id) {
 					switch (this._clickState) {
-						case 'pendingTriple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'double_click',
-								phase: 'settle',
-							})
-							break
-						}
-						case 'pendingQuadruple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'triple_click',
-								phase: 'settle',
-							})
-							break
-						}
 						case 'pendingOverflow': {
 							this.editor.dispatch({
 								...this.lastPointerInfo,
 								type: 'click',
-								name: 'quadruple_click',
-								phase: 'settle',
+								name: 'double_click',
+								phase: this._isPressingWhilePending ? 'settle-down' : 'settle-up',
 							})
 							break
 						}
@@ -100,6 +78,8 @@ export class ClickManager {
 				if (!this._clickState) return info
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = true
+
 				if (
 					this._previousScreenPoint &&
 					Vec.Dist2(this._previousScreenPoint, this._clickScreenPoint) > MAX_CLICK_DISTANCE ** 2
@@ -113,32 +93,12 @@ export class ClickManager {
 
 				switch (this._clickState) {
 					case 'pendingDouble': {
-						this._clickState = 'pendingTriple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'double_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingTriple': {
-						this._clickState = 'pendingQuadruple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingQuadruple': {
 						this._clickState = 'pendingOverflow'
 						this._clickTimeout = this._getClickTimeout(this._clickState)
 						return {
 							...info,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'down',
 						}
 					}
@@ -159,30 +119,17 @@ export class ClickManager {
 			}
 			case 'pointer_up': {
 				if (!this._clickState) return info
+
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = false
+
 				switch (this._clickState) {
-					case 'pendingTriple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'double_click',
-							phase: 'up',
-						}
-					}
-					case 'pendingQuadruple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'up',
-						}
-					}
 					case 'pendingOverflow': {
 						return {
 							...this.lastPointerInfo,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'up',
 						}
 					}
@@ -219,5 +166,8 @@ export class ClickManager {
 	cancelDoubleClickTimeout() {
 		this._clickTimeout = clearTimeout(this._clickTimeout)
 		this._clickState = 'idle'
+		// when a double click is cancelled, we are no longer pending any further
+		// clicks, so we set this to false even if the user is still pressing
+		this._isPressingWhilePending = false
 	}
 }

package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.test.ts

@@ -1,11 +1,17 @@
-import { PageRecordType, type TLInstancePresence } from '@tldraw/tlschema'
+import {
+	PageRecordType,
+	createUserId,
+	type TLInstancePresence,
+	type TLUserId,
+} from '@tldraw/tlschema'
 import { vi } from 'vitest'
+import { createTLStore } from '../../../config/createTLStore'
 import type { Editor } from '../../Editor'
 import { CollaboratorsManager } from './CollaboratorsManager'
 
 const currentPageId = PageRecordType.createId('page')
 
-function createPresence(userId: string): TLInstancePresence {
+function createPresence(userId: TLUserId): TLInstancePresence {
 	return {
 		typeName: 'instance_presence',
 		id: `instance_presence:${userId}` as TLInstancePresence['id'],
@@ -34,6 +40,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 	}))
 	const userGetId = vi.fn(() => 'current-user')
 
+	const store = createTLStore()
+	store.put(presences)
+
 	const editor = {
 		options: {
 			collaboratorCheckIntervalMs: 1000,
@@ -45,14 +54,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 		},
 		user: {
 			getId: userGetId,
+			getRecordId: () => createUserId(userGetId()),
 		},
-		store: {
-			query: {
-				records: vi.fn(() => ({
-					get: () => presences,
-				})),
-			},
-		},
+		store,
 		getInstanceState,
 		getCurrentPageId: vi.fn(() => currentPageId),
 	} as unknown as Editor
@@ -88,10 +92,19 @@ describe(CollaboratorsManager, () => {
 		expect(setInterval).toHaveBeenCalledTimes(1)
 	})
 
+	it("excludes the local user's own other sessions", () => {
+		const ownSession = createPresence(createUserId('current-user'))
+		const peer = createPresence(createUserId('peer'))
+		const { editor } = createEditor([ownSession, peer])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getCollaborators()).toEqual([peer])
+	})
+
 	it('reads instance state once when filtering visible collaborators', () => {
 		const { editor, getInstanceState } = createEditor([
-			createPresence('user-1'),
-			createPresence('user-2'),
+			createPresence(createUserId('user-1')),
+			createPresence(createUserId('user-2')),
 		])
 		const manager = new CollaboratorsManager(editor)
 
@@ -101,9 +114,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('hides idle collaborators that are following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
@@ -111,9 +124,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are following us when they have a chat message', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		presence.chatMessage = 'hi'
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
@@ -122,11 +135,25 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are not following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
 		expect(manager.getVisibleCollaborators()).toHaveLength(1)
 	})
+
+	it('shows newly-joined collaborators that have not recorded any activity yet', () => {
+		// A peer who has joined but not moved their pointer broadcasts the default
+		// `lastActivityTimestamp` of 0. They should still be treated as active so
+		// they appear in the people menu / face pile. See issue #9017.
+		const zero = createPresence(createUserId('zero'))
+		zero.lastActivityTimestamp = 0
+		const nullish = createPresence(createUserId('nullish'))
+		nullish.lastActivityTimestamp = null
+		const { editor } = createEditor([zero, nullish])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(2)
+	})
 })

package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts

@@ -37,7 +37,7 @@ export class CollaboratorsManager {
 	@computed
 	private _getCollaboratorsQuery() {
 		return this.editor.store.query.records('instance_presence', () => ({
-			userId: { neq: this.editor.user.getId() },
+			userId: { neq: this.editor.user.getRecordId() },
 		}))
 	}
 
@@ -88,14 +88,17 @@ export class CollaboratorsManager {
 		if (!collaborators.length) return EMPTY_ARRAY
 
 		const { followingUserId, highlightedUserIds } = this.editor.getInstanceState()
-		const currentUserId = this.editor.user.getId()
+		const currentUserId = this.editor.user.getRecordId()
 
 		return collaborators.filter((presence) => {
 			const { lastActivityTimestamp, userId, chatMessage } = presence
 
-			// Treat a missing `lastActivityTimestamp` as "active right now" (elapsed = 0)
-			// so newly-joined peers aren't immediately classified as idle/inactive.
-			const elapsed = Math.max(0, now - (lastActivityTimestamp ?? now))
+			// Treat a missing or zero `lastActivityTimestamp` as "active right now"
+			// (elapsed = 0) so newly-joined peers aren't immediately classified as
+			// idle/inactive. The broadcast default for peers who haven't moved their
+			// pointer yet is `0` (e.g. someone on a touch device who joins and just
+			// watches), so a plain `?? now` would leave them hidden. See issue #9017.
+			const elapsed = lastActivityTimestamp ? Math.max(0, now - lastActivityTimestamp) : 0
 
 			if (elapsed > collaboratorInactiveTimeoutMs) {
 				// Inactive: If they're inactive, only show if we're following them or they're highlighted

package/src/lib/editor/managers/FocusManager/FocusManager.test.ts

@@ -14,7 +14,7 @@ describe('FocusManager', () => {
 			getInstanceState: Mock
 			updateInstanceState: Mock
 			getContainer: Mock
-			isIn: Mock
+			getEditingShapeId: Mock
 			getSelectedShapeIds: Mock
 			complete: Mock
 		}
@@ -51,7 +51,7 @@ describe('FocusManager', () => {
 			updateInstanceState: vi.fn(),
 			getContainer: vi.fn(() => mockContainer),
 			getContainerDocument: vi.fn(() => document),
-			isIn: vi.fn(() => false),
+			getEditingShapeId: vi.fn(() => null),
 			getSelectedShapeIds: vi.fn(() => []),
 			complete: vi.fn(),
 		} as any
@@ -243,7 +243,7 @@ describe('FocusManager', () => {
 		})
 
 		it('should return early when editor is in editing mode', () => {
-			editor.isIn.mockReturnValue(true)
+			editor.getEditingShapeId.mockReturnValue('shape:1')
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 
 			keydownHandler(event)
@@ -407,7 +407,7 @@ describe('FocusManager', () => {
 			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
 			const keydownHandler = keydownCall![1]
 
-			editor.isIn.mockReturnValue(true) // Editing mode
+			editor.getEditingShapeId.mockReturnValue('shape:1') // Editing mode
 
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 			keydownHandler(event)

package/src/lib/editor/managers/FocusManager/FocusManager.ts

@@ -63,8 +63,7 @@ export class FocusManager {
 		const activeEl = container.ownerDocument.activeElement
 		// Edit mode should remove the focus ring, however if the active element's
 		// parent is the contextual toolbar, then allow it.
-		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
-			return
+		if (this.editor.getEditingShapeId() && !activeEl?.closest('.tlui-contextual-toolbar')) return
 		if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')

package/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -15,12 +15,14 @@ import { FontManager } from './FontManager'
 vi.mock('../../Editor')
 
 // Mock globals
-global.FontFace = vi.fn().mockImplementation((family, src, descriptors) => ({
-	family,
-	src,
-	...descriptors,
-	load: vi.fn(() => Promise.resolve()),
-}))
+global.FontFace = vi.fn().mockImplementation(function (family: any, src: any, descriptors: any) {
+	return {
+		family,
+		src,
+		...descriptors,
+		load: vi.fn(() => Promise.resolve()),
+	}
+})
 
 Object.defineProperty(global.document, 'fonts', {
 	value: {
@@ -200,9 +202,11 @@ describe('FontManager', () => {
 			const font = createMockFont()
 			const error = new Error('Font load failed')
 
-			;(global.FontFace as Mock).mockReturnValue({
-				family: font.family,
-				load: vi.fn(() => Promise.reject(error)),
+			;(global.FontFace as Mock).mockImplementationOnce(function () {
+				return {
+					family: font.family,
+					load: vi.fn(() => Promise.reject(error)),
+				}
 			})
 
 			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})

package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts

@@ -584,6 +584,38 @@ describe('HistoryManager getters and utilities', () => {
 			store.update(ids.a, (s) => ({ ...s, value: 2 }))
 			expect(manager.getNumRedos()).toBe(0)
 		})
+
+		it('should only report replaying while undoing or redoing', () => {
+			const replayStates: boolean[] = []
+			const dispose = store.addHistoryInterceptor(() => {
+				replayStates.push(manager.isReplaying())
+			})
+
+			store.update(ids.a, (s) => ({ ...s, value: 1 }))
+			expect(replayStates).toEqual([false])
+
+			replayStates.length = 0
+			manager.undo()
+			expect(replayStates).toEqual([true])
+			expect(manager.isReplaying()).toBe(false)
+
+			replayStates.length = 0
+			manager.redo()
+			expect(replayStates).toEqual([true])
+			expect(manager.isReplaying()).toBe(false)
+
+			replayStates.length = 0
+			manager.batch(
+				() => {
+					store.update(ids.a, (s) => ({ ...s, value: 2 }))
+				},
+				{ history: 'ignore' }
+			)
+			expect(replayStates).toEqual([false])
+			expect(manager.isReplaying()).toBe(false)
+
+			dispose()
+		})
 	})
 
 	describe('getMarkIdMatching', () => {