@tldraw/editor 3.16.0-canary.e4220f725a90 → 3.16.0-canary.e455ab838b8f

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,13 +1,7 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
-import {
-	markEventAsHandled,
-	preventDefault,
-	releasePointerCapture,
-	setPointerCapture,
-	wasEventAlreadyHandled,
-} from '../utils/dom'
+import { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -18,14 +12,14 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -38,12 +32,12 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_down',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				releasePointerCapture(e.currentTarget, e)
@@ -52,33 +46,33 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_up',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })
 			}
 
 			function onPointerLeave(e: React.PointerEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })
 			}
 
 			function onTouchStart(e: React.TouchEvent) {
-				if (wasEventAlreadyHandled(e)) return
-				markEventAsHandled(e)
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				preventDefault(e)
 			}
 
 			function onTouchEnd(e: React.TouchEvent) {
-				if (wasEventAlreadyHandled(e)) return
-				markEventAsHandled(e)
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
@@ -97,12 +91,12 @@ export function useCanvasEvents() {
 			}
 
 			function onDragOver(e: React.DragEvent<Element>) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
 			}
 
 			async function onDrop(e: React.DragEvent<Element>) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
 				e.stopPropagation()
 
@@ -129,7 +123,7 @@ export function useCanvasEvents() {
 			}
 
 			function onClick(e: React.MouseEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				e.stopPropagation()
 			}
 
@@ -157,8 +151,8 @@ export function useCanvasEvents() {
 		let lastX: number, lastY: number
 
 		function onPointerMove(e: PointerEvent) {
-			if (wasEventAlreadyHandled(e)) return
-			markEventAsHandled(e)
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
@@ -174,7 +168,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_move',
-					...getPointerInfo(singleEvent),
+					...getPointerInfo(editor, singleEvent),
 				})
 			}
 		}

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,12 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import {
-	activeElementShouldCaptureKeys,
-	markEventAsHandled,
-	preventDefault,
-	wasEventAlreadyHandled,
-} from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -108,8 +103,8 @@ export function useDocumentEvents() {
 				preventDefault(e)
 			}
 
