[Improvement] Text measurement tweaks (#2670)

This PR duplicates a template node rather than creating a new node each
time or querying for a selector. Functions clean up the node that is
created.

### Change Type

- [x] `patch`

packages/editor/editor.css

@@ -787,9 +787,9 @@ input,
 
 .tl-text-measure {
 	position: absolute;
-	z-index: 999999;
+	z-index: -999999;
-	top: -9999px;
+	top: 0px;
-	right: -9999px;
+	left: 0px;
 	opacity: 0;
 	width: max-content;
 	box-sizing: border-box;

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

@@ -1,5 +1,4 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { uniqueId } from '../../utils/uniqueId'
 import { Editor } from '../Editor'
 
 const fixNewLines = /\r?\n|\r/g
@@ -38,21 +37,16 @@ type TLMeasureTextSpanOpts = {
 const spaceCharacterRegex = /\s/
 
 export class TextManager {
-	constructor(public editor: Editor) {}
+	baseElm: HTMLDivElement
-
-	private getTextElement() {
-		const oldElm = document.querySelector('.tl-text-measure')
-		oldElm?.remove()
 
+	constructor(public editor: Editor) {
 		const elm = document.createElement('div')
-		this.editor.getContainer().appendChild(elm)
+		elm.id = `tldraw_text_measure`
-
-		elm.id = `__textMeasure_${uniqueId()}`
 		elm.classList.add('tl-text')
 		elm.classList.add('tl-text-measure')
 		elm.tabIndex = -1
-
+		this.editor.getContainer().appendChild(elm)
-		return elm
+		this.baseElm = elm
 	}
 
 	measureText = (
@@ -73,7 +67,9 @@ export class TextManager {
 			padding: string
 		}
 	): BoxModel => {
-		const elm = this.getTextElement()
+		// Duplicate our base element; we don't need to clone deep
+		const elm = this.baseElm?.cloneNode() as HTMLDivElement
+		this.baseElm.insertAdjacentElement('afterend', elm)
 
 		elm.setAttribute('dir', 'ltr')
 		elm.style.setProperty('font-family', opts.fontFamily)
@@ -87,6 +83,7 @@ export class TextManager {
 
 		elm.textContent = normalizeTextForDom(textToMeasure)
 		const rect = elm.getBoundingClientRect()
+		elm.remove()
 
 		return {
 			x: 0,
@@ -198,45 +195,46 @@ export class TextManager {
 	): { text: string; box: BoxModel }[] {
 		if (textToMeasure === '') return []
 
+		const elm = this.baseElm?.cloneNode() as HTMLDivElement
+		this.baseElm.insertAdjacentElement('afterend', elm)
+
+		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
+		elm.style.setProperty('width', `${elementWidth}px`)
+		elm.style.setProperty('height', 'min-content')
+		elm.style.setProperty('dir', 'ltr')
+		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])
+
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
 
-		// Create a measurement element:
-		const element = this.getTextElement()
-		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
-		element.style.setProperty('width', `${elementWidth}px`)
-		element.style.setProperty('height', 'min-content')
-		element.style.setProperty('dir', 'ltr')
-		element.style.setProperty('font-size', `${opts.fontSize}px`)
-		element.style.setProperty('font-family', opts.fontFamily)
-		element.style.setProperty('font-weight', opts.fontWeight)
-		element.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
-		element.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
-
 		if (shouldTruncateToFirstLine) {
-			element.style.setProperty('overflow-wrap', 'anywhere')
+			elm.style.setProperty('overflow-wrap', 'anywhere')
-			element.style.setProperty('word-break', 'break-all')
+			elm.style.setProperty('word-break', 'break-all')
 		}
 
-		textToMeasure = normalizeTextForDom(textToMeasure)
+		const normalizedText = normalizeTextForDom(textToMeasure)
 
 		// Render the text into the measurement element:
-		element.textContent = textToMeasure
+		elm.textContent = normalizedText
 
 		// actually measure the text:
-		const { spans, didTruncate } = this.measureElementTextNodeSpans(element, {
+		const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
 			shouldTruncateToFirstLine,
 		})
 
 		if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
 			// we need to measure the ellipsis to know how much space it takes up
-			element.textContent = '…'
+			elm.textContent = '…'
-			const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(element).spans[0].box.w)
+			const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
 
 			// then, we need to subtract that space from the width we have and measure again:
-			element.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
+			elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
-			element.textContent = textToMeasure
+			elm.textContent = normalizedText
-			const truncatedSpans = this.measureElementTextNodeSpans(element, {
+			const truncatedSpans = this.measureElementTextNodeSpans(elm, {
 				shouldTruncateToFirstLine: true,
 			}).spans
 
@@ -257,7 +255,7 @@ export class TextManager {
 			return truncatedSpans
 		}
 
-		element.remove()
+		elm.remove()
 
 		return spans
 	}