@tldraw/editor 3.14.0-canary.ff61ab6deaa2 → 3.14.0-internal.601adf6e424b

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.14.0-canary.ff61ab6deaa2",
+  "version": "3.14.0-internal.601adf6e424b",
   "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.ff61ab6deaa2",
-    "@tldraw/state-react": "3.14.0-canary.ff61ab6deaa2",
-    "@tldraw/store": "3.14.0-canary.ff61ab6deaa2",
-    "@tldraw/tlschema": "3.14.0-canary.ff61ab6deaa2",
-    "@tldraw/utils": "3.14.0-canary.ff61ab6deaa2",
-    "@tldraw/validate": "3.14.0-canary.ff61ab6deaa2",
+    "@tldraw/state": "3.14.0-internal.601adf6e424b",
+    "@tldraw/state-react": "3.14.0-internal.601adf6e424b",
+    "@tldraw/store": "3.14.0-internal.601adf6e424b",
+    "@tldraw/tlschema": "3.14.0-internal.601adf6e424b",
+    "@tldraw/utils": "3.14.0-internal.601adf6e424b",
+    "@tldraw/validate": "3.14.0-internal.601adf6e424b",
     "@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'
@@ -253,6 +253,7 @@ export {
 	type TLExternalContent,
 	type TLExternalContentSource,
 	type TLFileExternalAsset,
+	type TLFileReplaceExternalContent,
 	type TLFilesExternalContent,
 	type TLSvgTextExternalContent,
 	type TLTextExternalContent,

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

@@ -17,6 +17,7 @@ type ICustomShape = TLBaseShape<
 		w: number
 		h: number
 		text: string | undefined
+		isFilled: boolean
 	}
 >
 
@@ -26,19 +27,21 @@ class CustomShape extends ShapeUtil<ICustomShape> {
 		w: T.number,
 		h: T.number,
 		text: T.string.optional(),
+		isFilled: T.boolean,
 	}
 	getDefaultProps(): ICustomShape['props'] {
 		return {
 			w: 200,
 			h: 200,
 			text: '',
+			isFilled: false,
 		}
 	}
 	getGeometry(shape: ICustomShape): Geometry2d {
 		return new Rectangle2d({
 			width: shape.props.w,
 			height: shape.props.h,
-			isFilled: true,
+			isFilled: shape.props.isFilled,
 		})
 	}
 	indicator() {}
@@ -81,11 +84,11 @@ describe('updateShape', () => {
 			props: { w: 100, h: 100, text: 'Hello' },
 		})
 		const shape = editor.getShape(id) as ICustomShape
-		expect(shape.props).toEqual({ w: 100, h: 100, text: 'Hello' })
+		expect(shape.props).toEqual({ w: 100, h: 100, text: 'Hello', isFilled: false })
 
 		editor.updateShape({ ...shape, props: { ...shape.props, text: undefined } })
 		const updatedShape = editor.getShape(id) as ICustomShape
-		expect(updatedShape.props).toEqual({ w: 100, h: 100, text: undefined })
+		expect(updatedShape.props).toEqual({ w: 100, h: 100, text: undefined, isFilled: false })
 	})
 })
 
@@ -176,3 +179,249 @@ describe('zoomToBounds', () => {
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
 })
