tldraw 4.1.0-canary.4ecbfdc37522 → 4.1.0-canary.533dd6427b33

package/src/lib/shapes/embed/EmbedShapeUtil.tsx

@@ -3,6 +3,7 @@
 import {
 	BaseBoxShapeUtil,
 	HTMLContainer,
+	Rectangle2d,
 	TLEmbedShape,
 	TLEmbedShapeProps,
 	TLResizeInfo,
@@ -24,6 +25,8 @@ import {
 	embedShapePermissionDefaults,
 } from '../../defaultEmbedDefinitions'
 import { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'
+import { BookmarkIndicatorComponent, BookmarkShapeComponent } from '../bookmark/BookmarkShapeUtil'
+import { BOOKMARK_JUST_URL_HEIGHT, BOOKMARK_WIDTH } from '../bookmark/bookmarks'
 import { getRotatedBoxShadow } from '../shared/rotated-box-shadow'
 
 const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
@@ -82,6 +85,18 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 		}
 	}
 
+	override getGeometry(shape: TLEmbedShape) {
+		const embedInfo = this.getEmbedDefinition(shape.props.url)
+		if (!embedInfo?.definition) {
+			return new Rectangle2d({
+				width: BOOKMARK_WIDTH,
+				height: BOOKMARK_JUST_URL_HEIGHT,
+				isFilled: true,
+			})
+		}
+		return super.getGeometry(shape)
+	}
+
 	override isAspectRatioLocked(shape: TLEmbedShape) {
 		const embedInfo = this.getEmbedDefinition(shape.props.url)
 		return embedInfo?.definition.isAspectRatioLocked ?? false
@@ -206,20 +221,31 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 							background: embedInfo?.definition.backgroundColor,
 						}}
 					/>
