tldraw 4.3.0-canary.d8da2a99f394 → 4.3.0-canary.e1766dd4eab3

package/src/lib/ui/hooks/useTools.tsx

@@ -4,7 +4,6 @@ import {
 	Editor,
 	GeoShapeGeoStyle,
 	getIndicesBetween,
-	TLLineShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	toRichText,
@@ -195,7 +194,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => {
 							const [start, end] = getIndicesBetween(null, null, 2)
-							editor.createShape<TLLineShape>({
+							editor.createShape({
 								id,
 								type: 'line',
 								props: {

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.3.0-canary.d8da2a99f394'
+export const version = '4.3.0-canary.e1766dd4eab3'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-19T12:05:56.836Z',
-	patch: '2025-11-19T12:05:56.836Z',
+	minor: '2025-12-09T14:08:32.660Z',
+	patch: '2025-12-09T14:08:32.660Z',
 }

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

@@ -133,6 +133,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'geo',
 					props: {
+						...editor.getShapeUtil('geo').getDefaultProps(),
 						geo: element.type,
 						url: element.link ?? '',
 						w: element.width,
@@ -152,6 +153,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'draw',
 					props: {
+						...editor.getShapeUtil('draw').getDefaultProps(),
 						dash: getDash(element),
 						size: strokeWidthsToSizes[element.strokeWidth],
 						color: colorsToColors[element.strokeColor] ?? 'black',
@@ -180,6 +182,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'line',
 					props: {
+						...editor.getShapeUtil('line').getDefaultProps(),
 						dash: getDash(element),
 						size: strokeWidthsToSizes[element.strokeWidth],
 						color: colorsToColors[element.strokeColor] ?? 'black',
@@ -221,6 +224,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
+						...editor.getShapeUtil('arrow').getDefaultProps(),
 						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
@@ -243,6 +247,7 @@ export async function putExcalidrawContent(
 						toId: startTargetId,
 						props: {
 							terminal: 'start',
+							snap: 'none',
 							normalizedAnchor: { x: 0.5, y: 0.5 },
 							isPrecise: false,
 							isExact: false,
@@ -259,6 +264,7 @@ export async function putExcalidrawContent(
 						toId: endTargetId,
 						props: {
 							terminal: 'end',
+							snap: 'none',
 							normalizedAnchor: { x: 0.5, y: 0.5 },
 							isPrecise: false,
 							isExact: false,
@@ -275,6 +281,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'text',
 					props: {
+						...editor.getShapeUtil('text').getDefaultProps(),
 						size,
 						scale,
 						font: fontFamilyToFontType[element.fontFamily] ?? 'draw',
@@ -310,6 +317,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'image',
 					props: {
+						...editor.getShapeUtil('image').getDefaultProps(),
 						w: element.width,
 						h: element.height,
 						assetId,

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

@@ -1,11 +1,4 @@
-import {
-	Editor,
-	sanitizeId,
-	TLExportType,
-	TLFrameShape,
-	TLImageExportOptions,
-	TLShapeId,
-} from '@tldraw/editor'
+import { Editor, sanitizeId, TLExportType, TLImageExportOptions, TLShapeId } from '@tldraw/editor'
 
 /** @public */
 export interface ExportAsOptions extends TLImageExportOptions {
@@ -35,7 +28,7 @@ export async function exportAs(
 		name = `shapes at ${getTimestamp()}`
 		if (ids.length === 1) {
 			const first = editor.getShape(ids[0])!
-			if (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {
+			if (editor.isShapeOfType(first, 'frame')) {
 				name = first.props.name || 'frame'
 			} else {
 				name = `${sanitizeId(first.id)} at ${getTimestamp()}`

package/src/lib/utils/frames/frames.ts

@@ -22,7 +22,7 @@ export function removeFrame(editor: Editor, ids: TLShapeId[]) {
 	const frames = compact(
 		ids
 			.map((id) => editor.getShape<TLFrameShape>(id))
-			.filter((f) => f && editor.isShapeOfType<TLFrameShape>(f, 'frame'))
+			.filter((f) => f && editor.isShapeOfType(f, 'frame'))
 	)
 	if (!frames.length) return
 

package/src/lib/utils/text/richText.ts

@@ -6,10 +6,10 @@ import {
 	generateText,
 	JSONContent,
 } from '@tiptap/core'
-import Code from '@tiptap/extension-code'
-import Highlight from '@tiptap/extension-highlight'
+import { Code } from '@tiptap/extension-code'
+import { Highlight } from '@tiptap/extension-highlight'
 import { Node } from '@tiptap/pm/model'
-import StarterKit from '@tiptap/starter-kit'
+import { StarterKit } from '@tiptap/starter-kit'
 import {
 	Editor,
 	getOwnProperty,

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

@@ -12,14 +12,9 @@ import {
 	TLDefaultHorizontalAlignStyle,
 	TLDefaultSizeStyle,
 	TLDefaultTextAlignStyle,
-	TLDrawShape,
 	TLGeoShape,
-	TLImageShape,
-	TLNoteShape,
 	TLPageId,
 	TLShapeId,
-	TLTextShape,
-	TLVideoShape,
 	Vec,
 	VecModel,
 	clamp,
@@ -187,7 +182,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 					switch (v1Shape.type) {
 						case TLV1ShapeType.Sticky: {
-							editor.createShapes<TLNoteShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'note',
@@ -203,7 +198,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Rectangle: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -225,7 +220,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -259,7 +254,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Triangle: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -280,7 +275,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -314,7 +309,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Ellipse: {
-							editor.createShapes<TLGeoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'geo',
@@ -335,7 +330,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes<TLGeoShape>([
+							editor.updateShapes([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -375,7 +370,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								break
 							}
 
-							editor.createShapes<TLDrawShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'draw',
@@ -400,7 +395,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							const v2Bend = (dist * -v1Bend) / 2
 
 							// Could also be a line... but we'll use it as an arrow anyway
-							editor.createShapes<TLArrowShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'arrow',
@@ -429,7 +424,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Text: {
-							editor.createShapes<TLTextShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'text',
@@ -453,7 +448,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes<TLImageShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'image',
@@ -474,7 +469,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes<TLVideoShape>([
+							editor.createShapes([
 								{
 									...inCommon,
 									type: 'video',

package/src/test/Editor.test.tsx

@@ -472,12 +472,20 @@ describe('isFocused', () => {
 	})
 })
 
+const BLORG_TYPE = 'blorg'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[BLORG_TYPE]: { w: number; h: number }
+	}
+}
+
 describe('getShapeUtil', () => {
 	let myUtil: any
 
 	beforeEach(() => {
 		class _MyFakeShapeUtil extends BaseBoxShapeUtil<any> {
-			static override type = 'blorg'
+			static override type = BLORG_TYPE
 
 			getDefaultProps() {
 				return {
@@ -519,16 +527,22 @@ describe('getShapeUtil', () => {
 	})
 
 	it('throws if that shape type isnt registered', () => {
-		const myMissingShape = { type: 'missing' } as TLShape
-		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`[Error: 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(
-			`[Error: No shape util found for type "missing"]`
-		)
+		expect(() =>
+			editor.getShapeUtil(
+				// @ts-expect-error
+				'missing'
+			)
+		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
 	})
 })
 
@@ -866,9 +880,19 @@ describe('instance.isReadonly', () => {
 	})
 })
 
+const MY_CUSTOM_SHAPE_TYPE = 'myCustomShape'
+
+type MyCustomShape = TLShape<typeof MY_CUSTOM_SHAPE_TYPE>
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[MY_CUSTOM_SHAPE_TYPE]: { w: number; h: number }
+	}
+}
+
 describe('the geometry cache', () => {
-	class CustomShapeUtil extends BaseBoxShapeUtil<any> {
-		static override type = 'custom'
+	class CustomShapeUtil extends BaseBoxShapeUtil<MyCustomShape> {
+		static override type = MY_CUSTOM_SHAPE_TYPE
 
 		getDefaultProps() {
 			return {
@@ -894,9 +918,11 @@ describe('the geometry cache', () => {
 		editor = new TestEditor({
 			shapeUtils: [CustomShapeUtil],
 		})
-		const { A } = editor.createShapesFromJsx([<TL.custom ref="A" x={0} y={0} w={100} h={100} />])
+		const { A } = editor.createShapesFromJsx([
+			<TL.myCustomShape 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: 'myCustomShape', meta: { double: true } })
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })

package/src/test/SelectTool.test.ts

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

package/src/test/TestEditor.ts

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

package/src/test/TldrawEditor.test.tsx

@@ -4,8 +4,9 @@ import {
 	BaseBoxShapeUtil,
 	Editor,
 	HTMLContainer,
+	IndexKey,
 	TLAssetStore,
-	TLBaseShape,
+	TLShape,
 	TLShapeId,
 	TldrawEditor,
 	createShapeId,
@@ -196,7 +197,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' } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
 			{
 				type: 'highlight' as const,
 				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
@@ -206,8 +207,8 @@ describe('<TldrawEditor />', () => {
 				type: 'line' as const,
 				props: {
 					points: {
-						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
-						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
+						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 100 },
 					},
 				},
 			},
@@ -227,10 +228,9 @@ describe('<TldrawEditor />', () => {
 				editor.createShapes([
 					{
 						id,
-						type: shapeConfig.type,
+						...shapeConfig,
 						x: i * 150, // Space them out horizontally
 						y: 0,
-						props: shapeConfig.props,
 					},
 				])
 			})
@@ -285,8 +285,9 @@ describe('<TldrawEditor />', () => {
 
 		// we should only get one editor instance
 		expect(editorInstances.size).toBe(1)
-		// but strict mode will cause onMount to be called twice
-		expect(onMount).toHaveBeenCalledTimes(2)
+		// strict mode may cause onMount to be called twice, but the important
+		// thing is that we always get the same editor instance
+		expect(onMount).toHaveBeenCalled()
 	})
 
 	it('allows updating camera options without re-creating the editor', async () => {
@@ -456,17 +457,19 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-describe('Custom shapes', () => {
-	type CardShape = TLBaseShape<
-		'card',
-		{
-			w: number
-			h: number
-		}
-	>
+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', () => {
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
-		static override type = 'card' as const
+		static override type = CARD_TYPE
 
 		override isAspectRatioLocked(_shape: CardShape) {
 			return false
@@ -508,7 +511,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card'
+		override shapeType = 'card' as const
 	}
 
 	const tools = [CardTool]