tldraw 4.2.2 → 4.2.3

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(f, 'frame'))
+			.filter((f) => f && editor.isShapeOfType<TLFrameShape>(f, 'frame'))
 	)
 	if (!frames.length) return
 

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

@@ -1,7 +1,6 @@
 import {
 	Extension,
 	Extensions,
-	extensions,
 	generateHTML,
 	generateJSON,
 	generateText,
@@ -20,6 +19,7 @@ import {
 	WeakCache,
 } from '@tldraw/editor'
 import { DefaultFontFaces } from '../../shapes/shared/defaultFonts'
+import { TextDirection } from './textDirection'
 
 /** @public */
 export const KeyboardShiftEnterTweakExtension = Extension.create({
@@ -59,11 +59,7 @@ export const tipTapDefaultExtensions: Extensions = [
 	}),
 	Highlight,
 	KeyboardShiftEnterTweakExtension,
-
-	// N.B. We disable the text direction core extension in RichTextArea,
-	// but we add it back in again here in our own extensions list so that
-	// people can omit/override it if they want to.
-	extensions.TextDirection.configure({ direction: 'auto' }),
+	TextDirection,
 ]
 
 // todo: bust this if the editor changes, too
@@ -92,6 +88,7 @@ export function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
+ *
  * @public
  */
 export function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {
@@ -114,6 +111,7 @@ export function isEmptyRichText(richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
+ *
  * @public
  */
 export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {
@@ -133,6 +131,7 @@ export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
+ *
  * @public
  */
 export function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {

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

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/core'
+
+/**
+ * @public
+ */
+export const TextDirection = Extension.create({
+	name: 'textDirection',
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: ['heading', 'paragraph'],
+				attributes: {
+					dir: {
+						default: 'auto',
+						parseHTML: (element) => {
+							const dirAttribute = element.getAttribute('dir')
+							if (dirAttribute && ['ltr', 'rtl', 'auto'].includes(dirAttribute)) {
+								return dirAttribute
+							} else {
+								return 'auto'
+							}
+						},
+						renderHTML: (attributes) => {
+							return { dir: attributes.dir }
+						},
+					},
+				},
+			},
+		]
+	},
+})

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

@@ -12,12 +12,16 @@ import {
 	TLDefaultHorizontalAlignStyle,
 	TLDefaultSizeStyle,
 	TLDefaultTextAlignStyle,
+	TLDrawShape,
 	TLGeoShape,
+	TLImageShape,
+	TLNoteShape,
 	TLPageId,
 	TLShapeId,
+	TLTextShape,
+	TLVideoShape,
 	Vec,
 	VecModel,
-	b64Vecs,
 	clamp,
 	createShapeId,
 	fetch,
@@ -183,7 +187,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 					switch (v1Shape.type) {
 						case TLV1ShapeType.Sticky: {
-							editor.createShapes([
+							editor.createShapes<TLNoteShape>([
 								{
 									...inCommon,
 									type: 'note',
@@ -199,7 +203,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Rectangle: {
-							editor.createShapes([
+							editor.createShapes<TLGeoShape>([
 								{
 									...inCommon,
 									type: 'geo',
@@ -221,7 +225,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes([
+							editor.updateShapes<TLGeoShape>([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -255,7 +259,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Triangle: {
-							editor.createShapes([
+							editor.createShapes<TLGeoShape>([
 								{
 									...inCommon,
 									type: 'geo',
@@ -276,7 +280,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes([
+							editor.updateShapes<TLGeoShape>([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -310,7 +314,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Ellipse: {
-							editor.createShapes([
+							editor.createShapes<TLGeoShape>([
 								{
 									...inCommon,
 									type: 'geo',
@@ -331,7 +335,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 
 							const pageBoundsBeforeLabel = editor.getShapePageBounds(inCommon.id)!
 
-							editor.updateShapes([
+							editor.updateShapes<TLGeoShape>([
 								{
 									id: inCommon.id,
 									type: 'geo',
@@ -371,10 +375,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								break
 							}
 
-							const points = v1Shape.points.map(getV2Point)
-							const base64Points = b64Vecs.encodePoints(points)
-
-							editor.createShapes([
+							editor.createShapes<TLDrawShape>([
 								{
 									...inCommon,
 									type: 'draw',
@@ -385,10 +386,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										dash: getV2Dash(v1Shape.style.dash),
 										isPen: false,
 										isComplete: v1Shape.isComplete,
-										segments: [{ type: 'free', points: base64Points }],
-										scale: 1,
-										scaleX: 1,
-										scaleY: 1,
+										segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
 									},
 								},
 							])
@@ -402,7 +400,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([
+							editor.createShapes<TLArrowShape>([
 								{
 									...inCommon,
 									type: 'arrow',
@@ -431,7 +429,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 							break
 						}
 						case TLV1ShapeType.Text: {
-							editor.createShapes([
+							editor.createShapes<TLTextShape>([
 								{
 									...inCommon,
 									type: 'text',
@@ -455,7 +453,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes([
+							editor.createShapes<TLImageShape>([
 								{
 									...inCommon,
 									type: 'image',
@@ -476,7 +474,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								return
 							}
 
-							editor.createShapes([
+							editor.createShapes<TLVideoShape>([
 								{
 									...inCommon,
 									type: 'video',
@@ -525,7 +523,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 					const util = editor.getShapeUtil<TLArrowShape>('arrow')
 
 					// dumb but necessary
-					editor.inputs.setCtrlKey(false)
+					editor.inputs.ctrlKey = false
 
 					for (const handleId of ['start', 'end'] as const) {
 						const bindingId = v1Shape.handles[handleId].bindingId

package/src/test/Editor.test.tsx

@@ -143,17 +143,17 @@ describe('shapes that are moved to another page', () => {
 it('Begins dragging from pointer move', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(2, 2)
-	expect(editor.inputs.getIsDragging()).toBe(false)
+	expect(editor.inputs.isDragging).toBe(false)
 	editor.pointerMove(10, 10)
-	expect(editor.inputs.getIsDragging()).toBe(true)
+	expect(editor.inputs.isDragging).toBe(true)
 })
 
 it('Begins dragging from wheel', () => {
 	editor.pointerDown(0, 0)
 	editor.wheel(2, 2)
-	expect(editor.inputs.getIsDragging()).toBe(false)
+	expect(editor.inputs.isDragging).toBe(false)
 	editor.wheel(10, 10)
-	expect(editor.inputs.getIsDragging()).toBe(true)
+	expect(editor.inputs.isDragging).toBe(true)
 })
 
 it('Does not create an undo stack item when first clicking on an empty canvas', () => {
@@ -266,47 +266,36 @@ describe('Editor.TickManager', () => {
 		// usually this is called by the app's tick manager, using the elapsed time
 		// between two animation frames, but we're calling it directly here.
 		const tick = (ms: number) => {
-			editor.inputs.updatePointerVelocity(ms)
+			// @ts-ignore
+			editor._tickManager.updatePointerVelocity(ms)
 		}
 
 		// 1. pointer velocity should be 0 when there is no movement
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		editor.pointerMove(10, 10)
 
 		// 2. moving is not enough, we also need to wait a frame before the velocity is updated
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		// 3. once time passes, the pointer velocity should be updated
 		tick(16)
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
-			x: 0.3125,
-			y: 0.3125,
-		})
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.3125, y: 0.3125 })
 
 		// 4. let's do it again, it should be updated again. move, tick, measure
 		editor.pointerMove(20, 20)
 		tick(16)
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
-			x: 0.46875,
-			y: 0.46875,
-		})
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.46875, y: 0.46875 })
 
 		// 5. if we tick again without movement, the velocity should decay
 		tick(16)
 
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
-			x: 0.23437,
-			y: 0.23437,
-		})
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
 
 		// 6. if updatePointerVelocity is (for whatever reason) called with an elapsed time of zero milliseconds, it should be ignored
 		tick(0)
 
-		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
-			x: 0.23437,
-			y: 0.23437,
-		})
+		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
 	})
 })
 
@@ -483,20 +472,12 @@ 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_TYPE
+			static override type = 'blorg'
 
 			getDefaultProps() {
 				return {
@@ -538,22 +519,16 @@ describe('getShapeUtil', () => {
 	})
 
 	it('throws if that shape type isnt registered', () => {
-		const myMissingShape = { type: 'missing' }
-		expect(() =>
-			editor.getShapeUtil(
-				// @ts-expect-error
-				myMissingShape
-			)
-		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
+		const myMissingShape = { type: 'missing' } as TLShape
+		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
+			`[Error: No shape util found for type "missing"]`
+		)
 	})
 
 	it('throws if that type isnt registered', () => {
-		expect(() =>
-			editor.getShapeUtil(
-				// @ts-expect-error
-				'missing'
-			)
-		).toThrowErrorMatchingInlineSnapshot(`[Error: No shape util found for type "missing"]`)
+		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
+			`[Error: No shape util found for type "missing"]`
+		)
 	})
 })
 
@@ -688,9 +663,9 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.inputs.isPanning).toBe(true)
 		editor.pointerUp(100, 100)
-		expect(editor.inputs.getIsPanning()).toBe(false)
+		expect(editor.inputs.isPanning).toBe(false)
 	})
 
 	it('does not clear thee isPanning state if the space bar is down', () => {
@@ -699,51 +674,51 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.inputs.isPanning).toBe(true)
 		editor.keyDown(' ')
 		editor.pointerUp(100, 100, {
 			button: 1,
 		})
-		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.inputs.isPanning).toBe(true)
 
 		editor.keyUp(' ')
-		expect(editor.inputs.getIsPanning()).toBe(false)
+		expect(editor.inputs.isPanning).toBe(false)
 	})
 })
 
 describe('dragging', () => {
 	it('drags correctly at 100% zoom', () => {
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 1)
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.getIsDragging()).toBe(true)
+		expect(editor.inputs.isDragging).toBe(true)
 	})
 
 	it('drags correctly at 150% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 8 }).forceTick()
 
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.getIsDragging()).toBe(true)
+		expect(editor.inputs.isDragging).toBe(true)
 	})
 
 	it('drags correctly at 50% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 0.1 }).forceTick()
 
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.getIsDragging()).toBe(false)
+		expect(editor.inputs.isDragging).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.getIsDragging()).toBe(true)
+		expect(editor.inputs.isDragging).toBe(true)
 	})
 })
 
@@ -891,19 +866,9 @@ 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<MyCustomShape> {
-		static override type = MY_CUSTOM_SHAPE_TYPE
+	class CustomShapeUtil extends BaseBoxShapeUtil<any> {
+		static override type = 'custom'
 
 		getDefaultProps() {
 			return {
@@ -929,11 +894,9 @@ describe('the geometry cache', () => {
 		editor = new TestEditor({
 			shapeUtils: [CustomShapeUtil],
 		})
-		const { A } = editor.createShapesFromJsx([
-			<TL.myCustomShape ref="A" x={0} y={0} w={100} h={100} />,
-		])
+		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: 'myCustomShape', meta: { double: true } })
+		editor.updateShape({ id: A, type: 'custom', meta: { double: true } })
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })

package/src/test/EraserTool.test.ts

@@ -1,6 +1,5 @@
 import { createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
-import { createDrawSegments } from './test-jsx'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -73,15 +72,18 @@ beforeEach(() => {
 			x: 0,
 			y: 300,
 			props: {
-				segments: createDrawSegments([
-					[
-						{ x: 0, y: 0 },
-						{ x: 2, y: 50 },
-						{ x: 10, y: 100 },
-						{ x: 48, y: 100 },
-						{ x: 100, y: 100 },
-					],
-				]),
+				segments: [
+					{
+						type: 'free',
+						points: [
+							{ x: 0, y: 0 },
+							{ x: 2, y: 50 },
+							{ x: 10, y: 100 },
+							{ x: 48, y: 100 },
+							{ x: 100, y: 100 },
+						],
+					},
+				],
 			},
 		},
 	])

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,