+
+describe('getShapesAtPoint', () => {
+	const ids = {
+		shape1: createShapeId('shape1'),
+		shape2: createShapeId('shape2'),
+		shape3: createShapeId('shape3'),
+		shape4: createShapeId('shape4'),
+		shape5: createShapeId('shape5'),
+		overlap1: createShapeId('overlap1'),
+		overlap2: createShapeId('overlap2'),
+		filledShape: createShapeId('filledShape'),
+		hollowShape: createShapeId('hollowShape'),
+		hiddenShape: createShapeId('hiddenShape'),
+	}
+
+	beforeEach(() => {
+		// Create test shapes with different z-index positions
+		// Shape 1: Bottom layer, large square
+		editor.createShape({
+			id: ids.shape1,
+			type: 'my-custom-shape',
+			x: 0,
+			y: 0,
+			props: { w: 200, h: 200, text: 'Bottom' },
+		})
+
+		// Shape 2: Middle layer, overlapping square
+		editor.createShape({
+			id: ids.shape2,
+			type: 'my-custom-shape',
+			x: 100,
+			y: 0,
+			props: { w: 200, h: 200, text: 'Middle' },
+		})
+
+		// Shape 3: Top layer, small square
+		editor.createShape({
+			id: ids.shape3,
+			type: 'my-custom-shape',
+			x: 50,
+			y: 50,
+			props: { w: 100, h: 100, text: 'Top' },
+		})
+
+		// Shape 4: Separate area, no overlap
+		editor.createShape({
+			id: ids.shape4,
+			type: 'my-custom-shape',
+			x: 50,
+			y: 100,
+			props: { w: 100, h: 100, text: 'Separate' },
+		})
+	})
+
+	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 })
+		const shapeIds = shapes.map((s) => s.id)
+
+		expect(shapeIds).toEqual([ids.shape3])
+		expect(shapes).toHaveLength(1)
+	})
+
+	it('returns empty array when no shapes at point', () => {
+		const shapes = editor.getShapesAtPoint({ x: 1000, y: 1000 })
+		expect(shapes).toEqual([])
+	})
+
+	it('returns single shape when point hits only one shape', () => {
+		// Point at right edge of shape2 where it doesn't overlap with other shapes
+		// Shape2 is at (100,0) with size 200x200, so right edge is at x=300
+		const shapes = editor.getShapesAtPoint({ x: 300, y: 100 })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape2)
+	})
+
+	it('returns shapes on edge when point is exactly on boundary', () => {
+		// Point at exact edge of shape1
+		const shapes = editor.getShapesAtPoint({ x: 0, y: 0 })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape1)
+	})
+
+	it('respects hitInside option when false (default)', () => {
+		// Point inside shape1 (at 0,0 with size 200x200) but with hitInside false should not hit
+		const shapes = editor.getShapesAtPoint({ x: 25, y: 25 }, { hitInside: false })
+		expect(shapes).toEqual([])
+	})
+
+	it('respects hitInside option when true', () => {
+		// Point inside shape1 (at 0,0 with size 200x200) with hitInside true should hit
+		const shapes = editor.getShapesAtPoint({ x: 25, y: 25 }, { hitInside: true })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape1)
+	})
+
+	it('respects margin option', () => {
+		// Point slightly outside shape1 at bottom edge but within margin should hit only shape1
+		// Shape1 is at (0,0) with size 200x200, shape2 goes to (300,200) so avoid overlap at (200,200)
+		const shapes = editor.getShapesAtPoint({ x: 205, y: 100 }, { margin: 10 })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape1)
+	})
+
+	it('filters out hidden shapes', () => {
+		// Create a spy to mock isShapeHidden
+		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		isShapeHiddenSpy.mockImplementation((shape) => {
+			return typeof shape === 'string' ? shape === ids.shape3 : shape.id === ids.shape3
+		})
+
+		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
+		const shapeIds = shapes.map((s) => s.id)
+
+		// Should not include shape3 since it's hidden, and no other shapes are at this point
+		expect(shapeIds).toEqual([])
+		expect(shapes).toHaveLength(0)
+
+		isShapeHiddenSpy.mockRestore()
+	})
+
+	it('handles point exactly at shape corner', () => {
+		// Point at bottom-left corner of shape1 where it doesn't overlap with other shapes
+		const shapes = editor.getShapesAtPoint({ x: 0, y: 200 })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape1)
+	})
+
+	it('handles overlapping shapes with different hit areas', () => {
+		// Point that hits both shape1 and shape2 edges (they overlap at x=100,y=0)
+		const shapes = editor.getShapesAtPoint({ x: 100, y: 0 })
+		const shapeIds = shapes.map((s) => s.id)
+
+		// 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 reverse shape order and responds to z-index changes', () => {
+		// Create filled shape that overlaps with shape2
+		editor.createShape({
+			id: ids.shape5,
+			type: 'my-custom-shape',
+			x: 110,
+			y: 110,
+			props: { w: 200, h: 200, isFilled: true, text: 'Shape5' },
+		})
+
+		// Test with hitInside to detect multiple shapes
+		// Point (120,120) will hit shape1, shape2, shape3, shape4, and shape5 with hitInside: true
+		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 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 (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.shape2, ids.shape5, ids.shape4, ids.shape3, ids.shape1])
+	})
+
+	it('combines hitInside and margin options', () => {
+		// Point inside shape1 (at 0,0 with size 200x200) with hitInside and margin
+		const shapes = editor.getShapesAtPoint({ x: 25, y: 25 }, { hitInside: true, margin: 5 })
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].id).toBe(ids.shape1)
+	})
+
+	it('returns empty array when all shapes are hidden', () => {
+		// Mock all shapes as hidden
+		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		isShapeHiddenSpy.mockReturnValue(true)
+
+		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
+		expect(shapes).toEqual([])
+
+		isShapeHiddenSpy.mockRestore()
+	})
+
+	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,
+			type: 'my-custom-shape',
+			x: 600,
+			y: 600,
+			props: { w: 100, h: 100, text: 'First' },
+		})
+
+		editor.createShape({
+			id: ids.overlap2,
+			type: 'my-custom-shape',
+			x: 600,
+			y: 600,
+			props: { w: 100, h: 100, text: 'Second' },
+		})
+
+		// Test at corner where both shapes' edges meet
+		const shapes = editor.getShapesAtPoint({ x: 600, y: 600 })
+		const shapeIds = shapes.map((s) => s.id)
+
+		// Should return both shapes in reverse z-index order (top-most first)
+		expect(shapeIds).toEqual([ids.overlap2, ids.overlap1])
+		expect(shapes).toHaveLength(2)
+	})
+
+	it('respects isFilled property for hit detection', () => {
+		// Create a filled shape
+		editor.createShape({
+			id: ids.filledShape,
+			type: 'my-custom-shape',
+			x: 300,
+			y: 300,
+			props: { w: 100, h: 100, isFilled: true, text: 'Filled' },
+		})
+
+		// Create a hollow shape at the same position
+		editor.createShape({
+			id: ids.hollowShape,
+			type: 'my-custom-shape',
+			x: 400,
+			y: 300,
+			props: { w: 100, h: 100, isFilled: false, text: 'Hollow' },
+		})
+
+		// Test point inside filled shape - should hit without hitInside option
+		const filledShapes = editor.getShapesAtPoint({ x: 350, y: 350 })
+		expect(filledShapes).toHaveLength(1)
+		expect(filledShapes[0].id).toBe(ids.filledShape)
+
+		// Test point inside hollow shape - should not hit without hitInside option
+		const hollowShapes = editor.getShapesAtPoint({ x: 450, y: 350 })
+		expect(hollowShapes).toHaveLength(0)
+
+		// Test point inside hollow shape with hitInside - should hit
+		const hollowShapesWithHitInside = editor.getShapesAtPoint(
+			{ x: 450, y: 350 },
+			{ hitInside: true }
+		)
+		expect(hollowShapesWithHitInside).toHaveLength(1)
+		expect(hollowShapesWithHitInside[0].id).toBe(ids.hollowShape)
+	})
+})

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
+	 */
+	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.getCurrentPageShapes().filter(
-			(shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts)
-		)
+		return this.getCurrentPageShapesSorted()
+			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.reverse()
 	}
 
 	/**
@@ -6186,11 +6211,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	duplicateShapes(shapes: TLShapeId[] | TLShape[], offset?: VecLike): this {
 		this.run(() => {
-			const ids =
+			const _ids =
 				typeof shapes[0] === 'string'
 					? (shapes as TLShapeId[])
 					: (shapes as TLShape[]).map((s) => s.id)
 
+			const ids = this._shouldIgnoreShapeLock ? _ids : this._getUnlockedShapeIds(_ids)
 			if (ids.length <= 0) return this
 
 			const initialIds = new Set(ids)
@@ -7911,6 +7937,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			})
 
+			this.emit('created-shapes', shapeRecordsToCreate)
+			this.emit('edit')
 			this.store.put(shapeRecordsToCreate)
 		})
 
@@ -8305,6 +8333,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				updates.push(updated)
 			}
 
+			this.emit('edited-shapes', updates)
+			this.emit('edit')
 			this.store.put(updates)
 		})
 	}
@@ -8354,6 +8384,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 		}
 
+		this.emit('deleted-shapes', [...allShapeIdsToDelete])
+		this.emit('edit')
 		return this.run(() => this.store.remove([...allShapeIdsToDelete]))
 	}
 
@@ -8802,6 +8834,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	} = {
 		text: null,
 		files: null,
+		'file-replace': null,
 		embed: null,
 		'svg-text': null,
 		url: null,
@@ -8851,6 +8884,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
+	/**
+	 * Handle replacing external content.
+	 *
+	 * @param info - Info about the external content.
+	 */
+	async replaceExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+		return this.externalContentHandlers[info.type]?.(info as any)
+	}
+
 	/**
 	 * Get content that can be exported for the given shape ids.
 	 *
@@ -9268,6 +9310,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (rootShapes.length === 1) {
 				const onlyRoot = rootShapes[0] as TLFrameShape
 				// If the old bounds are in the viewport...
+				// todo: replace frame references with shapes that can accept children
 				if (this.isShapeOfType<TLFrameShape>(onlyRoot, 'frame')) {
 					while (
 						this.getShapesAtPoint(point).some(

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),
 			})
 		})
 	})