@tldraw/editor 4.5.2 → 4.6.0-canary.4ec045c286e1

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

@@ -172,8 +172,8 @@ export class HistoryManager<R extends UnknownRecord> {
 			}
 
 			if (!didFindMark && toMark) {
-				// whoops, we didn't find the mark we were looking for
-				// don't do anything
+				// we didn't find the mark we were looking for — restore state and bail
+				this.pendingDiff.restore(pendingDiff)
 				return this
 			}
 
@@ -338,6 +338,11 @@ class PendingDiff<R extends UnknownRecord> {
 		return diff
 	}
 
+	restore(diff: RecordsDiff<R>) {
+		this.diff = diff
+		this.isEmptyAtom.set(isRecordsDiffEmpty(diff))
+	}
+
 	isEmpty() {
 		return this.isEmptyAtom.get()
 	}

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

@@ -58,17 +58,16 @@ const mockCreateElement = vi.fn(() => {
 })
 
 // Mock editor
+const mockDocument = {
+	createElement: mockCreateElement,
+}
 const mockEditor = {
 	getContainer: vi.fn(() => ({
 		appendChild: vi.fn(),
 	})),
+	getContainerDocument: vi.fn(() => mockDocument),
 } as unknown as Editor
 
-// Setup global mocks
-global.document = {
-	createElement: mockCreateElement,
-} as any
-
 global.Range = vi.fn(() => ({
 	setStart: vi.fn(),
 	setEnd: vi.fn(),

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

@@ -75,7 +75,7 @@ export class TextManager {
 	private elm: HTMLDivElement
 
 	constructor(public editor: Editor) {
-		const elm = document.createElement('div')
+		const elm = editor.getContainerDocument().createElement('div')
 		elm.classList.add('tl-text')
 		elm.classList.add('tl-text-measure')
 		elm.setAttribute('dir', 'auto')
@@ -111,7 +111,7 @@ export class TextManager {
 	}
 
 	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
-		const div = document.createElement('div')
+		const div = this.editor.getContainerDocument().createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
 		return this.measureHtml(div.innerHTML, opts)
 	}

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

@@ -1,6 +1,7 @@
 import { atom, computed } from '@tldraw/state'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
+import { getGlobalWindow } from '../../../utils/dom'
 
 /** @public */
 export class UserPreferencesManager {
@@ -13,9 +14,9 @@ export class UserPreferencesManager {
 		private readonly user: TLUser,
 		private readonly inferDarkMode: boolean
 	) {
-		if (typeof window === 'undefined' || !window.matchMedia) return
+		if (typeof window === 'undefined' || !getGlobalWindow().matchMedia) return
 
-		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+		const darkModeMediaQuery = getGlobalWindow().matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {
 			this.systemColorScheme.set('dark')
 		}

package/src/lib/editor/types/misc-types.ts

@@ -40,9 +40,15 @@ export interface TLSvgExportOptions {
 	background?: boolean
 
 	/**
-	 * How much padding to include around the bounds of exports? Defaults to 32px.
+	 * How much padding to include around the bounds of exports.
+	 *
+	 * - `'auto'` (default) — trim to visual content bounds, capturing overflow (like thick
+	 *    strokes or arrowheads) without extra whitespace.
+	 * - `number` (e.g. `32`) — fixed padding in px. No trimming; overflow beyond the padding
+	 *    region is clipped.
+	 * - `0` — no padding, no trimming, overflow is clipped.
 	 */
-	padding?: number
+	padding?: number | 'auto'
 
 	/**
 	 * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the

package/src/lib/exports/FontEmbedder.ts

@@ -11,7 +11,7 @@ export const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'
  * SVG.
  *
  * It works in three steps:
- * 1. `startFindingCurrentDocumentFontFaces` - this traverses the current document, finding all the
+ * 1. `startFindingDocumentFontFaces` - this traverses the given document, finding all the
  *    stylesheets in use (including those imported via `@import` rules etc) and extracting the
  *    @font-face declarations from them.
  * 2. `onFontFamilyValue` - as `StyleEmbedder` traverses the SVG, it will call this method with the
@@ -26,9 +26,9 @@ export class FontEmbedder {
 	private readonly fontFacesToEmbed = new Set<ParsedFontFace>()
 	private readonly pendingPromises: Promise<void>[] = []
 
-	startFindingCurrentDocumentFontFaces() {
+	startFindingDocumentFontFaces(doc: Document) {
 		assert(!this.fontFacesPromise, 'FontEmbedder already started')
-		this.fontFacesPromise = getCurrentDocumentFontFaces()
+		this.fontFacesPromise = getDocumentFontFaces(doc)
 	}
 
 	@bind onFontFamilyValue(fontFamilyValue: string) {
@@ -80,7 +80,8 @@ export class FontEmbedder {
 	}
 }
 
-async function getCurrentDocumentFontFaces() {
+async function getDocumentFontFaces(doc: Document) {
+	const win = doc.defaultView ?? globalThis
 	const fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []
 
 	// In exportToSvg we add the exported node to the DOM temporarily.
@@ -88,7 +89,7 @@ async function getCurrentDocumentFontFaces() {
 	// DOM, when looking at document.styleSheets the number of nodes and stylesheets
 	// can grow unbounded (especially when using "Debug svg" and moving shapes around).
 	// To avoid this, we filter out the stylesheets that are part of the SVG export.
-	const styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(
+	const styleSheetsWithoutSvgExports = Array.from(doc.styleSheets).filter(
 		(styleSheet) =>
 			!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)
 	)
@@ -103,10 +104,10 @@ async function getCurrentDocumentFontFaces() {
 
 		if (cssRules) {
 			for (const rule of styleSheet.cssRules) {
-				if (rule instanceof CSSFontFaceRule) {
-					fontFaces.push(parseCssFontFaces(rule.cssText, styleSheet.href ?? document.baseURI))
-				} else if (rule instanceof CSSImportRule) {
-					const absoluteUrl = new URL(rule.href, rule.parentStyleSheet?.href ?? document.baseURI)
+				if (rule instanceof win.CSSFontFaceRule) {
+					fontFaces.push(parseCssFontFaces(rule.cssText, styleSheet.href ?? doc.baseURI))
+				} else if (rule instanceof win.CSSImportRule) {
+					const absoluteUrl = new URL(rule.href, rule.parentStyleSheet?.href ?? doc.baseURI)
 					fontFaces.push(fetchCssFontFaces(absoluteUrl.href))
 				}
 			}

package/src/lib/exports/StyleEmbedder.ts

@@ -6,6 +6,7 @@ import {
 	getComputedStyle,
 	getRenderedChildNodes,
 	getRenderedChildren,
+	isElement,
 } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
 import { parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'
@@ -49,7 +50,7 @@ export class StyleEmbedder {
 		{ shouldRespectDefaults = true, shouldSkipInheritedParentStyles = true }
 	) {
 		const defaultStyles = shouldRespectDefaults
-			? getDefaultStylesForTagName(element.tagName.toLowerCase())
+			? getDefaultStylesForTagName(element.ownerDocument, element.tagName.toLowerCase())
 			: NO_STYLES
 
 		const parentStyles = Object.assign({}, NO_STYLES) as Styles
@@ -116,14 +117,14 @@ export class StyleEmbedder {
 			const shadowRoot = element.shadowRoot
 
 			if (shadowRoot) {
-				const clonedCustomEl = document.createElement('div')
+				const clonedCustomEl = element.ownerDocument.createElement('div')
 				this.styles.set(clonedCustomEl, this.styles.get(element)!)
 
 				clonedCustomEl.setAttribute('data-tl-custom-element', element.tagName)
 				;(clonedParent ?? element.parentElement!).appendChild(clonedCustomEl)
 
 				for (const child of shadowRoot.childNodes) {
-					if (child instanceof Element) {
+					if (isElement(child)) {
 						visit(child, clonedCustomEl)
 					} else {
 						clonedCustomEl.appendChild(child.cloneNode(true))
@@ -144,7 +145,7 @@ export class StyleEmbedder {
 				clonedParent.appendChild(clonedEl)
 
 				for (const child of getRenderedChildNodes(element)) {
-					if (child instanceof Element) {
+					if (isElement(child)) {
 						visit(child, clonedEl)
 					} else {
 						clonedEl.appendChild(child.cloneNode(true))
@@ -295,36 +296,53 @@ 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 }
+	| {
+			iframe: HTMLIFrameElement
+			foreignObject: SVGForeignObjectElement
+			document: Document
+			ownerDocument: Document
+	  }
 	| undefined
 const defaultStylesByTagName: Record<string, ReadonlyStyles> = {}
-function getDefaultStyleFrame() {
-	if (!defaultStyleFrame) {
-		const frame = document.createElement('iframe')
+function getDefaultStyleFrame(ownerDoc: Document) {
+	if (!defaultStyleFrame || defaultStyleFrame.ownerDocument !== ownerDoc) {
+		destroyDefaultStyleFrame()
+		const frame = ownerDoc.createElement('iframe')
 		frame.style.display = 'none'
-		document.body.appendChild(frame)
+		ownerDoc.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')
+		const svg = frameDocument.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		const foreignObject = frameDocument.createElementNS(
+			'http://www.w3.org/2000/svg',
+			'foreignObject'
+		)
 		svg.appendChild(foreignObject)
 		frameDocument.body.appendChild(svg)
-		defaultStyleFrame = { iframe: frame, foreignObject, document: frameDocument }
+		defaultStyleFrame = {
+			iframe: frame,
+			foreignObject,
+			document: frameDocument,
+			ownerDocument: ownerDoc,
+		}
 	}
 	return defaultStyleFrame
 }
 
 function destroyDefaultStyleFrame() {
 	if (defaultStyleFrame) {
-		document.body.removeChild(defaultStyleFrame.iframe)
+		defaultStyleFrame.iframe.remove()
 		defaultStyleFrame = undefined
 	}
+	for (const tagName in defaultStylesByTagName) {
+		delete defaultStylesByTagName[tagName]
+	}
 }
 
 const defaultStyleReadOptions: ReadStyleOpts = { defaultStyles: NO_STYLES, parentStyles: NO_STYLES }
-function getDefaultStylesForTagName(tagName: string) {
+function getDefaultStylesForTagName(ownerDoc: Document, tagName: string) {
 	let existing = defaultStylesByTagName[tagName]
 	if (!existing) {
-		const { foreignObject, document } = getDefaultStyleFrame()
+		const { foreignObject, document } = getDefaultStyleFrame(ownerDoc)
 		const element = document.createElement(tagName)
 		foreignObject.appendChild(element)
 		existing = element.computedStyleMap

package/src/lib/exports/domUtils.ts

@@ -22,6 +22,26 @@ export function* getRenderedChildren(node: Element) {
 	}
 }
 
+/** @internal */
+export function getOwnerWindow(
+	nodeOrDocument: Node | Document | null | undefined
+): Window & typeof globalThis {
+	if (!nodeOrDocument) return globalThis as Window & typeof globalThis
+	const doc = isDocument(nodeOrDocument) ? nodeOrDocument : nodeOrDocument.ownerDocument
+	return (doc?.defaultView ?? globalThis) as Window & typeof globalThis
+}
+
+/** @internal */
+export function getOwnerDocument(nodeOrDocument: Node | Document | null | undefined): Document {
+	if (!nodeOrDocument) return globalThis.document
+	if (isDocument(nodeOrDocument)) return nodeOrDocument
+	return nodeOrDocument.ownerDocument ?? globalThis.document
+}
+
+function isDocument(node: Node | Document): node is Document {
+	return node.nodeType === Node.DOCUMENT_NODE
+}
+
 function getWindow(node: Node) {
 	return node.ownerDocument?.defaultView ?? globalThis
 }

package/src/lib/exports/embedMedia.ts

@@ -1,5 +1,5 @@
 import { MediaHelpers } from '@tldraw/utils'
-import { getRenderedChildren } from './domUtils'
+import { getOwnerWindow, getRenderedChildren } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
 
 function copyAttrs(source: Element, target: Element) {
@@ -14,8 +14,12 @@ function replace(original: HTMLElement, replacement: HTMLElement) {
 	return replacement
 }
 
-async function createImage(dataUrl: string | null, cloneAttributesFrom?: HTMLElement) {
-	const image = document.createElement('img')
+async function createImage(
+	doc: Document,
+	dataUrl: string | null,
+	cloneAttributesFrom?: HTMLElement
+) {
+	const image = doc.createElement('img')
 
 	if (cloneAttributesFrom) {
 		copyAttrs(cloneAttributesFrom, image)
@@ -34,52 +38,54 @@ async function createImage(dataUrl: string | null, cloneAttributesFrom?: HTMLEle
 }
 
 async function getCanvasReplacement(canvas: HTMLCanvasElement) {
+	const doc = canvas.ownerDocument
 	try {
 		const dataURL = canvas.toDataURL()
-		return await createImage(dataURL, canvas)
+		return await createImage(doc, dataURL, canvas)
 	} catch {
-		return await createImage(null, canvas)
+		return await createImage(doc, null, canvas)
 	}
 }
 
 async function getVideoReplacement(video: HTMLVideoElement) {
+	const doc = video.ownerDocument
 	try {
 		const dataUrl = await MediaHelpers.getVideoFrameAsDataUrl(video)
-		return createImage(dataUrl, video)
+		return createImage(doc, dataUrl, video)
 	} catch (err) {
 		console.error('Could not get video frame', err)
 	}
 
 	if (video.poster) {
 		const dataUrl = await resourceToDataUrl(video.poster)
-		return createImage(dataUrl, video)
+		return createImage(doc, dataUrl, video)
 	}
 
-	return createImage(null, video)
+	return createImage(doc, null, video)
 }
 
 export async function embedMedia(node: HTMLElement) {
-	if (node instanceof HTMLCanvasElement) {
+	const win = getOwnerWindow(node)
+	if (node instanceof win.HTMLCanvasElement) {
 		return replace(node, await getCanvasReplacement(node))
-	} else if (node instanceof HTMLVideoElement) {
+	} else if (node instanceof win.HTMLVideoElement) {
 		return replace(node, await getVideoReplacement(node))
-	} else if (node instanceof HTMLImageElement) {
+	} else if (node instanceof win.HTMLImageElement) {
 		const src = node.currentSrc || node.src
 		const dataUrl = await resourceToDataUrl(src)
 		node.setAttribute('src', dataUrl ?? 'data:')
 		node.setAttribute('decoding', 'sync')
 		node.setAttribute('loading', 'eager')
 		try {
-			await node.decode()
+			await (node as HTMLImageElement).decode()
 		} catch {
 			// this is fine
 		}
 		return node
-	} else if (node instanceof HTMLInputElement) {
-		// if an input has a value, make sure it's serialized when we convert to svg
-		node.setAttribute('value', node.value)
-	} else if (node instanceof HTMLTextAreaElement) {
-		node.textContent = node.value
+	} else if (node instanceof win.HTMLInputElement) {
+		node.setAttribute('value', (node as HTMLInputElement).value)
+	} else if (node instanceof win.HTMLTextAreaElement) {
+		node.textContent = (node as HTMLTextAreaElement).value
 	}
 
 	await Promise.all(

package/src/lib/exports/exportToSvg.tsx

@@ -4,10 +4,11 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import type { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
-import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
-import { StyleEmbedder } from './StyleEmbedder'
+import { getOwnerWindow } from './domUtils'
 import { embedMedia } from './embedMedia'
+import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { getSvgJsx } from './getSvgJsx'
+import { StyleEmbedder } from './StyleEmbedder'
 
 let idCounter = 1
 
@@ -26,7 +27,7 @@ export async function exportToSvg(
 	// without this CSS and layout aren't computed correctly, which we need to make sure any
 	// <foreignObject> elements have their styles and content inlined correctly.
 	const container = editor.getContainer()
-	const renderTarget = document.createElement('div')
+	const renderTarget = container.ownerDocument.createElement('div')
 	renderTarget.className = SVG_EXPORT_CLASSNAME
 	// we hide the element visually, but we don't want it to be focusable or interactive in any way either
 	renderTarget.inert = true
@@ -60,7 +61,7 @@ export async function exportToSvg(
 
 		// Extract the rendered SVG element from the react root
 		const svg = renderTarget.firstElementChild
-		assert(svg instanceof SVGSVGElement, 'Expected an SVG element')
+		assert(svg instanceof getOwnerWindow(container).SVGSVGElement, 'Expected an SVG element')
 
 		// And apply any changes to <foreignObject> elements that we need to make. while we're in
 		// the document, these elements work exactly as we'd expect from other dom elements - they
@@ -70,7 +71,7 @@ export async function exportToSvg(
 		// apply any styles directly to the elements themselves.
 		await applyChangesToForeignObjects(svg)
 
-		return { svg, width: result.width, height: result.height }
+		return { svg, width: result.width, height: result.height, trimPadding: result.trimPadding }
 	} finally {
 		// eslint-disable-next-line no-restricted-globals
 		setTimeout(() => {
@@ -95,7 +96,7 @@ async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 
 	try {
 		// begin traversing stylesheets to find @font-face declarations we might need to embed
-		styleEmbedder.fonts.startFindingCurrentDocumentFontFaces()
+		styleEmbedder.fonts.startFindingDocumentFontFaces(svg.ownerDocument)
 
 		// embed any media elements in the foreignObject children. images will get converted to data
 		// urls, and things like videos will be converted to images.
@@ -126,7 +127,7 @@ async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 
 		// add the CSS to the SVG
 		if (fontCss || pseudoCss) {
-			const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')
+			const style = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'style')
 			style.textContent = `${fontCss}\n${pseudoCss}`
 			svg.prepend(style)
 		}