@tldraw/editor 3.14.0-canary.b1a9df6c4d78 → 3.14.0-canary.b34920584558

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

@@ -20,27 +20,6 @@ const textAlignmentsForLtr = {
 	'end-legacy': 'right',
 }
 
-/** @public */
-export interface TLMeasureTextOpts {
-	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
-	// 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'
@@ -54,98 +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 = {
-			'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 * opts.fontSize + 'px')
-		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,
@@ -270,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 * opts.fontSize + 'px')
+		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'
@@ -302,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:
@@ -344,10 +313,11 @@ export class TextManager {
 					h: lastSpan.box.h,
 				},
 			})
-
 			return truncatedSpans
 		}
 
+		elm.remove()
+
 		return spans
 	}
 }

package/src/lib/editor/types/external-content.ts

@@ -1,4 +1,4 @@
-import { TLAssetId, TLShapeId } from '@tldraw/tlschema'
+import { TLAssetId } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
 import { TLContent } from './clipboard-types'
 
@@ -52,15 +52,7 @@ export interface TLTextExternalContent extends TLBaseExternalContent {
 export interface TLFilesExternalContent extends TLBaseExternalContent {
 	type: 'files'
 	files: File[]
-	ignoreParent?: boolean
-}
-
-/** @public */
-export interface TLFileReplaceExternalContent extends TLBaseExternalContent {
-	type: 'file-replace'
-	file: File
-	shapeId: TLShapeId
-	isImage: boolean
+	ignoreParent: boolean
 }
 
 /** @public */
@@ -98,7 +90,6 @@ export interface TLExcalidrawExternalContent extends TLBaseExternalContent {
 export type TLExternalContent<EmbedDefinition> =
 	| TLTextExternalContent
 	| TLFilesExternalContent
-	| TLFileReplaceExternalContent
 	| TLUrlExternalContent
 	| TLSvgTextExternalContent
 	| TLEmbedExternalContent<EmbedDefinition>

package/src/lib/hooks/useCanvasEvents.ts

@@ -137,6 +137,7 @@ export function useCanvasEvents() {
 						type: 'files',
 						files,
 						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						ignoreParent: false,
 					})
 					return
 				}

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 = '3.14.0-canary.b1a9df6c4d78'
+export const version = '3.14.0-canary.b34920584558'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-06-18T12:21:49.668Z',
-	patch: '2025-06-18T12:21:49.668Z',
+	minor: '2025-06-13T12:47:22.619Z',
+	patch: '2025-06-13T12:47:22.619Z',
 }