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

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
 }

package/src/lib/hooks/useViewportHeight.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useState } from 'react'
+import { useMaybeEditor } from './useEditor'
 
 /*!
  * BSD License: https://github.com/outline/rich-markdown-editor/blob/main/LICENSE
@@ -12,26 +13,27 @@ import { useLayoutEffect, useState } from 'react'
  */
 /** @public */
 export function useViewportHeight(): number {
-	const visualViewport = window.visualViewport
+	const editor = useMaybeEditor()
+	const win = editor?.getContainerWindow() ?? window
+	const vv = win.visualViewport
 	const [height, setHeight] = useState<number>(() =>
-		visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
+		vv ? vv.height + vv.offsetTop : win.innerHeight
 	)
 
 	useLayoutEffect(() => {
+		const win = editor?.getContainerWindow() ?? window
 		const handleResize = () => {
-			const visualViewport = window.visualViewport
-			setHeight(() =>
-				visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
-			)
+			const vv = win.visualViewport
+			setHeight(() => (vv ? vv.height + vv.offsetTop : win.innerHeight))
 		}
 
-		window.visualViewport?.addEventListener('resize', handleResize)
-		window.visualViewport?.addEventListener('scroll', handleResize)
+		win.visualViewport?.addEventListener('resize', handleResize)
+		win.visualViewport?.addEventListener('scroll', handleResize)
 
 		return () => {
-			window.visualViewport?.removeEventListener('resize', handleResize)
-			window.visualViewport?.removeEventListener('scroll', handleResize)
+			win.visualViewport?.removeEventListener('resize', handleResize)
+			win.visualViewport?.removeEventListener('scroll', handleResize)
 		}
-	}, [])
+	}, [editor])
 	return height
 }

package/src/lib/test/TestEditor.ts

@@ -8,6 +8,7 @@ class CustomTool extends StateNode {
 
 export class TestEditor extends Editor {
 	constructor(options: Partial<Omit<TLEditorOptions, 'store'>> = {}) {
+		// eslint-disable-next-line no-restricted-globals
 		const elm = document.createElement('div')
 		elm.tabIndex = 0
 

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -94,6 +94,7 @@ const TEST_SIZES = {
  * @returns The maximum size of the canvas for the given dimension.
  */
 function getCanvasSize(dimension: 'width' | 'height' | 'area'): number {
+	// eslint-disable-next-line no-restricted-globals
 	const cropCvs = document.createElement('canvas')
 	cropCvs.width = 1
 	cropCvs.height = 1
@@ -103,6 +104,7 @@ function getCanvasSize(dimension: 'width' | 'height' | 'area'): number {
 		const w = dimension === 'height' ? 1 : size
 		const h = dimension === 'width' ? 1 : size
 
+		// eslint-disable-next-line no-restricted-globals
 		const testCvs = document.createElement('canvas')
 		testCvs.width = w
 		testCvs.height = h

package/src/lib/utils/dom.ts

@@ -98,13 +98,22 @@ export const setStyleProperty = (
 }
 
 /** @internal */
-export function activeElementShouldCaptureKeys(ignoreButtons = false) {
-	const { activeElement } = document
-	const elements = ignoreButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
-	return !!(
-		activeElement &&
-		((activeElement as HTMLElement).isContentEditable ||
-			elements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||
-			activeElement.classList.contains('tlui-slider__thumb'))
+export function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {
+	if (!el) return false
+
+	const tagName = el.tagName.toLowerCase()
+	return (
+		(el as HTMLElement).isContentEditable ||
+		tagName === 'input' ||
+		tagName === 'textarea' ||
+		(includeButtonsAndMenus && tagName === 'select') ||
+		(includeButtonsAndMenus && tagName === 'button') ||
+		el.classList.contains('tlui-slider__thumb')
 	)
 }
+
+/** @internal */
+export function activeElementShouldCaptureKeys(includeButtonsAndMenus = true, doc?: Document) {
+	// eslint-disable-next-line no-restricted-globals
+	return elementShouldCaptureKeys((doc ?? document).activeElement, includeButtonsAndMenus)
+}

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.5.0-canary.fe0a82f04c21'
+export const version = '4.5.0-internal.b3f4cb985cc3'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-03-09T16:17:44.431Z',
-	patch: '2026-03-09T16:17:44.431Z',
+	minor: '2026-03-11T15:43:43.431Z',
+	patch: '2026-03-11T15:43:43.431Z',
 }