@tldraw/editor 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

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

@@ -26,10 +26,7 @@ import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
 
 /** @public */
-export interface TLShapeUtilConstructor<
-	T extends TLUnknownShape,
-	U extends ShapeUtil<T> = ShapeUtil<T>,
-> {
+export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T> = ShapeUtil<T>> {
 	new (editor: Editor): U
 	type: T['type']
 	props?: RecordProps<T>
@@ -42,11 +39,11 @@ export interface TLShapeUtilConstructor<
  *
  * @public
  */
-export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {
+export interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
 	/** The type of shape referenced by the `fromId` of the binding. */
-	fromShapeType: string
+	fromShapeType: TLShape['type']
 	/** The type of shape referenced by the `toId` of the binding. */
-	toShapeType: string
+	toShapeType: TLShape['type']
 	/** The type of binding. */
 	bindingType: string
 }
@@ -79,7 +76,7 @@ export interface TLShapeUtilCanvasSvgDef {
 }
 
 /** @public */
-export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
+export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	/** Configure this shape utils {@link ShapeUtil.options | `options`}. */
 	static configure<T extends TLShapeUtilConstructor<any, any>>(
 		this: T,
@@ -193,7 +190,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shape - The shape.
 	 * @public
 	 */
-	canSnap(_shape: Shape): boolean {
+	canSnap(shape: Shape): boolean {
 		return true
 	}
 
@@ -203,7 +200,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shape - The shape.
 	 * @public
 	 */
-	canTabTo(_shape: Shape): boolean {
+	canTabTo(shape: Shape): boolean {
 		return true
 	}
 
@@ -212,7 +209,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canScroll(_shape: Shape): boolean {
+	canScroll(shape: Shape): boolean {
 		return false
 	}
 
@@ -230,7 +227,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canEdit(_shape: Shape): boolean {
+	canEdit(shape: Shape, info: TLEditStartInfo): boolean {
 		return false
 	}
 
@@ -239,7 +236,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canResize(_shape: Shape): boolean {
+	canResize(shape: Shape): boolean {
 		return true
 	}
 
@@ -248,7 +245,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canResizeChildren(_shape: Shape): boolean {
+	canResizeChildren(shape: Shape): boolean {
 		return true
 	}
 
@@ -257,7 +254,16 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canEditInReadonly(_shape: Shape): boolean {
+	canEditInReadonly(shape: Shape): boolean {
+		return false
+	}
+
+	/**
+	 * Whether the shape can be edited while locked or while an ancestor is locked.
+	 *
+	 * @public
+	 */
+	canEditWhileLocked(shape: Shape): boolean {
 		return false
 	}
 
@@ -266,7 +272,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canCrop(_shape: Shape): boolean {
+	canCrop(shape: Shape): boolean {
 		return false
 	}
 
@@ -279,7 +285,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {
+	canBeLaidOut(shape: Shape, info: TLShapeUtilCanBeLaidOutOpts): boolean {
 		return true
 	}
 
@@ -290,7 +296,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @param shape - The shape.
 	 */
-	canCull(_shape: Shape): boolean {
+	canCull(shape: Shape): boolean {
 		return true
 	}
 
@@ -303,13 +309,33 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @internal
 	 */
-	providesBackgroundForChildren(_shape: Shape): boolean {
+	providesBackgroundForChildren(shape: Shape): boolean {
 		return false
 	}
 
 	/**
 	 * Get the clip path to apply to this shape's children.
 	 *
+	 * The returned points should define the **inner** clip boundary - the area where
+	 * children will be visible. If your shape has a stroke, you should inset the clip
+	 * path by half the stroke width so children are clipped to the inner edge of the
+	 * stroke rather than its center line.
+	 *
+	 * @example
+	 * ```ts
+	 * override getClipPath(shape: MyShape): Vec[] | undefined {
+	 *   const strokeWidth = 2
+	 *   const inset = strokeWidth / 2
+	 *   // Return points inset by half the stroke width
+	 *   return [
+	 *     new Vec(inset, inset),
+	 *     new Vec(shape.props.w - inset, inset),
+	 *     new Vec(shape.props.w - inset, shape.props.h - inset),
+	 *     new Vec(inset, shape.props.h - inset),
+	 *   ]
+	 * }
+	 * ```
+	 *
 	 * @param shape - The shape to get the clip path for
 	 * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping
 	 * @public
@@ -336,14 +362,14 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @returns boolean indicating if this shape should hide in the minimap
 	 * @public
 	 */
-	hideInMinimap?(_shape: Shape): boolean
+	hideInMinimap?(shape: Shape): boolean
 
 	/**
 	 * Whether the shape should hide its resize handles when selected.
 	 *
 	 * @public
 	 */
-	hideResizeHandles(_shape: Shape): boolean {
+	hideResizeHandles(shape: Shape): boolean {
 		return false
 	}
 
@@ -352,7 +378,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	hideRotateHandle(_shape: Shape): boolean {
+	hideRotateHandle(shape: Shape): boolean {
 		return false
 	}
 
@@ -361,7 +387,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	hideSelectionBoundsBg(_shape: Shape): boolean {
+	hideSelectionBoundsBg(shape: Shape): boolean {
 		return false
 	}
 
@@ -370,7 +396,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	hideSelectionBoundsFg(_shape: Shape): boolean {
+	hideSelectionBoundsFg(shape: Shape): boolean {
 		return false
 	}
 
@@ -379,7 +405,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	isAspectRatioLocked(_shape: Shape): boolean {
+	isAspectRatioLocked(shape: Shape): boolean {
 		return false
 	}
 
@@ -390,10 +416,10 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * useful in cases like annotating on top of an image, where you usually want to avoid extra
 	 * padding around the image if you don't need it.
 	 *
-	 * @param _shape - The shape to check
+	 * @param shape - The shape to check
 	 * @returns True if this shape should be treated as an export bounds container
 	 */
-	isExportBoundsContainer(_shape: Shape): boolean {
+	isExportBoundsContainer(shape: Shape): boolean {
 		return false
 	}
 
@@ -442,7 +468,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param type - The shape type.
 	 * @public
 	 */
-	canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']) {
+	canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']) {
 		return false
 	}
 
@@ -490,7 +516,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * Get the geometry to use when snapping to this this shape in translate/resize operations. See
 	 * {@link BoundsSnapGeometry} for details.
 	 */
-	getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry {
+	getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry {
 		return {}
 	}
 
@@ -498,15 +524,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry}
 	 * for details.
 	 */
-	getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry {
+	getHandleSnapGeometry(shape: Shape): HandleSnapGeometry {
 		return {}
 	}
 
-	getText(_shape: Shape): string | undefined {
+	getText(shape: Shape): string | undefined {
 		return undefined
 	}
 
-	getAriaDescriptor(_shape: Shape): string | undefined {
+	getAriaDescriptor(shape: Shape): string | undefined {
 		return undefined
 	}
 
@@ -934,3 +960,17 @@ export interface TLHandleDragInfo<T extends TLShape> {
 	isCreatingShape: boolean
 	initial?: T | undefined
 }
+
+/* --------------------------------- Editing -------------------------------- */
+
+/** @public */
+export interface TLEditStartInfo {
+	type:
+		| 'press_enter'
+		| 'click'
+		| 'double-click'
+		| 'double-click-edge'
+		| 'double-click-corner'
+		| 'click-header'
+		| 'unknown'
+}

package/src/lib/editor/shapes/group/DashedOutlineBox.tsx

@@ -6,7 +6,7 @@ import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 export function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {
 	const editor = useEditor()
 
-	const zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])
 
 	return (
 		<g className={className} pointerEvents="none" strokeLinecap="round" strokeLinejoin="round">

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -55,9 +55,7 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		const isHintingOtherGroup =
 			hintingShapeIds.length > 0 &&
 			hintingShapeIds.some(
-				(id) =>
-					id !== shape.id &&
-					this.editor.isShapeOfType<TLGroupShape>(this.editor.getShape(id)!, 'group')
+				(id) => id !== shape.id && this.editor.isShapeOfType(this.editor.getShape(id)!, 'group')
 			)
 
 		const isFocused = this.editor.getCurrentPageState().focusedGroupId !== shape.id

package/src/lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool.ts

@@ -1,4 +1,5 @@
 import { TLShape } from '@tldraw/tlschema'
+import { TLBaseBoxShape } from '../../shapes/BaseBoxShapeUtil'
 import { StateNode, TLStateNodeConstructor } from '../StateNode'
 import { Idle } from './children/Idle'
 import { Pointing } from './children/Pointing'
@@ -11,7 +12,7 @@ export abstract class BaseBoxShapeTool extends StateNode {
 		return [Idle, Pointing]
 	}
 
-	abstract override shapeType: string
+	abstract override shapeType: TLBaseBoxShape['type']
 
 	onCreate?(_shape: TLShape | null): void | null
 }

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -12,8 +12,8 @@ export class Pointing extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		const { editor } = this
-		if (editor.inputs.isDragging) {
-			const { originPagePoint } = editor.inputs
+		if (editor.inputs.getIsDragging()) {
+			const originPagePoint = editor.inputs.getOriginPagePoint()
 
 			const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType
 
@@ -23,7 +23,7 @@ export class Pointing extends StateNode {
 			const newPoint = maybeSnapToGrid(originPagePoint, editor)
 
 			// Allow this to trigger the max shapes reached alert
-			this.editor.createShapes<TLBaseBoxShape>([
+			this.editor.createShapes([
 				{
 					id,
 					type: shapeType,
@@ -78,7 +78,7 @@ export class Pointing extends StateNode {
 	}
 
 	complete() {
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']
 
@@ -88,7 +88,7 @@ export class Pointing extends StateNode {
 
 		// Allow this to trigger the max shapes reached alert
 		// todo: add scale here when dynamic size is enabled (is this still needed?)
-		this.editor.createShapes<TLBaseBoxShape>([
+		this.editor.createShapes([
 			{
 				id,
 				type: shapeType,
@@ -127,7 +127,7 @@ export class Pointing extends StateNode {
 			;(next as TLBaseBoxShape & { props: { scale: number } }).props.scale = scale
 		}
 
-		this.editor.updateShape<TLBaseBoxShape>(next)
+		this.editor.updateShape(next)
 
 		this.editor.setSelectedShapes([id])
 

package/src/lib/editor/types/emit-types.ts

@@ -1,5 +1,5 @@
 import { HistoryEntry } from '@tldraw/store'
-import { TLPageId, TLRecord, TLShapeId } from '@tldraw/tlschema'
+import { BoxModel, TLPageId, TLRecord, TLShapeId } from '@tldraw/tlschema'
 import { TLEventInfo } from './event-types'
 
 /** @public */
@@ -16,12 +16,14 @@ export interface TLEventMap {
 	event: [TLEventInfo]
 	tick: [number]
 	frame: [number]
+	resize: [BoxModel]
 	'select-all-text': [{ shapeId: TLShapeId }]
 	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
 	'created-shapes': [TLRecord[]]
 	'edited-shapes': [TLRecord[]]
 	'deleted-shapes': [TLShapeId[]]
 	edit: []
+	dispose: []
 }
 
 /** @public */

package/src/lib/exports/getSvgJsx.test.ts

@@ -1,30 +1,21 @@
-import {
-	Geometry2d,
-	RecordProps,
-	Rectangle2d,
-	ShapeUtil,
-	T,
-	TLBaseShape,
-	createShapeId,
-} from '../..'
+import { Geometry2d, RecordProps, Rectangle2d, ShapeUtil, T, TLShape, createShapeId } from '../..'
 import { createTLStore } from '../config/createTLStore'
 import { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
 import { getExportDefaultBounds } from './getSvgJsx'
 
-type ITestShape = TLBaseShape<
-	'test-shape',
-	{
-		w: number
-		h: number
-		x: number
-		y: number
-		isContainer?: boolean
+const TEST_SHAPE_TYPE = 'test-shape'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[TEST_SHAPE_TYPE]: { w: number; h: number; x: number; y: number; isContainer?: boolean }
 	}
->
+}
+
+type ITestShape = TLShape<typeof TEST_SHAPE_TYPE>
 
 class TestShape extends ShapeUtil<ITestShape> {
-	static override type = 'test-shape' as const
+	static override type = TEST_SHAPE_TYPE
 	static override props: RecordProps<ITestShape> = {
 		w: T.number,
 		h: T.number,

package/src/lib/exports/getSvgJsx.tsx

@@ -1,7 +1,6 @@
 import { useAtom, useValue } from '@tldraw/state-react'
 import {
 	TLFrameShape,
-	TLGroupShape,
 	TLShape,
 	TLShapeId,
 	getColorValue,
@@ -58,9 +57,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 
 	// --- Common bounding box of all shapes
 	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
-			? ids[0]
-			: null
+		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
 
 	let bbox: null | Box = null
 	if (opts.bounds) {
@@ -272,7 +269,7 @@ function SvgExport({
 
 					const shape = editor.getShape(id)!
 
-					if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) return []
+					if (editor.isShapeOfType(shape, 'group')) return []
 
 					const elements = []
 					const util = editor.getShapeUtil(shape)

package/src/lib/exports/parseCss.test.ts

@@ -364,4 +364,5 @@ test('parseCssValueUrls', () => {
 		  },
 		]
 	`)
+	expect(parseCssValueUrls(`url(#arrowhead)`)).toMatchInlineSnapshot(`[]`)
 })

package/src/lib/exports/parseCss.ts

@@ -108,5 +108,5 @@ export function parseCssValueUrls(value: string) {
 	return Array.from(value.matchAll(urlsRegex), (m) => ({
 		original: m[0],
 		url: m[1] || m[2] || m[3],
-	}))
+	})).filter((m) => !m.url.startsWith('#'))
 }

package/src/lib/globals/environment.ts

@@ -1,5 +1,9 @@
+import { atom } from '@tldraw/state'
+
 /**
  * An object that contains information about the current device and environment.
+ * This object is not reactive and will not update automatically when the environment changes,
+ * so only include values that are fixed, such as the user's browser and operating system.
  *
  * @public
  */
@@ -14,15 +18,66 @@ const tlenv = {
 	hasCanvasSupport: false,
 }
 
-if (typeof window !== 'undefined' && 'navigator' in window) {
-	tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-	tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
-	tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
-	tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
-	tlenv.isAndroid = /android/i.test(navigator.userAgent)
-	tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
-	tlenv.hasCanvasSupport =
-		typeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window
+let isForcedFinePointer = false
+
+if (typeof window !== 'undefined') {
+	if ('navigator' in window) {
+		tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+		tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
+		tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
+		tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
+		tlenv.isAndroid = /android/i.test(navigator.userAgent)
+		tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+	}
+	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
+	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
+}
+
+/**
+ * An atom that contains information about the current device and environment.
+ * This object is reactive and will update automatically when the environment changes.
+ * Use it for values that may change over time, such as the pointer type.
+ *
+ * @public
+ */
+const tlenvReactive = atom('tlenvReactive', {
+	// Whether the user's device has a coarse pointer. This is dynamic on many systems, especially
+	// on touch-screen laptops, which will become "coarse" if the user touches the screen.
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
+	isCoarsePointer: false,
+})
+
+if (typeof window !== 'undefined' && !isForcedFinePointer) {
+	const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
+
+	const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer
+
+	if (mql) {
+		// 1. Update the coarse pointer automatically when the media query changes
+		const updateIsCoarsePointer = () => {
+			const isCoarsePointer = mql.matches
+			if (isCoarsePointer !== isCurrentCoarsePointer()) {
+				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarsePointer }))
+			}
+		}
+		updateIsCoarsePointer()
+		mql.addEventListener('change', updateIsCoarsePointer)
+	}
+
+	// 2. Also update the coarse pointer state when a pointer down event occurs. We need `capture: true`
+	// here because the tldraw component itself stops propagation on pointer events it receives.
+	window.addEventListener(
+		'pointerdown',
+		(e: PointerEvent) => {
+			// when the user interacts with a mouse, we assume they have a fine pointer.
+			// otherwise, we assume they have a coarse pointer.
+			const isCoarseEvent = e.pointerType !== 'mouse'
+			if (isCoarseEvent !== isCurrentCoarsePointer()) {
+				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }))
+			}
+		},
+		{ capture: true }
+	)
 }
 
-export { tlenv }
+export { tlenv, tlenvReactive }

package/src/lib/globals/menus.ts

@@ -148,7 +148,7 @@ export const tlmenus = {
 	 * @public
 	 */
 	isMenuOpen(id: string, contextId?: string): boolean {
-		return this.getOpenMenus(contextId).includes(id)
+		return this.getOpenMenus(contextId).includes(`${id}-${contextId}`)
 	},
 
 	/**

package/src/lib/hooks/useCoarsePointer.ts

@@ -1,66 +1,23 @@
-import { useEffect } from 'react'
-import { tlenv } from '../globals/environment'
+import { unsafe__withoutCapture } from '@tldraw/state'
+import { useReactor } from '@tldraw/state-react'
+import { tlenvReactive } from '../globals/environment'
 import { useEditor } from './useEditor'
 
 /** @internal */
 export function useCoarsePointer() {
 	const editor = useEditor()
 
-	useEffect(() => {
-		// We'll track our own state for the pointer type
-		let isCoarse = editor.getInstanceState().isCoarsePointer
-
-		// 1.
-		// We'll use pointer events to detect coarse pointer.
-
-		const handlePointerDown = (e: PointerEvent) => {
-			// when the user interacts with a mouse, we assume they have a fine pointer.
-			// otherwise, we assume they have a coarse pointer.
-			const isCoarseEvent = e.pointerType !== 'mouse'
-			if (isCoarse === isCoarseEvent) return
-			isCoarse = isCoarseEvent
-			editor.updateInstanceState({ isCoarsePointer: isCoarseEvent })
-		}
-
-		// we need `capture: true` here because the tldraw component itself stops propagation on
-		// pointer events it receives.
-		window.addEventListener('pointerdown', handlePointerDown, { capture: true })
-
-		// 2.
-		// We can also use the media query to detect / set the initial pointer type
-		// and update the state if the pointer type changes.
-
-		// We want the touch / mouse events to run even if the browser does not
-		// support matchMedia. We'll have to handle the media query changes
-		// conditionally in the code below.
-		const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
-
-		// This is a workaround for a Firefox bug where we don't correctly
-		// detect coarse VS fine pointer. For now, let's assume that you have a fine
-		// pointer if you're on Firefox on desktop.
-		const isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
-
-		const handleMediaQueryChange = () => {
-			const next = isForcedFinePointer ? false : mql.matches // get the value from the media query
-			if (isCoarse !== next) return // bail if the value hasn't changed
-			isCoarse = next // update the local value
-			editor.updateInstanceState({ isCoarsePointer: next }) // update the value in state
-		}
-
-		if (mql) {
-			// set up the listener
-			mql.addEventListener('change', handleMediaQueryChange)
-
-			// and run the handler once to set the initial value
-			handleMediaQueryChange()
-		}
-
-		return () => {
-			window.removeEventListener('pointerdown', handlePointerDown, { capture: true })
-
-			if (mql) {
-				mql.removeEventListener('change', handleMediaQueryChange)
-			}
-		}
-	}, [editor])
+	// When the coarse pointer state changes, update the instance state
+	useReactor(
+		'coarse pointer change',
+		() => {
+			const isCoarsePointer = tlenvReactive.get().isCoarsePointer
+			const isInstanceStateCoarsePointer = unsafe__withoutCapture(
+				() => editor.getInstanceState().isCoarsePointer
+			)
+			if (isCoarsePointer === isInstanceStateCoarsePointer) return
+			editor.updateInstanceState({ isCoarsePointer: isCoarsePointer })
+		},
+		[editor]
+	)
 }

package/src/lib/hooks/useEvent.tsx

@@ -27,7 +27,7 @@ import { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'
 export function useEvent<Args extends Array<unknown>, Result>(
 	handler: (...args: Args) => Result
 ): (...args: Args) => Result {
-	const handlerRef = useRef<(...args: Args) => Result>()
+	const handlerRef = useRef<((...args: Args) => Result) | undefined>(undefined)
 
 	// In a real implementation, this would run before layout effects
 	useLayoutEffect(() => {

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -9,7 +9,7 @@ const IGNORED_TAGS = ['textarea', 'input']
  * want this for drawing operations and can disable it by setting 'disableDoubleTapZoom' in the main
  * editor.
  */
-export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement>) {
+export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement | null>) {
 	const editor = useEditor()
 
 	useEffect(() => {