tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

package/src/test/resizing.test.ts

@@ -20,6 +20,7 @@ import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { TestEditor } from './TestEditor'
 import { getSnapLines } from './getSnapLines'
 import { roundedBox } from './roundedBox'
+import { createDrawSegments } from './test-jsx'
 
 vi.useFakeTimers()
 
@@ -904,15 +905,12 @@ describe('When resizing a shape with children', () => {
 					x: 100,
 					y: 100,
 					props: {
-						segments: [
-							{
-								type: 'free',
-								points: [
-									{ x: 0, y: 0, z: 0.5 },
-									{ x: 100, y: 100, z: 0.5 },
-								],
-							},
-						],
+						segments: createDrawSegments([
+							[
+								{ x: 0, y: 0, z: 0.5 },
+								{ x: 100, y: 100, z: 0.5 },
+							],
+						]),
 					},
 				},
 			])
@@ -3876,10 +3874,8 @@ it('uses the cross cursor when create resizing', () => {
 describe('Resizing text from the right edge', () => {
 	it('Resizes text from the right edge', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([{ id, type: 'text', props: { richText: toRichText('H') } }])
-		editor.updateShapes<TLTextShape>([
-			{ id, type: 'text', props: { richText: toRichText('Hello World') } },
-		]) // auto size
+		editor.createShapes([{ id, type: 'text', props: { richText: toRichText('H') } }])
+		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello World') } }]) // auto size
 
 		editor.select(id)
 
@@ -3905,10 +3901,8 @@ describe('Resizing text from the right edge', () => {
 		editor.updateInstanceState({ isCoarsePointer: true })
 
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([{ id, type: 'text', props: { richText: toRichText('H') } }])
-		editor.updateShapes<TLTextShape>([
-			{ id, type: 'text', props: { richText: toRichText('Hello World') } },
-		]) // auto size
+		editor.createShapes([{ id, type: 'text', props: { richText: toRichText('H') } }])
+		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello World') } }]) // auto size
 
 		editor.select(id)
 
@@ -3954,7 +3948,7 @@ describe('When resizing near the edges of the screen', () => {
 
 describe('resizing text with autosize true', () => {
 	it('resizes text from the right side', () => {
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -3980,7 +3974,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the right side when alt key is pressed', () => {
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4007,7 +4001,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the left side', () => {
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4033,7 +4027,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the left side when alt is pressed', () => {
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4062,7 +4056,7 @@ describe('resizing text with autosize true', () => {
 
 describe('cancelling a resize operation', () => {
 	it('undoes any changes since the start of the resize operation', () => {
-		editor.createShape<TLGeoShape>({
+		editor.createShape({
 			type: 'geo',
 			x: 0,
 			y: 0,

package/src/test/selection-omnibus.test.ts

@@ -76,7 +76,7 @@ describe('Hovering shapes', () => {
 		editor.pointerMove(50, 50)
 		expect(editor.getHoveredShapeId()).toBe(null)
 
-		editor.updateShape<TLGeoShape>({
+		editor.updateShape({
 			id: ids.box1,
 			type: 'geo',
 			props: { richText: toRichText('hello') },
@@ -88,7 +88,7 @@ describe('Hovering shapes', () => {
 	})
 
 	it('selects a shape with a full label on pointer down', () => {
-		editor.updateShape<TLGeoShape>({
+		editor.updateShape({
 			id: ids.box1,
 			type: 'geo',
 			props: { richText: toRichText('hello') },
@@ -462,7 +462,7 @@ describe('when shape is hollow', () => {
 describe('when shape is a frame', () => {
 	let frame1: TLFrameShape
 	beforeEach(() => {
-		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
 		frame1 = editor.getShape<TLFrameShape>(ids.frame1)!
 	})
 
@@ -517,8 +517,8 @@ describe('when shape is a frame', () => {
 describe('When a shape is behind a frame', () => {
 	beforeEach(() => {
 		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
-		editor.createShape<TLGeoShape>({ id: ids.box1, type: 'geo', x: 25, y: 25 })
-		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape({ id: ids.box1, type: 'geo', x: 25, y: 25 })
+		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
 	})
 
 	it('does not select the shape when clicked inside', () => {
@@ -548,8 +548,8 @@ describe('when shape is inside of a frame', () => {
 	let frame1: TLFrameShape
 	let box1: TLGeoShape
 	beforeEach(() => {
-		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
-		editor.createShape<TLGeoShape>({
+		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape({
 			id: ids.box1,
 			parentId: ids.frame1,
 			type: 'geo',
@@ -703,15 +703,15 @@ describe('when a frame has multiple children', () => {
 	let box2: TLGeoShape
 	beforeEach(() => {
 		editor
-			.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
-			.createShape<TLGeoShape>({
+			.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+			.createShape({
 				id: ids.box1,
 				parentId: ids.frame1,
 				type: 'geo',
 				x: 25,
 				y: 25,
 			})
-			.createShape<TLGeoShape>({
+			.createShape({
 				id: ids.box2,
 				parentId: ids.frame1,
 				type: 'geo',
@@ -849,7 +849,7 @@ describe('When shapes are overlapping', () => {
 	let box4: TLGeoShape
 	let box5: TLGeoShape
 	beforeEach(() => {
-		editor.createShapes<TLGeoShape>([
+		editor.createShapes([
 			{
 				id: ids.box1,
 				type: 'geo',
@@ -2194,7 +2194,7 @@ describe('long press', () => {
 	it('works correctly with screenbounds offset', () => {
 		editor.updateViewportScreenBounds(new Box(100, 100, 800, 600))
 		editor.pointerDown(201, 202)
-		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
 	})
 
 	it('works correctly with screenbounds offset', () => {
@@ -2202,7 +2202,7 @@ describe('long press', () => {
 		editor.pointerDown(201, 202)
 		vi.advanceTimersByTime(1000)
 		// without the fix added in this PR, it would have been 1, 2
-		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
 	})
 })
 

package/src/test/shapeutils.test.ts

@@ -470,7 +470,7 @@ describe('When interacting with a shape...', () => {
 	})
 
 	it('Fires handle dragging cancel events', () => {
-		const util = editor.getShapeUtil<TLLineShape>('line')
+		const util = editor.getShapeUtil('line')
 
 		const calls: string[] = []
 

package/src/test/spacebarPanning.test.ts

@@ -16,16 +16,16 @@ beforeEach(() => {
 
 it('Sets cursor and state correctly', () => {
 	expect(editor.getInstanceState().cursor.type).toBe('default')
-	expect(editor.inputs.isPanning).toBe(false)
+	expect(editor.inputs.getIsPanning()).toBe(false)
 	editor.keyDown(' ')
-	expect(editor.inputs.isPanning).toBe(true)
+	expect(editor.inputs.getIsPanning()).toBe(true)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.pointerDown(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grabbing')
 	editor.pointerUp(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.keyUp(' ')
-	expect(editor.inputs.isPanning).toBe(false)
+	expect(editor.inputs.getIsPanning()).toBe(false)
 	expect(editor.getInstanceState().cursor.type).toBe('default')
 })
 
@@ -37,16 +37,34 @@ it('When holding spacebar and clicking and dragging, it pans the camera', () =>
 	editor.keyUp(' ')
 })
 
-it('When holding spacebar, it updates cursor and does not send events to the state or change statecharts current active state', () => {
-	editor.pointerDown(150, 150, { target: 'canvas' })
-	editor.pointerMove(100, 100)
-	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+it('When spacebar is held during pointer interaction, it activates panning', () => {
+	// This test verifies that holding spacebar prevents pointer events from
+	// being sent to the state chart, and instead activates panning mode.
+	editor.select(ids.box1)
+
+	// Start with pointer down on the shape
+	editor.pointerDown(150, 150, ids.box1)
 
+	// Hold spacebar before moving - should activate panning
 	editor.keyDown(' ')
-	editor.pointerMove(200, 200)
-	editor.expectCameraToBe(100, 100, 1)
-	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+	expect(editor.inputs.getIsPanning()).toBe(true)
+	expect(editor.getInstanceState().cursor.type).toBe('grabbing') // 'grabbing' because pointer is down
+
+	// Moving the pointer should pan the camera, not translate the shape
+	const initialCamera = editor.getCamera()
+	editor.pointerMove(100, 100)
+
+	// Camera should have moved (panning)
+	const newCamera = editor.getCamera()
+	expect(newCamera.x).not.toBe(initialCamera.x)
+	expect(newCamera.y).not.toBe(initialCamera.y)
+
+	// Shape should not have moved (not translating)
+	editor.expectShapeToMatch({ id: ids.box1, x: 100, y: 100 })
+
+	editor.pointerUp()
 	editor.keyUp(' ')
+	expect(editor.inputs.getIsPanning()).toBe(false)
 })
 
 it('When holding spacebar, pressing the arrow keys moves over by one viewport', () => {

package/src/test/styles2.test.tsx

@@ -88,7 +88,7 @@ describe('Editor.styles', () => {
 	})
 
 	it('should return mixed for all mixed styles', () => {
-		editor.updateShapes<TLGeoShape>([
+		editor.updateShapes([
 			{
 				id: defaultShapesIds.box1,
 				type: 'geo',

package/src/test/styles3.test.ts

@@ -1,4 +1,4 @@
-import { TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
+import { createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -14,7 +14,7 @@ afterEach(() => {
 it("When changing the style of a geo shape, if the text label is empty, don't measure it", () => {
 	const id = createShapeId()
 
-	editor.createShapes<TLGeoShape>([
+	editor.createShapes([
 		{
 			id,
 			type: 'geo',
@@ -29,7 +29,7 @@ it("When changing the style of a geo shape, if the text label is empty, don't me
 
 	const boundsBefore = editor.getShapeGeometry(id).bounds
 
-	editor.updateShapes<TLGeoShape>([
+	editor.updateShapes([
 		{
 			id,
 			type: 'geo',
@@ -43,7 +43,7 @@ it("When changing the style of a geo shape, if the text label is empty, don't me
 it('When changing the style of a geo shape, if the text label has text, measure it and possibly update the size', () => {
 	const id = createShapeId()
 
-	editor.createShapes<TLGeoShape>([
+	editor.createShapes([
 		{
 			id,
 			type: 'geo',
@@ -58,7 +58,7 @@ it('When changing the style of a geo shape, if the text label has text, measure
 
 	const boundsBefore = editor.getShapeGeometry(id).bounds!
 
-	editor.updateShapes<TLGeoShape>([
+	editor.updateShapes([
 		{
 			id,
 			type: 'geo',

package/src/test/test-jsx.tsx

@@ -5,8 +5,7 @@ import {
 	TLBinding,
 	TLBindingCreate,
 	TLBindingId,
-	TLDefaultBinding,
-	TLDefaultShape,
+	TLShape,
 	TLShapeId,
 	TLShapePartial,
 	ZERO_INDEX_KEY,
@@ -20,9 +19,13 @@ import {
 } from '@tldraw/editor'
 import React, { Fragment } from 'react'
 
+// Re-export test helpers from their new location
+export { base64ToPoints, createDrawSegments, pointsToBase64 } from '../lib/utils/test-helpers'
+
 const shapeTypeSymbol = Symbol('shapeJsx')
 const assetTypeSymbol = Symbol('assetJsx')
 const bindingTypeSymbol = Symbol('bindingJsx')
+
 interface CommonShapeProps {
 	x?: number
 	y?: number
@@ -34,7 +37,6 @@ interface CommonShapeProps {
 	opacity?: number
 }
 
-type ShapeByType<Type extends TLDefaultShape['type']> = Extract<TLDefaultShape, { type: Type }>
 type FormatShapeProps<Props extends object> = {
 	[K in keyof Props]?: Props[K] extends TLAssetId
 		? TLAssetId | React.JSX.Element
@@ -42,24 +44,39 @@ type FormatShapeProps<Props extends object> = {
 			? TLAssetId | React.JSX.Element | null
 			: Props[K]
 }
-type PropsForShape<Type extends string> = Type extends TLDefaultShape['type']
-	? CommonShapeProps & FormatShapeProps<ShapeByType<Type>['props']>
-	: CommonShapeProps & Record<string, unknown>
+type PropsForShape<Type extends TLShape['type']> = CommonShapeProps &
+	FormatShapeProps<TLShape<Type>['props']>
 
 type AssetByType<Type extends TLAsset['type']> = Extract<TLAsset, { type: Type }>
 type PropsForAsset<Type extends string> = Type extends TLAsset['type']
 	? Partial<AssetByType<Type>['props']>
 	: Record<string, unknown>
 
-interface CommonBindingProps {
+interface BindingReactConnections {
 	from?: string | TLShapeId
 	to: string | TLShapeId
 }
 
-type BindingByType<Type extends TLBinding['type']> = Extract<TLBinding, { type: Type }>
-type PropsForBinding<Type extends string> = Type extends TLBinding['type']
-	? CommonBindingProps & Partial<BindingByType<Type>['props']>
-	: CommonBindingProps & Record<string, unknown>
+interface CommonBindingReactProps extends BindingReactConnections {
+	ref?: string
+	id?: TLBindingId
+}
+
+type ReactPropsForBinding<Type extends TLBinding['type']> = CommonBindingReactProps &
+	Partial<TLBinding<Type>['props']>
+
+type BindingToCreate = TLBinding extends infer E
+	? E extends TLBinding
+		? {
+				type: E['type']
+				props: Partial<TLBinding<E['type']>['props']>
+				id: TLBindingId | undefined
+				parentId: TLShapeId | undefined
+				ref: string | undefined
+				connections: BindingReactConnections
+			}
+		: never
+	: never
 
 const createElement = (
 	type: typeof shapeTypeSymbol | typeof assetTypeSymbol | typeof bindingTypeSymbol,
@@ -90,10 +107,9 @@ const tlBinding = new Proxy(
 			return createElement(bindingTypeSymbol, key as string)
 		},
 	}
-) as { [K in TLDefaultBinding['type']]: (props: PropsForBinding<K>) => null } & Record<
-	string,
-	(props: PropsForBinding<string>) => null
->
+) as {
+	[K in TLBinding['type']]: (props: ReactPropsForBinding<K>) => null
+}
 
 /**
  * TL - jsx helpers for creating tldraw shapes in test cases
@@ -112,8 +128,8 @@ export const TL = new Proxy(
 		},
 	}
 ) as { asset: typeof tlAsset; binding: typeof tlBinding } & {
-	[K in TLDefaultShape['type']]: (props: PropsForShape<K>) => null
-} & Record<string, (props: PropsForShape<string>) => null>
+	[K in TLShape['type']]: (props: PropsForShape<K>) => null
+}
 
 export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Element>, idPrefix = '') {
 	const ids = { bindings: {} } as Record<string, TLShapeId> & {
@@ -122,12 +138,7 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	const currentPageShapes: Array<TLShapePartial> = []
 	const assets: Array<TLAsset> = []
 
-	const bindingsToCreate: Array<{
-		type: string
-		props: Record<string, unknown>
-		parentId: TLShapeId | undefined
-		ref: string | undefined
-	}> = []
+	const bindingsToCreate: Array<BindingToCreate> = []
 
 	function addChildren(
 		children: React.JSX.Element | Array<React.JSX.Element>,
@@ -152,10 +163,21 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 			}
 
 			if (el.type[bindingTypeSymbol]) {
-				const bindingType = (el.type as any)[bindingTypeSymbol] as string
-				const ref = ((el as any).ref || el.props.ref) as string | undefined
-				assert(ref === undefined || typeof ref === 'string', 'ref must be string or undefined')
-				bindingsToCreate.push({ type: bindingType, props: el.props, parentId, ref })
+				const bindingType = (el.type as any)[bindingTypeSymbol] as TLBinding['type']
+				const { id, from, to, ref, ...props } = el.props
+				const bindingRef: unknown = (el as any).ref || ref
+				assert(
+					bindingRef === undefined || typeof bindingRef === 'string',
+					'ref must be string or undefined'
+				)
+				bindingsToCreate.push({
+					type: bindingType,
+					props,
+					id,
+					parentId,
+					ref: bindingRef,
+					connections: { from, to },
+				})
 			} else {
 				const shapeType = (el.type as any)[shapeTypeSymbol] as string
 				if (!shapeType) {
@@ -239,55 +261,48 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	addChildren(shapes)
 
 	const bindings: TLBindingCreate[] = []
-	for (const binding of bindingsToCreate) {
+	for (const { id, parentId, ref, connections, ...binding } of bindingsToCreate) {
 		let fromId: TLShapeId, toId: TLShapeId
-		if (binding.props.from) {
-			assert(typeof binding.props.from === 'string', 'from must be a ref string or a shape id')
-			if (isShapeId(binding.props.from)) {
-				fromId = binding.props.from
+		if (connections.from) {
+			assert(typeof connections.from === 'string', 'from must be a ref string or a shape id')
+			if (isShapeId(connections.from)) {
+				fromId = connections.from
 			} else {
-				assert(ids[binding.props.from], `Ref not found: ${binding.props.from}`)
-				fromId = ids[binding.props.from]
+				assert(ids[connections.from], `Ref not found: ${connections.from}`)
+				fromId = ids[connections.from]
 			}
-		} else if (binding.parentId) {
-			fromId = binding.parentId
+		} else if (parentId) {
+			fromId = parentId
 		} else {
 			throw new Error('from must be specified, or binding must be a child of a shape')
 		}
 
-		assert(binding.props.to, 'to must be specified')
-		assert(typeof binding.props.to === 'string', 'to must be a ref string or a shape id')
-		if (isShapeId(binding.props.to)) {
-			toId = binding.props.to
+		assert(connections.to, 'to must be specified')
+		assert(typeof connections.to === 'string', 'to must be a ref string or a shape id')
+		if (isShapeId(connections.to)) {
+			toId = connections.to
 		} else {
-			assert(ids[binding.props.to], `Ref not found: ${binding.props.to}`)
-			toId = ids[binding.props.to]
+			assert(ids[connections.to], `Ref not found: ${connections.to}`)
+			toId = ids[connections.to]
 		}
 
-		let bindingId: TLBindingId = binding.props.id as TLBindingId
-		if (binding.ref) {
-			assert(typeof binding.ref === 'string', 'binding ref must be string')
-			assert(!ids.bindings[binding.ref], `Duplicate ref: ${binding.ref}`)
-			assert(!bindingId, `Cannot use both ref and id on binding: ${binding.ref}`)
-			bindingId = createBindingId(`${idPrefix}${binding.ref}`)
-			ids.bindings[binding.ref] = bindingId
+		let bindingId = id
+		if (ref) {
+			assert(typeof ref === 'string', 'binding ref must be string')
+			assert(!ids.bindings[ref], `Duplicate ref: ${ref}`)
+			assert(!bindingId, `Cannot use both ref and id on binding: ${ref}`)
+			bindingId = createBindingId(`${idPrefix}${ref}`)
+			ids.bindings[ref] = bindingId
 		}
 		if (!bindingId) {
 			bindingId = createBindingId()
 		}
 
-		const props = { ...binding.props }
-		delete props.ref
-		delete props.id
-		delete props.from
-		delete props.to
-
 		bindings.push({
+			...binding,
 			id: bindingId,
-			type: binding.type,
 			fromId,
 			toId,
-			props,
 		})
 	}
 

package/src/test/text.test.ts

@@ -1,4 +1,4 @@
-import { TLTextShape, createShapeId, toRichText } from '@tldraw/editor'
+import { createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -13,7 +13,7 @@ afterEach(() => {
 describe('When editing text', () => {
 	it('preserves the top center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -27,7 +27,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -47,7 +47,7 @@ describe('When editing text', () => {
 
 	it('preserved the right center when center aligned and rotated 90deg', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -63,9 +63,7 @@ describe('When editing text', () => {
 		])
 
 		const boundsA = editor.getShapePageBounds(id)!
-		editor.updateShapes<TLTextShape>([
-			{ id, type: 'text', props: { richText: toRichText('Hello, world!') } },
-		])
+		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello, world!') } }])
 		const boundsB = editor.getShapePageBounds(id)!
 		expect(boundsA.x).toBeCloseTo(boundsB.x)
 		expect(boundsA.y).not.toBeCloseTo(boundsB.y)
@@ -75,7 +73,7 @@ describe('When editing text', () => {
 
 	it('preserves the top left corner when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -89,7 +87,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -109,7 +107,7 @@ describe('When editing text', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -123,7 +121,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -145,7 +143,7 @@ describe('When editing text', () => {
 describe('When changing text size', () => {
 	it('preserves the center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -160,7 +158,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -180,7 +178,7 @@ describe('When changing text size', () => {
 
 	it('preserves the center left point when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -195,7 +193,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -215,7 +213,7 @@ describe('When changing text size', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -230,7 +228,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',