@tldraw/editor 5.2.1 → 5.3.0-canary.263f9dbe88bb

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

@@ -1,6 +1,7 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 /**
  * The whole-pixel line-height for a given font size and tldraw's unitless line-height
@@ -93,6 +94,10 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
+// Iterate by grapheme cluster (e.g. emoji sequences, flags, accented letters)
+// rather than by code point, so a single glyph is measured as one unit.
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+
 const initialDefaultStyles = Object.freeze({
 	'overflow-wrap': 'break-word',
 	'word-break': 'auto',
@@ -103,13 +108,21 @@ const initialDefaultStyles = Object.freeze({
 })
 
 /** @public */
-export class TextManager {
+export class TextManager extends EditorManager {
 	private elm: HTMLDivElement
 	private poolElms: PoolItem[] = []
 
-	constructor(public editor: Editor) {
+	constructor(editor: Editor) {
+		super(editor)
 		this.elm = this.createMeasurementEl()
 		this.editor.getContainer().appendChild(this.elm)
+		this.register(() => {
+			this.elm.remove()
+			for (const { el } of this.poolElms) {
+				el.remove()
+			}
+			this.poolElms.length = 0
+		})
 	}
 
 	private createMeasurementEl(): HTMLDivElement {
@@ -178,14 +191,6 @@ export class TextManager {
 		}
 	}
 
-	dispose() {
-		this.elm.remove()
-		for (const { el } of this.poolElms) {
-			el.remove()
-		}
-		this.poolElms.length = 0
-	}
-
 	private ensurePoolSize(size: number) {
 		if (this.poolElms.length >= size) return
 
@@ -301,15 +306,24 @@ export class TextManager {
 		for (const childNode of element.childNodes) {
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
-			for (const char of childNode.textContent ?? '') {
-				// place the range around the characters we're interested in
+			for (const { segment } of graphemeSegmenter.segment(childNode.textContent ?? '')) {
+				// place the range around the grapheme we're interested in
 				range.setStart(textNode, idx)
-				range.setEnd(textNode, idx + char.length)
+				range.setEnd(textNode, idx + segment.length)
 				// measure the range. some browsers return multiple rects for the
 				// first char in a new line - one for the line break, and one for
 				// the character itself. we're only interested in the character.
 				const rects = range.getClientRects()
-				const rect = rects[rects.length - 1]!
+				const rect = rects[rects.length - 1]
+
+				// some graphemes produce no layout rectangle (e.g. zero-width
+				// spaces or newlines). skip them rather than crashing, but keep
+				// advancing the index so later graphemes stay aligned.
+				// See https://github.com/tldraw/tldraw/issues/9112.
+				if (!rect) {
+					idx += segment.length
+					continue
+				}
 
 				// calculate the position of the character relative to the element
 				const top = rect.top + offsetY
@@ -317,7 +331,7 @@ export class TextManager {
 				const right = rect.right + offsetX
 				const isRTL = left < prevCharLeftForRTLTest
 
-				const isSpaceCharacter = spaceCharacterRegex.test(char)
+				const isSpaceCharacter = spaceCharacterRegex.test(segment)
 				if (
 					// If we're at a word boundary...
 					isSpaceCharacter !== prevCharWasSpaceCharacter ||
@@ -341,7 +355,7 @@ export class TextManager {
 					// start a new span
 					currentSpan = {
 						box: { x: left, y: top, w: rect.width, h: rect.height },
-						text: char,
+						text: segment,
 					}
 					prevCharLeftForRTLTest = left
 				} else {
@@ -352,16 +366,16 @@ export class TextManager {
 
 					// otherwise we just need to extend the current span with the next character
 					currentSpan.box.w = isRTL ? currentSpan.box.w + rect.width : right - currentSpan.box.x
-					currentSpan.text += char
+					currentSpan.text += segment
 				}
 
-				if (char === '\n') {
+				if (segment === '\n') {
 					prevCharLeftForRTLTest = 0
 				}
 
 				prevCharWasSpaceCharacter = isSpaceCharacter
 				prevCharTop = top
-				idx += char.length
+				idx += segment.length
 			}
 		}
 

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

@@ -19,7 +19,6 @@ describe('TickManager', () => {
 	let editor: Mocked<Editor>
 	let tickManager: TickManager
 	let mockEmit: Mock
-	let mockDisposablesAdd: Mock
 
 	beforeEach(() => {
 		vi.clearAllMocks()
@@ -38,13 +37,9 @@ describe('TickManager', () => {
 		mockCancelAnimationFrame.mockImplementation(() => {})
 
 		mockEmit = vi.fn()
-		mockDisposablesAdd = vi.fn()
 
 		editor = {
 			emit: mockEmit,
-			disposables: {
-				add: mockDisposablesAdd,
-			},
 		} as unknown as Mocked<Editor>
 
 		tickManager = new TickManager(editor)
@@ -58,15 +53,10 @@ describe('TickManager', () => {
 
 	describe('constructor and initialization', () => {
 		it('should initialize with correct default values', () => {
-			expect(tickManager.editor).toBe(editor)
 			expect(tickManager.isPaused).toBe(false)
 			expect(tickManager.now).toBe(1000)
 		})
 
-		it('should add dispose method to editor disposables', () => {
-			expect(mockDisposablesAdd).toHaveBeenCalledWith(tickManager.dispose)
-		})
-
 		it('should start the tick loop on construction', () => {
 			expect(mockRequestAnimationFrame).toHaveBeenCalled()
 		})

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

@@ -1,5 +1,6 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 const throttleToNextFrame =
 	typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
@@ -13,9 +14,9 @@ const throttleToNextFrame =
 		: _throttleToNextFrame
 
 /** @internal */
-export class TickManager {
-	constructor(public editor: Editor) {
-		this.editor.disposables.add(this.dispose)
+export class TickManager extends EditorManager {
+	constructor(editor: Editor) {
+		super(editor)
 		this.start()
 	}
 
@@ -45,11 +46,9 @@ export class TickManager {
 		this.cancelRaf = throttleToNextFrame(this.tick)
 	}
 
-	// Clear the listener
-	@bind
 	dispose() {
 		this.isPaused = true
-
 		this.cancelRaf?.()
+		super.dispose()
 	}
 }

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -1039,6 +1039,7 @@ export interface TLCropInfo<T extends TLShape> {
 	uncroppedSize: { w: number; h: number }
 	initialShape: T
 	aspectRatioLocked?: boolean
+	isResizingFromCenter?: boolean
 }
 
 /** @public */

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -4,7 +4,6 @@ import { Vec } from '../../../../primitives/Vec'
 import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
-import { cancelShapeCreationOnLongPress } from '../../cancelShapeCreationOnLongPress'
 import { StateNode } from '../../StateNode'
 import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
@@ -67,7 +66,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onLongPress() {
-		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+		// On a touch (coarse pointer) long-press, cancel the pending shape so it leaves nothing behind.
+		if (this.editor.getInstanceState().isCoarsePointer) this.cancel()
 	}
 
 	override onCancel() {

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.2.1'
+export const version = '5.3.0-canary.263f9dbe88bb'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-01T09:20:01.735Z',
-	patch: '2026-07-01T10:28:54.350Z',
+	minor: '2026-07-01T09:30:40.438Z',
+	patch: '2026-07-01T09:30:40.438Z',
 }

package/dist-cjs/lib/editor/tools/cancelShapeCreationOnLongPress.js

@@ -1,28 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var cancelShapeCreationOnLongPress_exports = {};
-__export(cancelShapeCreationOnLongPress_exports, {
-  cancelShapeCreationOnLongPress: () => cancelShapeCreationOnLongPress
-});
-module.exports = __toCommonJS(cancelShapeCreationOnLongPress_exports);
-function cancelShapeCreationOnLongPress(editor, cancelPendingCreation) {
-  if (!editor.getInstanceState().isCoarsePointer) return;
-  cancelPendingCreation();
-}
-//# sourceMappingURL=cancelShapeCreationOnLongPress.js.map

package/dist-cjs/lib/editor/tools/cancelShapeCreationOnLongPress.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/tools/cancelShapeCreationOnLongPress.ts"],
-  "sourcesContent": ["import type { Editor } from '../Editor'\n\n/**\n * Shared handler for a long-press in a discrete shape-creation tool's pointing\n * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels\n * any pending creation so the long-press leaves no shape behind (issue #8277).\n * It does not open a context menu \u2014 that is a select-tool surface, reached on\n * touch only from the select tool, and on desktop from a right-click (which the\n * editor routes through the select tool).\n *\n * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer\n * powers the deliberate \"pause before drag to start a precise arrow\" gesture,\n * which we must not disturb. The bug only manifests on coarse pointers, because\n * that is also where the browser fires `contextmenu` at the long-press mark.\n *\n * The `cancelPendingCreation` callback is the tool's own cleanup \u2014 it knows\n * whether it needs to `bailToMark` a shape it created early or simply transition\n * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are\n * excluded: their press is their own action, so they handle (or ignore) the\n * long-press themselves.\n *\n * @internal\n */\nexport function cancelShapeCreationOnLongPress(\n\teditor: Editor,\n\tcancelPendingCreation: () => void\n): void {\n\tif (!editor.getInstanceState().isCoarsePointer) return\n\n\tcancelPendingCreation()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBO,SAAS,+BACf,QACA,uBACO;AACP,MAAI,CAAC,OAAO,iBAAiB,EAAE,gBAAiB;AAEhD,wBAAsB;AACvB;",
-  "names": []
-}

package/dist-esm/lib/editor/tools/cancelShapeCreationOnLongPress.mjs

@@ -1,8 +0,0 @@
-function cancelShapeCreationOnLongPress(editor, cancelPendingCreation) {
-  if (!editor.getInstanceState().isCoarsePointer) return;
-  cancelPendingCreation();
-}
-export {
-  cancelShapeCreationOnLongPress
-};
-//# sourceMappingURL=cancelShapeCreationOnLongPress.mjs.map

package/dist-esm/lib/editor/tools/cancelShapeCreationOnLongPress.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/tools/cancelShapeCreationOnLongPress.ts"],
-  "sourcesContent": ["import type { Editor } from '../Editor'\n\n/**\n * Shared handler for a long-press in a discrete shape-creation tool's pointing\n * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels\n * any pending creation so the long-press leaves no shape behind (issue #8277).\n * It does not open a context menu \u2014 that is a select-tool surface, reached on\n * touch only from the select tool, and on desktop from a right-click (which the\n * editor routes through the select tool).\n *\n * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer\n * powers the deliberate \"pause before drag to start a precise arrow\" gesture,\n * which we must not disturb. The bug only manifests on coarse pointers, because\n * that is also where the browser fires `contextmenu` at the long-press mark.\n *\n * The `cancelPendingCreation` callback is the tool's own cleanup \u2014 it knows\n * whether it needs to `bailToMark` a shape it created early or simply transition\n * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are\n * excluded: their press is their own action, so they handle (or ignore) the\n * long-press themselves.\n *\n * @internal\n */\nexport function cancelShapeCreationOnLongPress(\n\teditor: Editor,\n\tcancelPendingCreation: () => void\n): void {\n\tif (!editor.getInstanceState().isCoarsePointer) return\n\n\tcancelPendingCreation()\n}\n"],
-  "mappings": "AAuBO,SAAS,+BACf,QACA,uBACO;AACP,MAAI,CAAC,OAAO,iBAAiB,EAAE,gBAAiB;AAEhD,wBAAsB;AACvB;",
-  "names": []
-}

package/src/lib/editor/tools/cancelShapeCreationOnLongPress.ts

@@ -1,31 +0,0 @@
-import type { Editor } from '../Editor'
-
-/**
- * Shared handler for a long-press in a discrete shape-creation tool's pointing
- * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels
- * any pending creation so the long-press leaves no shape behind (issue #8277).
- * It does not open a context menu — that is a select-tool surface, reached on
- * touch only from the select tool, and on desktop from a right-click (which the
- * editor routes through the select tool).
- *
- * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer
- * powers the deliberate "pause before drag to start a precise arrow" gesture,
- * which we must not disturb. The bug only manifests on coarse pointers, because
- * that is also where the browser fires `contextmenu` at the long-press mark.
- *
- * The `cancelPendingCreation` callback is the tool's own cleanup — it knows
- * whether it needs to `bailToMark` a shape it created early or simply transition
- * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are
- * excluded: their press is their own action, so they handle (or ignore) the
- * long-press themselves.
- *
- * @internal
- */
-export function cancelShapeCreationOnLongPress(
-	editor: Editor,
-	cancelPendingCreation: () => void
-): void {
-	if (!editor.getInstanceState().isCoarsePointer) return
-
-	cancelPendingCreation()
-}