@tldraw/editor 3.14.0-canary.744f8a453221 → 3.14.0-canary.766a02a82239

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.14.0-canary.744f8a453221",
+  "version": "3.14.0-canary.766a02a82239",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.14.0-canary.744f8a453221",
-    "@tldraw/state-react": "3.14.0-canary.744f8a453221",
-    "@tldraw/store": "3.14.0-canary.744f8a453221",
-    "@tldraw/tlschema": "3.14.0-canary.744f8a453221",
-    "@tldraw/utils": "3.14.0-canary.744f8a453221",
-    "@tldraw/validate": "3.14.0-canary.744f8a453221",
+    "@tldraw/state": "3.14.0-canary.766a02a82239",
+    "@tldraw/state-react": "3.14.0-canary.766a02a82239",
+    "@tldraw/store": "3.14.0-canary.766a02a82239",
+    "@tldraw/tlschema": "3.14.0-canary.766a02a82239",
+    "@tldraw/utils": "3.14.0-canary.766a02a82239",
+    "@tldraw/validate": "3.14.0-canary.766a02a82239",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -174,7 +174,6 @@ 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'
@@ -182,10 +181,6 @@ export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseB
 export {
 	ShapeUtil,
 	type TLCropInfo,
-	type TLDragShapesInInfo,
-	type TLDragShapesOutInfo,
-	type TLDragShapesOverInfo,
-	type TLDropShapesOverInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
@@ -257,7 +252,6 @@ export {
 	type TLExternalContent,
 	type TLExternalContentSource,
 	type TLFileExternalAsset,
-	type TLFileReplaceExternalContent,
 	type TLFilesExternalContent,
 	type TLSvgTextExternalContent,
 	type TLTextExternalContent,
@@ -450,7 +444,6 @@ export { hardResetEditor } from './lib/utils/hardResetEditor'
 export { isAccelKey } from './lib/utils/keyboard'
 export { normalizeWheel } from './lib/utils/normalizeWheel'
 export { refreshPage } from './lib/utils/refreshPage'
-export { getDroppedShapesToNewParents, kickoutOccludedShapes } from './lib/utils/reparenting'
 export {
 	getFontsFromRichText,
 	type RichTextFontVisitor,

package/src/lib/editor/Editor.ts

@@ -348,8 +348,6 @@ 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)
@@ -2122,20 +2120,6 @@ 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
 	 */
@@ -3662,7 +3646,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	updateViewportScreenBounds(screenBounds: Box | HTMLElement, center = false): this {
-		if (!(screenBounds instanceof Box)) {
+		if (screenBounds instanceof HTMLElement) {
 			const rect = screenBounds.getBoundingClientRect()
 			screenBounds = new Box(
 				rect.left || rect.x,
@@ -5528,7 +5512,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!id) return undefined
 		const freshShape = this.getShape(id)
 		if (freshShape === undefined || !isShapeId(freshShape.parentId)) return undefined
-		return this.getShape(freshShape.parentId)
+		return this.store.get(freshShape.parentId)
 	}
 
 	/**
@@ -5711,10 +5695,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 					const newPoint = invertedParentTransform.applyToPoint(pagePoint)
 					const newRotation = pageTransform.rotation() - parentPageRotation
 
-					if (shape.id === parentId) {
-						throw Error('Attempted to reparent a shape to itself!')
-					}
-
 					changes.push({
 						id: shape.id,
 						type: shape.type,
@@ -5818,11 +5798,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return shapeIds
 	}
 
-	/** @deprecated Use {@link Editor.getDraggingOverShape} instead */
-	getDroppingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
-		return this.getDraggingOverShape(point, droppingShapes)
-	}
-
 	/**
 	 * Get the shape that some shapes should be dropped on at a given point.
 	 *
@@ -5833,33 +5808,35 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	getDraggingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
-		// get fresh moving shapes
-		const draggingShapes = compact(droppingShapes.map((s) => this.getShape(s))).filter(
-			(s) => !s.isLocked && !this.isShapeHidden(s)
-		)
+	getDroppingOverShape(point: VecLike, droppingShapes: TLShape[] = []) {
+		// starting from the top...
+		const currentPageShapesSorted = this.getCurrentPageShapesSorted()
+		for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
+			const shape = currentPageShapesSorted[i]
 
-		const maybeDraggingOverShapes = this.getShapesAtPoint(point, {
-			hitInside: true,
-			margin: 0,
-		}).filter(
-			(s) =>
-				!droppingShapes.includes(s) &&
-				!s.isLocked &&
-				!this.isShapeHidden(s) &&
-				!draggingShapes.includes(s)
-		)
+			if (
+				// ignore hidden shapes
+				this.isShapeHidden(shape) ||
+				// don't allow dropping on selected shapes
+				this.getSelectedShapeIds().includes(shape.id) ||
+				// only allow shapes that can receive children
+				!this.getShapeUtil(shape).canDropShapes(shape, droppingShapes) ||
+				// don't allow dropping a shape on itself or one of it's children
+				droppingShapes.find((s) => s.id === shape.id || this.hasAncestor(shape, s.id))
+			) {
+				continue
+			}
+
+			// Only allow dropping into the masked page bounds of the shape, e.g. when a frame is
+			// partially clipped by its own parent frame
+			const maskedPageBounds = this.getShapeMaskedPageBounds(shape.id)
 
-		for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
-			const shapeUtil = this.getShapeUtil(maybeDraggingOverShape)
-			// Any shape that can handle any dragging interactions is a valid target
 			if (
-				shapeUtil.onDragShapesOver ||
-				shapeUtil.onDragShapesIn ||
-				shapeUtil.onDragShapesOut ||
-				shapeUtil.onDropShapesOver
+				maskedPageBounds &&
+				maskedPageBounds.containsPoint(point) &&
+				this.getShapeGeometry(shape).hitTestPoint(this.getPointInShapeSpace(shape, point), 0, true)
 			) {
-				return maybeDraggingOverShape
+				return shape
 			}
 		}
 	}
@@ -6218,12 +6195,11 @@ 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)
@@ -6303,7 +6279,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 			const shapesToCreate = shapesToCreateWithOriginals.map(({ shape }) => shape)
 
-			if (!this.canCreateShapes(shapesToCreate)) {
+			const maxShapesReached =
+				shapesToCreate.length + this.getCurrentPageShapeIds().size > this.options.maxShapesPerPage
+
+			if (maxShapesReached) {
 				alertMaxShapes(this)
 				return
 			}
@@ -7732,32 +7711,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return {}
 	}
 
-	/**
-	 * Get whether the provided shape can be created.
-	 *
-	 * @param shape - The shape or shape IDs to check.
-	 *
-	 * @public
-	 */
-	canCreateShape<T extends TLUnknownShape>(
-		shape: OptionalKeys<TLShapePartial<T>, 'id'> | T['id']
-	): boolean {
-		return this.canCreateShapes([shape])
-	}
-
-	/**
-	 * Get whether the provided shapes can be created.
-	 *
-	 * @param shapes - The shapes or shape IDs to create.
-	 *
-	 * @public
-	 */
-	canCreateShapes<T extends TLUnknownShape>(
-		shapes: (T['id'] | OptionalKeys<TLShapePartial<T>, 'id'>)[]
-	): boolean {
-		return shapes.length + this.getCurrentPageShapeIds().size <= this.options.maxShapesPerPage
-	}
-
 	/**
 	 * Create a single shape.
 	 *
@@ -7804,7 +7757,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (maxShapesReached) {
 			// can't create more shapes than fit on the page
 			alertMaxShapes(this)
-			// todo: throw an error here? Otherwise we'll need to check every time whether the shapes were actually created
 			return this
 		}
 
@@ -7837,10 +7789,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
 						const parent = currentPageShapesSorted[i]
-						const util = this.getShapeUtil(parent)
 						if (
-							util.canReceiveNewChildrenOfType(parent, partial.type) &&
 							!this.isShapeHidden(parent) &&
+							this.getShapeUtil(parent).canReceiveNewChildrenOfType(parent, partial.type) &&
 							this.isPointInShape(
 								parent,
 								// If no parent is provided, then we can treat the
@@ -7859,7 +7810,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					const prevParentId = partial.parentId
 
-					// a shape cannot be its own parent. This was a rare issue with frames/groups in the syncFuzz tests.
+					// a shape cannot be it's own parent. This was a rare issue with frames/groups in the syncFuzz tests.
 					if (parentId === partial.id) {
 						parentId = focusedGroupId
 					}
@@ -7969,8 +7920,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			})
 
-			this.emit('created-shapes', shapeRecordsToCreate)
-			this.emit('edit')
 			this.store.put(shapeRecordsToCreate)
 		})
 
@@ -8365,8 +8314,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				updates.push(updated)
 			}
 
-			this.emit('edited-shapes', updates)
-			this.emit('edit')
 			this.store.put(updates)
 		})
 	}
@@ -8416,8 +8363,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 		}
 
-		this.emit('deleted-shapes', [...allShapeIdsToDelete])
-		this.emit('edit')
 		return this.run(() => this.store.remove([...allShapeIdsToDelete]))
 	}
 
@@ -8866,7 +8811,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	} = {
 		text: null,
 		files: null,
-		'file-replace': null,
 		embed: null,
 		'svg-text': null,
 		url: null,
@@ -8916,15 +8860,6 @@ 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.
 	 *
@@ -9544,8 +9479,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			previousPagePoint,
 			currentScreenPoint,
 			currentPagePoint,
-			originScreenPoint,
-			originPagePoint,
 		} = this.inputs
 
 		const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
@@ -9574,8 +9507,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// Reset velocity on pointer down, or when a pinch starts or ends
 		if (info.name === 'pointer_down' || this.inputs.isPinching) {
 			pointerVelocity.set(0, 0)
-			originScreenPoint.setTo(currentScreenPoint)
-			originPagePoint.setTo(currentPagePoint)
+			this.inputs.originScreenPoint.setTo(currentScreenPoint)
+			this.inputs.originPagePoint.setTo(currentPagePoint)
 		}
 
 		// todo: We only have to do this if there are multiple users in the document

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

@@ -241,9 +241,7 @@ export class HistoryManager<R extends UnknownRecord> {
 	}
 
 	bailToMark(id: string) {
-		if (id) {
-			this._undo({ pushToRedoStack: false, toMark: id })
-		}
+		this._undo({ pushToRedoStack: false, toMark: id })
 
 		return this
 	}

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, measureScrollWidth: true })
+			const result = textManager.measureText('', defaultOpts)
 			expect(result).toHaveProperty('x', 0)
 			expect(result).toHaveProperty('y', 0)
 			expect(result).toHaveProperty('w')
@@ -128,6 +128,7 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
+				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -140,6 +141,7 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
+				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -152,6 +154,7 @@ describe('TextManager', () => {
 				y: 0,
 				w: expect.any(Number),
 				h: expect.any(Number),
+				scrollWidth: expect.any(Number),
 			})
 		})
 
@@ -170,6 +173,7 @@ 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,28 +20,6 @@ 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'
@@ -55,99 +33,96 @@ export interface TLMeasureTextSpanOpts {
 	lineHeight: number
 	textAlign: TLDefaultHorizontalAlignStyle
 	otherStyles?: Record<string, string>
-	measureScrollWidth?: boolean
 }
 
 const spaceCharacterRegex = /\s/
 
 /** @public */
 export class TextManager {
-	private elm: HTMLDivElement
-	private defaultStyles: Record<string, string | null>
+	private baseElem: HTMLDivElement
 
 	constructor(public editor: Editor) {
-		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
-	}
-
-	dispose() {
-		return this.elm.remove()
+		this.baseElem = document.createElement('div')
+		this.baseElem.classList.add('tl-text')
+		this.baseElem.classList.add('tl-text-measure')
+		this.baseElem.tabIndex = -1
 	}
 
-	private resetElmStyles() {
-		const { elm, defaultStyles } = this
-		for (const key in defaultStyles) {
-			elm.style.setProperty(key, defaultStyles[key])
+	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
 		}
-	}
-
-	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
+	): BoxModel & { scrollWidth: number } {
 		const div = document.createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
 		return this.measureHtml(div.innerHTML, opts)
 	}
 
-	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)
-				}
-			}
+	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
 		}
-
-		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')
-		}
-
+	): 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'
+		)
 		if (opts.otherStyles) {
 			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				elm.style.setProperty(key, value)
+				wrapperElm.style.setProperty(key, value)
 			}
 		}
 
-		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
-		const rect = elm.getBoundingClientRect()
+		const scrollWidth = wrapperElm.scrollWidth
+		const rect = wrapperElm.getBoundingClientRect()
+		wrapperElm.remove()
 
 		return {
 			x: 0,
@@ -272,29 +247,27 @@ export class TextManager {
 	): { text: string; box: BoxModel }[] {
 		if (textToMeasure === '') return []
 
-		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 elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
 		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'
@@ -304,12 +277,6 @@ 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:
@@ -346,10 +313,11 @@ export class TextManager {
 					h: lastSpan.box.h,
 				},
 			})
-
 			return truncatedSpans
 		}
 
+		elm.remove()
+
 		return spans
 	}
 }