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

package/src/lib/exports/getSvgJsx.test.ts

@@ -63,9 +63,9 @@ beforeEach(() => {
 })
 
 describe('getExportDefaultBounds', () => {
-	it('returns null when no rendering shapes provided', () => {
+	it('returns null box when no rendering shapes provided', () => {
 		const result = getExportDefaultBounds(editor, [], 32, null)
-		expect(result).toBeNull()
+		expect(result.box).toBeNull()
 	})
 
 	it('returns bounds for single shape with padding', () => {
@@ -83,12 +83,13 @@ describe('getExportDefaultBounds', () => {
 
 		const result = getExportDefaultBounds(editor, [testShape], 32, null)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
+		expect(result.paddingApplied).toBe(true)
 		// Bounds should include 32px padding on all sides
-		expect(result?.x).toBe(10 - 32) // -22
-		expect(result?.y).toBe(20 - 32) // -12
-		expect(result?.w).toBe(100 + 64) // 164 (32px on each side)
-		expect(result?.h).toBe(80 + 64) // 144 (32px on each side)
+		expect(result.box?.x).toBe(10 - 32) // -22
+		expect(result.box?.y).toBe(20 - 32) // -12
+		expect(result.box?.w).toBe(100 + 64) // 164 (32px on each side)
+		expect(result.box?.h).toBe(80 + 64) // 144 (32px on each side)
 	})
 
 	it('returns union bounds for multiple shapes with padding', () => {
@@ -116,12 +117,12 @@ describe('getExportDefaultBounds', () => {
 
 		const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
 		// Raw bounds would be (0,0) to (90,90), with 32px padding on all sides
-		expect(result?.x).toBe(0 - 32) // -32
-		expect(result?.y).toBe(0 - 32) // -32
-		expect(result?.w).toBe(90 + 64) // 154
-		expect(result?.h).toBe(90 + 64) // 154
+		expect(result.box?.x).toBe(0 - 32) // -32
+		expect(result.box?.y).toBe(0 - 32) // -32
+		expect(result.box?.w).toBe(90 + 64) // 154
+		expect(result.box?.h).toBe(90 + 64) // 154
 	})
 
 	it('handles shapes with transforms correctly', () => {
@@ -142,10 +143,10 @@ describe('getExportDefaultBounds', () => {
 
 		const result = getExportDefaultBounds(editor, [testShape], 32, null)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
 		// The rotated shape should have expanded bounds, plus padding
-		expect(result!.w).toBeGreaterThan(50 + 64)
-		expect(result!.h).toBeGreaterThan(40 + 64)
+		expect(result.box!.w).toBeGreaterThan(50 + 64)
+		expect(result.box!.h).toBeGreaterThan(40 + 64)
 	})
 
 	it('handles multiple overlapping shapes correctly', () => {
@@ -183,12 +184,12 @@ describe('getExportDefaultBounds', () => {
 
 		const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
 		// Raw bounds would be (0,0) to (60,60), with 32px padding on all sides
-		expect(result?.x).toBe(0 - 32) // -32
-		expect(result?.y).toBe(0 - 32) // -32
-		expect(result?.w).toBe(60 + 64) // 124 (32px on each side)
-		expect(result?.h).toBe(60 + 64) // 124 (32px on each side)
+		expect(result.box?.x).toBe(0 - 32) // -32
+		expect(result.box?.y).toBe(0 - 32) // -32
+		expect(result.box?.w).toBe(60 + 64) // 124 (32px on each side)
+		expect(result.box?.h).toBe(60 + 64) // 124 (32px on each side)
 	})
 
 	it('handles complex geometry with multiple shapes', () => {
@@ -226,17 +227,17 @@ describe('getExportDefaultBounds', () => {
 
 		const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
 
 		// The bounds should encompass:
 		// - shape1: (0, 0) to (50, 50)
 		// - shape2: (100, 100) to (160, 140)
 		// - shape3: (200, 50) to (240, 130)
 		// Raw total bounds: (0, 0) to (240, 140), with 32px padding on all sides
-		expect(result!.x).toBe(0 - 32) // -32 (leftmost edge with padding)
-		expect(result!.y).toBe(0 - 32) // -32 (topmost edge with padding)
-		expect(result!.w).toBe(240 + 64) // 304 (width + 32px on each side)
-		expect(result!.h).toBe(140 + 64) // 204 (height + 32px on each side)
+		expect(result.box!.x).toBe(0 - 32) // -32 (leftmost edge with padding)
+		expect(result.box!.y).toBe(0 - 32) // -32 (topmost edge with padding)
+		expect(result.box!.w).toBe(240 + 64) // 304 (width + 32px on each side)
+		expect(result.box!.h).toBe(140 + 64) // 204 (height + 32px on each side)
 	})
 
 	it('handles empty rendering shapes array after filtering', () => {
@@ -253,7 +254,7 @@ describe('getExportDefaultBounds', () => {
 		// Pass empty array to simulate filtered out shapes
 		const result = getExportDefaultBounds(editor, [], 32, null)
 
-		expect(result).toBeNull()
+		expect(result.box).toBeNull()
 	})
 
 	it('does not apply padding when exporting single frame shape', () => {
@@ -272,12 +273,13 @@ describe('getExportDefaultBounds', () => {
 		// Pass the shape ID as singleFrameShapeId to simulate single frame export
 		const result = getExportDefaultBounds(editor, [testShape], 32, shapeId)
 
-		expect(result).toBeInstanceOf(Box)
+		expect(result.box).toBeInstanceOf(Box)
+		expect(result.paddingApplied).toBe(false)
 		// No padding should be applied
-		expect(result?.x).toBe(10)
-		expect(result?.y).toBe(20)
-		expect(result?.w).toBe(100)
-		expect(result?.h).toBe(80)
+		expect(result.box?.x).toBe(10)
+		expect(result.box?.y).toBe(20)
+		expect(result.box?.w).toBe(100)
+		expect(result.box?.h).toBe(80)
 	})
 
 	describe('isExportBoundsContainer behavior', () => {
@@ -306,12 +308,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Raw bounds: (0,0) to (50,50), with padding
-			expect(result?.x).toBe(-32)
-			expect(result?.y).toBe(-32)
-			expect(result?.w).toBe(50 + 64) // 114
-			expect(result?.h).toBe(50 + 64) // 114
+			expect(result.box?.x).toBe(-32)
+			expect(result.box?.y).toBe(-32)
+			expect(result.box?.w).toBe(50 + 64) // 114
+			expect(result.box?.h).toBe(50 + 64) // 114
 		})
 
 		it('skips padding when container shape contains all other shapes', () => {
@@ -352,12 +354,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Should use container bounds without padding: (0,0) to (100,100)
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('applies padding when container does not contain all shapes', () => {
@@ -399,12 +401,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Total bounds: (0,0) to (100,100), with padding applied
-			expect(result?.x).toBe(-32)
-			expect(result?.y).toBe(-32)
-			expect(result?.w).toBe(100 + 64) // 164
-			expect(result?.h).toBe(100 + 64) // 164
+			expect(result.box?.x).toBe(-32)
+			expect(result.box?.y).toBe(-32)
+			expect(result.box?.w).toBe(100 + 64) // 164
+			expect(result.box?.h).toBe(100 + 64) // 164
 		})
 
 		it('works with multiple containers where one contains all', () => {
@@ -446,12 +448,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Should use the large container's bounds without padding
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('container behavior is overridden by single frame shape', () => {
@@ -482,12 +484,12 @@ describe('getExportDefaultBounds', () => {
 			// Single frame shape logic takes precedence over container logic
 			const result = getExportDefaultBounds(editor, testShapes, 32, containerId)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Should use total bounds without padding (single frame overrides container)
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('handles containers with inner shapes correctly', () => {
@@ -517,13 +519,13 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Container (0,0,200,120) should contain inner shape bounds,
 			// so no padding should be applied
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(200)
-			expect(result?.h).toBe(120)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(200)
+			expect(result.box?.h).toBe(120)
 		})
 
 		it('handles order sensitivity - container processed first', () => {
@@ -553,12 +555,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Container should contain regular shape, no padding applied
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('handles order sensitivity - regular shape processed first', () => {
@@ -588,12 +590,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Container should still contain regular shape, no padding applied
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('multiple containers - only one that contains all others skips padding', () => {
@@ -635,12 +637,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Large container contains everything (including small container), no padding
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('multiple containers - none contains all others, padding applied', () => {
@@ -692,13 +694,13 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// No single container contains all others, padding should be applied
 			// Total bounds: (0,0) to (100,100), with padding
-			expect(result?.x).toBe(-32)
-			expect(result?.y).toBe(-32)
-			expect(result?.w).toBe(100 + 64) // 164
-			expect(result?.h).toBe(100 + 64) // 164
+			expect(result.box?.x).toBe(-32)
+			expect(result.box?.y).toBe(-32)
+			expect(result.box?.w).toBe(100 + 64) // 164
+			expect(result.box?.h).toBe(100 + 64) // 164
 		})
 
 		it('container covers most but not all shapes - padding applied', () => {
@@ -740,13 +742,13 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Container doesn't contain all shapes, padding applied
 			// Total bounds: (0,0) to (90,90), with padding
-			expect(result?.x).toBe(-32)
-			expect(result?.y).toBe(-32)
-			expect(result?.w).toBe(90 + 64) // 154
-			expect(result?.h).toBe(90 + 64) // 154
+			expect(result.box?.x).toBe(-32)
+			expect(result.box?.y).toBe(-32)
+			expect(result.box?.w).toBe(90 + 64) // 154
+			expect(result.box?.h).toBe(90 + 64) // 154
 		})
 
 		it('nested containers - inner container processed first', () => {
@@ -788,12 +790,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Outer container contains everything, should use outer bounds without padding
-			expect(result?.x).toBe(0)
-			expect(result?.y).toBe(0)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(100)
+			expect(result.box?.x).toBe(0)
+			expect(result.box?.y).toBe(0)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(100)
 		})
 
 		it('container-only shapes should not skip padding', () => {
@@ -822,13 +824,13 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Neither container fully contains the other, padding should be applied
 			// Total bounds: (0,0) to (80,80), with padding
-			expect(result?.x).toBe(-32)
-			expect(result?.y).toBe(-32)
-			expect(result?.w).toBe(80 + 64) // 144
-			expect(result?.h).toBe(80 + 64) // 144
+			expect(result.box?.x).toBe(-32)
+			expect(result.box?.y).toBe(-32)
+			expect(result.box?.w).toBe(80 + 64) // 144
+			expect(result.box?.h).toBe(80 + 64) // 144
 		})
 
 		it('single container with only itself skips padding', () => {
@@ -848,12 +850,12 @@ describe('getExportDefaultBounds', () => {
 
 			const result = getExportDefaultBounds(editor, testShapes, 32, null)
 
-			expect(result).toBeInstanceOf(Box)
+			expect(result.box).toBeInstanceOf(Box)
 			// Single container should skip padding (it trivially contains "all other shapes")
-			expect(result?.x).toBe(10)
-			expect(result?.y).toBe(20)
-			expect(result?.w).toBe(100)
-			expect(result?.h).toBe(80)
+			expect(result.box?.x).toBe(10)
+			expect(result.box?.y).toBe(20)
+			expect(result.box?.w).toBe(100)
+			expect(result.box?.h).toBe(80)
 		})
 	})
 })

package/src/lib/exports/getSvgJsx.tsx

@@ -37,16 +37,23 @@ import { Mat } from '../primitives/Mat'
 import { ExportDelay } from './ExportDelay'
 
 export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions = {}) {
-	if (!window.document) throw Error('No document')
+	const editorDocument = editor.getContainerDocument()
+	if (!editorDocument) throw Error('No document')
 
 	const {
 		scale = 1,
 		// should we include the background in the export? or is it transparent?
 		background = editor.getInstanceState().exportBackground,
-		padding = editor.options.defaultSvgPadding,
 		preserveAspectRatio,
 	} = opts
 
+	// Resolve the padding mode:
+	// - 'auto' (or undefined): render with default padding, then trim to actual visual content
+	// - number: fixed padding, no trimming
+	const isAutoTrim = typeof opts.padding !== 'number'
+	const renderPadding =
+		typeof opts.padding === 'number' ? opts.padding : editor.options.defaultSvgPadding
+
 	const isDarkMode = opts.darkMode ?? editor.user.getIsDarkMode()
 
 	// ---Figure out which shapes we need to include
@@ -60,21 +67,36 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
 
 	let bbox: null | Box = null
+	let paddingWasApplied = false
 	if (opts.bounds) {
-		bbox = opts.bounds.clone().expandBy(padding)
+		// Explicit bounds: use exact bounds when auto, expand by padding when fixed
+		bbox = isAutoTrim ? opts.bounds.clone() : opts.bounds.clone().expandBy(renderPadding)
 	} else {
-		bbox = getExportDefaultBounds(editor, renderingShapes, padding, singleFrameShapeId)
+		const result = getExportDefaultBounds(
+			editor,
+			renderingShapes,
+			renderPadding,
+			singleFrameShapeId
+		)
+		bbox = result.box
+		paddingWasApplied = result.paddingApplied
 	}
 
 	// no unmasked shapes to export
 	if (!bbox) return
 
+	// When auto-trim is active and padding was applied by getExportDefaultBounds,
+	// the padding region is trimmable: exports will scan pixels from each edge inward
+	// and trim to the actual visual content bounds. This ensures visual overflow
+	// (strokes, arrowheads) is captured without unnecessary whitespace.
+	const trimPadding = isAutoTrim && paddingWasApplied ? renderPadding : 0
+
 	// We want the svg image to be BIGGER THAN USUAL to account for image quality
 	const w = bbox.width * scale
 	const h = bbox.height * scale
 
 	try {
-		document.body.focus?.() // weird but necessary
+		editorDocument.body.focus?.() // weird but necessary
 	} catch {
 		// not implemented
 	}
@@ -102,7 +124,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		</SvgExport>
 	)
 
-	return { jsx: svg, width: w, height: h, exportDelay }
+	return { jsx: svg, width: w, height: h, exportDelay, trimPadding }
 }
 
 /**
@@ -126,7 +148,7 @@ export function getExportDefaultBounds(
 	renderingShapes: TLRenderingShape[],
 	padding: number,
 	singleFrameShapeId: TLShapeId | null
-) {
+): { box: Box; paddingApplied: boolean } | { box: null; paddingApplied: false } {
 	let isBoundedByContainer = false
 	let bbox: null | Box = null
 
@@ -162,16 +184,17 @@ export function getExportDefaultBounds(
 	}
 
 	// No unmasked shapes to export
-	if (!bbox) return null
+	if (!bbox) return { box: null, paddingApplied: false }
 
 	// Only apply padding if:
 	// - Not exporting a single frame (frames have their own padding rules)
 	// - Not bounded by a container (containers define their own bounds precisely)
-	if (!singleFrameShapeId && !isBoundedByContainer) {
+	const paddingApplied = !singleFrameShapeId && !isBoundedByContainer
+	if (paddingApplied) {
 		bbox.expandBy(padding)
 	}
 
-	return bbox
+	return { box: bbox, paddingApplied }
 }
 
 function SvgExport({

package/src/lib/globals/environment.ts

@@ -1,4 +1,5 @@
 import { atom } from '@tldraw/state'
+import { getGlobalWindow } from '../utils/dom'
 
 /**
  * An object that contains information about the current device and environment.
@@ -27,7 +28,7 @@ if (typeof window !== 'undefined') {
 		tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
 		tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
 		tlenv.isAndroid = /android/i.test(navigator.userAgent)
-		tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+		tlenv.isDarwin = getGlobalWindow().navigator.userAgent.toLowerCase().indexOf('mac') > -1
 	}
 	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
 	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
@@ -48,7 +49,7 @@ const tlenvReactive = atom('tlenvReactive', {
 })
 
 if (typeof window !== 'undefined' && !isForcedFinePointer) {
-	const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
+	const mql = getGlobalWindow().matchMedia && getGlobalWindow().matchMedia('(any-pointer: coarse)')
 
 	const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer
 
@@ -66,7 +67,7 @@ if (typeof window !== 'undefined' && !isForcedFinePointer) {
 
 	// 2. Also update the coarse pointer state when a pointer down event occurs. We need `capture: true`
 	// here because the tldraw component itself stops propagation on pointer events it receives.
-	window.addEventListener(
+	getGlobalWindow().addEventListener(
 		'pointerdown',
 		(e: PointerEvent) => {
 			// when the user interacts with a mouse, we assume they have a fine pointer.

package/src/lib/hooks/useCanvasEvents.ts

@@ -13,7 +13,7 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
-	const ownerDocument = editor.getContainer().ownerDocument
+	const ownerDocument = editor.getContainerDocument()
 	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
@@ -80,8 +80,7 @@ export function useCanvasEvents() {
 			function onTouchEnd(e: React.TouchEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 				editor.markEventAsHandled(e)
-				// check that e.target is an HTMLElement
-				if (!(e.target instanceof HTMLElement)) return
+				if (!(e.target instanceof editor.getContainerWindow().HTMLElement)) return
 
 				const editingShapeId = editor.getEditingShapeId()
 				if (

package/src/lib/hooks/useDocumentEvents.ts

@@ -46,7 +46,8 @@ export function useDocumentEvents() {
 	}, [container])
 
 	useEffect(() => {
-		if (typeof window === 'undefined' || !('matchMedia' in window)) return
+		const win = editor.getContainerWindow()
+		if (!('matchMedia' in win)) return
 
 		// https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
 		let remove: (() => void) | null = null
@@ -54,8 +55,8 @@ export function useDocumentEvents() {
 			if (remove != null) {
 				remove()
 			}
-			const mqString = `(resolution: ${window.devicePixelRatio}dppx)`
-			const media = matchMedia(mqString)
+			const mqString = `(resolution: ${win.devicePixelRatio}dppx)`
+			const media = win.matchMedia(mqString)
 			// Safari only started supporting `addEventListener('change',...) in version 14
 			// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event
 			const safariCb = (ev: any) => {
@@ -79,7 +80,7 @@ export function useDocumentEvents() {
 					media.removeListener(safariCb)
 				}
 			}
-			editor.updateInstanceState({ devicePixelRatio: window.devicePixelRatio })
+			editor.updateInstanceState({ devicePixelRatio: win.devicePixelRatio })
 		}
 		updatePixelRatio()
 		return () => {
@@ -275,9 +276,10 @@ export function useDocumentEvents() {
 
 		container.addEventListener('wheel', handleWheel, { passive: false })
 
-		document.addEventListener('gesturestart', preventDefault)
-		document.addEventListener('gesturechange', preventDefault)
-		document.addEventListener('gestureend', preventDefault)
+		const ownerDoc = container.ownerDocument
+		ownerDoc.addEventListener('gesturestart', preventDefault)
+		ownerDoc.addEventListener('gesturechange', preventDefault)
+		ownerDoc.addEventListener('gestureend', preventDefault)
 
 		container.addEventListener('keydown', handleKeyDown)
 		container.addEventListener('keyup', handleKeyUp)
@@ -287,9 +289,9 @@ export function useDocumentEvents() {
 
 			container.removeEventListener('wheel', handleWheel)
 
-			document.removeEventListener('gesturestart', preventDefault)
-			document.removeEventListener('gesturechange', preventDefault)
-			document.removeEventListener('gestureend', preventDefault)
+			ownerDoc.removeEventListener('gesturestart', preventDefault)
+			ownerDoc.removeEventListener('gesturechange', preventDefault)
+			ownerDoc.removeEventListener('gestureend', preventDefault)
 
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)
@@ -298,5 +300,8 @@ export function useDocumentEvents() {
 }
 
 function areShortcutsDisabled(editor: Editor) {
-	return editor.menus.hasOpenMenus() || activeElementShouldCaptureKeys()
+	return (
+		editor.menus.hasOpenMenus() ||
+		activeElementShouldCaptureKeys(true, editor.getContainerDocument())
+	)
 }

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -15,14 +15,14 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 
 		if (!elm) return
 
+		const win = editor.getContainerWindow()
 		const handleEvent = (e: PointerEvent | TouchEvent) => {
-			if (e instanceof PointerEvent && e.pointerType === 'pen') {
+			if (e instanceof win.PointerEvent && e.pointerType === 'pen') {
 				editor.markEventAsHandled(e)
 				const { target } = e
 
-				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input
 				if (
-					elementShouldCaptureKeys(target instanceof Element ? target : null, false) ||
+					elementShouldCaptureKeys(target instanceof win.Element ? target : null, false) ||
 					editor.isIn('select.editing_shape')
 				) {
 					return

package/src/lib/hooks/useScreenBounds.ts

@@ -1,5 +1,6 @@
 import { throttle } from '@tldraw/utils'
 import { useLayoutEffect } from 'react'
+import { getOwnerWindow } from '../exports/domUtils'
 import { useEditor } from './useEditor'
 
 export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
@@ -21,7 +22,8 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
 		// Rather than running getClientRects on every frame, we'll
 		// run it once a second or when the window resizes.
 		const interval = editor.timers.setInterval(updateBounds, 1000)
-		window.addEventListener('resize', updateBounds)
+		const win = editor.getContainerWindow()
+		win.addEventListener('resize', updateBounds)
 
 		const resizeObserver = new ResizeObserver((entries) => {
 			if (!entries[0].contentRect) return
@@ -42,7 +44,7 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
 
 		return () => {
 			clearInterval(interval)
-			window.removeEventListener('resize', updateBounds)
+			win.removeEventListener('resize', updateBounds)
 			resizeObserver.disconnect()
 			scrollingParent?.removeEventListener('scroll', updateBounds)
 			updateBounds.cancel()
@@ -56,12 +58,14 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
  * https://github.com/excalidraw/excalidraw/blob/48c3465b19f10ec755b3eb84e21a01a468e96e43/packages/excalidraw/utils.ts#L600
  */
 const getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Document => {
+	const doc = element.ownerDocument
+	const win = getOwnerWindow(element)
 	let parent = element.parentElement
 	while (parent) {
-		if (parent === document.body) {
-			return document
+		if (parent === doc.body) {
+			return doc
 		}
-		const { overflowY } = window.getComputedStyle(parent)
+		const { overflowY } = win.getComputedStyle(parent)
 		const hasScrollableContent = parent.scrollHeight > parent.clientHeight
 		if (
 			hasScrollableContent &&
@@ -71,5 +75,5 @@ const getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Docu
 		}
 		parent = parent.parentElement
 	}
-	return document
+	return doc
 }