@tldraw/editor 3.16.0-canary.cc5427cdff41 → 3.16.0-canary.cd822ae4ebee

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

@@ -0,0 +1,103 @@
+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(editor.wasEventAlreadyHandled(mockEvent)).toBe(false)
+
+			// Mark the event as handled
+			editor.markEventAsHandled(mockEvent)
+
+			// Now it should be marked as handled
+			expect(editor.wasEventAlreadyHandled(mockEvent)).toBe(true)
+		})
+
+		it('should work with React synthetic events', () => {
+			const nativeEvent = new PointerEvent('pointerdown', { pointerId: 1 })
+			const syntheticEvent = { nativeEvent }
+
+			// Initially not handled
+			expect(editor.wasEventAlreadyHandled(syntheticEvent)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(nativeEvent)).toBe(false)
+
+			// Mark synthetic event as handled
+			editor.markEventAsHandled(syntheticEvent)
+
+			// Both synthetic and native should be marked as handled
+			expect(editor.wasEventAlreadyHandled(syntheticEvent)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(nativeEvent)).toBe(true)
+		})
+
+		it('should handle multiple different events independently', () => {
+			const event1 = new PointerEvent('pointerdown', { pointerId: 1 })
+			const event2 = new PointerEvent('pointerup', { pointerId: 2 })
+			const event3 = new MouseEvent('click')
+
+			// Mark only event1 as handled
+			editor.markEventAsHandled(event1)
+
+			expect(editor.wasEventAlreadyHandled(event1)).toBe(true)
+			expect(editor.wasEventAlreadyHandled(event2)).toBe(false)
+			expect(editor.wasEventAlreadyHandled(event3)).toBe(false)
+
+			// Mark event2 as handled
+			editor.markEventAsHandled(event2)
+
+			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', () => {
+			const event = new PointerEvent('pointerdown', {
+				pointerId: 1,
+				clientX: 100,
+				clientY: 200,
+			})
+
+			// Mark as handled
+			editor.markEventAsHandled(event)
+
+			// Event properties should remain unchanged
+			expect(event.pointerId).toBe(1)
+			expect(event.clientX).toBe(100)
+			expect(event.clientY).toBe(200)
+			expect(event.type).toBe('pointerdown')
+		})
+
+		it('should work with touch events', () => {
+			const touchEvent = new TouchEvent('touchstart', {
+				touches: [
+					{
+						clientX: 50,
+						clientY: 60,
+					} as Touch,
+				],
+			})
+
+			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(editor.wasEventAlreadyHandled(keyEvent)).toBe(false)
+			editor.markEventAsHandled(keyEvent)
+			expect(editor.wasEventAlreadyHandled(keyEvent)).toBe(true)
+		})
+	})
+})

package/src/lib/utils/dom.ts

@@ -78,7 +78,14 @@ export function releasePointerCapture(
 	}
 }
 
-/** @public */
+/**
+ * Calls `event.stopPropagation()`.
+ *
+ * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if
+ * that's what you really want.
+ *
+ * @public
+ */
 export const stopEventPropagation = (e: any) => e.stopPropagation()
 
 /** @internal */

package/src/lib/utils/getPointerInfo.ts

@@ -1,8 +1,9 @@
+import { Editor } from '../editor/Editor'
 import { isAccelKey } from './keyboard'
 
 /** @public */
-export function getPointerInfo(e: React.PointerEvent | PointerEvent) {
-	;(e as any).isKilled = true
+export function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {
+	editor.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.cc5427cdff41'
+export const version = '3.16.0-canary.cd822ae4ebee'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-08T21:56:42.443Z',
-	patch: '2025-09-08T21:56:42.443Z',
+	minor: '2025-09-18T10:46:54.006Z',
+	patch: '2025-09-18T10:46:54.006Z',
 }