tldraw 3.16.0-canary.7facbd2d2b7f → 3.16.0-canary.806d674b7d7a

package/src/lib/shapes/arrow/toolStates/Pointing.tsx

@@ -163,7 +163,7 @@ export class Pointing extends StateNode {
 			const endHandle = handles.find((h) => h.id === 'end')!
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },
-				isPrecise: this.isPrecise,
+				isPrecise: false,
 				isCreatingShape: true,
 				initial: initial,
 			})

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -13,6 +13,7 @@ import {
 	debounce,
 	getHashForString,
 	lerp,
+	markEventAsHandled,
 	tlenv,
 	toDomPrecision,
 	useEditor,
@@ -133,7 +134,7 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,4 +1,4 @@
-import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, markEventAsHandled, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
@@ -8,19 +8,12 @@ export const FrameLabelInput = forwardRef<
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
 
-	const handlePointerDown = useCallback(
-		(e: React.PointerEvent) => {
-			if (isEditing) editor.markEventAsHandled(e)
-		},
-		[editor, isEditing]
-	)
-
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLInputElement>) => {
 			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
 				// need to prevent the enter keydown making it's way up to the Idle state
 				// and sending us back into edit mode
-				editor.markEventAsHandled(e)
+				markEventAsHandled(e)
 				e.currentTarget.blur()
 				editor.setEditingShape(null)
 			}
@@ -81,7 +74,7 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
-				onPointerDown={handlePointerDown}
+				onPointerDown={isEditing ? markEventAsHandled : undefined}
 				draggable={false}
 			/>
 			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,4 +1,4 @@
-import { useEditor, useValue } from '@tldraw/editor'
+import { markEventAsHandled, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
 
@@ -10,7 +10,7 @@ export function HyperlinkButton({ url }: { url: string }) {
 	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -3,6 +3,7 @@ import {
 	TLShapeId,
 	TLUnknownShape,
 	getPointerInfo,
+	markEventAsHandled,
 	noop,
 	preventDefault,
 	tlenv,
@@ -128,7 +129,7 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 			// partially if we didn't dispatch/stop below.
 
 			editor.dispatch({
-				...getPointerInfo(editor, e),
+				...getPointerInfo(e),
 				type: 'pointer',
 				name: 'pointer_down',
 				target: 'shape',
@@ -156,11 +157,13 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		[editor, shapeId]
 	)
 
+	const handleDoubleClick: (e: React.MouseEvent) => void = markEventAsHandled
+
 	return {
 		handleFocus: noop,
 		handleBlur: noop,
 		handleInputPointerDown,
-		handleDoubleClick: editor.markEventAsHandled,
+		handleDoubleClick,
 		handlePaste,
 		isEditing,
 		isReadyForEditing,

package/src/lib/shapes/text/PlainTextArea.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, useEditor } from '@tldraw/editor'
+import { markEventAsHandled, preventDefault } from '@tldraw/editor'
 import React from 'react'
 import { TextAreaProps } from './RichTextArea'
 
@@ -21,7 +21,6 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 	},
 	ref
 ) {
-	const editor = useEditor()
 	const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		handleChange({ plaintext: e.target.value })
 	}
@@ -47,7 +46,7 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 			onChange={onChange}
 			onKeyDown={(e) => handleKeyDown(e.nativeEvent)}
 			onBlur={handleBlur}
-			onTouchEnd={editor.markEventAsHandled}
+			onTouchEnd={markEventAsHandled}
 			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			onPointerDown={handleInputPointerDown}
 			onPaste={handlePaste}

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -13,7 +13,6 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
-import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 
@@ -136,13 +135,10 @@ export class DraggingHandle extends StateNode {
 	}
 
 	// Only relevant to arrows
-	private exactTimeout = -1
+	private exactTimeout = -1 as any
 
 	// Only relevant to arrows
 	private resetExactTimeout() {
-		const arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')
-		const timeoutValue = arrowUtil.options.pointingPreciseTimeout
-
 		if (this.exactTimeout !== -1) {
 			this.clearExactTimeout()
 		}
@@ -154,7 +150,7 @@ export class DraggingHandle extends StateNode {
 				this.update()
 			}
 			this.exactTimeout = -1
-		}, timeoutValue)
+		}, 750)
 	}
 
 	// Only relevant to arrows

package/src/lib/ui/components/A11y.tsx

