tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/test/bookmark-shapes.test.ts

@@ -1,5 +1,8 @@
 import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
-import { getHumanReadableAddress } from '../lib/shapes/bookmark/BookmarkShapeUtil'
+import {
+	BookmarkShapeUtil,
+	getHumanReadableAddress,
+} from '../lib/shapes/bookmark/BookmarkShapeUtil'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -11,6 +14,10 @@ afterEach(() => {
 	editor?.dispose()
 })
 
+describe(BookmarkShapeUtil, () => {
+	return
+})
+
 describe('The URL formatter', () => {
 	it('Formats URLs as human-readable', () => {
 		const ids = {

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Matches a snapshot > Basic SVG 1`] = `
+exports[`Matches a snapshot: Basic SVG 1`] = `
 <wrapper>
   <svg
     class="tl-container tl-theme__force-sRGB tl-theme__light"
@@ -64,13 +64,6 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
           y="0"
         />
       </pattern>
-      <style>
-        @font-face {
-  font-family: "tldraw_draw";
-  font-weight: normal;
-  src: url("data:font/woff2;base64,") format(woff2);
-}
-      </style>
     </defs>
     <g
       opacity="1"
@@ -90,15 +83,14 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
         y="0"
       >
         <div
-          style="display: block; font-family: serif; height: 0px; justify-content: center; align-items: center; padding: 0px; position: static; width: 0px; margin: 0px; border: 0px; font-size: 16px; line-height: normal; color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0);"
+          style="display: flex; font-family: 'tldraw_draw', sans-serif; height: 100%; justify-content: center; align-items: center; padding: 16px 16px 16px 16px; visibility: visible;"
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(0, 0, 0); line-height: 1.35; text-align: center; width: 0px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); position: static; height: 0px; margin: 0px; padding: 0px; border: 0px;"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap;"
           >
             <p
               dir="auto"
-              style="position: static; width: 0px; height: 0px; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);"
             >
               Hello world
             </p>
@@ -140,7 +132,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
 </wrapper>
 `;
 
-exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
+exports[`Returns all shapes when no ids are provided: All shapes 1`] = `
 <wrapper>
   <svg
     class="tl-container tl-theme__force-sRGB tl-theme__light"
@@ -204,13 +196,6 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
           y="0"
         />
       </pattern>
-      <style>
-        @font-face {
-  font-family: "tldraw_draw";
-  font-weight: normal;
-  src: url("data:font/woff2;base64,") format(woff2);
-}
-      </style>
     </defs>
     <g
       opacity="1"
@@ -230,15 +215,14 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
         y="0"
       >
         <div
-          style="display: block; font-family: serif; height: 0px; justify-content: center; align-items: center; padding: 0px; position: static; width: 0px; margin: 0px; border: 0px; font-size: 16px; line-height: normal; color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0);"
+          style="display: flex; font-family: 'tldraw_draw', sans-serif; height: 100%; justify-content: center; align-items: center; padding: 16px 16px 16px 16px; visibility: visible;"
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(0, 0, 0); line-height: 1.35; text-align: center; width: 0px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); position: static; height: 0px; margin: 0px; padding: 0px; border: 0px;"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap;"
           >
             <p
               dir="auto"
-              style="position: static; width: 0px; height: 0px; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 0, 0);"
             >
               Hello world
             </p>

package/src/test/commands/__snapshots__/packShapes.test.ts.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`editor.packShapes > packs rotated shapes > packed shapes 1`] = `
+exports[`editor.packShapes packs rotated shapes: packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -116,7 +116,7 @@ exports[`editor.packShapes > packs rotated shapes > packed shapes 1`] = `
 ]
 `;
 
-exports[`editor.packShapes > packs shapes > packed shapes 1`] = `
+exports[`editor.packShapes packs shapes using the adjacent shape margin option: packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -152,7 +152,7 @@ exports[`editor.packShapes > packs shapes > packed shapes 1`] = `
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 84,
+    "x": 99,
     "y": 200,
   },
   {
@@ -226,13 +226,13 @@ exports[`editor.packShapes > packs shapes > packed shapes 1`] = `
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 316,
+    "x": 301,
     "y": 200,
   },
 ]
 `;
 
-exports[`editor.packShapes > packs shapes using the adjacent shape margin option > packed shapes 1`] = `
+exports[`editor.packShapes packs shapes: packed shapes 1`] = `
 [
   {
     "id": "shape:boxA",
@@ -268,7 +268,7 @@ exports[`editor.packShapes > packs shapes using the adjacent shape margin option
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 99,
+    "x": 84,
     "y": 200,
   },
   {
@@ -342,7 +342,7 @@ exports[`editor.packShapes > packs shapes using the adjacent shape margin option
     "rotation": 0,
     "type": "geo",
     "typeName": "shape",
-    "x": 301,
+    "x": 316,
     "y": 200,
   },
 ]

package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`converts correctly > Zoom to Fit Camera 1`] = `
+exports[`converts correctly: Zoom to Fit Camera 1`] = `
 {
   "id": "static",
   "meta": {},

package/src/test/commands/alignShapes.test.tsx

@@ -1,12 +1,11 @@
 import { Box, PI, TLShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { TL } from '../test-jsx'
 
 let editor: TestEditor
 let ids: Record<string, TLShapeId>
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -23,10 +22,10 @@ describe('when less than two shapes are selected', () => {
 	it('does nothing', () => {
 		editor.setSelectedShapes([ids.boxB])
 
-		const fn = vi.fn()
+		const fn = jest.fn()
 		editor.store.listen(fn)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(fn).not.toHaveBeenCalled()
 	})
 })
@@ -35,7 +34,7 @@ describe('when multiple shapes are selected', () => {
 	it('does, undoes and redoes command', () => {
 		editor.markHistoryStoppingPoint('align')
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
 		editor.undo()
@@ -46,7 +45,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns top', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 0 },
@@ -57,7 +56,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns right', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 400 },
@@ -68,7 +67,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns bottom', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 400 },
@@ -79,7 +78,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns left', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0 },
@@ -90,7 +89,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns center horizontal', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 200 },
@@ -101,7 +100,7 @@ describe('when multiple shapes are selected', () => {
 
 	it('aligns center vertical', () => {
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, y: 200 },
@@ -130,9 +129,9 @@ describe('when multiple shapes are selected', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -169,9 +168,9 @@ describe('when multiple shapes are selected', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -209,9 +208,9 @@ describe('when multiple shapes are selected', () => {
 
 		editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC])
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([
 			editor.getShapePageBounds(ids.boxA)!,
@@ -252,9 +251,9 @@ describe('When shapes are parented to other shapes...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -274,9 +273,9 @@ describe('When shapes are parented to other shapes...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -340,9 +339,9 @@ describe('When shapes are parented to a rotated shape...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'left')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,
@@ -368,9 +367,9 @@ describe('When shapes are parented to a rotated shape...', () => {
 		])
 
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		const commonBoundsAfter = Box.Common([
 			editor.getShapePageBounds(ids.boxC)!,

package/src/test/commands/animationSpeed.test.ts

@@ -1,4 +1,3 @@
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -7,7 +6,7 @@ beforeEach(() => {
 	editor = new TestEditor()
 })
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 it('zooms in gradually when duration is present and animtion speed is default', () => {
 	expect(editor.getZoomLevel()).toBe(1)

package/src/test/commands/centerOnPoint.test.ts

@@ -1,4 +1,3 @@
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -15,9 +14,9 @@ it('centers on the point', () => {
 it('centers on the point with animation', () => {
 	editor.centerOnPoint({ x: 400, y: 400 }, { animation: { duration: 200 } })
 	expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 })
-	vi.advanceTimersByTime(100)
+	jest.advanceTimersByTime(100)
 	expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 })
-	vi.advanceTimersByTime(200)
+	jest.advanceTimersByTime(200)
 	expect(editor.getViewportPageCenter()).toMatchObject({ x: 400, y: 400 })
 })
 

package/src/test/commands/clipboard.test.ts

@@ -1,5 +1,4 @@
 import { createShapeId, TLArrowShape } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
 import { TestEditor } from '../TestEditor'
 
@@ -28,13 +27,13 @@ const doMockClipboard = () => {
 
 	Object.assign(window.navigator, {
 		clipboard: {
-			write: vi.fn((content: any) => {
+			write: jest.fn((content: any) => {
 				context.current = content
 			}),
 		},
 	})
 
-	globalThis.ClipboardItem = vi.fn((payload: any) => payload) as any
+	globalThis.ClipboardItem = jest.fn((payload: any) => payload) as any
 
 	return context
 }

package/src/test/commands/createShapes.test.ts

@@ -1,5 +1,4 @@
 import { DefaultColorStyle, TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -127,7 +126,7 @@ it('Throws out all shapes if any shape is invalid', () => {
 
 	expect(editor.getCurrentPageShapeIds().size).toBe(n + 1)
 
-	console.error = vi.fn()
+	console.error = jest.fn()
 
 	// But these will need to be thrown out
 	expect(() => {

package/src/test/commands/deletePage.test.ts

@@ -1,4 +1,4 @@
-import { PageRecordType, createShapeId } from '@tldraw/editor'
+import { PageRecordType } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -76,87 +76,4 @@ describe('deletePage', () => {
 		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
 		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
 	})
-
-	it('deletes all shapes that belong to the deleted page', () => {
-		// Create a second page
-		const page2Id = PageRecordType.createId('page2')
-		editor.createPage({ name: 'Page 2', id: page2Id })
-
-		// Switch to the second page
-		editor.setCurrentPage(page2Id)
-
-		// Add some shapes to the second page
-		const shape1Id = createShapeId('shape1')
-		const shape2Id = createShapeId('shape2')
-		const shape3Id = createShapeId('shape3')
-
-		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
-		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
-		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
-
-		// Verify shapes were created and belong to the second page
-		expect(editor.getShape(shape1Id)).toBeDefined()
-		expect(editor.getShape(shape2Id)).toBeDefined()
-		expect(editor.getShape(shape3Id)).toBeDefined()
-		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
-
-		// Delete the second page
-		editor.deletePage(page2Id)
-
-		// Verify the page was deleted
-		expect(editor.getPages().length).toBe(1)
-		expect(editor.getPages()[0].id).not.toBe(page2Id)
-
-		// Verify all shapes that belonged to the deleted page were also deleted
-		expect(editor.getShape(shape1Id)).toBeUndefined()
-		expect(editor.getShape(shape2Id)).toBeUndefined()
-		expect(editor.getShape(shape3Id)).toBeUndefined()
-	})
-
-	it('deletes locked shapes that belong to the deleted page', () => {
-		// Create a second page
-		const page2Id = PageRecordType.createId('page2')
-		editor.createPage({ name: 'Page 2', id: page2Id })
-
-		// Switch to the second page
-		editor.setCurrentPage(page2Id)
-
-		// Add some shapes to the second page
-		const shape1Id = createShapeId('shape1')
-		const shape2Id = createShapeId('shape2')
-		const shape3Id = createShapeId('shape3')
-
-		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
-		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
-		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
-
-		// Lock some of the shapes
-		editor.updateShape({ id: shape1Id, type: 'text', isLocked: true })
-		editor.updateShape({ id: shape2Id, type: 'geo', isLocked: true })
-
-		// Verify shapes were created and belong to the second page
-		expect(editor.getShape(shape1Id)).toBeDefined()
-		expect(editor.getShape(shape2Id)).toBeDefined()
-		expect(editor.getShape(shape3Id)).toBeDefined()
-		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
-		expect(editor.getShape(shape1Id)?.isLocked).toBe(true)
-		expect(editor.getShape(shape2Id)?.isLocked).toBe(true)
-		expect(editor.getShape(shape3Id)?.isLocked).toBe(false)
-
-		// Delete the second page
-		editor.deletePage(page2Id)
-
-		// Verify the page was deleted
-		expect(editor.getPages().length).toBe(1)
-		expect(editor.getPages()[0].id).not.toBe(page2Id)
-
-		// Verify all shapes that belonged to the deleted page were also deleted, including locked ones
-		expect(editor.getShape(shape1Id)).toBeUndefined()
-		expect(editor.getShape(shape2Id)).toBeUndefined()
-		expect(editor.getShape(shape3Id)).toBeUndefined()
-	})
 })

package/src/test/commands/deleteShapes.test.ts

@@ -1,5 +1,4 @@
 import { createBindingId, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
 import { TestEditor } from '../TestEditor'
 
@@ -13,7 +12,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()

package/src/test/commands/distributeShapes.test.tsx

@@ -1,9 +1,8 @@
 import { PI, TLShapeId, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { TL } from '../test-jsx'
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 let editor: TestEditor
 
@@ -47,10 +46,10 @@ describe('distributeShapes command', () => {
 	describe('when less than three shapes are selected', () => {
 		it('does nothing', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB])
-			const fn = vi.fn()
+			const fn = jest.fn()
 			editor.store.listen(fn)
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 			expect(fn).not.toHaveBeenCalled()
 		})
 	})
@@ -59,7 +58,7 @@ describe('distributeShapes command', () => {
 		it('distributeShapes horizontally', () => {
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, x: 0 },
 				{ id: ids.boxB, x: 200 },
@@ -71,7 +70,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxC, type: 'geo', x: 25 }])
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, x: 0 },
 				{ id: ids.boxB, x: 100 },
@@ -82,7 +81,7 @@ describe('distributeShapes command', () => {
 		it('distributeShapes vertically', () => {
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, y: 0 },
 				{ id: ids.boxB, y: 200 },
@@ -94,7 +93,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxC, type: 'geo', y: 25 }])
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, y: 0 },
 				{ id: ids.boxB, y: 100 },
@@ -136,7 +135,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },
@@ -178,7 +177,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },
@@ -223,7 +222,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },

package/src/test/commands/getSvgString.test.ts

@@ -1,5 +1,4 @@
 import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -15,7 +14,7 @@ function parseSvg({ svg }: { svg: string } = { svg: '' }) {
 	return parser.parseFromString(svg, 'image/svg+xml').firstElementChild as SVGSVGElement
 }
 
-vi.useRealTimers()
+jest.useRealTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()

package/src/test/commands/packShapes.test.ts

@@ -1,5 +1,4 @@
 import { createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -11,7 +10,7 @@ const ids = {
 	boxD: createShapeId('boxD'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -46,7 +45,7 @@ describe('editor.packShapes', () => {
 		editor.selectAll()
 		const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
 		editor.packShapes(editor.getSelectedShapeIds())
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')
@@ -58,7 +57,7 @@ describe('editor.packShapes', () => {
 		editor.selectAll()
 		const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
 		editor.packShapes(editor.getSelectedShapeIds(), 16)
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')
@@ -69,7 +68,7 @@ describe('editor.packShapes', () => {
 	it('packs rotated shapes', () => {
 		editor.updateShapes([{ id: ids.boxA, type: 'geo', rotation: Math.PI }])
 		editor.selectAll().packShapes(editor.getSelectedShapeIds(), 16)
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')

package/src/test/commands/resizeShape.test.ts

@@ -1,10 +1,9 @@
 import { createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 const ids = {
 	boxA: createShapeId('boxA'),