-				) : null}
+				) : (
+					<BookmarkShapeComponent
+						url={url}
+						h={h}
+						rotation={pageRotation}
+						assetId={null}
+						showImageContainer={false}
+					/>
+				)}
 			</HTMLContainer>
 		)
 	}
 
 	override indicator(shape: TLEmbedShape) {
 		const embedInfo = this.getEmbedDefinition(shape.props.url)
-		return (
+
+		return embedInfo?.definition ? (
 			<rect
 				width={toDomPrecision(shape.props.w)}
 				height={toDomPrecision(shape.props.h)}
 				rx={embedInfo?.definition.overrideOutlineRadius ?? 8}
 				ry={embedInfo?.definition.overrideOutlineRadius ?? 8}
 			/>
+		) : (
+			<BookmarkIndicatorComponent w={BOOKMARK_WIDTH} h={BOOKMARK_JUST_URL_HEIGHT} />
 		)
 	}
 	override getInterpolatedProps(

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -48,6 +48,9 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	override hideSelectionBoundsBg() {
 		return true
 	}
+	override hideInMinimap() {
+		return true
+	}
 
 	override getDefaultProps(): TLLineShape['props'] {
 		const [start, end] = getIndices(2)

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -86,6 +86,80 @@ describe('When in idle state', () => {
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
 	})
+
+	it('starts editing selected text shape on Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter')
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
+
+	it('starts editing selected text shape on numpad Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press numpad Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter', { code: 'NumpadEnter' })
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
 })
 
 describe('When in the pointing state', () => {

package/src/lib/tools/SelectTool/childStates/Crop/children/Cropping.ts

@@ -17,7 +17,7 @@ export class Cropping extends StateNode {
 	info = {} as TLPointerEventInfo & {
 		target: 'selection'
 		handle: SelectionHandle
-		onInteractionEnd?: string
+		onInteractionEnd?: string | (() => void)
 	}
 
 	markId = ''
@@ -28,10 +28,13 @@ export class Cropping extends StateNode {
 		info: TLPointerEventInfo & {
 			target: 'selection'
 			handle: SelectionHandle
-			onInteractionEnd?: string
+			onInteractionEnd?: string | (() => void)
 		}
 	) {
 		this.info = info
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.markId = this.editor.markHistoryStoppingPoint('cropping')
 		this.snapshot = this.createSnapshot()
 		this.updateShapes()
@@ -61,6 +64,10 @@ export class Cropping extends StateNode {
 		this.cancel()
 	}
 
+	override onExit() {
+		this.parent.setCurrentToolIdMask(undefined)
+	}
+
 	private updateCursor() {
 		const selectedShape = this.editor.getSelectedShapes()[0]
 		if (!selectedShape) return
@@ -108,8 +115,13 @@ export class Cropping extends StateNode {
 	private complete() {
 		this.updateShapes()
 		kickoutOccludedShapes(this.editor, [this.snapshot.shape.id])
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
 		} else {
 			this.editor.setCroppingShape(null)
 			this.editor.setCurrentTool('select.idle')
@@ -118,8 +130,13 @@ export class Cropping extends StateNode {
 
 	private cancel() {
 		this.editor.bailToMark(this.markId)
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
 		} else {
 			this.editor.setCroppingShape(null)
 			this.editor.setCurrentTool('select.idle')

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -143,7 +143,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				this.editor.setCroppingShape(null)
 				this.editor.setCurrentTool('select.idle', {})

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.ts

@@ -4,7 +4,7 @@ import { CursorTypeMap } from '../../PointingResizeHandle'
 type TLPointingCropHandleInfo = TLPointerEventInfo & {
 	target: 'selection'
 } & {
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class PointingCropHandle extends StateNode {
@@ -14,7 +14,9 @@ export class PointingCropHandle extends StateNode {
 
 	override onEnter(info: TLPointingCropHandleInfo) {
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		const selectedShape = this.editor.getSelectedShapes()[0]
 		if (!selectedShape) return
 
@@ -47,12 +49,17 @@ export class PointingCropHandle extends StateNode {
 	}
 
 	override onPointerUp() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.editor.setCroppingShape(null)
-			this.editor.setCurrentTool('select.idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.editor.setCroppingShape(null)
+		this.editor.setCurrentTool('select.idle')
 	}
 
 	override onCancel() {
@@ -68,11 +75,16 @@ export class PointingCropHandle extends StateNode {
 	}
 
 	private cancel() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.editor.setCroppingShape(null)
-			this.editor.setCurrentTool('select.idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.editor.setCroppingShape(null)
+		this.editor.setCurrentTool('select.idle')
 	}
 }

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -12,6 +12,7 @@ import {
 	snapAngle,
 	sortByIndex,
 	structuredClone,
+	warnOnce,
 } from '@tldraw/editor'
 import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
@@ -20,7 +21,7 @@ import { getArrowBindings } from '../../../shapes/arrow/shared'
 export type DraggingHandleInfo = TLPointerEventInfo & {
 	shape: TLArrowShape | TLLineShape
 	target: 'handle'
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 	isCreating?: boolean
 	creatingMarkId?: string
 }
@@ -46,7 +47,9 @@ export class DraggingHandle extends StateNode {
 	override onEnter(info: DraggingHandleInfo) {
 		const { shape, isCreating, creatingMarkId, handle } = info
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.shapeId = shape.id
 		this.markId = ''
 
@@ -219,11 +222,17 @@ export class DraggingHandle extends StateNode {
 		}
 
 		const { onInteractionEnd } = this.info
-		if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
-			// Return to the tool that was active before this one,
-			// but only if tool lock is turned on!
-			this.editor.setCurrentTool(onInteractionEnd, { shapeId: this.shapeId })
-			return
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
+					// Return to the tool that was active before this one but only if tool lock is turned on!
+					this.editor.setCurrentTool(onInteractionEnd, { shapeId: this.shapeId })
+					return
+				}
+			} else {
+				onInteractionEnd?.()
+				return
+			}
 		}
 
 		this.parent.transition('idle')
@@ -248,9 +257,12 @@ export class DraggingHandle extends StateNode {
 
 		const { onInteractionEnd } = this.info
 		if (onInteractionEnd) {
-			// Return to the tool that was active before this one,
-			// whether tool lock is turned on or not!
-			this.editor.setCurrentTool(onInteractionEnd, { shapeId: this.shapeId })
+			if (typeof onInteractionEnd === 'string') {
+				// Return to the tool that was active before this one, whether tool lock is turned on or not!
+				this.editor.setCurrentTool(onInteractionEnd, { shapeId: this.shapeId })
+			} else {
+				onInteractionEnd?.()
+			}
 			return
 		}
 
@@ -294,7 +306,18 @@ export class DraggingHandle extends StateNode {
 
 		let nextHandle = { ...initialHandle, x: point.x, y: point.y }
 
-		if (initialHandle.canSnap && (isSnapMode ? !ctrlKey : ctrlKey)) {
+		let canSnap = false
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
+		if (initialHandle.canSnap && initialHandle.snapType) {
+			warnOnce(
+				'canSnap is deprecated. Cannot use both canSnap and snapType together - snapping disabled. Please use only snapType.'
+			)
+		} else {
+			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			canSnap = initialHandle.canSnap || initialHandle.snapType !== undefined
+		}
+
+		if (canSnap && (isSnapMode ? !ctrlKey : ctrlKey)) {
 			// We're snapping
 			const pageTransform = editor.getShapePageTransform(shape.id)
 			if (!pageTransform) throw Error('Expected a page transform')

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -516,7 +516,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				// Because Enter onKeyDown can happen outside the canvas (but then focus the canvas potentially),
 				// we need to check if the canvas was initially selecting something before continuing.

package/src/lib/tools/SelectTool/childStates/PointingArrowLabel.ts

@@ -23,7 +23,7 @@ export class PointingArrowLabel extends StateNode {
 
 	private info = {} as TLPointerEventInfo & {
 		shape: TLArrowShape
-		onInteractionEnd?: string
+		onInteractionEnd?: string | (() => void)
 		isCreating: boolean
 	}
 
@@ -34,12 +34,14 @@ export class PointingArrowLabel extends StateNode {
 	override onEnter(
 		info: TLPointerEventInfo & {
 			shape: TLArrowShape
-			onInteractionEnd?: string
+			onInteractionEnd?: string | (() => void)
 			isCreating: boolean
 		}
 	) {
 		const { shape } = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.info = info
 		this.shapeId = shape.id
 		this.didDrag = false
@@ -155,20 +157,30 @@ export class PointingArrowLabel extends StateNode {
 	}
 
 	private complete() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 
 	private cancel() {
 		this.editor.bailToMark(this.markId)
 
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 }

package/src/lib/tools/SelectTool/childStates/PointingResizeHandle.ts

@@ -17,7 +17,7 @@ export const CursorTypeMap: Record<TLSelectionHandle, TLCursorType> = {
 }
 
 type PointingResizeHandleInfo = Extract<TLPointerEventInfo, { target: 'selection' }> & {
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class PointingResizeHandle extends StateNode {
@@ -36,9 +36,16 @@ export class PointingResizeHandle extends StateNode {
 
 	override onEnter(info: PointingResizeHandleInfo) {
 		this.info = info
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.updateCursor()
 	}
 
+	override onExit() {
+		this.parent.setCurrentToolIdMask(undefined)
+	}
+
 	override onPointerMove() {
 		if (this.editor.inputs.isDragging) {
 			this.startResizing()
@@ -71,18 +78,28 @@ export class PointingResizeHandle extends StateNode {
 	}
 
 	private complete() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 
 	private cancel() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 }

package/src/lib/tools/SelectTool/childStates/PointingRotateHandle.ts

@@ -2,7 +2,7 @@ import { RotateCorner, StateNode, TLPointerEventInfo } from '@tldraw/editor'
 import { CursorTypeMap } from './PointingResizeHandle'
 
 type PointingRotateHandleInfo = Extract<TLPointerEventInfo, { target: 'selection' }> & {
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class PointingRotateHandle extends StateNode {
@@ -18,8 +18,10 @@ export class PointingRotateHandle extends StateNode {
 	}
 
 	override onEnter(info: PointingRotateHandleInfo) {
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
 		this.info = info
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.updateCursor()
 	}
 
@@ -60,18 +62,29 @@ export class PointingRotateHandle extends StateNode {
 	}
 
 	private complete() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				// Return to the tool that was active before this one, whether tool lock is turned on or not!
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd?.()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 
 	private cancel() {
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 }

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -29,7 +29,7 @@ export type ResizingInfo = TLPointerEventInfo & {
 	creatingMarkId?: string
 	onCreate?(shape: TLShape | null): void
 	creationCursorOffset?: VecLike
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class Resizing extends StateNode {
@@ -55,7 +55,9 @@ export class Resizing extends StateNode {
 		this.info = info
 		this.didHoldCommand = false
 
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.creationCursorOffset = creationCursorOffset
 
 		try {
@@ -135,11 +137,16 @@ export class Resizing extends StateNode {
 
 		this.editor.bailToMark(this.markId)
 
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-		} else {
-			this.parent.transition('idle')
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, {})
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle')
 	}
 
 	private complete() {
@@ -152,9 +159,17 @@ export class Resizing extends StateNode {
 			return
 		}
 
-		if (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
-			return
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				if (this.editor.getInstanceState().isToolLocked) {
+					this.editor.setCurrentTool(onInteractionEnd, {})
+					return
+				}
+			} else {
+				onInteractionEnd()
+				return
+			}
 		}
 
 		this.parent.transition('idle')