tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-arrows.json 1`] = `
 {
   "binding:8": {
     "fromId": "shape:7",
@@ -149,13 +149,20 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
       "kind": "arc",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -166,7 +173,7 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-elbow-arrows.json 1`] = `
 {
   "binding:7": {
     "fromId": "shape:6",
@@ -315,13 +322,20 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
       "kind": "elbow",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -332,7 +346,7 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures image.json 1`] = `
+exports[`putExcalidrawContent test fixtures > image.json 1`] = `
 {
   "asset:5": {
     "id": "asset:5",
@@ -390,7 +404,7 @@ exports[`putExcalidrawContent test fixtures image.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures line-drawing.json 1`] = `
+exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
 {
   "document:document": {
     "gridSize": 10,

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -143,7 +143,7 @@ export async function putExcalidrawContent(
 						align,
 						dash: getDash(element),
 						fill: getFill(element),
-					},
+					} as any,
 				})
 				break
 			}
@@ -165,7 +165,7 @@ export async function putExcalidrawContent(
 								})),
 							},
 						],
-					},
+					} as any,
 				})
 				break
 			}
@@ -192,7 +192,7 @@ export async function putExcalidrawContent(
 								})
 							),
 						},
-					},
+					} as any,
 				})
 
 				break
@@ -221,7 +221,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						text,
+						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
 						dash: getDash(element),
@@ -231,7 +231,7 @@ export async function putExcalidrawContent(
 						end: { x: end[0], y: end[1] },
 						arrowheadEnd: arrowheadsToArrowheadTypes[element.endArrowhead] ?? 'none',
 						arrowheadStart: arrowheadsToArrowheadTypes[element.startArrowhead] ?? 'none',
-					},
+					} as any,
 				})
 
 				if (startTargetId) {
@@ -281,7 +281,7 @@ export async function putExcalidrawContent(
 						color: colorsToColors[element.strokeColor] ?? 'black',
 						richText: toRichText(element.text),
 						textAlign: textAlignToTextAlignTypes[element.textAlign],
-					},
+					} as any,
 				})
 				break
 			}
@@ -313,7 +313,7 @@ export async function putExcalidrawContent(
 						w: element.width,
 						h: element.height,
 						assetId,
-					},
+					} as any,
 				})
 			}
 		}

package/src/lib/utils/export/copyAs.ts

