@tldraw/editor 5.3.0-next.d7d8ced023d5 → 5.3.0-next.df310c6196c0

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

@@ -1,6 +1,6 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
 import type { TLInstancePresence } from '@tldraw/tlschema'
-import { maxBy } from '@tldraw/utils'
+import { areArraysShallowEqual, maxBy } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
 /**
@@ -41,11 +41,16 @@ export class CollaboratorsManager {
 		}))
 	}
 
+	// These queries all derive fresh arrays with map/filter, so they compare results with
+	// shallow (element-identity) equality: a presence update that leaves a derived list's
+	// elements unchanged — e.g. a peer moving on another page — keeps the previous array's
+	// identity and doesn't invalidate downstream subscribers such as the cursor layer.
+
 	/**
 	 * Returns a list of presence records for all peer collaborators.
 	 * This will return the latest presence record for each connected user.
 	 */
-	@computed
+	@computed({ isEqual: areArraysShallowEqual })
 	getCollaborators(): TLInstancePresence[] {
 		const allPresenceRecords = this._getCollaboratorsQuery().get()
 		if (!allPresenceRecords.length) return EMPTY_ARRAY
@@ -63,7 +68,7 @@ export class CollaboratorsManager {
 	 * Returns a list of presence records for all peer collaborators on the current page.
 	 * This will return the latest presence record for each connected user.
 	 */
-	@computed
+	@computed({ isEqual: areArraysShallowEqual })
 	getCollaboratorsOnCurrentPage(): TLInstancePresence[] {
 		const currentPageId = this.editor.getCurrentPageId()
 		return this.getCollaborators().filter((c) => c.currentPageId === currentPageId)
@@ -76,7 +81,7 @@ export class CollaboratorsManager {
 	 * highlighted users. Re-evaluates on the visibility clock, so callers don't need to
 	 * drive their own activity timer.
 	 */
-	@computed
+	@computed({ isEqual: areArraysShallowEqual })
 	getVisibleCollaborators(): TLInstancePresence[] {
 		const { editor } = this
 		const { collaboratorInactiveTimeoutMs, collaboratorIdleTimeoutMs } = editor.options
@@ -121,7 +126,7 @@ export class CollaboratorsManager {
 	 * Returns a list of presence records for peer collaborators who should currently be
 	 * shown in the UI, filtered to those on the current page.
 	 */
-	@computed
+	@computed({ isEqual: areArraysShallowEqual })
 	getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[] {
 		const currentPageId = this.editor.getCurrentPageId()
 		return this.getVisibleCollaborators().filter((c) => c.currentPageId === currentPageId)

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -1,7 +1,8 @@
-import { RefObject, useEffect } from 'react'
+import { RefObject, useEffect, useRef } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
+import { useEvent } from './useEvent'
 
 function isScrollableOverflow(overflow: string) {
 	return overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'
@@ -51,33 +52,49 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 	const container = useContainer()
 	const editor = useMaybeEditor()
 
-	useEffect(() => {
-		function onWheel(e: WheelEvent) {
-			// Only pass through wheel events if the editor is focused
-			if (!editor?.getInstanceState().isFocused) return
-
-			if ((e as any).isSpecialRedispatchedEvent) return
+	const onWheel = useEvent((e: WheelEvent) => {
+		// Only pass through wheel events if the editor is focused
+		if (!editor?.getInstanceState().isFocused) return
 
-			// If the wheel is over a scrollable element, let it scroll instead of redispatching.
-			const elm = ref.current
-			if (elm && hasScrollableElement(e.target, elm)) {
-				return
-			}
+		if ((e as any).isSpecialRedispatchedEvent) return
 
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new WheelEvent('wheel', e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
+		// If the wheel is over a scrollable element, let it scroll instead of redispatching.
+		const elm = ref.current
+		if (elm && hasScrollableElement(e.target, elm)) {
+			return
 		}
 
+		preventDefault(e)
+		const cvs = container.querySelector('.tl-canvas')
+		if (!cvs) return
+		const newEvent = new WheelEvent('wheel', e as any)
+		;(newEvent as any).isSpecialRedispatchedEvent = true
+		cvs.dispatchEvent(newEvent)
+	})
+
+	// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`
+	// gives no notification when its element changes.
+	const attached = useRef<HTMLElement | null>(null)
+
+	// Deliberately no dependency array — this re-checks the ref after every render of the component
+	// that owns it, and re-attaches when the element has been swapped. A component that keeps the
+	// hook mounted while unmounting and remounting the element it points at (a comment pin culled
+	// while its anchor is off screen, say) would otherwise leave the listener on the discarded node
+	// and silently lose pass-through once the element comes back.
+	useEffect(() => {
 		const elm = ref.current
-		if (!elm) return
+		if (elm === attached.current) return
+		attached.current?.removeEventListener('wheel', onWheel)
+		attached.current = elm
+		elm?.addEventListener('wheel', onWheel, { passive: false })
+	})
 
-		elm.addEventListener('wheel', onWheel, { passive: false })
+	// Teardown is its own effect so the re-attach check above can skip returning a cleanup that
+	// would tear the listener down and rebuild it on every render.
+	useEffect(() => {
 		return () => {
-			elm.removeEventListener('wheel', onWheel)
+			attached.current?.removeEventListener('wheel', onWheel)
+			attached.current = null
 		}
-	}, [container, editor, ref])
+	}, [onWheel])
 }

package/src/lib/license/LicenseManager.test.ts

@@ -1202,6 +1202,31 @@ describe('getEnabledFeatures', () => {
 		}
 	)
 
+	it('enables every feature for an evaluation license regardless of flags', () => {
+		const result = getDefaultLicenseResult({
+			isEvaluationLicense: true,
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'licensed', false)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it('disables all features for an expired evaluation license', () => {
+		const result = getDefaultLicenseResult({
+			isEvaluationLicense: true,
+			isEvaluationLicenseExpired: true,
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'expired', false)).toEqual({
+			collaboration: false,
+			commenting: false,
+		})
+	})
+
 	it('disables all features when the license is not parseable', () => {
 		expect(
 			getEnabledFeatures(

package/src/lib/license/LicenseManager.ts

@@ -566,6 +566,13 @@ export function getEnabledFeatures(
 		return { ...NO_FEATURES }
 	}
 
+	// Evaluation licenses get every feature so prospects can trial the whole product without us
+	// having to mint per-feature evaluation keys. Expired evaluation licenses are already excluded
+	// above: they resolve to the 'expired' state.
+	if (result.isEvaluationLicense) {
+		return { ...ALL_FEATURES }
+	}
+
 	return {
 		collaboration: result.isCollaborationEnabled,
 		commenting: result.isCommentingEnabled,

package/src/lib/test/EditorPortal.test.tsx

@@ -0,0 +1,48 @@
+import { act, render, screen } from '@testing-library/react'
+import { EditorPortal } from '../components/EditorPortal'
+import { createTLStore } from '../config/createTLStore'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+/** Mounted in a canvas slot — the deep-in-the-tree case the portal exists for. */
+function Portaled() {
+	return (
+		<EditorPortal>
+			<div data-testid="portaled" />
+		</EditorPortal>
+	)
+}
+
+describe('EditorPortal', () => {
+	async function renderEditor() {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Portaled }} />)
+		})
+		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
+	}
+
+	it('renders its children into the editor container', async () => {
+		const container = await renderEditor()
+		expect(container.contains(screen.getByTestId('portaled'))).toBe(true)
+	})
+
+	it('renders into a host that comes after everything the editor renders', async () => {
+		const container = await renderEditor()
+		const host = container.querySelector('.tl-portal-host')!
+		expect(host.contains(screen.getByTestId('portaled'))).toBe(true)
+		// Last of the container's rendered children. Managers append their own nodes after this one
+		// (the text measurement element, say) but those are `tabIndex = -1` and out of the tab order.
+		const rendered = [...container.children].filter((el) => !el.matches('.tl-text-measure'))
+		expect(rendered.at(-1)).toBe(host)
+	})
+
+	// The tab order guarantee: mounted in a canvas slot, the portaled content still lands after
+	// everything the editor renders itself — including (in tldraw) the UI's skip link, which only
+	// works while nothing precedes it. Portaling straight into the container lands it ahead of them.
+	it('places its children after the rest of the editor in document order', async () => {
+		await renderEditor()
+		const portaled = screen.getByTestId('portaled')
+		const canvas = screen.getByTestId('canvas')
+		expect(canvas.compareDocumentPosition(portaled) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+	})
+})

package/src/lib/test/usePassThroughWheelEvents.test.tsx

@@ -0,0 +1,77 @@
+import { act, cleanup, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { createTLStore } from '../config/createTLStore'
+import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+let setVisible: (visible: boolean) => void
+let rerender: () => void
+
+/**
+ * The shape a comment pin has: the hook's owner stays mounted while the element the ref points at
+ * is culled and later remounted (the pin returns null when its anchor leaves the viewport).
+ */
+function Culled() {
+	const ref = useRef<HTMLButtonElement>(null)
+	usePassThroughWheelEvents(ref)
+	const [visible, _setVisible] = useState(true)
+	const [, setTick] = useState(0)
+	setVisible = _setVisible
+	rerender = () => setTick((t) => t + 1)
+	if (!visible) return null
+	return <button ref={ref} data-testid="marker" />
+}
+
+describe('usePassThroughWheelEvents', () => {
+	async function renderEditor() {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Culled }} />)
+		})
+		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
+	}
+
+	function wheelOverMarker(container: Element) {
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		const marker = container.querySelector('[data-testid="marker"]')!
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		return received
+	}
+
+	it('redispatches wheel events over the element to the canvas', async () => {
+		const container = await renderEditor()
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The regression: the owner stays mounted across the cull, so an effect keyed on its deps never
+	// re-runs and the listener is left on the discarded element.
+	it('still redispatches after the element unmounts and remounts', async () => {
+		const container = await renderEditor()
+		await act(async () => setVisible(false))
+		await act(async () => setVisible(true))
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The re-attach check runs on every render, so it has to be a no-op when the element hasn't
+	// changed — otherwise each render stacks another listener and one wheel redispatches many.
+	it('does not stack listeners across renders that leave the element in place', async () => {
+		const container = await renderEditor()
+		for (let i = 0; i < 3; i++) {
+			await act(async () => rerender())
+		}
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	it('stops redispatching once the owner unmounts', async () => {
+		const container = await renderEditor()
+		const marker = container.querySelector('[data-testid="marker"]')!
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		await act(async () => cleanup())
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		expect(received).toHaveLength(0)
+	})
+})

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 = '5.3.0-next.d7d8ced023d5'
+export const version = '5.3.0-next.df310c6196c0'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-03T09:27:05.718Z',
-	patch: '2026-08-03T09:27:05.718Z',
+	minor: '2026-08-05T11:28:43.788Z',
+	patch: '2026-08-05T11:28:43.788Z',
 }

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js

@@ -1,51 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var usePassThroughMouseOverEvents_exports = {};
-__export(usePassThroughMouseOverEvents_exports, {
-  usePassThroughMouseOverEvents: () => usePassThroughMouseOverEvents
-});
-module.exports = __toCommonJS(usePassThroughMouseOverEvents_exports);
-var import_react = require("react");
-var import_dom = require("../utils/dom");
-var import_useContainer = require("./useContainer");
-var import_useEditor = require("./useEditor");
-function usePassThroughMouseOverEvents(ref) {
-  if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
-  const container = (0, import_useContainer.useContainer)();
-  const editor = (0, import_useEditor.useMaybeEditor)();
-  (0, import_react.useEffect)(() => {
-    function onMouseOver(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      (0, import_dom.preventDefault)(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new PointerEvent(e.type, e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
-    }
-    const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("mouseover", onMouseOver, { passive: false });
-    return () => {
-      elm.removeEventListener("mouseover", onMouseOver);
-    };
-  }, [container, editor, ref]);
-}
-//# sourceMappingURL=usePassThroughMouseOverEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAGxB,SAAS,8BAA8B,KAAoC;AACjF,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
-  "names": []
-}

package/dist-esm/lib/hooks/usePassThroughMouseOverEvents.mjs

@@ -1,31 +0,0 @@
-import { useEffect } from "react";
-import { preventDefault } from "../utils/dom.mjs";
-import { useContainer } from "./useContainer.mjs";
-import { useMaybeEditor } from "./useEditor.mjs";
-function usePassThroughMouseOverEvents(ref) {
-  if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
-  const container = useContainer();
-  const editor = useMaybeEditor();
-  useEffect(() => {
-    function onMouseOver(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      preventDefault(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new PointerEvent(e.type, e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
-    }
-    const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("mouseover", onMouseOver, { passive: false });
-    return () => {
-      elm.removeEventListener("mouseover", onMouseOver);
-    };
-  }, [container, editor, ref]);
-}
-export {
-  usePassThroughMouseOverEvents
-};
-//# sourceMappingURL=usePassThroughMouseOverEvents.mjs.map

package/dist-esm/lib/hooks/usePassThroughMouseOverEvents.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,8BAA8B,KAAoC;AACjF,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
-  "names": []
-}

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,32 +0,0 @@
-import { RefObject, useEffect } from 'react'
-import { preventDefault } from '../utils/dom'
-import { useContainer } from './useContainer'
-import { useMaybeEditor } from './useEditor'
-
-/** @public */
-export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {
-	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
-	const container = useContainer()
-	const editor = useMaybeEditor()
-
-	useEffect(() => {
-		function onMouseOver(e: MouseEvent) {
-			if (!editor?.getInstanceState().isFocused) return
-			if ((e as any).isSpecialRedispatchedEvent) return
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new PointerEvent(e.type, e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
-		}
-
-		const elm = ref.current
-		if (!elm) return
-
-		elm.addEventListener('mouseover', onMouseOver, { passive: false })
-		return () => {
-			elm.removeEventListener('mouseover', onMouseOver)
-		}
-	}, [container, editor, ref])
-}