@tldraw/editor 3.14.0-canary.4c533b76dc35 → 3.14.0-canary.4deeaa9df15f

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.14.0-canary.4c533b76dc35",
+  "version": "3.14.0-canary.4deeaa9df15f",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,20 +48,19 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.14.0-canary.4c533b76dc35",
-    "@tldraw/state-react": "3.14.0-canary.4c533b76dc35",
-    "@tldraw/store": "3.14.0-canary.4c533b76dc35",
-    "@tldraw/tlschema": "3.14.0-canary.4c533b76dc35",
-    "@tldraw/utils": "3.14.0-canary.4c533b76dc35",
-    "@tldraw/validate": "3.14.0-canary.4c533b76dc35",
+    "@tldraw/state": "3.14.0-canary.4deeaa9df15f",
+    "@tldraw/state-react": "3.14.0-canary.4deeaa9df15f",
+    "@tldraw/store": "3.14.0-canary.4deeaa9df15f",
+    "@tldraw/tlschema": "3.14.0-canary.4deeaa9df15f",
+    "@tldraw/utils": "3.14.0-canary.4deeaa9df15f",
+    "@tldraw/validate": "3.14.0-canary.4deeaa9df15f",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
-    "is-plain-object": "^5.0.0",
-    "lodash.isequal": "^4.5.0"
+    "is-plain-object": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/src/index.ts

@@ -4,7 +4,6 @@ import 'core-js/stable/array/flat-map.js'
 import 'core-js/stable/array/flat.js'
 import 'core-js/stable/string/at.js'
 import 'core-js/stable/string/replace-all.js'
-export { areShapesContentEqual } from './lib/utils/areShapesContentEqual'
 
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/state'
@@ -175,6 +174,7 @@ export {
 } from './lib/editor/managers/SnapManager/SnapManager'
 export {
 	TextManager,
+	type TLMeasureTextOpts,
 	type TLMeasureTextSpanOpts,
 } from './lib/editor/managers/TextManager/TextManager'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'

package/src/lib/config/TLSessionStateSnapshot.ts

@@ -14,12 +14,12 @@ import {
 import {
 	deleteFromSessionStorage,
 	getFromSessionStorage,
+	isEqual,
 	setInSessionStorage,
 	structuredClone,
 	uniqueId,
 } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
-import isEqual from 'lodash.isequal'
 import { tlenv } from '../globals/environment'
 
 const tabIdKey = 'TLDRAW_TAB_ID_v2' as const

package/src/lib/editor/Editor.test.ts

@@ -233,7 +233,7 @@ describe('getShapesAtPoint', () => {
 		})
 	})
 