@@ -1,6 +1,7 @@
 import {
 	debugFlags,
 	Editor,
+	markEventAsHandled,
 	TLGeoShape,
 	TLShapeId,
 	unsafe__withoutCapture,
@@ -22,7 +23,7 @@ export function SkipToMainContent() {
 
 	const handleNavigateToFirstShape = useCallback(
 		(e: MouseEvent | KeyboardEvent) => {
-			editor.markEventAsHandled(e)
+			markEventAsHandled(e)
 			button.current?.blur()
 			const shapes = editor.getCurrentPageShapesInReadingOrder()
 			if (!shapes.length) return

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -159,7 +159,7 @@ export function DefaultMinimap() {
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_move',
-				...getPointerInfo(editor, e),
+				...getPointerInfo(e),
 				point: screenPoint,
 				isPen: editor.getInstanceState().isPenMode,
 			}

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -1,6 +1,7 @@
 import {
 	PageRecordType,
 	TLPageId,
+	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
 	tlenv,
@@ -450,7 +451,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													editor.markEventAsHandled(e)
+													markEventAsHandled(e)
 												}
 											}
 										}}

package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx

@@ -3,6 +3,7 @@ import {
 	Box,
 	clamp,
 	Editor,
+	markEventAsHandled,
 	react,
 	useAtom,
 	useEditor,
@@ -169,7 +170,7 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={editor.markEventAsHandled}
+			onPointerDown={markEventAsHandled}
 		>
 			<TldrawUiToolbar
 				orientation="horizontal"

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -333,7 +333,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_down',
-							...getPointerInfo(editor, e),
+							...getPointerInfo(e),
 							point: screenSpaceStart,
 						})
 
@@ -345,7 +345,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_move',
-							...getPointerInfo(editor, e),
+							...getPointerInfo(e),
 							point: screenSpaceStart,
 						})
 
@@ -365,7 +365,7 @@ function useDraggableEvents(
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
-				...getPointerInfo(editor, e),
+				...getPointerInfo(e),
 			})
 		}
 

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -7,6 +7,7 @@ import {
 	assert,
 	compact,
 	isDefined,
+	markEventAsHandled,
 	preventDefault,
 	uniq,
 	useEditor,
@@ -762,7 +763,7 @@ export function useNativeClipboardEvents() {
 
 		const paste = (e: ClipboardEvent) => {
 			if (disablingMiddleClickPaste) {
-				editor.markEventAsHandled(e)
+				markEventAsHandled(e)
 				return
 			}
 

package/src/lib/ui/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.7facbd2d2b7f'
+export const version = '3.16.0-canary.806d674b7d7a'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-18T12:50:07.641Z',
-	patch: '2025-09-18T12:50:07.641Z',
+	minor: '2025-09-17T14:09:40.471Z',
+	patch: '2025-09-17T14:09:40.471Z',
 }

package/src/lib/ui.css

@@ -168,7 +168,7 @@
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin-top: -4px;
+	margin: -4px 0px;
 }
 
 .tlui-button__menu::after {
@@ -1039,19 +1039,6 @@ tldraw? probably.
 	display: none;
 }
 
-/*
- * This is used in a couple places, like Align and Vertical Align.
- * It's because we have a toolbar with a Toggle Group but then an adjacent button
- * next to it that opens a popup.
- */
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
-	flex-wrap: wrap;
-}
-
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
-	margin-left: -2px;
-}
-
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);

package/src/test/TestEditor.ts

@@ -86,14 +86,8 @@ export class TestEditor extends Editor {
 		elm.tabIndex = 0
 		elm.getBoundingClientRect = () => bounds as DOMRect
 
-		const shapeUtilsWithDefaults = [
-			...defaultShapeUtils.filter((s) => !options.shapeUtils?.some((su) => su.type === s.type)),
-			...(options.shapeUtils ?? []),
-		]
-		const bindingUtilsWithDefaults = [
-			...defaultBindingUtils.filter((b) => !options.bindingUtils?.some((bu) => bu.type === b.type)),
-			...(options.bindingUtils ?? []),
-		]
+		const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
+		const bindingUtilsWithDefaults = [...defaultBindingUtils, ...(options.bindingUtils ?? [])]
 
 		super({
 			...options,

package/tldraw.css

@@ -1964,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin-top: -4px;
+	margin: -4px 0px;
 }
 
 .tlui-button__menu::after {
@@ -2835,19 +2835,6 @@ tldraw? probably.
 	display: none;
 }
 
-/*
- * This is used in a couple places, like Align and Vertical Align.
- * It's because we have a toolbar with a Toggle Group but then an adjacent button
- * next to it that opens a popup.
- */
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
-	flex-wrap: wrap;
-}
-
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
-	margin-left: -2px;
-}
-
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);