@tldraw/editor 4.5.0-canary.fe0a82f04c21 → 4.5.0-internal.b3f4cb985cc3

package/src/lib/config/TLSessionStateSnapshot.ts

@@ -37,10 +37,11 @@ function iOS() {
 	if (!window) return false
 	return (
 		['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
-			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			// eslint-disable-next-line @typescript-eslint/no-deprecated, no-restricted-syntax
 			window.navigator.platform
 		) ||
 		// iPad on iOS 13 detection
+		// eslint-disable-next-line no-restricted-globals
 		(tlenv.isDarwin && 'ontouchend' in document)
 	)
 }
@@ -69,6 +70,7 @@ if (window) {
 	}
 }
 
+// eslint-disable-next-line no-restricted-syntax
 window?.addEventListener('beforeunload', () => {
 	setInSessionStorage(tabIdKey, TAB_ID)
 })

package/src/lib/config/TLUserPreferences.ts

@@ -154,7 +154,9 @@ function getRandomColor() {
 
 /** @internal */
 export function userPrefersReducedMotion() {
+	// eslint-disable-next-line no-restricted-syntax
 	if (typeof window !== 'undefined' && window.matchMedia) {
+		// eslint-disable-next-line no-restricted-syntax
 		return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
 	}
 

package/src/lib/editor/Editor.ts

@@ -108,8 +108,9 @@ import {
 	RIGHT_MOUSE_BUTTON,
 	STYLUS_ERASER_BUTTON,
 } from '../constants'
+import { getOwnerWindow } from '../exports/domUtils'
 import { exportToSvg } from '../exports/exportToSvg'
-import { getSvgAsImage } from '../exports/getSvgAsImage'
+import { getSvgAsImageWithOptions, trimSvgToContent } from '../exports/getSvgAsImage'
 import { tlmenus } from '../globals/menus'
 import { tltime } from '../globals/time'
 import { TldrawOptions, defaultTldrawOptions } from '../options'
@@ -999,6 +1000,26 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getContainer: () => HTMLElement
 
+	/**
+	 * The document that the editor's container element belongs to.
+	 * Use this instead of the global `document` to support cross-window embedding.
+	 *
+	 * @internal
+	 */
+	getContainerDocument(): Document {
+		return this.getContainer().ownerDocument
+	}
+
+	/**
+	 * The window that the editor's container element belongs to.
+	 * Use this instead of the global `window` to support cross-window embedding.
+	 *
+	 * @internal
+	 */
+	getContainerWindow(): Window & typeof globalThis {
+		return getOwnerWindow(this.getContainer())
+	}
+
 	/**
 	 * Dispose the editor.
 	 *
@@ -2772,6 +2793,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCamera().z
 	}
 
+	/**
+	 * Get the scale factor used when creating or resizing shapes in dynamic size mode.
+	 *
+	 * @public
+	 */
+	@computed getResizeScaleFactor() {
+		return this.user.getIsDynamicResizeMode() ? 1 / this.getZoomLevel() : 1
+	}
+
 	private _debouncedZoomLevel = atom('debounced zoom level', 1)
 
 	/**
@@ -3765,13 +3795,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			screenBounds.height = Math.max(screenBounds.height, 1)
 		}
 
+		const doc = this.getContainerDocument()
 		const insets = [
 			// top
 			screenBounds.minY !== 0,
 			// right
-			!approximately(document.body.scrollWidth, screenBounds.maxX, 1),
+			!approximately(doc.body.scrollWidth, screenBounds.maxX, 1),
 			// bottom
-			!approximately(document.body.scrollHeight, screenBounds.maxY, 1),
+			!approximately(doc.body.scrollHeight, screenBounds.maxY, 1),
 			// left
 			screenBounds.minX !== 0,
 		]
@@ -9584,6 +9615,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			svg: serializer.serializeToString(result.svg),
 			width: result.width,
 			height: result.height,
+			trimPadding: result.trimPadding,
 		}
 	}
 
@@ -9607,30 +9639,45 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!result) throw new Error('Could not create SVG')
 
 		switch (withDefaults.format) {
-			case 'svg':
+			case 'svg': {
+				let svg = result.svg
+				let w = result.width
+				let h = result.height
+				if (result.trimPadding > 0) {
+					const trimmed = await trimSvgToContent(svg, {
+						width: w,
+						height: h,
+						trimPadding: result.trimPadding,
+						scale: withDefaults.scale,
+					})
+					if (trimmed) {
+						svg = trimmed.svg
+						w = trimmed.width
+						h = trimmed.height
+					}
+				}
 				return {
-					blob: new Blob([result.svg], { type: 'image/svg+xml' }),
-					width: result.width,
-					height: result.height,
+					blob: new Blob([svg], { type: 'image/svg+xml' }),
+					width: w,
+					height: h,
 				}
+			}
 			case 'jpeg':
 			case 'png':
 			case 'webp': {
-				const blob = await getSvgAsImage(result.svg, {
+				const imageResult = await getSvgAsImageWithOptions(result.svg, {
 					type: withDefaults.format,
 					quality: withDefaults.quality,
 					pixelRatio: withDefaults.pixelRatio,
 					width: result.width,
 					height: result.height,
+					trimPadding: result.trimPadding,
+					scale: withDefaults.scale,
 				})
-				if (!blob) {
+				if (!imageResult) {
 					throw new Error('Could not construct image.')
 				}
-				return {
-					blob,
-					width: result.width,
-					height: result.height,
-				}
+				return imageResult
 			}
 			default: {
 				exhaustiveSwitchError(withDefaults.format)
@@ -10069,7 +10116,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					to: opts?.getTarget?.(this),
 				})
 
-				window.history.replaceState({}, document.title, url.toString())
+				window.history.replaceState({}, this.getContainerDocument().title, url.toString())
 			})
 
 		const scheduleEffect = debounce((execute: () => void) => execute(), opts?.debounceMs ?? 500)

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

@@ -36,6 +36,12 @@ describe('FocusManager', () => {
 		// Create mock dispose function
 		mockDispose = vi.fn()
 
+		// Mock document.body event listeners
+		originalAddEventListener = document.body.addEventListener
+		originalRemoveEventListener = document.body.removeEventListener
+		document.body.addEventListener = vi.fn()
+		document.body.removeEventListener = vi.fn()
+
 		// Mock editor
 		editor = {
 			sideEffects: {
@@ -44,16 +50,11 @@ describe('FocusManager', () => {
 			getInstanceState: vi.fn(() => ({ isFocused: false })),
 			updateInstanceState: vi.fn(),
 			getContainer: vi.fn(() => mockContainer),
+			getContainerDocument: vi.fn(() => document),
 			isIn: vi.fn(() => false),
 			getSelectedShapeIds: vi.fn(() => []),
 			complete: vi.fn(),
 		} as any
-
-		// Mock document.body event listeners
-		originalAddEventListener = document.body.addEventListener
-		originalRemoveEventListener = document.body.removeEventListener
-		document.body.addEventListener = vi.fn()
-		document.body.removeEventListener = vi.fn()
 	})
 
 	afterEach(() => {

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

@@ -1,3 +1,4 @@
+import { bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
 /**
@@ -31,8 +32,9 @@ export class FocusManager {
 		}
 		this.updateContainerClass()
 
-		document.body.addEventListener('keydown', this.handleKeyDown.bind(this))
-		document.body.addEventListener('mousedown', this.handleMouseDown.bind(this))
+		const body = editor.getContainerDocument().body
+		body.addEventListener('keydown', this.handleKeyDown)
+		body.addEventListener('mousedown', this.handleMouseDown)
 	}
 
 	/**
@@ -56,9 +58,9 @@ export class FocusManager {
 		container.classList.add('tl-container__no-focus-ring')
 	}
 
-	private handleKeyDown(keyEvent: KeyboardEvent) {
+	@bind private handleKeyDown(keyEvent: KeyboardEvent) {
 		const container = this.editor.getContainer()
-		const activeEl = document.activeElement
+		const activeEl = container.ownerDocument.activeElement
 		// Edit mode should remove the focus ring, however if the active element's
 		// parent is the contextual toolbar, then allow it.
 		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
@@ -69,7 +71,7 @@ export class FocusManager {
 		}
 	}
 
-	private handleMouseDown() {
+	@bind private handleMouseDown() {
 		const container = this.editor.getContainer()
 		container.classList.add('tl-container__no-focus-ring')
 	}
@@ -84,8 +86,9 @@ export class FocusManager {
 	}
 
 	dispose() {
-		document.body.removeEventListener('keydown', this.handleKeyDown.bind(this))
-		document.body.removeEventListener('mousedown', this.handleMouseDown.bind(this))
+		const body = this.editor.getContainerDocument().body
+		body.removeEventListener('keydown', this.handleKeyDown)
+		body.removeEventListener('mousedown', this.handleMouseDown)
 		this.disposeSideEffectListener?.()
 	}
 }

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/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

@@ -13,8 +13,10 @@ export class UserPreferencesManager {
 		private readonly user: TLUser,
 		private readonly inferDarkMode: boolean
 	) {
+		// eslint-disable-next-line no-restricted-syntax
 		if (typeof window === 'undefined' || !window.matchMedia) return
 
+		// eslint-disable-next-line no-restricted-syntax
 		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {
 			this.systemColorScheme.set('dark')

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -107,10 +107,10 @@ export class Pointing extends StateNode {
 		const delta = new Vec(w / 2, h / 2)
 		const parentTransform = this.editor.getShapeParentTransform(shape)
 		if (parentTransform) delta.rot(-parentTransform.rotation())
-		let scale = 1
+		const scale = this.editor.getResizeScaleFactor()
 
-		if (this.editor.user.getIsDynamicResizeMode()) {
-			scale = 1 / this.editor.getZoomLevel()
+		// A scale factor of 1 means dynamic sizing is not affecting this shape.
+		if (scale !== 1) {
 			w *= scale
 			h *= scale
 			delta.mul(scale)

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(