@tldraw/editor 3.16.0-canary.56eb315c11ae → 3.16.0-canary.6074088f67bd

package/src/lib/editor/Editor.ts

@@ -176,6 +176,7 @@ import {
 	RequiredKeys,
 	TLCameraMoveOptions,
 	TLCameraOptions,
+	TLGetShapeAtPointOptions,
 	TLImageExportOptions,
 	TLSvgExportOptions,
 	TLUpdatePointerOptions,
@@ -4859,27 +4860,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache('pageMaskCache', (shape) => {
 			if (isPageId(shape.parentId)) return undefined
 
-			const frameAncestors = this.getShapeAncestors(shape.id).filter((shape) =>
-				this.isShapeOfType<TLFrameShape>(shape, 'frame')
-			)
-
-			if (frameAncestors.length === 0) return undefined
-
-			const pageMask = frameAncestors
-				.map<Vec[] | undefined>((s) => {
-					// Apply the frame transform to the frame outline to get the frame outline in the current page space
-					const geometry = this.getShapeGeometry(s.id)
-					const pageTransform = this.getShapePageTransform(s.id)
-					return pageTransform.applyToPoints(geometry.vertices)
-				})
-				.reduce((acc, b) => {
-					if (!(b && acc)) return undefined
-					const intersection = intersectPolygonPolygon(acc, b)
-					if (intersection) {
-						return intersection.map(Vec.Cast)
-					}
-					return []
-				})
+			const clipPaths: Vec[][] = []
+			// Get all ancestors that can potentially clip this shape
+			for (const ancestor of this.getShapeAncestors(shape.id)) {
+				const util = this.getShapeUtil(ancestor)
+				const clipPath = util.getClipPath?.(ancestor)
+				if (!clipPath) continue
+				if (util.shouldClipChild?.(shape) === false) continue
+				const pageTransform = this.getShapePageTransform(ancestor.id)
+				clipPaths.push(pageTransform.applyToPoints(clipPath))
+			}
+			if (clipPaths.length === 0) return undefined
+
+			const pageMask = clipPaths.reduce((acc, b) => {
+				const intersection = intersectPolygonPolygon(acc, b)
+				if (intersection) {
+					return intersection.map(Vec.Cast)
+				}
+				return []
+			})
 
 			return pageMask
 		})
@@ -5154,20 +5153,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @returns The shape at the given point, or undefined if there is no shape at the point.
 	 */
-	getShapeAtPoint(
-		point: VecLike,
-		opts = {} as {
-			renderingOnly?: boolean
-			margin?: number
-			hitInside?: boolean
-			hitLocked?: boolean
-			// TODO: we probably need to rename this, we don't quite _always_
-			// respect this esp. in the part below that does "Check labels first"
-			hitLabels?: boolean
-			hitFrameInside?: boolean
-			filter?(shape: TLShape): boolean
-		}
-	): TLShape | undefined {
+	getShapeAtPoint(point: VecLike, opts: TLGetShapeAtPointOptions = {}): TLShape | undefined {
 		const zoomLevel = this.getZoomLevel()
 		const viewportPageBounds = this.getViewportPageBounds()
 		const {
@@ -5179,6 +5165,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			hitFrameInside = false,
 		} = opts
 
+		const [innerMargin, outerMargin] = Array.isArray(margin) ? margin : [margin, margin]
+
 		let inHollowSmallestArea = Infinity
 		let inHollowSmallestAreaHit: TLShape | null = null
 
@@ -5198,7 +5186,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				return false
 			const pageMask = this.getShapeMask(shape)
 			if (pageMask && !pointInPolygon(point, pageMask)) return false
-			if (filter) return filter(shape)
+			if (filter && !filter(shape)) return false
 			return true
 		})
 
@@ -5224,13 +5212,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			}
 
