@tldraw/editor 3.16.0-canary.322bcb9a6f7c → 3.16.0-canary.376ee1848cc0

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.16.0-canary.322bcb9a6f7c";
+const version = "3.16.0-canary.376ee1848cc0";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-09-05T08:45:56.996Z",
-  patch: "2025-09-05T08:45:56.996Z"
+  minor: "2025-09-16T11:52:54.438Z",
+  patch: "2025-09-16T11:52:54.438Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.16.0-canary.322bcb9a6f7c'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-09-05T08:45:56.996Z',\n\tpatch: '2025-09-05T08:45:56.996Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.16.0-canary.376ee1848cc0'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-09-16T11:52:54.438Z',\n\tpatch: '2025-09-16T11:52:54.438Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -689,11 +689,17 @@ input,
 }
 
 .tl-text-measure {
-	position: absolute;
 	z-index: var(--tl-layer-canvas-hidden);
+	opacity: 0;
+	visibility: hidden;
+
+	/* pointer-events: all; */
+	/* opacity: 1; */
+	/* z-index: 99999;  */
+
+	position: absolute;
 	top: 0px;
 	left: 0px;
-	opacity: 0;
 	width: max-content;
 	box-sizing: border-box;
 	pointer-events: none;
@@ -704,7 +710,6 @@ input,
 	border: none;
 	user-select: none;
 	contain: style paint;
-	visibility: hidden;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "3.16.0-canary.322bcb9a6f7c",
+  "version": "3.16.0-canary.376ee1848cc0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.16.0-canary.322bcb9a6f7c",
-    "@tldraw/state-react": "3.16.0-canary.322bcb9a6f7c",
-    "@tldraw/store": "3.16.0-canary.322bcb9a6f7c",
-    "@tldraw/tlschema": "3.16.0-canary.322bcb9a6f7c",
-    "@tldraw/utils": "3.16.0-canary.322bcb9a6f7c",
-    "@tldraw/validate": "3.16.0-canary.322bcb9a6f7c",
+    "@tldraw/state": "3.16.0-canary.376ee1848cc0",
+    "@tldraw/state-react": "3.16.0-canary.376ee1848cc0",
+    "@tldraw/store": "3.16.0-canary.376ee1848cc0",
+    "@tldraw/tlschema": "3.16.0-canary.376ee1848cc0",
+    "@tldraw/utils": "3.16.0-canary.376ee1848cc0",
+    "@tldraw/validate": "3.16.0-canary.376ee1848cc0",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -334,6 +334,7 @@ export {
 	type TestEnvironment,
 	type ValidLicenseKeyResult,
 } from './lib/license/LicenseManager'
+export { LICENSE_TIMEOUT } from './lib/license/LicenseProvider'
 export { defaultTldrawOptions, type TldrawOptions } from './lib/options'
 export {
 	Box,
@@ -446,10 +447,12 @@ export {
 export {
 	activeElementShouldCaptureKeys,
 	loopToHtmlElement,
+	markEventAsHandled,
 	preventDefault,
 	releasePointerCapture,
 	setPointerCapture,
 	stopEventPropagation,
+	wasEventAlreadyHandled,
 } from './lib/utils/dom'
 export { EditorAtom } from './lib/utils/EditorAtom'
 export { getIncrementedName } from './lib/utils/getIncrementedName'

package/src/lib/TldrawEditor.tsx

@@ -1,6 +1,7 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
 import { annotateError, Required } from '@tldraw/utils'
+import classNames from 'classnames'
 import React, {
 	memo,
 	ReactNode,
@@ -12,8 +13,6 @@ import React, {
 	useState,
 	useSyncExternalStore,
 } from 'react'
-
-import classNames from 'classnames'
 import { version } from '../version'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
@@ -45,7 +44,7 @@ import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
 import { TLDeepLinkOptions } from './utils/deepLinks'
-import { stopEventPropagation } from './utils/dom'
+import { markEventAsHandled } from './utils/dom'
 import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
@@ -276,7 +275,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 			data-tldraw={version}
 			draggable={false}
 			className={classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={markEventAsHandled}
 			tabIndex={-1}
 			role="application"
 			aria-label={_options?.branding ?? 'tldraw'}

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -21,7 +21,7 @@ import { Mat } from '../../primitives/Mat'
 import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
-import { setStyleProperty } from '../../utils/dom'
+import { markEventAsHandled, setStyleProperty } from '../../utils/dom'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -172,7 +172,13 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<LiveCollaborators />
 					</div>
 				</div>
-				<div className="tl-canvas__in-front">
+				<div
+					className="tl-canvas__in-front"
+					onPointerDown={markEventAsHandled}
+					onPointerUp={markEventAsHandled}
+					onTouchStart={markEventAsHandled}
+					onTouchEnd={markEventAsHandled}
+				>
 					<InFrontOfTheCanvasWrapper />
 				</div>
 				<MovingCameraHitTestBlocker />

package/src/lib/editor/Editor.test.ts

@@ -833,3 +833,93 @@ describe('selectAll', () => {
 		setSelectedShapesSpy.mockRestore()
 	})
 })
+
+describe('putExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})
+
+describe('replaceExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})

package/src/lib/editor/Editor.ts

@@ -4680,8 +4680,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
 			const pageTransform = this.getShapePageTransform(shape)
 			if (!pageTransform) return undefined
-			const geometry = this.getShapeGeometry(shape)
-			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
+
+			return Box.FromPoints(
+				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+			)
 		})
 	}
 
@@ -8831,8 +8833,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async putExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async putExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
@@ -8840,8 +8847,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle replacing external content.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async replaceExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async replaceExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -7,6 +7,12 @@ function fromScratch(editor: Editor): Set<TLShapeId> {
 	const viewportPageBounds = editor.getViewportPageBounds()
 	const notVisibleShapes = new Set<TLShapeId>()
 	shapesIds.forEach((id) => {
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+		if (!canCull) return
+
 		// If the shape is fully outside of the viewport page bounds, add it to the set.
 		// We'll ignore masks here, since they're more expensive to compute and the overhead is not worth it.
 		const pageBounds = editor.getShapePageBounds(id)

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -283,6 +283,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return true
 	}
 
+	/**
+	 * Whether this shape can be culled. By default, shapes are culled for
+	 * performance reasons when they are outside of the viewport. Culled shapes are still rendered
+	 * to the DOM, but have their `display` property set to `none`.
+	 *
+	 * @param shape - The shape.
+	 */
+	canCull(_shape: Shape): boolean {
+		return true
+	}
+
 	/**
 	 * Does this shape provide a background for its children? If this is true,
 	 * then any children with a `renderBackground` method will have their

package/src/lib/hooks/useCanvasEvents.ts

@@ -2,10 +2,11 @@ import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
+	markEventAsHandled,
 	preventDefault,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
+	wasEventAlreadyHandled,
 } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
@@ -17,7 +18,7 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -42,7 +43,7 @@ export function useCanvasEvents() {
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				releasePointerCapture(e.currentTarget, e)
@@ -56,26 +57,28 @@ export function useCanvasEvents() {
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (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 ((e as any).isKilled) return
+				if (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) {
-				;(e as any).isKilled = true
+				if (wasEventAlreadyHandled(e)) return
+				markEventAsHandled(e)
 				preventDefault(e)
 			}
 
 			function onTouchEnd(e: React.TouchEvent) {
-				;(e as any).isKilled = true
+				if (wasEventAlreadyHandled(e)) return
+				markEventAsHandled(e)
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
@@ -94,12 +97,14 @@ export function useCanvasEvents() {
 			}
 
 			function onDragOver(e: React.DragEvent<Element>) {
+				if (wasEventAlreadyHandled(e)) return
 				preventDefault(e)
 			}
 
 			async function onDrop(e: React.DragEvent<Element>) {
+				if (wasEventAlreadyHandled(e)) return
 				preventDefault(e)
-				stopEventPropagation(e)
+				e.stopPropagation()
 
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
@@ -124,7 +129,8 @@ export function useCanvasEvents() {
 			}
 
 			function onClick(e: React.MouseEvent) {
-				stopEventPropagation(e)
+				if (wasEventAlreadyHandled(e)) return
+				e.stopPropagation()
 			}
 
 			return {
@@ -151,8 +157,8 @@ export function useCanvasEvents() {
 		let lastX: number, lastY: number
 
 		function onPointerMove(e: PointerEvent) {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (wasEventAlreadyHandled(e)) return
+			markEventAsHandled(e)
 
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,12 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
+import {
+	activeElementShouldCaptureKeys,
+	markEventAsHandled,
+	preventDefault,
+	wasEventAlreadyHandled,
+} from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -29,7 +34,7 @@ export function useDocumentEvents() {
 			// re-dispatched, which would lead to an infinite loop.
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
-			stopEventPropagation(e)
+			e.stopPropagation()
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return
 			const newEvent = new DragEvent(e.type, e)
@@ -103,8 +108,8 @@ export function useDocumentEvents() {
 				preventDefault(e)
 			}
 
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (wasEventAlreadyHandled(e)) return
+			markEventAsHandled(e)
 			const hasSelectedShapes = !!editor.getSelectedShapeIds().length
 
 			switch (e.key) {
@@ -211,8 +216,8 @@ export function useDocumentEvents() {
 		}
 
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (wasEventAlreadyHandled(e)) return
+			markEventAsHandled(e)
 
 			if (areShortcutsDisabled(editor)) {
 				return

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { preventDefault } from '../utils/dom'
+import { markEventAsHandled, 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') {
-				;(e as any).isKilled = true
+				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/useGestureEvents.ts

@@ -3,7 +3,7 @@ import { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'
 import * as React from 'react'
 import { TLWheelEventInfo } from '../editor/types/event-types'
 import { Vec } from '../primitives/Vec'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { normalizeWheel } from '../utils/normalizeWheel'
 import { useEditor } from './useEditor'
@@ -113,7 +113,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			}
 
 			preventDefault(event)
-			stopEventPropagation(event)
+			event.stopPropagation()
 			const delta = normalizeWheel(event)
 
 			if (delta.x === 0 && delta.y === 0) return

package/src/lib/hooks/useHandleEvents.ts

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

package/src/lib/hooks/useSelectionEvents.ts

@@ -3,9 +3,10 @@ import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { TLSelectionHandle } from '../editor/types/selection-types'
 import {
 	loopToHtmlElement,
+	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
+	wasEventAlreadyHandled,
 } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
@@ -17,7 +18,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 	const events = useMemo(
 		function selectionEvents() {
 			const onPointerDown: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -54,14 +55,14 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					handle,
 					...getPointerInfo(e),
 				})
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 			}
 
 			// Track the last screen point
 			let lastX: number, lastY: number
 
 			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 				if (e.clientX === lastX && e.clientY === lastY) return
 				lastX = e.clientX
@@ -77,7 +78,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 			}
 
 			const onPointerUp: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 
 				editor.dispatch({