tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/lib/shapes/bookmark/bookmarks.ts

@@ -5,6 +5,7 @@ import {
 	TLAssetId,
 	TLBookmarkAsset,
 	TLBookmarkShape,
+	TLShapeId,
 	TLShapePartial,
 	createShapeId,
 	debounce,
@@ -84,6 +85,44 @@ export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmark
 	}
 }
 
+/**
+ * Resolve the asset id to render for a bookmark. Bookmark assets are keyed
+ * deterministically by URL, so if the shape has no `assetId` but an asset for
+ * its URL already exists in the store, use that.
+ *
+ * This keeps a bookmark from staying stuck on its placeholder after the shape
+ * is recreated outside of the hydration flow — e.g. on redo, where the
+ * placeholder is restored with a null `assetId` but its hydrated asset (created
+ * with `history: 'ignore'`) still lives in the store.
+ */
+export function getResolvedBookmarkAssetId(
+	editor: Editor,
+	assetId: TLAssetId | null,
+	url: string
+): TLAssetId | null {
+	if (assetId) return assetId
+	if (!url) return null
+
+	const derivedId: TLAssetId = AssetRecordType.createId(getHashForString(url))
+	return editor.getAsset(derivedId) ? derivedId : null
+}
+
+/**
+ * The effective height to render and measure a bookmark at.
+ *
+ * Normally this is the stored `props.h`. But when the shape's `assetId` resolves
+ * to a different asset than it stores — e.g. a placeholder restored on redo with
+ * a null `assetId` whose asset already exists in the store — `props.h` is stale
+ * (it still holds the placeholder height). In that case recompute the height
+ * from the resolved asset so rendering, the indicator, and the geometry/selection
+ * bounds all stay in sync.
+ */
+export function getBookmarkShapeHeight(editor: Editor, shape: TLBookmarkShape): number {
+	const resolvedAssetId = getResolvedBookmarkAssetId(editor, shape.props.assetId, shape.props.url)
+	if (resolvedAssetId === shape.props.assetId) return shape.props.h
+	return getBookmarkHeight(editor, resolvedAssetId)
+}
+
 async function _createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
 	if (editor.isDisposed) return
 
@@ -128,12 +167,17 @@ function createBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape)
 }
 
 /**
- * Creates a bookmark shape from a URL with unfurled metadata.
+ * Creates a bookmark shape from a URL.
+ *
+ * The shape is created immediately as a placeholder so the user gets visible
+ * feedback at the paste location, and the bookmark metadata (title, description,
+ * image, favicon) is fetched in the background. Once metadata resolves, the
+ * shape is patched with the resulting asset. If the fetch fails, the shape is
+ * left as a URL-only bookmark.
  *
  * @returns A Result containing the created bookmark shape or an error
  * @public
  */