-			if (this.isShapeOfType(shape, 'frame')) {
+			if (this.isShapeOfType<TLFrameShape>(shape, 'frame')) {
 				// On the rare case that we've hit a frame (not its label), test again hitInside to be forced true;
 				// this prevents clicks from passing through the body of a frame to shapes behind it.
 
 				// If the hit is within the frame's outer margin, then select the frame
-				const distance = geometry.distanceToPoint(pointInShapeSpace, hitInside)
-				if (Math.abs(distance) <= margin) {
+				const distance = geometry.distanceToPoint(pointInShapeSpace, hitFrameInside)
+				if (
+					hitFrameInside
+						? (distance > 0 && distance <= outerMargin) ||
+							(distance <= 0 && distance > -innerMargin)
+						: distance > 0 && distance <= outerMargin
+				) {
 					return inMarginClosestToEdgeHit || shape
 				}
 
@@ -5269,11 +5262,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// If the margin is zero and the geometry has a very small width or height,
 				// then check the actual distance. This is to prevent a bug where straight
 				// lines would never pass the broad phase (point-in-bounds) check.
-				if (margin === 0 && (geometry.bounds.w < 1 || geometry.bounds.h < 1)) {
+				if (outerMargin === 0 && (geometry.bounds.w < 1 || geometry.bounds.h < 1)) {
 					distance = geometry.distanceToPoint(pointInShapeSpace, hitInside)
 				} else {
 					// Broad phase
-					if (geometry.bounds.containsPoint(pointInShapeSpace, margin)) {
+					if (geometry.bounds.containsPoint(pointInShapeSpace, outerMargin)) {
 						// Narrow phase (actual distance)
 						distance = geometry.distanceToPoint(pointInShapeSpace, hitInside)
 					} else {
@@ -5288,7 +5281,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// the shape or negative if inside of the shape. If the distance
 				// is greater than the margin, then it's a miss. Otherwise...
 
-				if (distance <= margin) {
+				// Are we close to the shape's edge?
+				if (distance <= outerMargin || (hitInside && distance <= 0 && distance > -innerMargin)) {
 					if (geometry.isFilled || (isGroup && geometry.children[0].isFilled)) {
 						// If the shape is filled, then it's a hit. Remember, we're
 						// starting from the TOP-MOST shape in z-index order, so any
@@ -5298,11 +5292,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// If the shape is bigger than the viewport, then skip it.
 						if (this.getShapePageBounds(shape)!.contains(viewportPageBounds)) continue
 
-						// For hollow shapes...
-						if (Math.abs(distance) < margin) {
-							// We want to preference shapes where we're inside of the
-							// shape margin; and we would want to hit the shape with the
-							// edge closest to the point.
+						// If we're close to the edge of the shape, and if it's the closest edge among
+						// all the edges that we've gotten close to so far, then we will want to hit the
+						// shape unless we hit something else or closer in later iterations.
+						if (
+							hitInside
+								? // On hitInside, the distance will be negative for hits inside
+									// If the distance is positive, check against the outer margin
+									(distance > 0 && distance <= outerMargin) ||
+									// If the distance is negative, check against the inner margin
+									(distance <= 0 && distance > -innerMargin)
+								: // If hitInside is false, then sadly _we do not know_ whether the
+									// point is inside or outside of the shape, so we check against
+									// the max of the two margins
+									Math.abs(distance) <= Math.max(innerMargin, outerMargin)
+						) {
 							if (Math.abs(distance) < inMarginClosestToEdgeDistance) {
 								inMarginClosestToEdgeDistance = Math.abs(distance)
 								inMarginClosestToEdgeHit = shape
@@ -5324,6 +5328,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			} else {
 				// For open shapes (e.g. lines or draw shapes) always use the margin.
 				// If the distance is less than the margin, return the shape as the hit.
+				// Use the editor's configurable hit test margin.
 				if (distance < this.options.hitTestMargin / zoomLevel) {
 					return shape
 				}
@@ -6326,7 +6331,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			this.createShapes(shapesToCreate)
 			this.createBindings(bindingsToCreate)
-			this.setSelectedShapes(compact(ids.map((id) => shapeIds.get(id))))
+
+			this.setSelectedShapes(
+				compact(
+					ids.map((oldId) => {
+						const newId = shapeIds.get(oldId)
+						if (!newId) return null
+						if (!this.getShape(newId)) return null
+						return newId
+					})
+				)
+			)
 
 			if (offset !== undefined) {
 				// If we've offset the duplicated shapes, check to see whether their new bounds is entirely
@@ -7380,7 +7395,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (
 				!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
 					type: 'stretch',
-					shapes: shapesToStretchFirstPass,
 				})
 			) {
 				continue
@@ -7851,25 +7865,32 @@ export class Editor extends EventEmitter<TLEventMap> {
 				) {
 					let parentId: TLParentId = this.getFocusedGroupId()
 
-					for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
-						const parent = currentPageShapesSorted[i]
-						const util = this.getShapeUtil(parent)
-						if (
-							util.canReceiveNewChildrenOfType(parent, partial.type) &&
-							!this.isShapeHidden(parent) &&
-							this.isPointInShape(
-								parent,
-								// If no parent is provided, then we can treat the
-								// shape's provided x/y as being in the page's space.
-								{ x: partial.x ?? 0, y: partial.y ?? 0 },
-								{
-									margin: 0,
-									hitInside: true,
-								}
-							)
-						) {
-							parentId = parent.id
-							break
+					const isPositioned = partial.x !== undefined && partial.y !== undefined
+
+					// If the shape has been explicitly positioned, we'll try to find a parent at
+					// that position. If not, we'll assume the user isn't deliberately placing the
+					// shape and the positioning will be handled later by another system.
+					if (isPositioned) {
+						for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
+							const parent = currentPageShapesSorted[i]
+							const util = this.getShapeUtil(parent)
+							if (
+								util.canReceiveNewChildrenOfType(parent, partial.type) &&
+								!this.isShapeHidden(parent) &&
+								this.isPointInShape(
+									parent,
+									// If no parent is provided, then we can treat the
+									// shape's provided x/y as being in the page's space.
+									{ x: partial.x ?? 0, y: partial.y ?? 0 },
+									{
+										margin: 0,
+										hitInside: true,
+									}
+								)
+							) {
+								parentId = parent.id
+								break
+							}
 						}
 					}
 
@@ -9496,6 +9517,24 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 	}
 
+	/**
+	 * Get an exported image of the given shapes as a data URL.
+	 *
+	 * @param shapes - The shapes (or shape ids) to export.
+	 * @param opts - Options for the export.
+	 *
+	 * @returns A data URL of the image.
+	 * @public
+	 */
+	async toImageDataUrl(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+		const { blob, width, height } = await this.toImage(shapes, opts)
+		return {
+			url: await FileHelpers.blobToDataUrl(blob),
+			width,
+			height,
+		}
+	}
+
 	/* --------------------- Events --------------------- */
 
 	/**

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

@@ -1,12 +1,13 @@
+import { Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 import { ClickManager } from './ClickManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('ClickManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let clickManager: ClickManager
 	let mockTimers: any
 
@@ -29,14 +30,14 @@ describe('ClickManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.useFakeTimers()
+		vi.useFakeTimers()
 		mockTimers = {
-			setTimeout: jest.fn((fn, delay) => setTimeout(fn, delay)),
+			setTimeout: vi.fn((fn, delay) => setTimeout(fn, delay)),
 		}
 
 		editor = {
 			timers: mockTimers,
-			dispatch: jest.fn(),
+			dispatch: vi.fn(),
 			options: {
 				doubleClickDurationMs: 300,
 				multiClickDurationMs: 300,
@@ -46,7 +47,7 @@ describe('ClickManager', () => {
 			inputs: {
 				currentScreenPoint: { x: 0, y: 0 },
 			},
-			getInstanceState: jest.fn(() => ({
+			getInstanceState: vi.fn(() => ({
 				isCoarsePointer: false,
 			})),
 		} as any
@@ -55,8 +56,8 @@ describe('ClickManager', () => {
 	})
 
 	afterEach(() => {
-		jest.useRealTimers()
-		jest.clearAllMocks()
+		vi.useRealTimers()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initial state', () => {
@@ -100,7 +101,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerEvent)
 			expect(clickManager.clickState).toBe('pendingDouble')
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(clickManager.clickState).toBe('idle')
 		})
@@ -141,7 +142,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -235,7 +236,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerDown) // second
 			clickManager.handlePointerEvent(pointerDown) // third
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -255,7 +256,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerDown) // third
 			clickManager.handlePointerEvent(pointerDown) // fourth
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -277,7 +278,7 @@ describe('ClickManager', () => {
 				editor.options.doubleClickDurationMs
 			)
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Second click - should use multiClickDurationMs
 			clickManager.handlePointerEvent(pointerDown)
@@ -392,7 +393,7 @@ describe('ClickManager', () => {
 			clickManager.cancelDoubleClickTimeout()
 
 			// Advance time - should not dispatch settle event
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).not.toHaveBeenCalled()
 			expect(clickManager.clickState).toBe('idle')

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

@@ -1,19 +1,20 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { EdgeScrollManager } from './EdgeScrollManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('EdgeScrollManager', () => {
-	let editor: jest.Mocked<
+	let editor: Mocked<
 		Editor & {
-			user: { getEdgeScrollSpeed: jest.Mock }
-			getCamera: jest.Mock
-			getCameraOptions: jest.Mock
-			getZoomLevel: jest.Mock
-			getViewportScreenBounds: jest.Mock
+			user: { getEdgeScrollSpeed: Mock }
+			getCamera: Mock
+			getCameraOptions: Mock
+			getZoomLevel: Mock
+			getViewportScreenBounds: Mock
 		}
 	>
 	let edgeScrollManager: EdgeScrollManager
@@ -33,33 +34,33 @@ describe('EdgeScrollManager', () => {
 				isPanning: false,
 			},
 			user: {
-				getEdgeScrollSpeed: jest.fn(() => 1),
+				getEdgeScrollSpeed: vi.fn(() => 1),
 			},
-			getViewportScreenBounds: jest.fn(() => new Box(0, 0, 1000, 600)),
-			getInstanceState: jest.fn(
+			getViewportScreenBounds: vi.fn(() => new Box(0, 0, 1000, 600)),
+			getInstanceState: vi.fn(
 				() =>
 					({
 						isCoarsePointer: false,
 						insets: [false, false, false, false], // [top, right, bottom, left]
 					}) as any
 			),
-			getCameraOptions: jest.fn(() => ({
+			getCameraOptions: vi.fn(() => ({
 				isLocked: false,
 				panSpeed: 1,
 				zoomSpeed: 1,
 				zoomSteps: [1],
 				wheelBehavior: 'pan' as const,
 			})),
-			getZoomLevel: jest.fn(() => 1),
-			getCamera: jest.fn(() => new Vec(0, 0, 1)),
-			setCamera: jest.fn(),
+			getZoomLevel: vi.fn(() => 1),
+			getCamera: vi.fn(() => new Vec(0, 0, 1)),
+			setCamera: vi.fn(),
 		} as any
 
 		edgeScrollManager = new EdgeScrollManager(editor as any)
 	})
 
 	afterEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initialization', () => {

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

@@ -1,58 +1,59 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { FocusManager } from './FocusManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('FocusManager', () => {
-	let editor: jest.Mocked<
+	let editor: Mocked<
 		Editor & {
 			sideEffects: {
-				registerAfterChangeHandler: jest.Mock
+				registerAfterChangeHandler: Mock
 			}
-			getInstanceState: jest.Mock
-			updateInstanceState: jest.Mock
-			getContainer: jest.Mock
-			isIn: jest.Mock
-			getSelectedShapeIds: jest.Mock
-			complete: jest.Mock
+			getInstanceState: Mock
+			updateInstanceState: Mock
+			getContainer: Mock
+			isIn: Mock
+			getSelectedShapeIds: Mock
+			complete: Mock
 		}
 	>
 	let focusManager: FocusManager
 	let mockContainer: HTMLElement
-	let mockDispose: jest.Mock
+	let mockDispose: Mock
 	let originalAddEventListener: typeof document.body.addEventListener
 	let originalRemoveEventListener: typeof document.body.removeEventListener
 
 	beforeEach(() => {
 		// Create mock container element
 		mockContainer = document.createElement('div')
-		mockContainer.focus = jest.fn()
-		mockContainer.blur = jest.fn()
-		jest.spyOn(mockContainer.classList, 'add')
-		jest.spyOn(mockContainer.classList, 'remove')
+		mockContainer.focus = vi.fn()
+		mockContainer.blur = vi.fn()
+		vi.spyOn(mockContainer.classList, 'add')
+		vi.spyOn(mockContainer.classList, 'remove')
 
 		// Create mock dispose function
-		mockDispose = jest.fn()
+		mockDispose = vi.fn()
 
 		// Mock editor
 		editor = {
 			sideEffects: {
-				registerAfterChangeHandler: jest.fn(() => mockDispose),
+				registerAfterChangeHandler: vi.fn(() => mockDispose),
 			},
-			getInstanceState: jest.fn(() => ({ isFocused: false })),
-			updateInstanceState: jest.fn(),
-			getContainer: jest.fn(() => mockContainer),
-			isIn: jest.fn(() => false),
-			getSelectedShapeIds: jest.fn(() => []),
-			complete: jest.fn(),
+			getInstanceState: vi.fn(() => ({ isFocused: false })),
+			updateInstanceState: vi.fn(),
+			getContainer: vi.fn(() => mockContainer),
+			isIn: vi.fn(() => false),
+			getSelectedShapeIds: vi.fn(() => []),
+			complete: vi.fn(),
 		} as any
 
 		// Mock document.body event listeners
 		originalAddEventListener = document.body.addEventListener
 		originalRemoveEventListener = document.body.removeEventListener
-		document.body.addEventListener = jest.fn()
-		document.body.removeEventListener = jest.fn()
+		document.body.addEventListener = vi.fn()
+		document.body.removeEventListener = vi.fn()
 	})
 
 	afterEach(() => {
@@ -65,7 +66,7 @@ describe('FocusManager', () => {
 			focusManager.dispose()
 		}
 
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor', () => {
@@ -131,7 +132,7 @@ describe('FocusManager', () => {
 			const handler = handlerCall[1]
 
 			// Clear previous calls
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Simulate focus state change
 			const prev = { isFocused: false }
@@ -149,7 +150,7 @@ describe('FocusManager', () => {
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			const handler = handlerCall[1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Simulate no focus state change
 			const prev = { isFocused: true }
@@ -170,7 +171,7 @@ describe('FocusManager', () => {
 			// Get the handler before clearing mocks
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			handler = handlerCall[1]
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should add focused class when editor is focused', () => {
@@ -205,11 +206,11 @@ describe('FocusManager', () => {
 			focusManager = new FocusManager(editor)
 
 			// Get the keydown handler that was registered
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
-			keydownHandler = keydownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
+			keydownHandler = keydownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should remove no-focus-ring class on Tab key', () => {
@@ -283,11 +284,11 @@ describe('FocusManager', () => {
 			focusManager = new FocusManager(editor)
 
 			// Get the mousedown handler that was registered
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const mousedownCall = addEventListenerCalls.find((call) => call[0] === 'mousedown')
-			mousedownHandler = mousedownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const mousedownCall = addEventListenerCalls.find((call: any) => call[0] === 'mousedown')
+			mousedownHandler = mousedownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should add no-focus-ring class on mouse down', () => {
@@ -326,7 +327,7 @@ describe('FocusManager', () => {
 		it('should complete before bluring', () => {
 			const callOrder: string[] = []
 			editor.complete.mockImplementation(() => callOrder.push('complete'))
-			mockContainer.blur = jest.fn(() => callOrder.push('blur'))
+			mockContainer.blur = vi.fn(() => callOrder.push('blur'))
 
 			focusManager.blur()
 
@@ -337,7 +338,7 @@ describe('FocusManager', () => {
 	describe('dispose', () => {
 		beforeEach(() => {
 			focusManager = new FocusManager(editor)
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should remove keyboard event listener', () => {
@@ -376,7 +377,7 @@ describe('FocusManager', () => {
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			const handler = handlerCall[1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Rapid focus changes
 			editor.getInstanceState.mockReturnValue({ isFocused: true })
@@ -394,9 +395,9 @@ describe('FocusManager', () => {
 
 		it('should handle keyboard navigation while editing', () => {
 			focusManager = new FocusManager(editor)
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
-			const keydownHandler = keydownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
+			const keydownHandler = keydownCall![1]
 
 			editor.isIn.mockReturnValue(true) // Editing mode
 
@@ -409,15 +410,15 @@ describe('FocusManager', () => {
 
 		it('should handle mouse and keyboard interaction sequence', () => {
 			focusManager = new FocusManager(editor)
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
 
-			const mousedownCall = addEventListenerCalls.find((call) => call[0] === 'mousedown')
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
+			const mousedownCall = addEventListenerCalls.find((call: any) => call[0] === 'mousedown')
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
 
-			const mousedownHandler = mousedownCall[1]
-			const keydownHandler = keydownCall[1]
+			const mousedownHandler = mousedownCall![1]
+			const keydownHandler = keydownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Mouse down adds no-focus-ring
 			mousedownHandler()