@tldraw/editor 3.14.0-canary.e0ab6f4c80f9 → 3.14.0-canary.e2a8e4a03aff

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

@@ -0,0 +1,407 @@
+import { Editor } from '../../Editor'
+import { TextManager, TLMeasureTextSpanOpts } from './TextManager'
+
+// Create a simple mock DOM environment
+const mockElement = {
+	classList: { add: jest.fn() },
+	tabIndex: -1,
+	cloneNode: jest.fn(),
+	innerHTML: '',
+	textContent: '',
+	setAttribute: jest.fn(),
+	style: { setProperty: jest.fn() },
+	scrollWidth: 100,
+	getBoundingClientRect: jest.fn(() => ({
+		width: 100,
+		height: 20,
+		left: 0,
+		top: 0,
+		right: 100,
+		bottom: 20,
+	})),
+	remove: jest.fn(),
+	insertAdjacentElement: jest.fn(),
+	childNodes: [],
+}
+
+// Mock document.createElement to return our mock element
+const mockCreateElement = jest.fn(() => {
+	const element = { ...mockElement }
+	element.cloneNode = jest.fn(() => ({ ...element }))
+	return element
+})
+
+// Mock editor
+const mockEditor = {
+	getContainer: jest.fn(() => ({
+		appendChild: jest.fn(),
+	})),
+} as unknown as Editor
+
+// Setup global mocks
+global.document = {
+	createElement: mockCreateElement,
+} as any
+
+global.Range = jest.fn(() => ({
+	setStart: jest.fn(),
+	setEnd: jest.fn(),
+	getClientRects: jest.fn(() => [
+		{
+			width: 10,
+			height: 16,
+			left: 0,
+			top: 0,
+			right: 10,
+			bottom: 16,
+		},
+	]),
+})) as any
+
+describe('TextManager', () => {
+	let textManager: TextManager
+
+	beforeEach(() => {
+		jest.clearAllMocks()
+		textManager = new TextManager(mockEditor)
+	})
+
+	describe('constructor', () => {
+		it('should create a TextManager instance', () => {
+			expect(textManager).toBeInstanceOf(TextManager)
+			expect(textManager.editor).toBe(mockEditor)
+		})
+	})
+
+	describe('measureText', () => {
+		const defaultOpts = {
+			fontStyle: 'normal',
+			fontWeight: '400',
+			fontFamily: 'Arial',
+			fontSize: 16,
+			lineHeight: 1.2,
+			maxWidth: 200,
+			minWidth: null,
+			padding: '0px',
+		}
+
+		it('should call measureHtml with normalized text', () => {
+			const spy = jest.spyOn(textManager, 'measureHtml')
+			textManager.measureText('Hello World', defaultOpts)
+			expect(spy).toHaveBeenCalledWith('Hello World', defaultOpts)
+		})
+
+		it('should normalize line breaks', () => {
+			const spy = jest.spyOn(textManager, 'measureHtml')
+			textManager.measureText('Hello\nWorld\r\nTest', defaultOpts)
+			// The text should be normalized to use consistent line breaks
+			expect(spy).toHaveBeenCalled()
+		})
+
+		it('should handle empty text', () => {
+			const result = textManager.measureText('', { ...defaultOpts, measureScrollWidth: true })
+			expect(result).toHaveProperty('x', 0)
+			expect(result).toHaveProperty('y', 0)
+			expect(result).toHaveProperty('w')
+			expect(result).toHaveProperty('h')
+			expect(result).toHaveProperty('scrollWidth')
+		})
+	})
+
+	describe('measureHtml', () => {
+		const defaultOpts = {
+			fontStyle: 'normal',
+			fontWeight: '400',
+			fontFamily: 'Arial',
+			fontSize: 16,
+			lineHeight: 1.2,
+			maxWidth: 200,
+			minWidth: null,
+			padding: '0px',
+		}
+
+		it('should return measurement object with correct structure', () => {
+			const result = textManager.measureHtml('<span>Test</span>', defaultOpts)
+
+			expect(result).toMatchObject({
+				x: 0,
+				y: 0,
+				w: expect.any(Number),
+				h: expect.any(Number),
+			})
+		})
+
+		it('should handle null maxWidth', () => {
+			const opts = { ...defaultOpts, maxWidth: null }
+			const result = textManager.measureHtml('Test', opts)
+
+			expect(result).toMatchObject({
+				x: 0,
+				y: 0,
+				w: expect.any(Number),
+				h: expect.any(Number),
+			})
+		})
+
+		it('should handle overflow wrap breaking', () => {
+			const opts = { ...defaultOpts, disableOverflowWrapBreaking: true }
+			const result = textManager.measureHtml('Test', opts)
+
+			expect(result).toMatchObject({
+				x: 0,
+				y: 0,
+				w: expect.any(Number),
+				h: expect.any(Number),
+			})
+		})
+
+		it('should handle other styles', () => {
+			const opts = {
+				...defaultOpts,
+				otherStyles: {
+					'text-decoration': 'underline',
+					color: 'red',
+				},
+			}
+
+			const result = textManager.measureHtml('Test', opts)
+			expect(result).toMatchObject({
+				x: 0,
+				y: 0,
+				w: expect.any(Number),
+				h: expect.any(Number),
+			})
+		})
+	})
+
+	describe('measureElementTextNodeSpans', () => {
+		it('should handle elements with text nodes', () => {
+			const mockTextNode = {
+				nodeType: 3, // TEXT_NODE
+				textContent: 'Hello',
+			}
+
+			const mockElementWithText = {
+				childNodes: [mockTextNode],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockElementWithText as any)
+
+			expect(result).toHaveProperty('spans')
+			expect(result).toHaveProperty('didTruncate')
+			expect(Array.isArray(result.spans)).toBe(true)
+			expect(typeof result.didTruncate).toBe('boolean')
+		})
+
+		it('should handle empty elements', () => {
+			const mockEmptyElement = {
+				childNodes: [],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockEmptyElement as any)
+
+			expect(result.didTruncate).toBe(false)
+			expect(result.spans).toHaveLength(0)
+		})
+
+		it('should handle truncation option', () => {
+			const mockTextNode = {
+				nodeType: 3, // TEXT_NODE
+				textContent: 'Hello World',
+			}
+
+			const mockElementWithText = {
+				childNodes: [mockTextNode],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockElementWithText as any, {
+				shouldTruncateToFirstLine: true,
+			})
+
+			expect(result).toHaveProperty('spans')
+			expect(result).toHaveProperty('didTruncate')
+		})
+	})
+
+	describe('measureTextSpans', () => {
+		const defaultOpts: TLMeasureTextSpanOpts = {
+			overflow: 'wrap',
+			width: 200,
+			height: 100,
+			padding: 10,
+			fontSize: 16,
+			fontWeight: '400',
+			fontFamily: 'Arial',
+			fontStyle: 'normal',
+			lineHeight: 1.2,
+			textAlign: 'start',
+		}
+
+		it('should return empty array for empty text', () => {
+			const result = textManager.measureTextSpans('', defaultOpts)
+			expect(result).toEqual([])
+		})
+
+		it('should return array of text spans for non-empty text', () => {
+			// Mock measureElementTextNodeSpans to return some spans
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Hello World',
+						box: { x: 0, y: 0, w: 100, h: 16 },
+					},
+				],
+				didTruncate: false,
+			})
+
+			const result = textManager.measureTextSpans('Hello World', defaultOpts)
+
+			expect(Array.isArray(result)).toBe(true)
+			expect(result.length).toBeGreaterThan(0)
+			expect(result[0]).toHaveProperty('text')
+			expect(result[0]).toHaveProperty('box')
+		})
+
+		it('should handle wrap overflow', () => {
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Hello World',
+						box: { x: 0, y: 0, w: 100, h: 16 },
+					},
+				],
+				didTruncate: false,
+			})
+
+			const opts = { ...defaultOpts, overflow: 'wrap' as const }
+			const result = textManager.measureTextSpans('Hello World', opts)
+
+			expect(Array.isArray(result)).toBe(true)
+		})
+
+		it('should handle truncate-ellipsis overflow', () => {
+			// Mock the calls for ellipsis handling
+			jest
+				.spyOn(textManager, 'measureElementTextNodeSpans')
+				.mockReturnValueOnce({
+					spans: [
+						{
+							text: 'Hello Wo',
+							box: { x: 0, y: 0, w: 80, h: 16 },
+						},
+					],
+					didTruncate: true,
+				})
+				.mockReturnValueOnce({
+					spans: [
+						{
+							text: '…',
+							box: { x: 0, y: 0, w: 10, h: 16 },
+						},
+					],
+					didTruncate: false,
+				})
+				.mockReturnValueOnce({
+					spans: [
+						{
+							text: 'Hello W',
+							box: { x: 0, y: 0, w: 70, h: 16 },
+						},
+					],
+					didTruncate: false,
+				})
+
+			const opts = { ...defaultOpts, overflow: 'truncate-ellipsis' as const }
+			const result = textManager.measureTextSpans('Hello World', opts)
+
+			expect(Array.isArray(result)).toBe(true)
+		})
+
+		it('should handle truncate-clip overflow', () => {
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Hello Wo',
+						box: { x: 0, y: 0, w: 80, h: 16 },
+					},
+				],
+				didTruncate: true,
+			})
+
+			const opts = { ...defaultOpts, overflow: 'truncate-clip' as const }
+			const result = textManager.measureTextSpans('Hello World', opts)
+
+			expect(Array.isArray(result)).toBe(true)
+		})
+
+		it('should handle different text alignments', () => {
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Test',
+						box: { x: 0, y: 0, w: 40, h: 16 },
+					},
+				],
+				didTruncate: false,
+			})
+
+			const alignments: Array<TLMeasureTextSpanOpts['textAlign']> = ['start', 'middle', 'end']
+
+			alignments.forEach((textAlign) => {
+				const opts = { ...defaultOpts, textAlign }
+				const result = textManager.measureTextSpans('Test', opts)
+				expect(Array.isArray(result)).toBe(true)
+			})
+		})
+
+		it('should handle custom font properties', () => {
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Test',
+						box: { x: 0, y: 0, w: 40, h: 16 },
+					},
+				],
+				didTruncate: false,
+			})
+
+			const opts = {
+				...defaultOpts,
+				fontSize: 18,
+				fontFamily: 'Times',
+				fontWeight: 'bold',
+				fontStyle: 'italic',
+				lineHeight: 1.5,
+			}
+
+			const result = textManager.measureTextSpans('Test', opts)
+			expect(Array.isArray(result)).toBe(true)
+		})
+
+		it('should handle other styles', () => {
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+				spans: [
+					{
+						text: 'Test',
+						box: { x: 0, y: 0, w: 40, h: 16 },
+					},
+				],
+				didTruncate: false,
+			})
+
+			const opts = {
+				...defaultOpts,
+				otherStyles: {
+					'text-shadow': '1px 1px 1px black',
+					'letter-spacing': '1px',
+				},
+			}
+
+			const result = textManager.measureTextSpans('Test', opts)
+			expect(Array.isArray(result)).toBe(true)
+		})
+	})
+})

package/src/lib/editor/managers/{TextManager.ts → TextManager/TextManager.ts}

@@ -1,5 +1,5 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { Editor } from '../Editor'
+import { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
 
@@ -20,6 +20,28 @@ const textAlignmentsForLtr = {
 	'end-legacy': 'right',
 }
 
+/** @public */
+export interface TLMeasureTextOpts {
+	fontStyle: string
+	fontWeight: string
+	fontFamily: string
+	fontSize: number
+	/** This must be a number, e.g. 1.35, not a pixel value. */
+	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 +55,99 @@ 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 = {
+			'overflow-wrap': 'break-word',
+			'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.toString())
+		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 +272,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.toString())
 
 		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 +304,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 +346,10 @@ export class TextManager {
 					h: lastSpan.box.h,
 				},
 			})
+
 			return truncatedSpans
 		}
 
-		elm.remove()
-
 		return spans
 	}
 }