-			if (wasEventAlreadyHandled(e)) return
-			markEventAsHandled(e)
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 			const hasSelectedShapes = !!editor.getSelectedShapeIds().length
 
 			switch (e.key) {
@@ -216,8 +211,8 @@ export function useDocumentEvents() {
 		}
 
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if (wasEventAlreadyHandled(e)) return
-			markEventAsHandled(e)
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (areShortcutsDisabled(editor)) {
 				return

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { markEventAsHandled, preventDefault } from '../utils/dom'
+import { preventDefault } from '../utils/dom'
 import { useEditor } from './useEditor'
 
 const IGNORED_TAGS = ['textarea', 'input']
@@ -19,7 +19,7 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 
 		const handleEvent = (e: PointerEvent | TouchEvent) => {
 			if (e instanceof PointerEvent && e.pointerType === 'pen') {
-				markEventAsHandled(e)
+				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

package/src/lib/hooks/useHandleEvents.ts

@@ -1,12 +1,7 @@
 import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'
 import * as React from 'react'
 import { Editor } from '../editor/Editor'
-import {
-	loopToHtmlElement,
-	releasePointerCapture,
-	setPointerCapture,
-	wasEventAlreadyHandled,
-} from '../utils/dom'
+import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -21,7 +16,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 
 	return React.useMemo(() => {
 		const onPointerDown = (e: React.PointerEvent) => {
-			if (wasEventAlreadyHandled(e)) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			// Must set pointer capture on an HTML element!
 			const target = loopToHtmlElement(e.currentTarget)
@@ -37,7 +32,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_down',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
@@ -45,7 +40,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 		let lastX: number, lastY: number
 
 		const onPointerMove = (e: React.PointerEvent) => {
-			if (wasEventAlreadyHandled(e)) return
+			if (editor.wasEventAlreadyHandled(e)) return
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
 			lastY = e.clientY
@@ -60,12 +55,12 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
 		const onPointerUp = (e: React.PointerEvent) => {
-			if (wasEventAlreadyHandled(e)) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			const target = loopToHtmlElement(e.currentTarget)
 			releasePointerCapture(target, e)
@@ -80,7 +75,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 

package/src/lib/hooks/useSelectionEvents.ts

@@ -1,13 +1,7 @@
 import { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { TLSelectionHandle } from '../editor/types/selection-types'
-import {
-	loopToHtmlElement,
-	markEventAsHandled,
-	releasePointerCapture,
-	setPointerCapture,
-	wasEventAlreadyHandled,
-} from '../utils/dom'
+import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -18,7 +12,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 	const events = useMemo(
 		function selectionEvents() {
 			const onPointerDown: React.PointerEventHandler = (e) => {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -26,7 +20,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 						target: 'selection',
 						handle,
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -53,16 +47,16 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
-				markEventAsHandled(e)
+				editor.markEventAsHandled(e)
 			}
 
 			// Track the last screen point
 			let lastX: number, lastY: number
 
 			function onPointerMove(e: React.PointerEvent) {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 				if (e.clientX === lastX && e.clientY === lastY) return
 				lastX = e.clientX
@@ -73,12 +67,12 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			const onPointerUp: React.PointerEventHandler = (e) => {
-				if (wasEventAlreadyHandled(e)) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 
 				editor.dispatch({
@@ -86,7 +80,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 

package/src/lib/license/Watermark.tsx

@@ -3,7 +3,7 @@ import { memo, useRef } from 'react'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useEditor } from '../hooks/useEditor'
 import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
-import { markEventAsHandled, preventDefault } from '../utils/dom'
+import { preventDefault } from '../utils/dom'
 import { runtime } from '../utils/runtime'
 import { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'
 import { LicenseManager } from './LicenseManager'
@@ -43,11 +43,13 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 	isDebugMode: boolean
 	isMobile: boolean
 }) {
+	const editor = useEditor()
 	const events = useCanvasEvents()
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
 
-	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
+	const url =
+		'https://tldraw.dev/pricing?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
 
 	return (
 		<div
@@ -64,26 +66,13 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 				draggable={false}
 				role="button"
 				onPointerDown={(e) => {
-					markEventAsHandled(e)
+					editor.markEventAsHandled(e)
 					preventDefault(e)
 				}}
-				title="Unlicensed - click to get a license"
+				title="The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing."
 				onClick={() => runtime.openWindow(url, '_blank')}
-				style={{
-					position: 'absolute',
-					pointerEvents: 'all',
-					cursor: 'pointer',
-					color: 'var(--tl-color-text)',
-					opacity: 0.8,
-					border: 0,
-					padding: 0,
-					backgroundColor: 'transparent',
-					fontSize: '11px',
-					fontWeight: '600',
-					textAlign: 'center',
-				}}
 			>
-				Unlicensed
+				Get a license for production
 			</button>
 		</div>
 	)
@@ -127,10 +116,10 @@ const WatermarkInner = memo(function WatermarkInner({
 				draggable={false}
 				role="button"
 				onPointerDown={(e) => {
-					markEventAsHandled(e)
+					editor.markEventAsHandled(e)
 					preventDefault(e)
 				}}
-				title="made with tldraw"
+				title="Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev."
 				onClick={() => runtime.openWindow(url, '_blank')}
 				style={{ mask: maskCss, WebkitMask: maskCss }}
 			/>
@@ -142,7 +131,8 @@ const LicenseStyles = memo(function LicenseStyles() {
 	const editor = useEditor()
 	const className = LicenseManager.className
 
-	const CSS = `/* ------------------- SEE LICENSE -------------------
+	const CSS = `
+/* ------------------- SEE LICENSE -------------------
 The tldraw watermark is part of tldraw's license. It is shown for unlicensed
 or "licensed-with-watermark" users. By using this library, you agree to
 preserve the watermark's behavior, keeping it visible, unobscured, and
@@ -151,87 +141,105 @@ available to user-interaction.
 To remove the watermark, please purchase a license at tldraw.dev.
 */
 
-	.${className} {
-		position: absolute;
-		bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
-		right: max(var(--tl-space-2), env(safe-area-inset-right));
-		width: 96px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: var(--tl-layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
-		opacity: 1;
-		border-radius: 5px;
-		pointer-events: all;
-		padding: 2px;
-		box-sizing: content-box;
+.${className} {
+	position: absolute;
+	bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
+	right: max(var(--tl-space-2), env(safe-area-inset-right));
+	width: 96px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: var(--tl-layer-watermark) !important;
+	background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
+	opacity: 1;
+	border-radius: 5px;
+	pointer-events: all;
+	padding: 2px;
+	box-sizing: content-box;
+}
+
+.${className} > button {
+	position: absolute;
+	width: 96px;
+	height: 32px;
+	pointer-events: all;
+	cursor: inherit;
+	color: var(--tl-color-text);
+	opacity: .38;
+	border: 0;
+	padding: 0;
+	background-color: currentColor;
+}
+
+.${className}[data-debug='true'] {
+	bottom: max(46px, env(safe-area-inset-bottom));
+}
+
+.${className}[data-mobile='true'] {
+	border-radius: 4px 0px 0px 4px;
+	right: max(-2px, calc(env(safe-area-inset-right) - 2px));
+	width: 8px;
+	height: 48px;
+}
+
+.${className}[data-mobile='true'] > button {
+	width: 8px;
+	height: 32px;
+}
+
+.${className}[data-unlicensed='true'] > button {
+	font-size: 100px;
+	position: absolute;
+	pointer-events: all;
+	cursor: pointer;
+	color: var(--tl-color-text);
+	opacity: 0.8;
+	border: 0;
+	padding: 0;
+	background-color: transparent;
+	font-size: 11px;
+	font-weight: 600;
+	text-align: center;
+}
+
+.${className}[data-mobile='true'][data-unlicensed='true'] > button {
+	display: none;
+}
+
+@media (hover: hover) {
+	.${className}[data-licensed='false'] > button {
+		pointer-events: none;
 	}
 
-	.${className} > button {
-		position: absolute;
-		width: 96px;
-		height: 32px;
-		pointer-events: all;
-		cursor: inherit;
-		color: var(--tl-color-text);
-		opacity: .38;
-		border: 0;
-		padding: 0;
-		background-color: currentColor;
+	.${className}[data-licensed='false']:hover {
+		background-color: var(--tl-color-background);
+		transition: background-color 0.2s ease-in-out;
+		transition-delay: 0.32s;
 	}
 
-	.${className}[data-debug='true'] {
-		bottom: max(46px, env(safe-area-inset-bottom));
+	.${className}[data-licensed='false']:hover > button {
+		animation: ${className}_delayed_link 0.2s forwards ease-in-out;
+		animation-delay: 0.32s;
 	}
 
-	.${className}[data-mobile='true'] {
-		border-radius: 4px 0px 0px 4px;
-		right: max(-2px, calc(env(safe-area-inset-right) - 2px));
-		width: 8px;
-		height: 48px;
+	.${className}[data-licensed='false'] > button:focus-visible {
+		opacity: 1;
 	}
+}
 
-	.${className}[data-mobile='true'] > button {
-		width: 8px;
-		height: 32px;
+@keyframes ${className}_delayed_link {
+	0% {
+		cursor: inherit;
+		opacity: .38;
+		pointer-events: none;
 	}
-
-	@media (hover: hover) {
-		.${className} > button {
-			pointer-events: none;
-		}
-
-		.${className}:hover {
-			background-color: var(--tl-color-background);
-			transition: background-color 0.2s ease-in-out;
-			transition-delay: 0.32s;
-		}
-
-		.${className}:hover > button {
-			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
-			animation-delay: 0.32s;
-		}
-
-		.${className} > button:focus-visible {
-			opacity: 1;
-		}
+	100% {
+		cursor: pointer;
+		opacity: 1;
+		pointer-events: all;
 	}
-
-
-	@keyframes ${className}_delayed_link {
-		0% {
-			cursor: inherit;
-			opacity: .38;
-			pointer-events: none;
-		}
-		100% {
-			cursor: pointer;
-			opacity: 1;
-			pointer-events: all;
-		}
-	}`
+}`
 
 	return <style nonce={editor.options.nonce}>{CSS}</style>
 })

package/src/lib/utils/dom.test.ts

@@ -1,18 +1,27 @@
-import { markEventAsHandled, wasEventAlreadyHandled } from './dom'
+import { TestEditor } from '../test/TestEditor'
 
 describe('Event handling utilities', () => {
+	let editor: TestEditor
+
+	beforeEach(() => {
+		editor = new TestEditor()
+	})
+
+	afterEach(() => {
+		editor.dispose()
+	})
 	describe('markEventAsHandled and wasEventAlreadyHandled', () => {
 		it('should track events as handled', () => {
 			const mockEvent = new PointerEvent('pointerdown', { pointerId: 1 })
 
 			// Initially, event should not be marked as handled
-			expect(wasEventAlreadyHandled(mockEvent)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(mockEvent)).toBe(false)
 
 			// Mark the event as handled
-			markEventAsHandled(mockEvent)
+			editor.markEventAsHandled(mockEvent)
 
 			// Now it should be marked as handled
-			expect(wasEventAlreadyHandled(mockEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(mockEvent)).toBe(true)
 		})
 
 		it('should work with React synthetic events', () => {
@@ -20,15 +29,15 @@ describe('Event handling utilities', () => {
 			const syntheticEvent = { nativeEvent }
 
 			// Initially not handled
-			expect(wasEventAlreadyHandled(syntheticEvent)).toBe(false)
-			expect(wasEventAlreadyHandled(nativeEvent)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(syntheticEvent)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(nativeEvent)).toBe(false)
 
 			// Mark synthetic event as handled
-			markEventAsHandled(syntheticEvent)
+			editor.markEventAsHandled(syntheticEvent)
 
 			// Both synthetic and native should be marked as handled
-			expect(wasEventAlreadyHandled(syntheticEvent)).toBe(true)
-			expect(wasEventAlreadyHandled(nativeEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(syntheticEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(nativeEvent)).toBe(true)
 		})
 
 		it('should handle multiple different events independently', () => {
@@ -37,18 +46,18 @@ describe('Event handling utilities', () => {
 			const event3 = new MouseEvent('click')
 
 			// Mark only event1 as handled
-			markEventAsHandled(event1)
+			editor.markEventAsHandled(event1)
 
-			expect(wasEventAlreadyHandled(event1)).toBe(true)
-			expect(wasEventAlreadyHandled(event2)).toBe(false)
-			expect(wasEventAlreadyHandled(event3)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(event1)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(event2)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(event3)).toBe(false)
 
 			// Mark event2 as handled
-			markEventAsHandled(event2)
+			editor.markEventAsHandled(event2)
 
-			expect(wasEventAlreadyHandled(event1)).toBe(true)
-			expect(wasEventAlreadyHandled(event2)).toBe(true)
-			expect(wasEventAlreadyHandled(event3)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(event1)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(event2)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(event3)).toBe(false)
 		})
 
 		it('should not interfere with event properties', () => {
@@ -59,7 +68,7 @@ describe('Event handling utilities', () => {
 			})
 
 			// Mark as handled
-			markEventAsHandled(event)
+			editor.markEventAsHandled(event)
 
 			// Event properties should remain unchanged
 			expect(event.pointerId).toBe(1)
@@ -78,17 +87,17 @@ describe('Event handling utilities', () => {
 				],
 			})
 
-			expect(wasEventAlreadyHandled(touchEvent)).toBe(false)
-			markEventAsHandled(touchEvent)
-			expect(wasEventAlreadyHandled(touchEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(touchEvent)).toBe(false)
+			editor.markEventAsHandled(touchEvent)
+			expect(editor.wasEventAlreadyHandled(touchEvent)).toBe(true)
 		})
 
 		it('should work with keyboard events', () => {
 			const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' })
 
-			expect(wasEventAlreadyHandled(keyEvent)).toBe(false)
-			markEventAsHandled(keyEvent)
-			expect(wasEventAlreadyHandled(keyEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(keyEvent)).toBe(false)
+			editor.markEventAsHandled(keyEvent)
+			expect(editor.wasEventAlreadyHandled(keyEvent)).toBe(true)
 		})
 	})
 })