tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.2b3bfbba757b

package/src/test/SelectTool.test.ts

@@ -1,4 +1,12 @@
-import { IndexKey, createShapeId, toRichText } from '@tldraw/editor'
+import {
+	IndexKey,
+	TLArrowShape,
+	TLGeoShape,
+	TLNoteShape,
+	TLTextShape,
+	createShapeId,
+	toRichText,
+} from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
@@ -53,7 +61,7 @@ describe('TLSelectTool.Idle', () => {
 describe.skip('Edit on type', () => {
 	it('Starts editing shape on key down if shape does auto-edit on key stroke', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLNoteShape>([
 			{
 				id,
 				type: 'note',
@@ -77,7 +85,7 @@ describe.skip('Edit on type', () => {
 
 	it('Does not start editing on excluded keys', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLNoteShape>([
 			{
 				id,
 				type: 'note',
@@ -94,7 +102,7 @@ describe.skip('Edit on type', () => {
 
 	it('Ignores key down if altKey or ctrlKey is pressed', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLNoteShape>([
 			{
 				id,
 				type: 'note',
@@ -262,7 +270,7 @@ describe('DraggingHandle', () => {
 
 describe('PointingLabel', () => {
 	it('Enters from pointing_arrow_label and exits to idle', () => {
-		editor.createShapes([
+		editor.createShapes<TLArrowShape>([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -294,7 +302,7 @@ describe('PointingLabel', () => {
 	})
 
 	it('Bails on escape', () => {
-		editor.createShapes([
+		editor.createShapes<TLArrowShape>([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -321,7 +329,7 @@ describe('PointingLabel', () => {
 	})
 
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
-		editor.createShapes([
+		editor.createShapes<TLArrowShape>([
 			{
 				id: ids.arrow1,
 				type: 'arrow',
@@ -398,7 +406,7 @@ describe('When double clicking the selection edge', () => {
 			.selectAll()
 			.deleteShapes(editor.getSelectedShapeIds())
 			.selectNone()
-			.createShapes([
+			.createShapes<TLTextShape>([
 				{
 					id,
 					type: 'text',
@@ -456,7 +464,7 @@ describe('When editing shapes', () => {
 			text2: createShapeId(),
 		}
 
-		editor.createShapes([
+		editor.createShapes<TLGeoShape | TLTextShape>([
 			{
 				id: ids.geo1,
 				type: 'geo',
@@ -694,7 +702,7 @@ describe('when passing a function to onInteractionEnd', () => {
 			},
 		}
 
-		editor.createShapes([arrow])
+		editor.createShapes<TLArrowShape>([arrow])
 
 		editor.setCurrentTool('select.pointing_arrow_label', {
 			shape: arrow,
@@ -820,7 +828,7 @@ describe('when passing a string to onInteractionEnd', () => {
 			},
 		}
 
-		editor.createShapes([arrow])
+		editor.createShapes<TLArrowShape>([arrow])
 
 		editor.setCurrentTool('select.pointing_arrow_label', {
 			shape: arrow,

package/src/test/TestEditor.ts

@@ -10,6 +10,7 @@ import {
 	RequiredKeys,
 	RotateCorner,
 	SelectionHandle,
+	TLArrowBinding,
 	TLArrowShape,
 	TLContent,
 	TLEditorOptions,
@@ -789,7 +790,9 @@ export class TestEditor extends Editor {
 	}
 
 	getArrowsBoundTo(shapeId: TLShapeId) {
-		const ids = new Set(this.getBindingsToShape(shapeId, 'arrow').map((b) => b.fromId))
+		const ids = new Set(
+			this.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow').map((b) => b.fromId)
+		)
 		return compact(Array.from(ids, (id) => this.getShape<TLArrowShape>(id)))
 	}
 }

package/src/test/TldrawEditor.test.tsx

@@ -4,9 +4,8 @@ import {
 	BaseBoxShapeUtil,
 	Editor,
 	HTMLContainer,
-	IndexKey,
 	TLAssetStore,
-	TLShape,
+	TLBaseShape,
 	TLShapeId,
 	TldrawEditor,
 	createShapeId,
@@ -197,7 +196,7 @@ describe('<TldrawEditor />', () => {
 			},
 			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{ type: 'frame' as const, props: { w: 100, h: 100 } },
-			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' } },
 			{
 				type: 'highlight' as const,
 				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
@@ -207,8 +206,8 @@ describe('<TldrawEditor />', () => {
 				type: 'line' as const,
 				props: {
 					points: {
-						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
-						a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 100 },
+						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
 					},
 				},
 			},
@@ -228,9 +227,10 @@ describe('<TldrawEditor />', () => {
 				editor.createShapes([
 					{
 						id,
-						...shapeConfig,
+						type: shapeConfig.type,
 						x: i * 150, // Space them out horizontally
 						y: 0,
+						props: shapeConfig.props,
 					},
 				])
 			})
@@ -456,19 +456,17 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-const CARD_TYPE = 'card'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalShapePropsMap {
-		[CARD_TYPE]: { w: number; h: number }
-	}
-}
-
-type CardShape = TLShape<typeof CARD_TYPE>
-
 describe('Custom shapes', () => {
+	type CardShape = TLBaseShape<
+		'card',
+		{
+			w: number
+			h: number
+		}
+	>
+
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
-		static override type = CARD_TYPE
+		static override type = 'card' as const
 
 		override isAspectRatioLocked(_shape: CardShape) {
 			return false
@@ -510,7 +508,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card' as const
+		override shapeType = 'card'
 	}
 
 	const tools = [CardTool]

package/src/test/bindings.test.tsx

@@ -6,8 +6,8 @@ import {
 	BindingOnShapeDeleteOptions,
 	BindingOnShapeIsolateOptions,
 	BindingUtil,
-	TLBinding,
 	TLShapeId,
+	TLUnknownBinding,
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -40,7 +40,7 @@ const mockOnAfterChangeToShape = vi.fn()
 
 const calls: string[] = []
 
-const registerCall = (method: string, binding: TLBinding) => {
+const registerCall = (method: string, binding: TLUnknownBinding) => {
 	calls.push(
 		`${method}: ${binding.fromId.slice('shape:'.length)}->${binding.toId.slice('shape:'.length)}`
 	)
@@ -60,62 +60,62 @@ class TestBindingUtil extends BindingUtil {
 		mockOnOperationComplete()
 	}
 
-	override onBeforeDelete(options: BindingOnDeleteOptions): void {
+	override onBeforeDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDelete', options.binding)
 		mockOnBeforeDelete(options)
 	}
 
-	override onAfterDelete(options: BindingOnDeleteOptions): void {
+	override onAfterDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onAfterDelete', options.binding)
 		mockOnAfterDelete(options)
 	}
 
-	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions): void {
+	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDeleteFromShape', options.binding)
 		mockOnBeforeFromShapeDelete(options)
 	}
 
-	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions): void {
+	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDeleteToShape', options.binding)
 		mockOnBeforeToShapeDelete(options)
 	}
 
-	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions): void {
+	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeIsolateFromShape', options.binding)
 		mockOnBeforeFromShapeIsolate(options)
 	}
 
-	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions): void {
+	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeIsolateToShape', options.binding)
 		mockOnBeforeToShapeIsolate(options)
 	}
 
-	override onBeforeCreate(options: BindingOnCreateOptions): void {
+	override onBeforeCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeCreate', options.binding)
 		mockOnBeforeCreate(options)
 	}
 
-	override onAfterCreate(options: BindingOnCreateOptions): void {
+	override onAfterCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
 		registerCall('onAfterCreate', options.binding)
 		mockOnAfterCreate(options)
 	}
 
-	override onBeforeChange(options: BindingOnChangeOptions): void {
+	override onBeforeChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeChange', options.bindingAfter)
 		mockOnBeforeChange(options)
 	}
 
-	override onAfterChange(options: BindingOnChangeOptions): void {
+	override onAfterChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChange', options.bindingAfter)
 		mockOnAfterChange(options)
 	}
 
-	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions): void {
+	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChangeFromShape', options.binding)
 		mockOnAfterChangeFromShape(options)
 	}
 
-	override onAfterChangeToShape(options: BindingOnShapeChangeOptions): void {
+	override onAfterChangeToShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChangeToShape', options.binding)
 		mockOnAfterChangeToShape(options)
 	}
@@ -146,19 +146,11 @@ beforeEach(() => {
 	mockOnAfterChangeToShape.mockReset()
 })
 
-const TEST_TYPE = 'test'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalBindingPropsMap {
-		[TEST_TYPE]: Record<string, never>
-	}
-}
-
 function bindShapes(fromId: TLShapeId, toId: TLShapeId) {
 	const bindingId = createBindingId()
 	editor.createBinding({
 		id: bindingId,
-		type: TEST_TYPE,
+		type: 'test',
 		fromId,
 		toId,
 	})
@@ -264,9 +256,11 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
-		editor.deleteShape(options.binding.toId)
-	})
+	mockOnBeforeFromShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.toId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -307,9 +301,11 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
-		editor.deleteShape(options.binding.fromId)
-	})
+	mockOnBeforeToShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.fromId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)

package/src/test/bindingsIndex.test.tsx

@@ -1,4 +1,4 @@
-import { TLShapeId, createShapeId } from '@tldraw/editor'
+import { TLArrowBinding, TLGeoShape, TLShapeId, createShapeId } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -219,7 +219,7 @@ describe('bindingsIndex', () => {
 
 			const [box1Clone, box2Clone] = editor
 				.getSelectedShapes()
-				.filter((shape) => editor.isShapeOfType(shape, 'geo'))
+				.filter((shape) => editor.isShapeOfType<TLGeoShape>(shape, 'geo'))
 				.sort((a, b) => a.x - b.x)
 
 			expect(editor.getArrowsBoundTo(box2Clone.id)).toHaveLength(3)
@@ -248,9 +248,9 @@ describe('bindingsIndex', () => {
 
 			// move arrowA end from box2 to box3
 			const binding = editor
-				.getBindingsInvolvingShape(ids.box2, 'arrow')
+				.getBindingsInvolvingShape<TLArrowBinding>(ids.box2, 'arrow')
 				.find((b) => b.props.terminal === 'end')!
-			editor.updateBinding({ ...binding, toId: box3 })
+			editor.updateBinding({ ...binding, toId: box3 } satisfies TLArrowBinding)
 
 			expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
 			expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)

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

@@ -19,28 +19,14 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// Yep error because we are giving the wrong props to the shape
+		// No error here because no generic, the editor doesn't know what this guy is
 		editor.createShapes([
-			//@ts-expect-error
 			{
 				id: ids.box1,
 				type: 'geo',
 				props: { w: 'OH NO' },
 			},
 		])
-
-		// Errors when creating shapes with unknown props
-		editor.createShapes([
-			{
-				id: ids.box1,
-				type: 'geo',
-				props: {
-					// @ts-expect-error
-					foo: 'bar',
-				},
-			},
-		])
-
 		// Yep error here because we are giving the wrong props to the shape
 		editor.createShapes<TLGeoShape>([
 			{

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

@@ -1,4 +1,4 @@
-import { DefaultDashStyle, createShapeId, toRichText } from '@tldraw/editor'
+import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
@@ -21,7 +21,7 @@ beforeEach(() => {
 	editor = new TestEditor()
 	editor.setStyleForNextShapes(DefaultDashStyle, 'solid')
 	editor.setStyleForSelectedShapes(DefaultDashStyle, 'solid')
-	editor.createShapes([
+	editor.createShapes<TLGeoShape>([
 		{
 			id: ids.boxA,
 			type: 'geo',

package/src/test/commands/putContent.test.ts

@@ -25,7 +25,6 @@ describe('Migrations', () => {
 
 	it('Throws error if any shape is invalid due to wrong type', () => {
 		const withInvalidShapeType = structuredClone(clipboardContent)
-		// @ts-expect-error
 		withInvalidShapeType.shapes[0].type = 'invalid'
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrow()
 	})

package/src/test/commands/updateShapes.test.ts

@@ -15,38 +15,22 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
+		// No error here because no generic, the editor doesn't know what this guy is
 		editor.updateShapes([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: {
-					// @ts-expect-error
-					w: 'OH NO',
-				},
-			},
-		])
-
-		// Errors when updating shapes with unknown props
-		editor.updateShapes([
-			{
-				id: ids.box1,
-				type: 'geo',
-				props: {
-					// @ts-expect-error
-					foo: 'bar',
-				},
+				props: { w: 'OH NO' },
 			},
 		])
 
-		// error here because we are giving the wrong props to the shape
+		// Yep error here because we are giving the wrong props to the shape
 		editor.updateShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: {
-					// @ts-expect-error
-					w: 'OH NO',
-				},
+				//@ts-expect-error
+				props: { w: 'OH NO' },
 			},
 		])
 

package/src/test/custom-clipping.test.ts

@@ -8,6 +8,7 @@ import {
 	resizeBox,
 	StateNode,
 	T,
+	TLBaseShape,
 	TLEventHandlers,
 	TLGeoShape,
 	TLResizeInfo,
@@ -18,21 +19,19 @@ import {
 } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
-const CIRCLE_CLIP_TYPE = 'circle-clip'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalShapePropsMap {
-		[CIRCLE_CLIP_TYPE]: { w: number; h: number }
-	}
-}
-
 // Custom Circle Clip Shape Definition
-export type CircleClipShape = TLShape<typeof CIRCLE_CLIP_TYPE>
+export type CircleClipShape = TLBaseShape<
+	'circle-clip',
+	{
+		w: number
+		h: number
+	}
+>
 
 export const isClippingEnabled$ = atom('isClippingEnabled', true)
 
 export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
-	static override type = CIRCLE_CLIP_TYPE
+	static override type = 'circle-clip' as const
 	static override props: RecordProps<CircleClipShape> = {
 		w: T.number,
 		h: T.number,
@@ -114,8 +113,8 @@ export class CircleClipShapeTool extends StateNode {
 		if (info.target === 'canvas') {
 			const { originPagePoint } = this.editor.inputs
 
-			this.editor.createShape({
-				type: CIRCLE_CLIP_TYPE,
+			this.editor.createShape<CircleClipShape>({
+				type: 'circle-clip',
 				x: originPagePoint.x - 100,
 				y: originPagePoint.y - 100,
 				props: {
@@ -154,9 +153,9 @@ beforeEach(() => {
 describe('CircleClipShapeUtil', () => {
 	describe('shape creation and properties', () => {
 		it('should create a circle clip shape with default properties', () => {
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {
@@ -173,9 +172,9 @@ describe('CircleClipShapeUtil', () => {
 		})
 
 		it('should use default props when not specified', () => {
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {},
@@ -189,9 +188,9 @@ describe('CircleClipShapeUtil', () => {
 
 	describe('geometry and clipping', () => {
 		it('should generate correct circle geometry', () => {
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {
@@ -211,9 +210,9 @@ describe('CircleClipShapeUtil', () => {
 		})
 
 		it('should generate clip path for circle', () => {
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {
@@ -246,9 +245,9 @@ describe('CircleClipShapeUtil', () => {
 
 	describe('child clipping behavior', () => {
 		it('should clip children when clipping is enabled', () => {
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {
@@ -257,7 +256,7 @@ describe('CircleClipShapeUtil', () => {
 				},
 			})
 
-			editor.createShape({
+			editor.createShape<TLTextShape>({
 				id: ids.text1,
 				type: 'text',
 				x: 0,
@@ -280,9 +279,9 @@ describe('CircleClipShapeUtil', () => {
 		it('should not clip children when clipping is disabled', () => {
 			isClippingEnabled$.set(false)
 
-			editor.createShape({
+			editor.createShape<CircleClipShape>({
 				id: ids.circleClip1,
-				type: CIRCLE_CLIP_TYPE,
+				type: 'circle-clip',
 				x: 100,
 				y: 100,
 				props: {
@@ -291,7 +290,7 @@ describe('CircleClipShapeUtil', () => {
 				},
 			})
 
-			editor.createShape({
+			editor.createShape<TLTextShape>({
 				id: ids.text1,
 				type: 'text',
 				x: 0,
@@ -315,9 +314,9 @@ describe('CircleClipShapeUtil', () => {
 describe('Integration tests', () => {
 	it('should create and manage circle clip shapes with children', () => {
 		// Create circle clip shape
-		editor.createShape({
+		editor.createShape<CircleClipShape>({
 			id: ids.circleClip1,
-			type: CIRCLE_CLIP_TYPE,
+			type: 'circle-clip',
 			x: 100,
 			y: 100,
 			props: {
@@ -327,7 +326,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add text child
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			id: ids.text1,
 			type: 'text',
 			x: 50,
@@ -339,7 +338,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add geo child
-		editor.createShape({
+		editor.createShape<TLGeoShape>({
 			id: ids.geo1,
 			type: 'geo',
 			x: 150,
@@ -376,9 +375,9 @@ describe('Integration tests', () => {
 
 	it('should handle multiple circle clip shapes independently', () => {
 		// Create two circle clip shapes
-		editor.createShape({
+		editor.createShape<CircleClipShape>({
 			id: ids.circleClip1,
-			type: CIRCLE_CLIP_TYPE,
+			type: 'circle-clip',
 			x: 100,
 			y: 100,
 			props: {
@@ -387,9 +386,9 @@ describe('Integration tests', () => {
 			},
 		})
 
-		editor.createShape({
+		editor.createShape<CircleClipShape>({
 			id: ids.circleClip2,
-			type: CIRCLE_CLIP_TYPE,
+			type: 'circle-clip',
 			x: 400,
 			y: 100,
 			props: {
@@ -399,7 +398,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add children to both
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			id: ids.text1,
 			type: 'text',
 			x: 0,
@@ -410,7 +409,7 @@ describe('Integration tests', () => {
 			},
 		})
 
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			id: ids.geo1,
 			type: 'text',
 			x: 0,