-	it('returns shapes at a point in order of their index', () => {
+	it('returns shapes at a point in reverse z-index order', () => {
 		// Point at (50, 50) should hit shape3's edge (since it's at 50,50 with size 100x100)
 		// This point is exactly at the top-left corner of shape3
 		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
@@ -313,12 +313,12 @@ describe('getShapesAtPoint', () => {
 		const shapes = editor.getShapesAtPoint({ x: 100, y: 0 })
 		const shapeIds = shapes.map((s) => s.id)
 
-		// Both shapes should be detected at this overlapping point
-		expect(shapeIds).toEqual([ids.shape1, ids.shape2])
+		// Both shapes should be detected at this overlapping point (reversed order - top-most first)
+		expect(shapeIds).toEqual([ids.shape2, ids.shape1])
 		expect(shapes).toHaveLength(2)
 	})
 
-	it('maintains shape order from getCurrentPageShapesSorted', () => {
+	it('maintains reverse shape order and responds to z-index changes', () => {
 		// Create filled shape that overlaps with shape2
 		editor.createShape({
 			id: ids.shape5,
@@ -333,14 +333,14 @@ describe('getShapesAtPoint', () => {
 		const shapes = editor.getShapesAtPoint({ x: 120, y: 120 }, { hitInside: true })
 		const shapeIds = shapes.map((s) => s.id)
 
-		// All shapes that contain this point should be returned in z-index order
-		expect(shapeIds).toEqual([ids.shape1, ids.shape2, ids.shape3, ids.shape4, ids.shape5])
+		// All shapes that contain this point should be returned in reverse z-index order (top-most first)
+		expect(shapeIds).toEqual([ids.shape5, ids.shape4, ids.shape3, ids.shape2, ids.shape1])
 
-		// After bringing shape2 to front, order should change
+		// After bringing shape2 to front, order should change (shape2 becomes top-most)
 		editor.bringToFront([ids.shape2])
 		const shapes2 = editor.getShapesAtPoint({ x: 120, y: 120 }, { hitInside: true })
 		const shapeIds2 = shapes2.map((s) => s.id)
-		expect(shapeIds2).toEqual([ids.shape1, ids.shape3, ids.shape4, ids.shape5, ids.shape2])
+		expect(shapeIds2).toEqual([ids.shape2, ids.shape5, ids.shape4, ids.shape3, ids.shape1])
 	})
 
 	it('combines hitInside and margin options', () => {
@@ -361,7 +361,7 @@ describe('getShapesAtPoint', () => {
 		isShapeHiddenSpy.mockRestore()
 	})
 
-	it('returns multiple shapes at same point in z-index order', () => {
+	it('returns multiple shapes at same point in reverse z-index order', () => {
 		// Create two shapes at exactly the same position (away from existing shapes)
 		editor.createShape({
 			id: ids.overlap1,
@@ -383,8 +383,8 @@ describe('getShapesAtPoint', () => {
 		const shapes = editor.getShapesAtPoint({ x: 600, y: 600 })
 		const shapeIds = shapes.map((s) => s.id)
 
-		// Should return both shapes in z-index order
-		expect(shapeIds).toEqual([ids.overlap1, ids.overlap2])
+		// Should return both shapes in reverse z-index order (top-most first)
+		expect(shapeIds).toEqual([ids.overlap2, ids.overlap1])
 		expect(shapes).toHaveLength(2)
 	})
 

package/src/lib/editor/Editor.ts

@@ -348,6 +348,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.getContainer = getContainer
 
 		this.textMeasure = new TextManager(this)
+		this.disposables.add(() => this.textMeasure.dispose())
+
 		this.fonts = new FontManager(this, fontAssetUrls)
 
 		this._tickManager = new TickManager(this)
@@ -506,14 +508,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 				shape: {
 					afterChange: (shapeBefore, shapeAfter) => {
 						for (const binding of this.getBindingsInvolvingShape(shapeAfter)) {
-							if (areShapesContentEqual(shapeBefore, shapeAfter)) continue
-
 							invalidBindingTypes.add(binding.type)
 							if (binding.fromId === shapeAfter.id) {
 								this.getBindingUtil(binding).onAfterChangeFromShape?.({
 									binding,
 									shapeBefore,
 									shapeAfter,
+									reason: 'self',
 								})
 							}
 							if (binding.toId === shapeAfter.id) {
@@ -521,6 +522,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 									binding,
 									shapeBefore,
 									shapeAfter,
+									reason: 'self',
 								})
 							}
 						}
@@ -539,6 +541,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 											binding,
 											shapeBefore: descendantShape,
 											shapeAfter: descendantShape,
+											reason: 'ancestry',
 										})
 									}
 									if (binding.toId === descendantShape.id) {
@@ -546,6 +549,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 											binding,
 											shapeBefore: descendantShape,
 											shapeAfter: descendantShape,
+											reason: 'ancestry',
 										})
 									}
 								}
@@ -2118,6 +2122,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getShapesPageBounds(this.getSelectedShapeIds())
 	}
 
+	/**
+	 * The bounds of the selection bounding box in the current page space.
+	 *
+	 * @readonly
+	 * @public
+	 */
+	@computed getSelectionScreenBounds(): Box | undefined {
+		const bounds = this.getSelectionPageBounds()
+		if (!bounds) return undefined
+		const { x, y } = this.pageToScreen(bounds.point)
+		const zoom = this.getZoomLevel()
+		return new Box(x, y, bounds.width * zoom, bounds.height * zoom)
+	}
+
 	/**
 	 * @internal
 	 */
@@ -5035,28 +5053,33 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	isShapeOrAncestorLocked(shape?: TLShape): boolean
-	isShapeOrAncestorLocked(id?: TLShapeId): boolean
-	isShapeOrAncestorLocked(arg?: TLShape | TLShapeId): boolean {
-		const shape = typeof arg === 'string' ? this.getShape(arg) : arg
-		if (shape === undefined) return false
-		if (shape.isLocked) return true
-		return this.isShapeOrAncestorLocked(this.getShapeParent(shape))
+	isShapeOrAncestorLocked(shape?: TLShape | TLShapeId): boolean {
+		const _shape = shape && this.getShape(shape)
+		if (_shape === undefined) return false
+		if (_shape.isLocked) return true
+		return this.isShapeOrAncestorLocked(this.getShapeParent(_shape))
 	}
 
+	/**
+	 * Get shapes that are outside of the viewport.
+	 *
+	 * @public
+	 */
 	@computed
-	private _notVisibleShapes() {
-		return notVisibleShapes(this)
+	getNotVisibleShapes() {
+		return this._notVisibleShapes.get()
 	}
 
+	private _notVisibleShapes = notVisibleShapes(this)
+
 	/**
-	 * Get culled shapes.
+	 * Get culled shapes (those that should not render), taking into account which shapes are selected or editing.
 	 *
 	 * @public
 	 */
 	@computed
 	getCulledShapes() {
-		const notVisibleShapes = this._notVisibleShapes().get()
+		const notVisibleShapes = this.getNotVisibleShapes()
 		const selectedShapeIds = this.getSelectedShapeIds()
 		const editingId = this.getEditingShapeId()
 		const culledShapes = new Set<TLShapeId>(notVisibleShapes)
@@ -5305,21 +5328,23 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.getShapesAtPoint({ x: 100, y: 100 })
-	 * editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, exact: true })
+	 * editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, margin: 8 })
 	 * ```
 	 *
 	 * @param point - The page point to test.
 	 * @param opts - The options for the hit point testing.
 	 *
+	 * @returns An array of shapes at the given point, sorted in reverse order of their absolute z-index (top-most shape first).
+	 *
 	 * @public
 	 */
 	getShapesAtPoint(
 		point: VecLike,
 		opts = {} as { margin?: number; hitInside?: boolean }
 	): TLShape[] {
-		return this.getCurrentPageShapesSorted().filter(
-			(shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts)
-		)
+		return this.getCurrentPageShapesSorted()
+			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.reverse()
 	}
 
 	/**

package/src/lib/editor/bindings/BindingUtil.ts

@@ -62,6 +62,12 @@ export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
 	shapeBefore: TLShape
 	/** The shape record after the change is made. */
 	shapeAfter: TLShape
+	/**
+	 * Why did this shape change?
+	 * - 'self': the shape itself changed
+	 * - 'ancestry': the ancestry of the shape changed, but the shape itself may not have done
+	 */
+	reason: 'self' | 'ancestry'
 }
 
 /**

package/src/lib/editor/managers/FontManager/FontManager.ts

@@ -96,8 +96,7 @@ export class FontManager {
 			},
 			{
 				areResultsEqual: areArraysShallowEqual,
-				// @ts-expect-error
-				areRecordsEqual: (a, b) => a.props.richText === b.props.richText,
+				areRecordsEqual: (a, b) => a.props === b.props && a.meta === b.meta,
 			}
 		)
 

package/src/lib/editor/managers/TextManager/TextManager.test.ts

@@ -99,7 +99,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle empty text', () => {
-			const result = textManager.measureText('', defaultOpts)
+			const result = textManager.measureText('', { ...defaultOpts, measureScrollWidth: true })
 			expect(result).toHaveProperty('x', 0)
 			expect(result).toHaveProperty('y', 0)
 			expect(result).toHaveProperty('w')
@@ -128,7 +128,6 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
-				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -141,7 +140,6 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
-				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -154,7 +152,6 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
-				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -173,7 +170,6 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
-				scrollWidth: expect.any(Number),
 			})
 		})
 	})

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -20,6 +20,27 @@ const textAlignmentsForLtr = {
 	'end-legacy': 'right',
 }
 
+/** @public */
+export interface TLMeasureTextOpts {
+	fontStyle: string
+	fontWeight: string
+	fontFamily: string
+	fontSize: number
+	lineHeight: number
+	/**
+	 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
+	 * is null, the text will be measured without wrapping, but explicit line breaks and
+	 * space are preserved.
+	 */
+	maxWidth: null | number
+	minWidth?: null | number
+	// todo: make this a number so that it is consistent with other TLMeasureTextSpanOpts
+	padding: string
+	otherStyles?: Record<string, string>
+	disableOverflowWrapBreaking?: boolean
+	measureScrollWidth?: boolean
+}
+
 /** @public */
 export interface TLMeasureTextSpanOpts {
 	overflow: 'wrap' | 'truncate-ellipsis' | 'truncate-clip'
@@ -33,96 +54,98 @@ export interface TLMeasureTextSpanOpts {
 	lineHeight: number
 	textAlign: TLDefaultHorizontalAlignStyle
 	otherStyles?: Record<string, string>
+	measureScrollWidth?: boolean
 }
 
 const spaceCharacterRegex = /\s/
 
 /** @public */
 export class TextManager {
-	private baseElem: HTMLDivElement
+	private elm: HTMLDivElement
+	private defaultStyles: Record<string, string | null>
 
 	constructor(public editor: Editor) {
-		this.baseElem = document.createElement('div')
-		this.baseElem.classList.add('tl-text')
-		this.baseElem.classList.add('tl-text-measure')
-		this.baseElem.tabIndex = -1
+		const elm = document.createElement('div')
+		elm.classList.add('tl-text')
+		elm.classList.add('tl-text-measure')
+		elm.setAttribute('dir', 'auto')
+		elm.tabIndex = -1
+		this.editor.getContainer().appendChild(elm)
+
+		// we need to save the default styles so that we can restore them when we're done
+		// these must be the css names, not the js names for the styles
+		this.defaultStyles = {
+			'word-break': 'auto',
+			width: null,
+			height: null,
+			'max-width': null,
+			'min-width': null,
+		}
+
+		this.elm = elm
 	}
 
-	measureText(
-		textToMeasure: string,
-		opts: {
-			fontStyle: string
-			fontWeight: string
-			fontFamily: string
-			fontSize: number
-			lineHeight: number
-			/**
-			 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
-			 * is null, the text will be measured without wrapping, but explicit line breaks and
-			 * space are preserved.
-			 */
-			maxWidth: null | number
-			minWidth?: null | number
-			padding: string
-			disableOverflowWrapBreaking?: boolean
+	dispose() {
+		return this.elm.remove()
+	}
+
+	private resetElmStyles() {
+		const { elm, defaultStyles } = this
+		for (const key in defaultStyles) {
+			elm.style.setProperty(key, defaultStyles[key])
 		}
-	): BoxModel & { scrollWidth: number } {
+	}
+
+	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const div = document.createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
 		return this.measureHtml(div.innerHTML, opts)
 	}
 
-	measureHtml(
-		html: string,
-		opts: {
-			fontStyle: string
-			fontWeight: string
-			fontFamily: string
-			fontSize: number
-			lineHeight: number
-			/**
-			 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
-			 * is null, the text will be measured without wrapping, but explicit line breaks and
-			 * space are preserved.
-			 */
-			maxWidth: null | number
-			minWidth?: null | number
-			otherStyles?: Record<string, string>
-			padding: string
-			disableOverflowWrapBreaking?: boolean
+	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
+		const { elm } = this
+
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
 		}
-	): BoxModel & { scrollWidth: number } {
-		// Duplicate our base element; we don't need to clone deep
-		const wrapperElm = this.baseElem.cloneNode() as HTMLDivElement
-		this.editor.getContainer().appendChild(wrapperElm)
-		wrapperElm.innerHTML = html
-		this.baseElem.insertAdjacentElement('afterend', wrapperElm)
-
-		wrapperElm.setAttribute('dir', 'auto')
-		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
-		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
-		wrapperElm.style.setProperty('unicode-bidi', 'plaintext')
-		wrapperElm.style.setProperty('font-family', opts.fontFamily)
-		wrapperElm.style.setProperty('font-style', opts.fontStyle)
-		wrapperElm.style.setProperty('font-weight', opts.fontWeight)
-		wrapperElm.style.setProperty('font-size', opts.fontSize + 'px')
-		wrapperElm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
-		wrapperElm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
-		wrapperElm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
-		wrapperElm.style.setProperty('padding', opts.padding)
-		wrapperElm.style.setProperty(
-			'overflow-wrap',
-			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
-		)
+
+		elm.innerHTML = html
+
+		// Apply the default styles to the element (for all styles here or that were ever seen in opts.otherStyles)
+		this.resetElmStyles()
+
+		elm.style.setProperty('font-family', opts.fontFamily)
+		elm.style.setProperty('font-style', opts.fontStyle)
+		elm.style.setProperty('font-weight', opts.fontWeight)
+		elm.style.setProperty('font-size', opts.fontSize + 'px')
+		elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
+		elm.style.setProperty('padding', opts.padding)
+
+		if (opts.maxWidth) {
+			elm.style.setProperty('max-width', opts.maxWidth + 'px')
+		}
+
+		if (opts.minWidth) {
+			elm.style.setProperty('min-width', opts.minWidth + 'px')
+		}
+
+		if (opts.disableOverflowWrapBreaking) {
+			elm.style.setProperty('overflow-wrap', 'normal')
+		}
+
 		if (opts.otherStyles) {
 			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				wrapperElm.style.setProperty(key, value)
+				elm.style.setProperty(key, value)
 			}
 		}
 
-		const scrollWidth = wrapperElm.scrollWidth
-		const rect = wrapperElm.getBoundingClientRect()
-		wrapperElm.remove()
+		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
+		const rect = elm.getBoundingClientRect()
 
 		return {
 			x: 0,
@@ -247,27 +270,29 @@ export class TextManager {
 	): { text: string; box: BoxModel }[] {
 		if (textToMeasure === '') return []
 
-		const elm = this.baseElem.cloneNode() as HTMLDivElement
-		this.editor.getContainer().appendChild(elm)
+		const { elm } = this
+
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
+		}
+
+		this.resetElmStyles()
+
+		elm.style.setProperty('font-family', opts.fontFamily)
+		elm.style.setProperty('font-style', opts.fontStyle)
+		elm.style.setProperty('font-weight', opts.fontWeight)
+		elm.style.setProperty('font-size', opts.fontSize + 'px')
+		elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
 
 		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
-		elm.setAttribute('dir', 'auto')
-		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
-		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
-		elm.style.setProperty('unicode-bidi', 'plaintext')
 		elm.style.setProperty('width', `${elementWidth}px`)
 		elm.style.setProperty('height', 'min-content')
-		elm.style.setProperty('font-size', `${opts.fontSize}px`)
-		elm.style.setProperty('font-family', opts.fontFamily)
-		elm.style.setProperty('font-weight', opts.fontWeight)
-		elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
 		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
-		elm.style.setProperty('font-style', opts.fontStyle)
-		if (opts.otherStyles) {
-			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				elm.style.setProperty(key, value)
-			}
-		}
 
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
@@ -277,6 +302,12 @@ export class TextManager {
 			elm.style.setProperty('word-break', 'break-all')
 		}
 
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
+			}
+		}
+
 		const normalizedText = normalizeTextForDom(textToMeasure)
 
 		// Render the text into the measurement element:
@@ -313,11 +344,10 @@ export class TextManager {
 					h: lastSpan.box.h,
 				},
 			})
+
 			return truncatedSpans
 		}
 
-		elm.remove()
-
 		return spans
 	}
 }

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -21,7 +21,7 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 	}
 
 	canResize() {
-		return false
+		return true
 	}
 
 	canResizeChildren() {

package/src/lib/editor/types/external-content.ts

@@ -52,7 +52,7 @@ export interface TLTextExternalContent extends TLBaseExternalContent {
 export interface TLFilesExternalContent extends TLBaseExternalContent {
 	type: 'files'
 	files: File[]
-	ignoreParent: boolean
+	ignoreParent?: boolean
 }
 
 /** @public */

package/src/lib/hooks/useCanvasEvents.ts

@@ -137,7 +137,6 @@ export function useCanvasEvents() {
 						type: 'files',
 						files,
 						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
-						ignoreParent: false,
 					})
 					return
 				}

package/src/lib/primitives/Box.ts

@@ -591,14 +591,6 @@ export class Box {
 		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
 	}
 
-	prettyMuchEquals(other: Box | BoxModel) {
-		return this.clone().toFixed().equals(Box.From(other).toFixed())
-	}
-
-	static PrettyMuchEquals(a: Box | BoxModel, b: Box | BoxModel) {
-		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
-	}
-
 	zeroFix() {
 		this.w = Math.max(1, this.w)
 		this.h = Math.max(1, this.h)

package/src/lib/utils/areShapesContentEqual.ts

@@ -1,5 +1,4 @@
 import { TLShape } from '@tldraw/tlschema'
 
-/** @public */
 export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
-	a.parentId === b.parentId && a.props === b.props && a.meta === b.meta
+	a.props === b.props && a.meta === b.meta