-
 export async function createBookmarkFromUrl(
 	editor: Editor,
 	{
@@ -145,10 +189,12 @@ export async function createBookmarkFromUrl(
 	}
 ): Promise<Result<TLBookmarkShape, string>> {
 	try {
-		// Create the bookmark asset with unfurled metadata
-		const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+		// If we already have a bookmark asset for this URL (e.g. another bookmark
+		// shape was created from the same URL earlier), use it immediately rather
+		// than re-fetching.
+		const expectedAssetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
+		const existingAsset = editor.getAsset(expectedAssetId) as TLBookmarkAsset | null
 
-		// Create the bookmark shape
 		const shapeId = createShapeId()
 		const shapePartial: TLShapePartial<TLBookmarkShape> = {
 			id: shapeId,
@@ -159,26 +205,70 @@ export async function createBookmarkFromUrl(
 			opacity: 1,
 			props: {
 				url,
-				assetId: asset?.id || null,
+				assetId: existingAsset?.id ?? null,
 				w: BOOKMARK_WIDTH,
-				h: getBookmarkHeight(editor, asset?.id),
+				h: getBookmarkHeight(editor, existingAsset?.id),
 			},
 		}
 
 		editor.run(() => {
-			// Create the asset if we have one
-			if (asset) {
-				editor.createAssets([asset])
-			}
-
-			// Create the shape
 			editor.createShapes([shapePartial])
 		})
 
-		// Get the created shape
-		const createdShape = editor.getShape(shapeId) as TLBookmarkShape
+		const createdShape = editor.getShape<TLBookmarkShape>(shapeId)
+		if (!createdShape) {
+			return Result.err('Failed to create bookmark shape')
+		}
+
+		// If we already had the asset, we're done — no metadata fetch needed.
+		if (existingAsset) {
+			return Result.ok(createdShape)
+		}
+
+		// Otherwise kick off the metadata fetch in the background. The shape is
+		// already visible as a placeholder; once the asset resolves we'll patch
+		// the shape with its assetId.
+		void hydrateBookmarkShape(editor, shapeId, url)
+
 		return Result.ok(createdShape)
 	} catch (error) {
 		return Result.err(error instanceof Error ? error.message : 'Failed to create bookmark')
 	}
 }
+
+async function hydrateBookmarkShape(editor: Editor, shapeId: TLShapeId, url: string) {
+	let asset
+	try {
+		asset = await editor.getAssetForExternalContent({ type: 'url', url })
+	} catch (error) {
+		console.error(error)
+		return
+	}
+
+	if (editor.isDisposed) return
+	if (!asset) return
+
+	// The shape may have been deleted (e.g. via undo), had its URL changed, or
+	// had its asset replaced before the fetch resolved. In any of those cases we
+	// don't want to attach metadata for the old URL.
+	const shape = editor.getShape<TLBookmarkShape>(shapeId)
+	if (!shape) return
+	if (shape.props.url !== url) return
+	if (shape.props.assetId) return
+
+	editor.run(
+		() => {
+			if (!editor.getAsset(asset.id)) {
+				editor.createAssets([asset])
+			}
+			editor.updateShapes([
+				{
+					id: shapeId,
+					type: 'bookmark',
+					props: { assetId: asset.id },
+				},
+			])
+		},
+		{ history: 'ignore' }
+	)
+}

package/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -11,6 +11,7 @@ import {
 	TLResizeInfo,
 	TLShapeUtilCanvasSvgDef,
 	VecLike,
+	b64Vecs,
 	drawShapeMigrations,
 	drawShapeProps,
 	getColorValue,
@@ -266,11 +267,12 @@ function getDot(point: VecLike, sw: number) {
 }
 
 function getIsDot(shape: TLDrawShape) {
-	// First point is 16 base64 chars (3 Float32s = 12 bytes)
-	// Each delta point is 8 base64 chars (3 Float16s = 6 bytes)
-	// 1 point = 16 chars, 2 points = 24 chars
-	// Check if we have less than 2 points without decoding
-	return shape.props.segments.length === 1 && shape.props.segments[0].path.length < 24
+	// A dot is a single-point segment. isSinglePoint knows the per-encoding length
+	// (and takes the segment's dim), so this stays correct for both 2D and 3D paths.
+	// A bare length threshold can't: a 2-point 2D path is the same length as a 1-point
+	// 3D path, so only the dim disambiguates them.
+	const segment = shape.props.segments[0]
+	return shape.props.segments.length === 1 && b64Vecs.isSinglePoint(segment.path, segment.dim)
 }
 
 function DrawShapeSvg({

package/src/lib/shapes/draw/getPath.ts

@@ -109,7 +109,7 @@ export function getPointsFromDrawSegment(
 	scaleY: number,
 	points: Vec[] = []
 ) {
-	const _points = b64Vecs.decodePoints(segment.path)
+	const _points = b64Vecs.decodePoints(segment.path, segment.dim)
 
 	// Apply scale factors (used for lazy resize and flipping)
 	if (scaleX !== 1 || scaleY !== 1) {

package/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -8,6 +8,7 @@ import {
 	TLKeyboardEventInfo,
 	TLPointerEventInfo,
 	TLShapePartial,
+	DIM_2D,
 	Vec,
 	VecModel,
 	b64Vecs,
@@ -40,6 +41,11 @@ export class Drawing extends StateNode {
 	isPen = false
 	isPenOrStylus = false
 
+	// Encoding dimension for segments created during this stroke. `2` drops the
+	// constant pressure value (non-pressure devices), `undefined` keeps full 3D.
+	// Decided once in startShape from the input device — see the note there.
+	segmentDim: 2 | undefined = undefined
+
 	segmentMode = 'free' as 'free' | 'straight' | 'starting_straight' | 'starting_free'
 
 	didJustShiftClickToExtendPreviousShapeLine = false
@@ -157,9 +163,9 @@ export class Drawing extends StateNode {
 			const theme = this.editor.getCurrentTheme()
 			strokeWidth = theme.strokeWidth * STROKE_SIZES[size]
 		}
-		const firstPoint = b64Vecs.decodeFirstPoint(segments[0].path)
+		const firstPoint = b64Vecs.decodeFirstPoint(segments[0].path, segments[0].dim)
 		const lastSegment = segments[segments.length - 1]
-		const lastPoint = b64Vecs.decodeLastPoint(lastSegment.path)
+		const lastPoint = b64Vecs.decodeLastPoint(lastSegment.path, lastSegment.dim)
 
 		const isDynamicResizingEnabled = this.editor.user.getIsDynamicResizeMode()
 
@@ -180,6 +186,16 @@ export class Drawing extends StateNode {
 		)
 	}
 
+	/**
+	 * Build a segment from points, encoding `path` at this stroke's `segmentDim` and
+	 * attaching `dim: 2` only when z was dropped. 3D segments omit `dim` so they
+	 * serialize byte-identically to pre-#8879 data.
+	 */
+	private makeSegment(type: TLDrawShapeSegment['type'], points: VecModel[]): TLDrawShapeSegment {
+		const path = b64Vecs.encodePoints(points, this.segmentDim)
+		return this.segmentDim === DIM_2D ? { type, path, dim: DIM_2D } : { type, path }
+	}
+
 	private startShape() {
 		const inputs = this.editor.inputs
 		const originPagePoint = inputs.getOriginPagePoint()
@@ -199,6 +215,13 @@ export class Drawing extends StateNode {
 		// or a broken OS.
 		this.isPenOrStylus = (isPen && z !== 0) || (z > 0 && z < 0.5) || (z > 0.5 && z < 1)
 
+		// Decide the encoding dimension once, here, from the input device — not by
+		// scanning point data (content-driven). Device-driven keeps the encoded bytes
+		// deterministic and is O(1) at stroke start. Non-pressure devices report a
+		// constant z (0 / 0.5 / 1) that we normalize to 0.5 and omit entirely (2D);
+		// pen/stylus input keeps the full 3D encoding.
+		this.segmentDim = this.isPenOrStylus ? undefined : DIM_2D
+
 		const pressure = this.isPenOrStylus ? z * 1.25 : 0.5
 
 		this.segmentMode = this.editor.inputs.getShiftKey() ? 'straight' : 'free'
@@ -217,18 +240,15 @@ export class Drawing extends StateNode {
 
 				const prevSegment = last(shape.props.segments)
 				if (!prevSegment) throw Error('Expected a previous segment!')
-				const prevPoint = b64Vecs.decodeLastPoint(prevSegment.path)
+				const prevPoint = b64Vecs.decodeLastPoint(prevSegment.path, prevSegment.dim)
 				if (!prevPoint) throw Error('Expected a previous point!')
 
 				const { x, y } = this.editor.getPointInShapeSpace(shape, originPagePoint).toFixed()
 
-				const newSegment: TLDrawShapeSegment = {
-					type: this.segmentMode,
-					path: b64Vecs.encodePoints([
-						{ x: prevPoint.x, y: prevPoint.y, z: +pressure.toFixed(2) },
-						{ x, y, z: +pressure.toFixed(2) },
-					]),
-				}
+				const newSegment = this.makeSegment(this.segmentMode, [
+					{ x: prevPoint.x, y: prevPoint.y, z: +pressure.toFixed(2) },
+					{ x, y, z: +pressure.toFixed(2) },
+				])
 
 				// Convert prevPoint to page space
 				const prevPointPageSpace = Mat.applyToPoint(
@@ -285,12 +305,7 @@ export class Drawing extends StateNode {
 			props: {
 				isPen: this.isPenOrStylus,
 				scale: this.editor.getResizeScaleFactor(),
-				segments: [
-					{
-						type: this.segmentMode,
-						path: b64Vecs.encodePoints([initialPoint]),
-					},
-				],
+				segments: [this.makeSegment(this.segmentMode, [initialPoint])],
 			},
 		})
 		const shape = this.editor.getShape<DrawableShape>(id)
@@ -350,7 +365,7 @@ export class Drawing extends StateNode {
 					const prevSegment = last(segments)
 					if (!prevSegment) throw Error('Expected a previous segment!')
 
-					const prevLastPoint = b64Vecs.decodeLastPoint(prevSegment.path)
+					const prevLastPoint = b64Vecs.decodeLastPoint(prevSegment.path, prevSegment.dim)
 					if (!prevLastPoint) throw Error('Expected a previous last point!')
 
 					let newSegment: TLDrawShapeSegment
@@ -363,19 +378,13 @@ export class Drawing extends StateNode {
 					if (prevSegment.type === 'straight') {
 						this.currentLineLength += Vec.Dist(prevLastPoint, newLastPoint)
 
-						newSegment = {
-							type: 'straight',
-							path: b64Vecs.encodePoints([prevLastPoint, newLastPoint]),
-						}
+						newSegment = this.makeSegment('straight', [prevLastPoint, newLastPoint])
 
 						const transform = this.editor.getShapePageTransform(shape)!
 
 						this.pagePointWhereCurrentSegmentChanged = Mat.applyToPoint(transform, prevLastPoint)
 					} else {
-						newSegment = {
-							type: 'straight',
-							path: b64Vecs.encodePoints([newLastPoint, newPoint]),
-						}
+						newSegment = this.makeSegment('straight', [newLastPoint, newPoint])
 					}
 
 					const shapePartial: TLShapePartial<DrawableShape> = {
@@ -422,7 +431,10 @@ export class Drawing extends StateNode {
 
 					const newSegments = segments.slice()
 					const prevStraightSegment = newSegments[newSegments.length - 1]
-					const prevPoint = b64Vecs.decodeLastPoint(prevStraightSegment.path)
+					const prevPoint = b64Vecs.decodeLastPoint(
+						prevStraightSegment.path,
+						prevStraightSegment.dim
+					)
 
 					if (!prevPoint) {
 						throw Error('No previous point!')
@@ -436,10 +448,7 @@ export class Drawing extends StateNode {
 					// Initialize cache for the new free segment
 					this.currentSegmentPoints = interpolatedPoints
 
-					const newFreeSegment: TLDrawShapeSegment = {
-						type: 'free',
-						path: b64Vecs.encodePoints(interpolatedPoints),
-					}
+					const newFreeSegment = this.makeSegment('free', interpolatedPoints)
 
 					const finalSegments = [...newSegments, newFreeSegment]
 
@@ -516,8 +525,8 @@ export class Drawing extends StateNode {
 							if (!segment) break
 							if (segment.type === 'free') continue
 
-							const first = b64Vecs.decodeFirstPoint(segment.path)
-							const lastPoint = b64Vecs.decodeLastPoint(segment.path)
+							const first = b64Vecs.decodeFirstPoint(segment.path, segment.dim)
+							const lastPoint = b64Vecs.decodeLastPoint(segment.path, segment.dim)
 							if (!(first && lastPoint)) continue
 
 							// Snap to the nearest point on the segment, if it's closer than the previous snapped point
@@ -544,8 +553,8 @@ export class Drawing extends StateNode {
 
 				if (didSnap && snapSegment) {
 					const transform = this.editor.getShapePageTransform(shape)!
-					const first = b64Vecs.decodeFirstPoint(snapSegment.path)
-					const lastPoint = b64Vecs.decodeLastPoint(snapSegment.path)
+					const first = b64Vecs.decodeFirstPoint(snapSegment.path, snapSegment.dim)
+					const lastPoint = b64Vecs.decodeLastPoint(snapSegment.path, snapSegment.dim)
 					if (!first || !lastPoint) throw Error('Expected a last point!')
 
 					const A = Mat.applyToPoint(transform, first)
@@ -587,17 +596,20 @@ export class Drawing extends StateNode {
 				// without continuing the previous line. In this case, we want to remove the previous segment.
 
 				this.currentLineLength +=
-					newSegments.length && b64Vecs.decodeFirstPoint(newSegment.path)
-						? Vec.Dist(b64Vecs.decodeFirstPoint(newSegment.path)!, Vec.From(newPoint))
+					newSegments.length && b64Vecs.decodeFirstPoint(newSegment.path, newSegment.dim)
+						? Vec.Dist(
+								b64Vecs.decodeFirstPoint(newSegment.path, newSegment.dim)!,
+								Vec.From(newPoint)
+							)
 						: 0
 
 				newSegments[newSegments.length - 1] = {
 					...newSegment,
 					type: 'straight',
-					path: b64Vecs.encodePoints([
-						b64Vecs.decodeFirstPoint(newSegment.path)!,
-						Vec.From(newPoint),
-					]),
+					path: b64Vecs.encodePoints(
+						[b64Vecs.decodeFirstPoint(newSegment.path, newSegment.dim)!, Vec.From(newPoint)],
+						newSegment.dim
+					),
 				}
 
 				const shapePartial: TLShapePartial<DrawableShape> = {
@@ -642,7 +654,7 @@ export class Drawing extends StateNode {
 				const newSegment = newSegments[newSegments.length - 1]
 				newSegments[newSegments.length - 1] = {
 					...newSegment,
-					path: b64Vecs.encodePoints(cachedPoints),
+					path: b64Vecs.encodePoints(cachedPoints, newSegment.dim),
 				}
 
 				const dvStrokeWidth = (getDisplayValues(this.util as any, shape) as { strokeWidth: number })
@@ -692,12 +704,7 @@ export class Drawing extends StateNode {
 						props: {
 							isPen: this.isPenOrStylus,
 							scale: props.scale,
-							segments: [
-								{
-									type: 'free',
-									path: b64Vecs.encodePoints([initialPoint]),
-								},
-							],
+							segments: [this.makeSegment('free', [initialPoint])],
 						},
 					})
 
@@ -724,7 +731,7 @@ export class Drawing extends StateNode {
 		let length = 0
 
 		for (let j = 0; j < segments.length; j++) {
-			const points = b64Vecs.decodePoints(segments[j].path)
+			const points = b64Vecs.decodePoints(segments[j].path, segments[j].dim)
 			for (let i = 0; i < points.length - 1; i++) {
 				length += Vec.Dist2(points[i], points[i + 1])
 			}

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

@@ -18,7 +18,7 @@ import {
 } from '@tldraw/editor'
 import {
 	DEFAULT_EMBED_DEFINITIONS,
-	EmbedDefinition,
+	DefaultEmbedConfig,
 	TLEmbedDefinition,
 	TLEmbedShapePermissions,
 	embedShapePermissionDefaults,
@@ -41,6 +41,15 @@ export interface EmbedShapeOptions extends ShapeOptionsWithDisplayValues<
 > {
 	/** The embed definitions to use for this shape util. */
 	readonly embedDefinitions: readonly TLEmbedDefinition[]
+	/**
+	 * Per-embed configuration, keyed by embed type. Passed to each definition's `toEmbedUrl` when
+	 * building its embed URL — for example, an API key for the default Google Maps embed:
+	 *
+	 * ```ts
+	 * EmbedShapeUtil.configure({ embedConfig: { google_maps: { apiKey: '...' } } })
+	 * ```
+	 */
+	readonly embedConfig?: DefaultEmbedConfig & Record<string, unknown>
 }
 
 const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
@@ -58,6 +67,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 
 	override options: EmbedShapeOptions = {
 		embedDefinitions: DEFAULT_EMBED_DEFINITIONS,
+		embedConfig: {},
 		getDefaultDisplayValues(): EmbedShapeUtilDisplayValues {
 			return {
 				showShadow: true,
@@ -74,10 +84,10 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 		return result.definition.canEditWhileLocked ?? true
 	}
 
-	private static legacyEmbedDefinitions: readonly EmbedDefinition[] | null = null
+	private static legacyEmbedDefinitions: readonly TLEmbedDefinition[] | null = null
 
 	/** @deprecated - Use `EmbedShapeUtil.configure({ embedDefinitions: [...] })` instead. */
-	static setEmbedDefinitions(embedDefinitions: readonly EmbedDefinition[]) {
+	static setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]) {
 		EmbedShapeUtil.legacyEmbedDefinitions = embedDefinitions
 	}
 
@@ -90,7 +100,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 	}
 
 	getEmbedDefinition(url: string): TLEmbedResult {
-		return getEmbedInfo(this.getEmbedDefs(), url)
+		return getEmbedInfo(this.getEmbedDefs(), url, this.options.embedConfig)
 	}
 
 	override getText(shape: TLEmbedShape) {

package/src/lib/shapes/frame/FrameShapeTool.ts

@@ -1,4 +1,4 @@
-import { BaseBoxShapeTool, TLShape, TLShapeId } from '@tldraw/editor'
+import { BaseBoxShapeTool, Editor, TLShape, TLShapeId } from '@tldraw/editor'
 
 /** @public */
 export class FrameShapeTool extends BaseBoxShapeTool {
@@ -9,29 +9,7 @@ export class FrameShapeTool extends BaseBoxShapeTool {
 	override onCreate(shape: TLShape | null): void {
 		if (!shape) return
 
-		const bounds = this.editor.getShapePageBounds(shape)!
-		const shapesToAddToFrame: TLShapeId[] = []
-		const ancestorIds = this.editor.getShapeAncestors(shape).map((shape) => shape.id)
-
-		this.editor.getSortedChildIdsForParent(shape.parentId).map((siblingShapeId) => {
-			const siblingShape = this.editor.getShape(siblingShapeId)
-			if (!siblingShape) return
-			// We don't want to frame the frame itself
-			if (siblingShape.id === shape.id) return
-			if (siblingShape.isLocked) return
-
-			const pageShapeBounds = this.editor.getShapePageBounds(siblingShape)
-			if (!pageShapeBounds) return
-
-			// Frame shape encloses page shape
-			if (bounds.contains(pageShapeBounds)) {
-				if (canEnclose(siblingShape, ancestorIds, shape)) {
-					shapesToAddToFrame.push(siblingShape.id)
-				}
-			}
-		})
-
-		this.editor.reparentShapes(shapesToAddToFrame, shape.id)
+		this.editor.reparentShapes(getEnclosedShapeIds(this.editor, shape), shape.id)
 
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.editor.setCurrentTool('frame')
@@ -41,6 +19,39 @@ export class FrameShapeTool extends BaseBoxShapeTool {
 	}
 }
 
+/**
+ * Get the ids of the sibling shapes that a frame would enclose at its current page bounds.
+ *
+ * @internal
+ */
+export function getEnclosedShapeIds(editor: Editor, shape: TLShape): TLShapeId[] {
+	const bounds = editor.getShapePageBounds(shape)
+	if (!bounds) return []
+
+	const enclosedShapeIds: TLShapeId[] = []
+	const ancestorIds = editor.getShapeAncestors(shape).map((shape) => shape.id)
+
+	editor.getSortedChildIdsForParent(shape.parentId).map((siblingShapeId) => {
+		const siblingShape = editor.getShape(siblingShapeId)
+		if (!siblingShape) return
+		// We don't want to frame the frame itself
+		if (siblingShape.id === shape.id) return
+		if (siblingShape.isLocked) return
+
+		const pageShapeBounds = editor.getShapePageBounds(siblingShape)
+		if (!pageShapeBounds) return
+
+		// Frame shape encloses page shape
+		if (bounds.contains(pageShapeBounds)) {
+			if (canEnclose(siblingShape, ancestorIds, shape)) {
+				enclosedShapeIds.push(siblingShape.id)
+			}
+		}
+	})
+
+	return enclosedShapeIds
+}
+
 /** @internal */
 function canEnclose(shape: TLShape, ancestorIds: TLShapeId[], frame: TLShape): boolean {
 	// We don't want to pull in shapes that are ancestors of the frame (can create a cycle)

package/src/lib/shapes/geo/GeoShapeUtil.test.tsx

@@ -182,6 +182,52 @@ describe('Resizing geo shapes with labels', () => {
 	})
 })
 
+describe('Geo shapes with programmatically-authored empty rich text', () => {
+	const geoId = createShapeId('geo')
+
+	function getGeo() {
+		return editor.getShape<TLGeoShape>(geoId)!
+	}
+
+	// An empty paragraph can be encoded two equally-valid ways. The interactive
+	// editor emits the first (no `content` key); programmatic authoring (snapshot
+	// load, agents emitting tldraw JSON) commonly emits the second (`content: []`).
+	// Both mean "no label", so neither should grow the shape to fit a phantom line.
+	const emptyForms = [
+		{
+			label: 'paragraph with no content key (toRichText output)',
+			richText: toRichText(''),
+		},
+		{
+			label: 'paragraph with empty content array',
+			richText: {
+				type: 'doc',
+				content: [{ type: 'paragraph', attrs: { dir: 'auto' }, content: [] }],
+			} as TLGeoShape['props']['richText'],
+		},
+		{
+			label: 'doc with empty content array',
+			richText: { type: 'doc', content: [] } as TLGeoShape['props']['richText'],
+		},
+	]
+
+	for (const { label, richText } of emptyForms) {
+		test(`does not grow height for an empty label: ${label}`, () => {
+			editor.createShapes([
+				{
+					id: geoId,
+					type: 'geo',
+					props: { w: 110, h: 24, geo: 'rectangle', size: 's', richText },
+				},
+			])
+
+			const geo = getGeo()
+			expect(geo.props.h).toBe(24)
+			expect(geo.props.growY).toBe(0)
+		})
+	}
+})
+
 describe('GeoShapeUtil.configure with customGeoTypes', () => {
 	// Snapshot the built-in geo values so we can clean up any custom keys added
 	// during these tests. `GeoShapeUtil.configure({ customGeoTypes })` mutates

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -30,6 +30,7 @@ import {
 	getFontsFromRichText,
 	isEqual,
 	lerp,
+	resolveLineHeightPx,
 	toRichText,
 	useColorMode,
 	useValue,
@@ -271,7 +272,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		// Calculate minimum label dimensions based on font size and shape size
 		const unscaledMinWidth = Math.min(100, unscaledShapeW / 2)
 		const unscaledMinHeight = Math.min(
-			dv.labelFontSize * dv.labelLineHeight + dv.labelPadding * 2,
+			resolveLineHeightPx(dv.labelFontSize, dv.labelLineHeight) + dv.labelPadding * 2,
 			unscaledShapeH / 2
 		)
 

package/src/lib/shapes/geo/toolStates/Pointing.ts

@@ -5,6 +5,7 @@ import {
 	TLPointerEventInfo,
 	Vec,
 	createShapeId,
+	cancelShapeCreationOnLongPress,
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 import { GeoShapeUtil } from '../GeoShapeUtil'
@@ -17,6 +18,10 @@ export class Pointing extends StateNode {
 		this.complete()
 	}
 
+	override onLongPress() {
+		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+	}
+
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.getIsDragging()) {
 			const originPagePoint = this.editor.inputs.getOriginPagePoint()