@tldraw/editor 3.12.0-canary.f3ad945f4591 → 3.12.0-internal.624e32507d98

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.12.0-canary.f3ad945f4591",
+  "version": "3.12.0-internal.624e32507d98",
   "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.12.0-canary.f3ad945f4591",
-    "@tldraw/state-react": "3.12.0-canary.f3ad945f4591",
-    "@tldraw/store": "3.12.0-canary.f3ad945f4591",
-    "@tldraw/tlschema": "3.12.0-canary.f3ad945f4591",
-    "@tldraw/utils": "3.12.0-canary.f3ad945f4591",
-    "@tldraw/validate": "3.12.0-canary.f3ad945f4591",
+    "@tldraw/state": "3.12.0-internal.624e32507d98",
+    "@tldraw/state-react": "3.12.0-internal.624e32507d98",
+    "@tldraw/store": "3.12.0-internal.624e32507d98",
+    "@tldraw/tlschema": "3.12.0-internal.624e32507d98",
+    "@tldraw/utils": "3.12.0-internal.624e32507d98",
+    "@tldraw/validate": "3.12.0-internal.624e32507d98",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/lib/exports/StyleEmbedder.ts

@@ -1,5 +1,6 @@
-import { assertExists, objectMapValues, uniqueId } from '@tldraw/utils'
+import { assert, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'
 import { FontEmbedder } from './FontEmbedder'
+import { ReadonlyStyles, Styles, cssRules } from './cssRules'
 import {
 	elementStyle,
 	getComputedStyle,
@@ -7,15 +8,8 @@ import {
 	getRenderedChildren,
 } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
-import {
-	isPropertyCoveredByCurrentColor,
-	isPropertyInherited,
-	parseCssValueUrls,
-	shouldIncludeCssProperty,
-} from './parseCss'
-
-type Styles = { [K in string]?: string }
-type ReadonlyStyles = { readonly [K in string]?: string }
+import { parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'
+
 const NO_STYLES = {} as const
 
 interface ElementStyleInfo {
@@ -29,6 +23,18 @@ export class StyleEmbedder {
 	private readonly styles = new Map<Element, ElementStyleInfo>()
 	readonly fonts = new FontEmbedder()
 
+	async collectDefaultStyles(elements: Element[]) {
+		const collected = new Set<string>()
+		const promises = []
+		for (const element of elements) {
+			const tagName = element.tagName.toLowerCase()
+			if (collected.has(tagName)) continue
+			collected.add(tagName)
+			promises.push(populateDefaultStylesForTagName(tagName))
+		}
+		await Promise.all(promises)
+	}
+
 	readRootElementStyles(rootElement: Element) {
 		// when reading a root, we always apply _all_ the styles, even if they match the defaults
 		this.readElementStyles(rootElement, {
@@ -239,15 +245,17 @@ function styleFromComputedStyleMap(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
+	const currentColor = style.get('color')?.toString() || ''
+	const ruleOptions = { currentColor, parentStyles, defaultStyles, styles: style }
 	for (const property of style.keys()) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.get(property)!.toString()
 
 		if (defaultStyles[property] === value) continue
-		if (parentStyles[property] === value && isPropertyInherited(property)) continue
-		if (isPropertyCoveredByCurrentColor(style.get('color')?.toString() || '', property, value))
-			continue
+
+		const rule = getOwnProperty(cssRules, property)
+		if (rule && rule(value, property, ruleOptions)) continue
 
 		styles[property] = value
 	}
@@ -260,14 +268,18 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
+	const currentColor = style.color
+	const ruleOptions = { currentColor, parentStyles, defaultStyles, styles: style }
+
 	for (const property in style) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)
 
 		if (defaultStyles[property] === value) continue
-		if (parentStyles[property] === value && isPropertyInherited(property)) continue
-		if (isPropertyCoveredByCurrentColor(style.color, property, value)) continue
+
+		const rule = getOwnProperty(cssRules, property)
+		if (rule && rule(value, property, ruleOptions)) continue
 
 		styles[property] = value
 	}
@@ -285,43 +297,88 @@ function formatCss(style: ReadonlyStyles) {
 // when we're figuring out the default values for a tag, we need read them from a separate document
 // so they're not affected by the current document's styles
 let defaultStyleFrame:
-	| { iframe: HTMLIFrameElement; foreignObject: SVGForeignObjectElement; document: Document }
+	| Promise<{
+			iframe: HTMLIFrameElement
+			foreignObject: SVGForeignObjectElement
+			document: Document
+	  }>
 	| undefined
-const defaultStylesByTagName: Record<string, ReadonlyStyles> = {}
+
+const defaultStylesByTagName: Record<
+	string,
+	| { type: 'resolved'; styles: ReadonlyStyles; promise: Promise<ReadonlyStyles> }
+	| { type: 'pending'; promise: Promise<ReadonlyStyles> }
+> = {}
+
+const emptyFrameBlob = new Blob(
+	['<svg xmlns="http://www.w3.org/2000/svg"><foreignObject/></svg>'],
+	{ type: 'image/svg+xml' }
+)
+const emptyFrameUrl = URL.createObjectURL(emptyFrameBlob)
+
 function getDefaultStyleFrame() {
 	if (!defaultStyleFrame) {
-		const frame = document.createElement('iframe')
-		frame.style.display = 'none'
-		document.body.appendChild(frame)
-		const frameDocument = assertExists(frame.contentDocument, 'frame must have a document')
-		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-		const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
-		svg.appendChild(foreignObject)
-		frameDocument.body.appendChild(svg)
-		defaultStyleFrame = { iframe: frame, foreignObject, document: frameDocument }
+		defaultStyleFrame = new Promise((resolve) => {
+			const frame = document.createElement('iframe')
+			Object.assign(frame.style, {
+				position: 'absolute',
+				top: '-10000px',
+				left: '-10000px',
+				width: '1px',
+				height: '1px',
+				opacity: '0',
+				pointerEvents: 'none',
+			})
+
+			frame.onload = () => {
+				const contentDocument = frame.contentDocument!
+				const foreignObject = contentDocument.querySelector('foreignObject')!
+				resolve({ iframe: frame, foreignObject, document: contentDocument })
+			}
+
+			frame.src = emptyFrameUrl
+			document.body.appendChild(frame)
+		})
 	}
 	return defaultStyleFrame
 }
 
 function destroyDefaultStyleFrame() {
 	if (defaultStyleFrame) {
-		document.body.removeChild(defaultStyleFrame.iframe)
+		defaultStyleFrame.then(({ iframe }) => document.body.removeChild(iframe))
 		defaultStyleFrame = undefined
 	}
 }
 
 const defaultStyleReadOptions: ReadStyleOpts = { defaultStyles: NO_STYLES, parentStyles: NO_STYLES }
-function getDefaultStylesForTagName(tagName: string) {
-	let existing = defaultStylesByTagName[tagName]
-	if (!existing) {
-		const { foreignObject, document } = getDefaultStyleFrame()
-		const element = document.createElement(tagName)
+function populateDefaultStylesForTagName(tagName: string) {
+	const existing = defaultStylesByTagName[tagName]
+	if (existing && existing.type === 'resolved') {
+		return existing.promise
+	}
+
+	if (existing && existing.type === 'pending') {
+		return existing.promise
+	}
+
+	const promise = getDefaultStyleFrame().then(({ foreignObject, document }) => {
+		const element = document.createElementNS('http://www.w3.org/1999/xhtml', tagName)
+		element.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
 		foreignObject.appendChild(element)
-		existing = element.computedStyleMap
+		const styles = element.computedStyleMap
 			? styleFromComputedStyleMap(element.computedStyleMap(), defaultStyleReadOptions)
 			: styleFromComputedStyle(getComputedStyle(element), defaultStyleReadOptions)
 		foreignObject.removeChild(element)
-		defaultStylesByTagName[tagName] = existing
-	}
-	return existing
+		defaultStylesByTagName[tagName] = { type: 'resolved', styles, promise }
+		return styles
+	})
+
+	defaultStylesByTagName[tagName] = { type: 'pending', promise }
+	return promise
+}
+
+function getDefaultStylesForTagName(tagName: string) {
+	const existing = defaultStylesByTagName[tagName]
+	assert(existing && existing.type === 'resolved', 'default styles must be populated & resolved')
+	return existing.styles
 }

package/src/lib/exports/cssRules.ts

@@ -0,0 +1,132 @@
+export type Styles = { [K in string]?: string }
+export type ReadonlyStyles = { readonly [K in string]?: string }
+
+type CanSkipRule = (
+	value: string,
+	property: string,
+	options: {
+		styles: StylePropertyMapReadOnly | CSSStyleDeclaration
+		parentStyles: ReadonlyStyles
+		defaultStyles: ReadonlyStyles
+		currentColor: string
+	}
+) => boolean
+
+const getStyle = (styles: StylePropertyMapReadOnly | CSSStyleDeclaration, property: string) => {
+	if (styles instanceof CSSStyleDeclaration) {
+		return styles.getPropertyValue(property)
+	}
+	return styles.get(property)?.toString()
+}
+
+const isCoveredByCurrentColor: CanSkipRule = (value, property, { currentColor }) => {
+	return value === 'currentColor' || value === currentColor
+}
+
+const isInherited: CanSkipRule = (value, property, { parentStyles }) => {
+	return parentStyles[property] === value
+}
+
+const isExcludedBorder =
+	(borderDirection: string): CanSkipRule =>
+	(value, property, { styles }) => {
+		const borderWidth = getStyle(styles, `border-${borderDirection}-width`)
+		const borderStyle = getStyle(styles, `border-${borderDirection}-style`)
+
+		if (borderWidth === '0px') return true
+		if (borderStyle === 'none') return true
+		return false
+	}
+
+export const cssRules = {
+	// currentColor properties:
+	'border-block-end-color': isCoveredByCurrentColor,
+	'border-block-start-color': isCoveredByCurrentColor,
+	'border-bottom-color': isCoveredByCurrentColor,
+	'border-inline-end-color': isCoveredByCurrentColor,
+	'border-inline-start-color': isCoveredByCurrentColor,
+	'border-left-color': isCoveredByCurrentColor,
+	'border-right-color': isCoveredByCurrentColor,
+	'border-top-color': isCoveredByCurrentColor,
+	'caret-color': isCoveredByCurrentColor,
+	'column-rule-color': isCoveredByCurrentColor,
+	'outline-color': isCoveredByCurrentColor,
+	'text-decoration': (value, property, { currentColor }) => {
+		return value === 'none solid currentColor' || value === 'none solid ' + currentColor
+	},
+	'text-decoration-color': isCoveredByCurrentColor,
+	'text-emphasis-color': isCoveredByCurrentColor,
+
+	// inherited properties:
+	'border-collapse': isInherited,
+	'border-spacing': isInherited,
+	'caption-side': isInherited,
+	// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
+	// 'color': isInherited,
+	cursor: isInherited,
+	direction: isInherited,
+	'empty-cells': isInherited,
+	'font-family': isInherited,
+	'font-size': isInherited,
+	'font-style': isInherited,
+	'font-variant': isInherited,
+	'font-weight': isInherited,
+	'font-size-adjust': isInherited,
+	'font-stretch': isInherited,
+	font: isInherited,
+	'letter-spacing': isInherited,
+	'line-height': isInherited,
+	'list-style-image': isInherited,
+	'list-style-position': isInherited,
+	'list-style-type': isInherited,
+	'list-style': isInherited,
+	orphans: isInherited,
+	'overflow-wrap': isInherited,
+	quotes: isInherited,
+	'stroke-linecap': isInherited,
+	'stroke-linejoin': isInherited,
+	'tab-size': isInherited,
+	'text-align': isInherited,
+	'text-align-last': isInherited,
+	'text-indent': isInherited,
+	'text-justify': isInherited,
+	'text-shadow': isInherited,
+	'text-transform': isInherited,
+	visibility: isInherited,
+	'white-space': isInherited,
+	'white-space-collapse': isInherited,
+	widows: isInherited,
+	'word-break': isInherited,
+	'word-spacing': isInherited,
+	'word-wrap': isInherited,
+
+	// special border cases - we have a weird case (tailwind seems to trigger this) where all
+	// border-styles sometimes get set to 'solid', but the border-width is 0 so they don't render.
+	// but in SVGs, **sometimes**, the border-width defaults (i think from a UA style-sheet? but
+	// honestly can't tell) to 1.5px so the border displays. we work around this by only including
+	// border styles at all if both the border-width and border-style are set to something that
+	// would show a border.
+	'border-top': isExcludedBorder('top'),
+	'border-right': isExcludedBorder('right'),
+	'border-bottom': isExcludedBorder('bottom'),
+	'border-left': isExcludedBorder('left'),
+	'border-block-end': isExcludedBorder('block-end'),
+	'border-block-start': isExcludedBorder('block-start'),
+	'border-inline-end': isExcludedBorder('inline-end'),
+	'border-inline-start': isExcludedBorder('inline-start'),
+	'border-top-style': isExcludedBorder('top'),
+	'border-right-style': isExcludedBorder('right'),
+	'border-bottom-style': isExcludedBorder('bottom'),
+	'border-left-style': isExcludedBorder('left'),
+	'border-block-end-style': isExcludedBorder('block-end'),
+	'border-block-start-style': isExcludedBorder('block-start'),
+	'border-inline-end-style': isExcludedBorder('inline-end'),
+	'border-inline-start-style': isExcludedBorder('inline-start'),
+	'border-top-width': isExcludedBorder('top'),
+	'border-right-width': isExcludedBorder('right'),
+	'border-bottom-width': isExcludedBorder('bottom'),
+	'border-left-width': isExcludedBorder('left'),
+	'border-block-end-width': isExcludedBorder('block-end'),
+	'border-block-start-width': isExcludedBorder('block-start'),
+	'border-inline-end-width': isExcludedBorder('inline-end'),
+} satisfies Record<string, CanSkipRule>

package/src/lib/exports/exportToSvg.tsx

@@ -101,11 +101,15 @@ async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 		// urls, and things like videos will be converted to images.
 		await Promise.all(foreignObjectChildren.map((el) => embedMedia(el as HTMLElement)))
 
+		await styleEmbedder.collectDefaultStyles([
+			...svg.querySelectorAll('foreignObject.tl-export-embed-styles *'),
+		])
+
 		// read the computed styles of every element (+ it's children & pseudo-elements) in the
 		// document. we do this in a single pass before we start embedding any CSS stuff to avoid
 		// constantly forcing the browser to recompute styles & layout.
 		for (const el of foreignObjectChildren) {
-			styleEmbedder.readRootElementStyles(el as HTMLElement)
+			await styleEmbedder.readRootElementStyles(el as HTMLElement)
 		}
 
 		// fetch any resources that we need to embed in the CSS, like background images.

package/src/lib/exports/parseCss.ts

@@ -110,82 +110,3 @@ export function parseCssValueUrls(value: string) {
 		url: m[1] || m[2] || m[3],
 	}))
 }
-
-const currentColorProperties = new Set([
-	'border-block-end-color',
-	'border-block-start-color',
-	'border-bottom-color',
-	'border-inline-end-color',
-	'border-inline-start-color',
-	'border-left-color',
-	'border-right-color',
-	'border-top-color',
-	'caret-color',
-	'column-rule-color',
-	'outline-color',
-	'text-decoration',
-	'text-decoration-color',
-	'text-emphasis-color',
-])
-
-export function isPropertyCoveredByCurrentColor(
-	currentColor: string,
-	property: string,
-	value: string
-) {
-	if (currentColorProperties.has(property)) {
-		return (
-			value === 'currentColor' ||
-			value === currentColor ||
-			(property === 'text-decoration' && value === `none solid ${currentColor}`)
-		)
-	}
-}
-
-const inheritedProperties = new Set([
-	'border-collapse',
-	'border-spacing',
-	'caption-side',
-	// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
-	// 'color',
-	'cursor',
-	'direction',
-	'empty-cells',
-	'font-family',
-	'font-size',
-	'font-style',
-	'font-variant',
-	'font-weight',
-	'font-size-adjust',
-	'font-stretch',
-	'font',
-	'letter-spacing',
-	'line-height',
-	'list-style-image',
-	'list-style-position',
-	'list-style-type',
-	'list-style',
-	'orphans',
-	'overflow-wrap',
-	'quotes',
-	'stroke-linecap',
-	'stroke-linejoin',
-	'tab-size',
-	'text-align',
-	'text-align-last',
-	'text-indent',
-	'text-justify',
-	'text-shadow',
-	'text-transform',
-	'visibility',
-	'white-space',
-	'white-space-collapse',
-	'widows',
-	'word-break',
-	'word-spacing',
-	'word-wrap',
-])
-
-export function isPropertyInherited(property: string) {
-	return inheritedProperties.has(property)
-}

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.12.0-canary.f3ad945f4591'
+export const version = '3.12.0-internal.624e32507d98'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-01T15:25:53.203Z',
-	patch: '2025-04-01T15:25:53.203Z',
+	minor: '2025-04-01T17:14:18.076Z',
+	patch: '2025-04-01T17:14:18.076Z',
 }