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

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

@@ -1,4 +1,12 @@
-import { TLFrameShape, TLGroupShape, TLPageId, TLShapeId, createShapeId } from '@tldraw/tlschema'
+import {
+	TLFrameShape,
+	TLGroupShape,
+	TLPageId,
+	TLShape,
+	TLShapeId,
+	createShapeId,
+} from '@tldraw/tlschema'
+import { Mocked, vi } from 'vitest'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
@@ -7,32 +15,33 @@ import { HandleSnaps } from './HandleSnaps'
 import { GapsSnapIndicator, PointsSnapIndicator, SnapManager } from './SnapManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
-jest.mock('./BoundsSnaps')
-jest.mock('./HandleSnaps')
+vi.mock('../../Editor')
+vi.mock('./BoundsSnaps')
+vi.mock('./HandleSnaps')
 
 describe('SnapManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let snapManager: SnapManager
 
 	const createMockShape = (
 		id: TLShapeId,
 		type: string = 'geo',
 		parentId: TLShapeId | string = 'page:page'
-	) => ({
-		id,
-		type,
-		parentId,
-		x: 0,
-		y: 0,
-		rotation: 0,
-		index: 'a1' as const,
-		opacity: 1,
-		isLocked: false,
-		meta: {},
-		props: {},
-		typeName: 'shape' as const,
-	})
+	) =>
+		({
+			id,
+			type,
+			parentId,
+			x: 0,
+			y: 0,
+			rotation: 0,
+			index: 'a1' as const,
+			opacity: 1,
+			isLocked: false,
+			meta: {},
+			props: {},
+			typeName: 'shape' as const,
+		}) as TLShape
 
 	const createMockFrameShape = (id: TLShapeId): TLFrameShape =>
 		({
@@ -54,26 +63,26 @@ describe('SnapManager', () => {
 
 	beforeEach(() => {
 		editor = {
-			getZoomLevel: jest.fn(() => 1),
-			getViewportPageBounds: jest.fn(() => new Box(0, 0, 1000, 1000)),
-			getSelectedShapeIds: jest.fn(() => []),
-			getSelectedShapes: jest.fn(() => []),
-			findCommonAncestor: jest.fn(() => createShapeId('page')),
-			getCurrentPageId: jest.fn(() => 'page:page' as TLPageId),
-			getSortedChildIdsForParent: jest.fn(() => []),
-			getShape: jest.fn(),
-			getShapeUtil: jest.fn(() => ({
-				canSnap: jest.fn(() => true),
+			getZoomLevel: vi.fn(() => 1),
+			getViewportPageBounds: vi.fn(() => new Box(0, 0, 1000, 1000)),
+			getSelectedShapeIds: vi.fn(() => []),
+			getSelectedShapes: vi.fn(() => []),
+			findCommonAncestor: vi.fn(() => createShapeId('page')),
+			getCurrentPageId: vi.fn(() => 'page:page' as TLPageId),
+			getSortedChildIdsForParent: vi.fn(() => []),
+			getShape: vi.fn(),
+			getShapeUtil: vi.fn(() => ({
+				canSnap: vi.fn(() => true),
 			})),
-			getShapePageBounds: jest.fn(),
-			isShapeOfType: jest.fn(),
+			getShapePageBounds: vi.fn(),
+			isShapeOfType: vi.fn(),
 		} as any
 
 		snapManager = new SnapManager(editor)
 	})
 
 	afterEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initialization', () => {
@@ -304,7 +313,7 @@ describe('SnapManager', () => {
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
 			editor.getShape.mockReturnValue(shape as any)
 			editor.getShapeUtil.mockReturnValue({
-				canSnap: jest.fn(() => false),
+				canSnap: vi.fn(() => false),
 			} as any)
 
 			const result = snapManager.getSnappableShapes()
@@ -329,7 +338,7 @@ describe('SnapManager', () => {
 			const frameShape = createMockFrameShape(frameId)
 
 			editor.getSortedChildIdsForParent.mockReturnValue([frameId])
-			editor.getShape.mockReturnValue(frameShape as any)
+			editor.getShape.mockReturnValue(frameShape)
 			editor.isShapeOfType.mockImplementation((_shape, type) => type === 'frame')
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
@@ -348,14 +357,12 @@ describe('SnapManager', () => {
 				.mockReturnValueOnce([childId]) // Inside group
 
 			editor.getShape.mockImplementation((id) => {
-				if (id === groupId) return groupShape as any
-				if (id === childId) return childShape as any
+				if (id === groupId) return groupShape
+				if (id === childId) return childShape
 				return undefined
 			})
 
-			editor.isShapeOfType.mockImplementation(
-				(shape, type) => shape && (shape as any).type === type
-			)
+			editor.isShapeOfType.mockImplementation((shape: any, type) => shape && shape.type === type)
 
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
@@ -372,26 +379,26 @@ describe('SnapManager', () => {
 
 			// Override the getCurrentCommonAncestor mock for this specific test
 			const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
-			jest.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(parentFrameId)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(parentFrameId)
 
 			editor.getSortedChildIdsForParent.mockReturnValueOnce([childFrameId]) // Children of parent frame
 
-			editor.getShape.mockImplementation((id) => {
+			editor.getShape.mockImplementation((id: any) => {
 				if (id === parentFrameId) return parentFrame as any
 				if (id === childFrameId) return childFrame as any
 				return undefined
 			})
 
-			editor.isShapeOfType.mockImplementation((shape, type) => type === 'frame')
+			editor.isShapeOfType.mockImplementation((shape: any, type: any) => type === 'frame')
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
 			const result = snapManager.getSnappableShapes()
 			expect(result.has(childFrameId)).toBe(true)
 
 			// Restore original method
-			jest
-				.spyOn(snapManager, 'getCurrentCommonAncestor')
-				.mockImplementation(originalGetCurrentCommonAncestor)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
+				originalGetCurrentCommonAncestor
+			)
 		})
 
 		it('should handle missing shape bounds gracefully', () => {
@@ -422,7 +429,7 @@ describe('SnapManager', () => {
 
 			// Override the getCurrentCommonAncestor mock for this specific test
 			const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
-			jest.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(undefined)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(undefined)
 
 			editor.getCurrentPageId.mockReturnValue('page:current' as TLPageId)
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
@@ -433,9 +440,9 @@ describe('SnapManager', () => {
 			expect(editor.getSortedChildIdsForParent).toHaveBeenCalledWith('page:current')
 
 			// Restore original method
-			jest
-				.spyOn(snapManager, 'getCurrentCommonAncestor')
-				.mockImplementation(originalGetCurrentCommonAncestor)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
+				originalGetCurrentCommonAncestor
+			)
 		})
 	})
 
@@ -470,7 +477,7 @@ describe('SnapManager', () => {
 
 			// Test with second set of shapes
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId1, shapeId2])
-			editor.getShape.mockImplementation((id) => {
+			editor.getShape.mockImplementation((id: any) => {
 				if (id === shapeId1) return createMockShape(shapeId1) as any
 				if (id === shapeId2) return createMockShape(shapeId2) as any
 				return undefined

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

@@ -1,17 +1,21 @@
+import { vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { TextManager, TLMeasureTextSpanOpts } from './TextManager'
 
 // Create a simple mock DOM environment
 const mockElement = {
-	classList: { add: jest.fn() },
+	classList: { add: vi.fn() },
 	tabIndex: -1,
-	cloneNode: jest.fn(),
+	cloneNode: vi.fn(),
 	innerHTML: '',
 	textContent: '',
-	setAttribute: jest.fn(),
-	style: { setProperty: jest.fn() },
+	setAttribute: vi.fn(),
+	style: {
+		setProperty: vi.fn(),
+		getPropertyValue: vi.fn(() => ''),
+	},
 	scrollWidth: 100,
-	getBoundingClientRect: jest.fn(() => ({
+	getBoundingClientRect: vi.fn(() => ({
 		width: 100,
 		height: 20,
 		left: 0,
@@ -19,22 +23,44 @@ const mockElement = {
 		right: 100,
 		bottom: 20,
 	})),
-	remove: jest.fn(),
-	insertAdjacentElement: jest.fn(),
+	remove: vi.fn(),
+	insertAdjacentElement: vi.fn(),
 	childNodes: [],
 }
 
 // Mock document.createElement to return our mock element
-const mockCreateElement = jest.fn(() => {
+const mockCreateElement = vi.fn(() => {
 	const element = { ...mockElement }
-	element.cloneNode = jest.fn(() => ({ ...element }))
+	element.cloneNode = vi.fn(() => ({ ...element }))
+
+	// Make textContent and innerHTML reactive like real DOM elements
+	let _textContent = ''
+	let _innerHTML = ''
+
+	Object.defineProperty(element, 'textContent', {
+		get: () => _textContent,
+		set: (value) => {
+			_textContent = value || ''
+			// When textContent is set, innerHTML should be the escaped version
+			_innerHTML = _textContent
+		},
+	})
+
+	Object.defineProperty(element, 'innerHTML', {
+		get: () => _innerHTML,
+		set: (value) => {
+			_innerHTML = value || ''
+			_textContent = _innerHTML // Simple approximation
+		},
+	})
+
 	return element
 })
 
 // Mock editor
 const mockEditor = {
-	getContainer: jest.fn(() => ({
-		appendChild: jest.fn(),
+	getContainer: vi.fn(() => ({
+		appendChild: vi.fn(),
 	})),
 } as unknown as Editor
 
@@ -43,10 +69,10 @@ global.document = {
 	createElement: mockCreateElement,
 } as any
 
-global.Range = jest.fn(() => ({
-	setStart: jest.fn(),
-	setEnd: jest.fn(),
-	getClientRects: jest.fn(() => [
+global.Range = vi.fn(() => ({
+	setStart: vi.fn(),
+	setEnd: vi.fn(),
+	getClientRects: vi.fn(() => [
 		{
 			width: 10,
 			height: 16,
@@ -62,7 +88,7 @@ describe('TextManager', () => {
 	let textManager: TextManager
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 		textManager = new TextManager(mockEditor)
 	})
 
@@ -86,13 +112,13 @@ describe('TextManager', () => {
 		}
 
 		it('should call measureHtml with normalized text', () => {
-			const spy = jest.spyOn(textManager, 'measureHtml')
+			const spy = vi.spyOn(textManager, 'measureHtml')
 			textManager.measureText('Hello World', defaultOpts)
 			expect(spy).toHaveBeenCalledWith('Hello World', defaultOpts)
 		})
 
 		it('should normalize line breaks', () => {
-			const spy = jest.spyOn(textManager, 'measureHtml')
+			const spy = vi.spyOn(textManager, 'measureHtml')
 			textManager.measureText('Hello\nWorld\r\nTest', defaultOpts)
 			// The text should be normalized to use consistent line breaks
 			expect(spy).toHaveBeenCalled()
@@ -247,7 +273,7 @@ describe('TextManager', () => {
 
 		it('should return array of text spans for non-empty text', () => {
 			// Mock measureElementTextNodeSpans to return some spans
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello World',
@@ -266,7 +292,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle wrap overflow', () => {
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello World',
@@ -284,8 +310,7 @@ describe('TextManager', () => {
 
 		it('should handle truncate-ellipsis overflow', () => {
 			// Mock the calls for ellipsis handling
-			jest
-				.spyOn(textManager, 'measureElementTextNodeSpans')
+			vi.spyOn(textManager, 'measureElementTextNodeSpans')
 				.mockReturnValueOnce({
 					spans: [
 						{
@@ -321,7 +346,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle truncate-clip overflow', () => {
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello Wo',
@@ -338,7 +363,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle different text alignments', () => {
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',
@@ -358,7 +383,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle custom font properties', () => {
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',
@@ -382,7 +407,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle other styles', () => {
-			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',

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

@@ -1,28 +1,29 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TickManager } from './TickManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 // Mock Date.now to control time
-const mockDateNow = jest.fn()
+const mockDateNow = vi.fn()
 Date.now = mockDateNow
 
 // Mock requestAnimationFrame and cancelAnimationFrame
-const mockRequestAnimationFrame = jest.fn()
-const mockCancelAnimationFrame = jest.fn()
+const mockRequestAnimationFrame = vi.fn()
+const mockCancelAnimationFrame = vi.fn()
 global.requestAnimationFrame = mockRequestAnimationFrame
 global.cancelAnimationFrame = mockCancelAnimationFrame
 
 describe('TickManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let tickManager: TickManager
-	let mockEmit: jest.Mock
-	let mockDisposablesAdd: jest.Mock
+	let mockEmit: Mock
+	let mockDisposablesAdd: Mock
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		// Reset time
 		mockDateNow.mockReturnValue(1000)
@@ -37,8 +38,8 @@ describe('TickManager', () => {
 
 		mockCancelAnimationFrame.mockImplementation(() => {})
 
-		mockEmit = jest.fn()
-		mockDisposablesAdd = jest.fn()
+		mockEmit = vi.fn()
+		mockDisposablesAdd = vi.fn()
 
 		editor = {
 			emit: mockEmit,
@@ -90,7 +91,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel existing RAF before starting new one', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.start()
@@ -143,7 +144,7 @@ describe('TickManager', () => {
 		})
 
 		it('should update pointer velocity', () => {
-			const updatePointerVelocitySpy = jest.spyOn(tickManager as any, 'updatePointerVelocity')
+			const updatePointerVelocitySpy = vi.spyOn(tickManager as any, 'updatePointerVelocity')
 			tickManager.now = 1000
 			mockDateNow.mockReturnValue(1016)
 
@@ -176,7 +177,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel RAF if exists', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.dispose()

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

@@ -1,17 +1,15 @@
 import { atom } from '@tldraw/state'
+import { Mocked, vi } from 'vitest'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
 import { UserPreferencesManager } from './UserPreferencesManager'
 
 // Mock window.matchMedia
-const mockMatchMedia = jest.fn()
-Object.defineProperty(window, 'matchMedia', {
-	writable: true,
-	value: mockMatchMedia,
-})
+const mockMatchMedia = vi.fn()
+window.matchMedia = mockMatchMedia
 
 describe('UserPreferencesManager', () => {
-	let mockUser: jest.Mocked<TLUser>
+	let mockUser: Mocked<TLUser>
 	let mockUserPreferences: TLUserPreferences
 	let userPreferencesAtom: any
 	let userPreferencesManager: UserPreferencesManager
@@ -36,14 +34,14 @@ describe('UserPreferencesManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		mockUserPreferences = createMockUserPreferences()
 		userPreferencesAtom = atom('userPreferences', mockUserPreferences)
 
 		mockUser = {
 			userPreferences: userPreferencesAtom,
-			setUserPreferences: jest.fn((prefs) => {
+			setUserPreferences: vi.fn((prefs) => {
 				userPreferencesAtom.set(prefs)
 			}),
 		}
@@ -51,8 +49,8 @@ describe('UserPreferencesManager', () => {
 		// Default matchMedia mock - no dark mode preference
 		mockMatchMedia.mockReturnValue({
 			matches: false,
-			addEventListener: jest.fn(),
-			removeEventListener: jest.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
 		})
 	})
 
@@ -66,17 +64,14 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
 			// Restore matchMedia
-			Object.defineProperty(window, 'matchMedia', {
-				writable: true,
-				value: mockMatchMedia,
-			})
+			window.matchMedia = mockMatchMedia
 		})
 
 		it('should initialize with light system color scheme when dark mode not preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -87,8 +82,8 @@ describe('UserPreferencesManager', () => {
 		it('should initialize with dark system color scheme when dark mode preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: true,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -97,8 +92,8 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should set up media query listener for color scheme changes', () => {
-			const mockAddEventListener = jest.fn()
-			const mockRemoveEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
@@ -112,7 +107,7 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should handle media query change events', () => {
-			const mockAddEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
 			mockMatchMedia.mockReturnValue({
@@ -123,7 +118,7 @@ describe('UserPreferencesManager', () => {
 					}
 					mockAddEventListener(event, handler)
 				},
-				removeEventListener: jest.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -153,11 +148,11 @@ describe('UserPreferencesManager', () => {
 
 	describe('dispose', () => {
 		it('should remove media query listener on dispose', () => {
-			const mockRemoveEventListener = jest.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
+				addEventListener: vi.fn(),
 				removeEventListener: mockRemoveEventListener,
 			})
 
@@ -170,8 +165,8 @@ describe('UserPreferencesManager', () => {
 		it('should call all disposables', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
 
-			const mockDisposable1 = jest.fn()
-			const mockDisposable2 = jest.fn()
+			const mockDisposable1 = vi.fn()
+			const mockDisposable2 = vi.fn()
 
 			userPreferencesManager.disposables.add(mockDisposable1)
 			userPreferencesManager.disposables.add(mockDisposable2)

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

@@ -13,7 +13,7 @@ export class UserPreferencesManager {
 		private readonly user: TLUser,
 		private readonly inferDarkMode: boolean
 	) {
-		if (typeof window === 'undefined' || !('matchMedia' in window)) return
+		if (typeof window === 'undefined' || !window.matchMedia) return
 
 		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -341,6 +341,20 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return false
 	}
 
+	/**
+	 * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
+	 * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
+	 * padding is skipped _if the bounds of that shape contains all the other shapes_. This is
+	 * useful in cases like annotating on top of an image, where you usually want to avoid extra
+	 * padding around the image if you don't need it.
+	 *
+	 * @param _shape - The shape to check
+	 * @returns True if this shape should be treated as an export bounds container
+	 */
+	isExportBoundsContainer(_shape: Shape): boolean {
+		return false
+	}
+
 	/**
 	 * Get a JSX element for the shape (as an HTML element) to be rendered as part of the canvas background - behind any other shape content.
 	 *