@tldraw/editor 3.16.0-canary.c349490eaef0 → 3.16.0-canary.c360426d8b7a

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

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

package/src/lib/utils/dom.ts

@@ -81,13 +81,43 @@ export function releasePointerCapture(
 /**
  * Calls `event.stopPropagation()`.
  *
- * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if
+ * @deprecated Use {@link markEventAsHandled} instead, or manually call `event.stopPropagation()` if
  * that's what you really want.
  *
  * @public
  */
 export const stopEventPropagation = (e: any) => e.stopPropagation()
 
+const handledEvents = new WeakSet<Event>()
+
+/**
+ * In tldraw, events are sometimes handled by multiple components. For example, the shapes might
+ * have events, but the canvas handles events too. The way that the canvas handles events can
+ * interfere with the with the shapes event handlers - for example, it calls `.preventDefault()` on
+ * `pointerDown`, which also prevents `click` events from firing on the shapes.
+ *
+ * You can use `.stopPropagation()` to prevent the event from propagating to the rest of the DOM,
+ * but that can impact non-tldraw event handlers set up elsewhere. By using `markEventAsHandled`,
+ * you'll stop other parts of tldraw from handling the event without impacting other, non-tldraw
+ * event handlers. See also {@link wasEventAlreadyHandled}.
+ *
+ * @public
+ */
+export function markEventAsHandled(e: Event | { nativeEvent: Event }) {
+	const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e
+	handledEvents.add(nativeEvent)
+}
+
+/**
+ * Checks if an event has already been handled. See {@link markEventAsHandled}.
+ *
+ * @public
+ */
+export function wasEventAlreadyHandled(e: Event | { nativeEvent: Event }) {
+	const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e
+	return handledEvents.has(nativeEvent)
+}
+
 /** @internal */
 export const setStyleProperty = (
 	elm: HTMLElement | null,

package/src/lib/utils/getPointerInfo.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../editor/Editor'
+import { markEventAsHandled } from './dom'
 import { isAccelKey } from './keyboard'
 
 /** @public */
-export function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {
-	editor.markEventAsHandled(e)
+export function getPointerInfo(e: React.PointerEvent | PointerEvent) {
+	markEventAsHandled(e)
 
 	return {
 		point: {

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 = '3.16.0-canary.c349490eaef0'
+export const version = '3.16.0-canary.c360426d8b7a'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-17T16:01:20.675Z',
-	patch: '2025-09-17T16:01:20.675Z',
+	minor: '2025-09-17T15:16:03.696Z',
+	patch: '2025-09-17T15:16:03.696Z',
 }