@tldraw/editor 4.5.3 → 4.6.0-canary.00a8c03b5687

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

@@ -85,6 +85,7 @@ describe('FontManager', () => {
 			getShapeUtil: vi.fn(() => mockShapeUtil),
 			getCurrentPageShapeIds: vi.fn(() => new Set()),
 			getShape: vi.fn(),
+			getContainerDocument: vi.fn(() => document),
 			isDisposed: false,
 		} as any
 

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

@@ -160,7 +160,7 @@ export class FontManager {
 			loadingPromise: instance
 				.load()
 				.then(() => {
-					document.fonts.add(instance)
+					this.editor.getContainerDocument().fonts.add(instance)
 					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
 				})
 				.catch((err) => {
@@ -193,7 +193,8 @@ export class FontManager {
 	}
 
 	private findOrCreateFontFace(font: TLFontFace) {
-		for (const existing of document.fonts) {
+		const fonts = this.editor.getContainerDocument().fonts
+		for (const existing of fonts) {
 			if (
 				existing.family === font.family &&
 				objectMapEntries(defaultFontFaceDescriptors).every(
@@ -210,7 +211,7 @@ export class FontManager {
 			display: 'swap',
 		})
 
-		document.fonts.add(instance)
+		fonts.add(instance)
 
 		return instance
 	}

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

@@ -736,6 +736,22 @@ describe('HistoryManager error scenarios and edge cases', () => {
 			expect(store.get(ids.a)!.value).toBe(originalValue)
 		})
 
+		it('should preserve pending diff when mark is not found', () => {
+			manager._mark('real-mark')
+			store.update(ids.a, (s) => ({ ...s, value: 1 }))
+
+			// bail to a mark that doesn't exist
+			manager.bailToMark('non-existent-mark')
+
+			// the pending diff should still be intact
+			expect(store.get(ids.a)!.value).toBe(1)
+			expect(manager.getNumUndos()).toBeGreaterThan(0)
+
+			// a subsequent bail to the real mark should still work
+			manager.bailToMark('real-mark')
+			expect(store.get(ids.a)!.value).toBe(0)
+		})
+
 		it('should find mark correctly when it exists', () => {
 			manager._mark('existing-mark')
 			store.update(ids.a, (s) => ({ ...s, value: 1 }))

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/InputsManager/InputsManager.ts

@@ -21,7 +21,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getOriginPagePoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get originPagePoint() {
 		return this.getOriginPagePoint()
 	}
@@ -36,7 +36,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getOriginScreenPoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get originScreenPoint() {
 		return this.getOriginScreenPoint()
 	}
@@ -51,7 +51,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getPreviousPagePoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get previousPagePoint() {
 		return this.getPreviousPagePoint()
 	}
@@ -66,7 +66,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getPreviousScreenPoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get previousScreenPoint() {
 		return this.getPreviousScreenPoint()
 	}
@@ -81,7 +81,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getCurrentPagePoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get currentPagePoint() {
 		return this.getCurrentPagePoint()
 	}
@@ -96,7 +96,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getCurrentScreenPoint()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get currentScreenPoint() {
 		return this.getCurrentScreenPoint()
 	}
@@ -111,7 +111,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getPointerVelocity()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get pointerVelocity() {
 		return this.getPointerVelocity()
 	}
@@ -147,11 +147,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsPen()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isPen() {
 		return this.getIsPen()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isPen(isPen: boolean) {
 		this.setIsPen(isPen)
 	}
@@ -172,11 +172,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getShiftKey()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get shiftKey() {
 		return this.getShiftKey()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set shiftKey(shiftKey: boolean) {
 		this.setShiftKey(shiftKey)
 	}
@@ -198,11 +198,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getMetaKey()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get metaKey() {
 		return this.getMetaKey()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set metaKey(metaKey: boolean) {
 		this.setMetaKey(metaKey)
 	}
@@ -224,11 +224,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getCtrlKey()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get ctrlKey() {
 		return this.getCtrlKey()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set ctrlKey(ctrlKey: boolean) {
 		this.setCtrlKey(ctrlKey)
 	}
@@ -250,11 +250,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getAltKey()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get altKey() {
 		return this.getAltKey()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set altKey(altKey: boolean) {
 		this.setAltKey(altKey)
 	}
@@ -275,7 +275,7 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getAccelKey()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get accelKey() {
 		return this.getAccelKey()
 	}
@@ -290,11 +290,11 @@ export class InputsManager {
 	/**
 	 * Soon to be deprecated, use `getIsDragging()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isDragging() {
 		return this.getIsDragging()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isDragging(isDragging: boolean) {
 		this.setIsDragging(isDragging)
 	}
@@ -315,11 +315,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsPointing()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isPointing() {
 		return this.getIsPointing()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isPointing(isPointing: boolean) {
 		this.setIsPointing(isPointing)
 	}
@@ -341,11 +341,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsPinching()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isPinching() {
 		return this.getIsPinching()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isPinching(isPinching: boolean) {
 		this.setIsPinching(isPinching)
 	}
@@ -367,11 +367,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsEditing()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isEditing() {
 		return this.getIsEditing()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isEditing(isEditing: boolean) {
 		this.setIsEditing(isEditing)
 	}
@@ -392,11 +392,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsPanning()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isPanning() {
 		return this.getIsPanning()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isPanning(isPanning: boolean) {
 		this.setIsPanning(isPanning)
 	}
@@ -418,11 +418,11 @@ export class InputsManager {
 	/**
 	 * @deprecated Use `getIsSpacebarPanning()` instead.
 	 */
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	get isSpacebarPanning() {
 		return this.getIsSpacebarPanning()
 	}
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line tldraw/no-setter-getter
 	set isSpacebarPanning(isSpacebarPanning: boolean) {
 		this.setIsSpacebarPanning(isSpacebarPanning)
 	}

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(