@tldraw/editor 3.16.0-next.eafb52d15064 → 3.16.0-next.fe14f1b4181f

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "3.16.0-next.eafb52d15064",
+  "version": "3.16.0-next.fe14f1b4181f",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -34,27 +34,28 @@
     "src"
   ],
   "scripts": {
-    "test-ci": "lazy inherit",
-    "test": "yarn run -T jest",
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
     "benchmark": "yarn run -T tsx ./internal/scripts/benchmark.ts",
-    "test-coverage": "lazy inherit",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
     "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
+    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.16.0-next.eafb52d15064",
-    "@tldraw/state-react": "3.16.0-next.eafb52d15064",
-    "@tldraw/store": "3.16.0-next.eafb52d15064",
-    "@tldraw/tlschema": "3.16.0-next.eafb52d15064",
-    "@tldraw/utils": "3.16.0-next.eafb52d15064",
-    "@tldraw/validate": "3.16.0-next.eafb52d15064",
+    "@tldraw/state": "3.16.0-next.fe14f1b4181f",
+    "@tldraw/state-react": "3.16.0-next.fe14f1b4181f",
+    "@tldraw/store": "3.16.0-next.fe14f1b4181f",
+    "@tldraw/tlschema": "3.16.0-next.fe14f1b4181f",
+    "@tldraw/utils": "3.16.0-next.fe14f1b4181f",
+    "@tldraw/validate": "3.16.0-next.fe14f1b4181f",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
@@ -69,41 +70,17 @@
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
     "@types/react": "^18.3.18",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "jest": {
-    "preset": "../../internal/config/jest/node/jest-preset.js",
-    "testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
-    "fakeTimers": {
-      "enableGlobally": true
-    },
-    "testPathIgnorePatterns": [
-      "^.+\\.*.css$"
-    ],
-    "moduleNameMapper": {
-      "^~(.*)": "<rootDir>/src/$1",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    "setupFiles": [
-      "raf/polyfill",
-      "jest-canvas-mock",
-      "<rootDir>/setupTests.js"
-    ],
-    "setupFilesAfterEnv": [
-      "../../internal/config/setupJest.ts"
-    ]
+    "resize-observer-polyfill": "^1.5.1",
+    "vitest": "^3.2.4"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/lib/TldrawEditor.tsx

@@ -1,9 +1,9 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
-import { Required, annotateError } from '@tldraw/utils'
+import { annotateError, Required } from '@tldraw/utils'
 import React, {
-	ReactNode,
 	memo,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useLayoutEffect,
@@ -15,13 +15,13 @@ import React, {
 
 import classNames from 'classnames'
 import { version } from '../version'
-import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
-import { TLEditorSnapshot } from './config/TLEditorSnapshot'
+import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { TLStoreBaseOptions } from './config/createTLStore'
-import { TLUser, createTLUser } from './config/createTLUser'
+import { createTLUser, TLUser } from './config/createTLUser'
 import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
+import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
@@ -586,8 +586,13 @@ function TldrawEditorWithReadyStore({
 	if (editor !== fontLoadingState?.editor) {
 		fontLoadingState = null
 	}
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!editor) return
+		if (editor.options.maxFontsToLoadBeforeRender === 0) {
+			setFontLoadingState({ editor, isLoaded: true })
+			return
+		}
+
 		let isCancelled = false
 
 		setFontLoadingState({ editor, isLoaded: false })

package/src/lib/components/MenuClickCapture.tsx

@@ -50,12 +50,6 @@ export function MenuClickCapture() {
 			// Do nothing unless we're pointing
 			if (!rPointerState.current.isDown) return
 
-			// If we're already dragging, pass on the event as it is
-			if (rPointerState.current.isDragging) {
-				canvasEvents.onPointerMove?.(e)
-				return
-			}
-
 			if (
 				// We're pointing, but are we dragging?
 				Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
@@ -75,8 +69,6 @@ export function MenuClickCapture() {
 					clientY: y,
 					button: 0,
 				})
-				// call the pointer move with the current pointer position
-				canvasEvents.onPointerMove?.(e)
 			}
 		},
 		[canvasEvents, editor]

package/src/lib/components/Shape.tsx

@@ -28,7 +28,6 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
-	dprMultiple,
 }: {
 	id: TLShapeId
 	shape: TLShape
@@ -36,7 +35,6 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
-	dprMultiple: number
 }) {
 	const editor = useEditor()
 
@@ -91,18 +89,14 @@ export const Shape = memo(function Shape({
 			}
 
 			// Width / Height
-			// We round the shape width and height up to the nearest multiple of dprMultiple
-			// to avoid the browser making miscalculations when applying the transform.
-			const widthRemainder = bounds.w % dprMultiple
-			const heightRemainder = bounds.h % dprMultiple
-			const width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)
-			const height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)
+			const width = Math.max(bounds.width, 1)
+			const height = Math.max(bounds.height, 1)
 
 			if (width !== prev.width || height !== prev.height) {
-				setStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
+				setStyleProperty(containerRef.current, 'width', width + 'px')
+				setStyleProperty(containerRef.current, 'height', height + 'px')
+				setStyleProperty(bgContainerRef.current, 'width', width + 'px')
+				setStyleProperty(bgContainerRef.current, 'height', height + 'px')
 				prev.width = width
 				prev.height = height
 			}

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -22,7 +22,6 @@ import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
 import { setStyleProperty } from '../../utils/dom'
-import { nearestMultiple } from '../../utils/nearestMultiple'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -173,10 +172,12 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<LiveCollaborators />
 					</div>
 				</div>
+				<div className="tl-canvas__in-front">
+					<InFrontOfTheCanvasWrapper />
+				</div>
 				<MovingCameraHitTestBlocker />
 			</div>
 			<MenuClickCapture />
-			<InFrontOfTheCanvasWrapper />
 		</>
 	)
 }
@@ -390,18 +391,9 @@ function ShapesWithSVGs() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return renderingShapes.map((result) => (
 		<Fragment key={result.id + '_fragment'}>
-			<Shape {...result} dprMultiple={dprMultiple} />
+			<Shape {...result} />
 			<DebugSvgCopy id={result.id} mode="iframe" />
 		</Fragment>
 	))
@@ -436,19 +428,10 @@ function ShapesToDisplay() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return (
 		<>
 			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />
+				<Shape key={result.id + '_shape'} {...result} />
 			))}
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</>

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -44,7 +44,7 @@ export function DefaultCollaboratorHint({
 				href={`#${cursorHintId}`}
 				color={color}
 				strokeWidth={3}
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 			/>
 			<use href={`#${cursorHintId}`} color={color} opacity={opacity} />
 		</svg>

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -75,7 +75,7 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 
 		// if we can't find a theme class from the app or from a parent, we have
 		// to fall back on using a media query:
-		if (typeof window !== 'undefined' && 'matchMedia' in window) {
+		if (typeof window !== 'undefined' && window.matchMedia) {
 			setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
 		}
 	}, [isDarkModeFromApp])

package/src/lib/components/default-components/DefaultScribble.tsx

@@ -21,7 +21,7 @@ export function DefaultScribble({ scribble, zoom, color, opacity, className }: T
 			<path
 				className="tl-scribble"
 				d={getSvgPathFromPoints(scribble.points, false)}
-				stroke={color ?? `var(--color-${scribble.color})`}
+				stroke={color ?? `var(--tl-color-${scribble.color})`}
 				fill="none"
 				strokeWidth={8 / zoom}
 				opacity={opacity ?? scribble.opacity}

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -87,7 +87,11 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 
 	return (
 		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
-			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
+			<g
+				className="tl-shape-indicator"
+				stroke={color ?? 'var(--tl-color-selected)'}
+				opacity={opacity}
+			>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>
 		</svg>

package/src/lib/config/TLUserPreferences.ts

@@ -135,7 +135,7 @@ function getRandomColor() {
 
 /** @internal */
 export function userPrefersReducedMotion() {
-	if (typeof window !== 'undefined' && 'matchMedia' in window) {
+	if (typeof window !== 'undefined' && window.matchMedia) {
 		return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
 	}
 

package/src/lib/editor/Editor.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
 	Box,
 	Geometry2d,
@@ -59,8 +60,8 @@ beforeEach(() => {
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })
-	editor.setCamera = jest.fn()
-	editor.user.getAnimationSpeed = jest.fn()
+	editor.setCamera = vi.fn()
+	editor.user.getAnimationSpeed = vi.fn()
 })
 
 describe('centerOnPoint', () => {
@@ -94,13 +95,13 @@ describe('updateShape', () => {
 
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -144,13 +145,13 @@ describe('zoomOut', () => {
 
 describe('zoomToSelection', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -286,7 +287,7 @@ describe('getShapesAtPoint', () => {
 
 	it('filters out hidden shapes', () => {
 		// Create a spy to mock isShapeHidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockImplementation((shape) => {
 			return typeof shape === 'string' ? shape === ids.shape3 : shape.id === ids.shape3
 		})
@@ -352,7 +353,7 @@ describe('getShapesAtPoint', () => {
 
 	it('returns empty array when all shapes are hidden', () => {
 		// Mock all shapes as hidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockReturnValue(true)
 
 		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
@@ -692,7 +693,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -713,7 +714,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -818,7 +819,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = Array.from(editor.getSelectedShapeIds())
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()

package/src/lib/editor/Editor.ts

@@ -6333,7 +6333,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
@@ -7857,25 +7867,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
+							}
 						}
 					}
 
@@ -9502,6 +9519,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')