@@ -31,30 +31,7 @@ export interface CopyAsOptions extends TLImageExportOptions {
  *
  * @public
  */
-export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>
-/**
- * @deprecated The format parameter is now part of the opts object.
- * @public
- */
-export function copyAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format: TLCopyType,
-	opts?: TLImageExportOptions & { format?: undefined }
-): Promise<void>
-export function copyAs(
-	...args:
-		| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format: TLCopyType,
-				opts?: TLImageExportOptions & { format?: undefined },
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args
-
+export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {
 	// Note:  it's important that this function itself isn't async and doesn't really use promises -
 	// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write
 	// synchronously to make sure safari knows that the user _wants_ to copy See

package/src/lib/utils/export/export.ts

@@ -1,7 +1,6 @@
 import {
 	Editor,
 	FileHelpers,
-	TLExportType,
 	TLImageExportOptions,
 	TLShapeId,
 	exhaustiveSwitchError,
@@ -35,41 +34,6 @@ export async function exportToString(
 	}
 }
 
-/**
- * Export the given shapes as a blob.
- * @param editor - The editor instance.
- * @param ids - The ids of the shapes to export.
- * @param format - The format to export as.
- * @param opts - Rendering options.
- * @returns A promise that resolves to a blob.
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
- * @public
- */
-export async function exportToBlob({
-	editor,
-	ids,
-	format,
-	opts = {},
-}: {
-	editor: Editor
-	ids: TLShapeId[]
-	format: TLExportType
-	opts?: TLImageExportOptions
-}): Promise<Blob> {
-	const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]
-	switch (format) {
-		case 'jpeg':
-		case 'png':
-		case 'webp':
-		case 'svg': {
-			return (await editor.toImage(idsToUse, { ...opts, format })).blob
-		}
-		default: {
-			exhaustiveSwitchError(format)
-		}
-	}
-}
-
 const clipboardMimeTypesByFormat = {
 	jpeg: 'image/jpeg',
 	png: 'image/png',

package/src/lib/utils/export/exportAs.ts

@@ -28,38 +28,7 @@ export async function exportAs(
 	editor: Editor,
 	ids: TLShapeId[],
 	opts: ExportAsOptions
-): Promise<void>
-/**
- * @deprecated The format & name parameters are now part of the opts object.
- * @public
- */
-export async function exportAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format?: TLExportType,
-	name?: string,
-	opts?: TLImageExportOptions
-): Promise<void>
-export async function exportAs(
-	...args:
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				opts: TLImageExportOptions & { format: TLExportType; name?: string },
-		  ]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format?: TLExportType,
-				name?: string,
-				opts?: TLImageExportOptions,
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'object'
-			? args
-			: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]
-
+): Promise<void> {
 	// If we don't get name then use a predefined one
 	let name = opts.name
 	if (!name) {

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > arrow-binding.tldr 1`] = `
 {
   "binding:12": {
     "fromId": "shape:11",
@@ -112,13 +112,20 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 146.32,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -166,7 +173,7 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > exact-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",
@@ -241,13 +248,20 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 293.36,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -332,7 +346,7 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > incorrect-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",
@@ -389,13 +403,20 @@ exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 252.64,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -405,7 +405,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 									...inCommon,
 									type: 'arrow',
 									props: {
-										text: v1Shape.label ?? '',
+										richText: toRichText(v1Shape.label ?? ''),
 										color: getV2Color(v1Shape.style.color),
 										labelColor: getV2Color(v1Shape.style.color),
 										size: getV2Size(v1Shape.style.size),
@@ -562,6 +562,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										y: point.y,
 									},
 									isPrecise: point.x !== 0.5 || point.y !== 0.5,
+									isCreatingShape: true,
 								})
 
 								if (change) {

package/src/test/A11y.test.tsx

@@ -1,16 +1,17 @@
 import { createShapeId, toRichText } from '@tldraw/editor'
+import { Mock, vi } from 'vitest'
 import { generateShapeAnnouncementMessage } from '../lib/ui/components/A11y'
 import { TestEditor } from './TestEditor'
 
 describe('A11y Shape Announcements', () => {
 	let editor: TestEditor
-	let mockTranslate: jest.Mock
+	let mockTranslate: Mock
 
 	beforeEach(() => {
 		editor = new TestEditor()
 
 		// Create a simple translation mock
-		mockTranslate = jest.fn((key) => {
+		mockTranslate = vi.fn((key) => {
 			if (key === 'a11y.multiple-shapes') return '{num} shapes selected'
 			if (key === 'a11y.shape') return 'Shape'
 			if (key === 'a11y.text') return 'Text'

package/src/test/ClickManager.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -10,7 +11,7 @@ beforeEach(() => {
 	editor._transformPointerUpSpy.mockRestore()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 describe('Handles events', () => {
 	it('Emits single click events', () => {
@@ -23,7 +24,7 @@ describe('Handles events', () => {
 		const eventsBeforeSettle = [{ name: 'pointer_down' }, { name: 'pointer_up' }]
 
 		// allow time for settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		// nothing should have settled
 		expect(events).toMatchObject(eventsBeforeSettle)
@@ -64,7 +65,7 @@ describe('Handles events', () => {
 		}
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -110,7 +111,7 @@ describe('Handles events', () => {
 		expect(eventsBeforeSettle).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -162,7 +163,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -218,7 +219,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject(eventsBeforeSettle)
 

package/src/test/Editor.test.tsx

@@ -4,6 +4,7 @@ import {
 	Geometry2d,
 	PageRecordType,
 	Rectangle2d,
+	TLBaseShape,
 	TLGeoShapeProps,
 	TLShape,
 	TldrawEditorProps,
@@ -14,6 +15,7 @@ import {
 	loadSnapshot,
 	react,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -33,7 +35,7 @@ beforeEach(() => {
 	editor = new TestEditor({})
 
 	editor.createShapes([
-		// on it's own
+		// on its own
 		{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
 		// in a frame
 		{ id: ids.frame1, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },
@@ -415,24 +417,24 @@ describe('isFocused', () => {
 	})
 
 	it('becomes true when the container div receives a focus event', () => {
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 	})
 
 	it('becomes false when the container div receives a blur event', () => {
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 
 		editor.elm.blur()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -444,13 +446,13 @@ describe('isFocused', () => {
 		editor.elm.blur()
 		const child = document.createElement('div')
 		editor.elm.appendChild(child)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 		child.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -466,11 +468,23 @@ describe('isFocused', () => {
 
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 })
 
+declare module '@tldraw/tlschema' {
+	export interface GlobalShapePropsMap {
+		blorg: TLBaseShape<
+			'blorg',
+			{
+				w: number
+				h: number
+			}
+		>
+	}
+}
+
 describe('getShapeUtil', () => {
 	let myUtil: any
 
@@ -518,16 +532,22 @@ describe('getShapeUtil', () => {
 	})
 
 	it('throws if that shape type isnt registered', () => {
-		const myMissingShape = { type: 'missing' } as TLShape
-		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
-		)
+		const myMissingShape = { type: 'missing' }
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				myMissingShape
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 
 	it('throws if that type isnt registered', () => {
-		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
-		)
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				'missing'
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 })
 
@@ -603,14 +623,14 @@ describe('snapshots', () => {
 
 describe('when the user prefers dark UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: query === '(prefers-color-scheme: dark)',
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -630,14 +650,14 @@ describe('when the user prefers dark UI', () => {
 
 describe('when the user prefers light UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: false,
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -722,7 +742,7 @@ describe('dragging', () => {
 })
 
 describe('getShapeVisibility', () => {
-	const getShapeVisibility = jest.fn(((shape: TLShape) => {
+	const getShapeVisibility = vi.fn(((shape: TLShape) => {
 		return shape.meta.visibility as any
 	}) satisfies TldrawEditorProps['getShapeVisibility'])
 
@@ -865,9 +885,17 @@ describe('instance.isReadonly', () => {
 	})
 })
 
+type MyCustomShape = TLBaseShape<'my-custom-shape', { w: number; h: number }>
+
+declare module '@tldraw/tlschema' {
+	export interface GlobalShapePropsMap {
+		'my-custom-shape': MyCustomShape
+	}
+}
+
 describe('the geometry cache', () => {
-	class CustomShapeUtil extends BaseBoxShapeUtil<any> {
-		static override type = 'custom'
+	class CustomShapeUtil extends BaseBoxShapeUtil<MyCustomShape> {
+		static override type = 'custom' as const
 
 		getDefaultProps() {
 			return {
@@ -895,7 +923,7 @@ describe('the geometry cache', () => {
 		})
 		const { A } = editor.createShapesFromJsx([<TL.custom ref="A" x={0} y={0} w={100} h={100} />])
 		expect(editor.getShapePageBounds(A)!.width).toBe(100)
-		editor.updateShape({ id: A, type: 'custom', meta: { double: true } })
+		editor.updateShape({ id: A, type: 'my-custom-shape', meta: { double: true } })
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })