@tldraw/editor 5.2.0-next.ee0fa4d6244f → 5.2.0

package/dist-esm/lib/utils/pointer.mjs

@@ -0,0 +1,17 @@
+import { tlenv } from "../globals/environment.mjs";
+function isDirectDisplayPen(e) {
+  if (e.pointerType !== "pen") return false;
+  return tlenv.isTouchDevice;
+}
+function isSecondaryClickEvent(e) {
+  return e.button === 2 || tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey;
+}
+function getPointerEventButton(e) {
+  return isSecondaryClickEvent(e) ? 2 : e.button;
+}
+export {
+  getPointerEventButton,
+  isDirectDisplayPen,
+  isSecondaryClickEvent
+};
+//# sourceMappingURL=pointer.mjs.map

package/dist-esm/lib/utils/pointer.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/utils/pointer.ts"],
+  "sourcesContent": ["import type React from 'react'\nimport { tlenv } from '../globals/environment'\n\n/**\n * Decide whether a pen pointer event looks like direct manipulation on the display (e.g. Apple\n * Pencil on an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop\n * graphics tablet (e.g. a Wacom Intuos).\n *\n * We can't tell the two apart from the pointer event itself: both report `pointerType: 'pen'`, and\n * implicit pointer capture \u2014 which in theory distinguishes direct-manipulation pointers \u2014 isn't\n * reliably observable across browsers (notably WebKit/iPad). Instead we key off the device: a\n * direct-display pen draws on a touch-capable screen, while an indirect graphics tablet is used on\n * a non-touch desktop alongside a mouse. A device with no touch input therefore can't host a\n * direct-display pen.\n *\n * Note this uses {@link tlenv.isTouchDevice} \u2014 the device's fixed touch capability \u2014 not the\n * editor's dynamic `isCoarsePointer` state, which a pen `pointerdown` flips to coarse regardless\n * of device.\n *\n * @internal\n */\nexport function isDirectDisplayPen(e: React.PointerEvent | PointerEvent): boolean {\n\tif (e.pointerType !== 'pen') return false\n\treturn tlenv.isTouchDevice\n}\n\n/** @internal */\ninterface PointerLike {\n\tbutton: number\n\tctrlKey: boolean\n\tmetaKey: boolean\n}\n\n/** @internal */\nexport function isSecondaryClickEvent(e: PointerLike) {\n\treturn e.button === 2 || (tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey)\n}\n\n/** @internal */\nexport function getPointerEventButton(e: PointerLike) {\n\treturn isSecondaryClickEvent(e) ? 2 : e.button\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AAoBf,SAAS,mBAAmB,GAA+C;AACjF,MAAI,EAAE,gBAAgB,MAAO,QAAO;AACpC,SAAO,MAAM;AACd;AAUO,SAAS,sBAAsB,GAAgB;AACrD,SAAO,EAAE,WAAW,KAAM,MAAM,YAAY,EAAE,WAAW,KAAK,EAAE,WAAW,CAAC,EAAE;AAC/E;AAGO,SAAS,sBAAsB,GAAgB;AACrD,SAAO,sBAAsB,CAAC,IAAI,IAAI,EAAE;AACzC;",
+  "names": []
+}

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.2.0-next.ee0fa4d6244f";
+const version = "5.2.0";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-06-04T16:42:40.803Z",
-  patch: "2026-06-04T16:42:40.803Z"
+  minor: "2026-07-01T09:20:01.735Z",
+  patch: "2026-07-01T09:20:01.735Z"
 };
 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 = '5.2.0-next.ee0fa4d6244f'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-04T16:42:40.803Z',\n\tpatch: '2026-06-04T16:42:40.803Z',\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 = '5.2.0'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-01T09:20:01.735Z',\n\tpatch: '2026-07-01T09:20:01.735Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -182,6 +182,7 @@
 	--tl-color-text-0: hsl(0, 0%, 11%);
 	--tl-color-text-1: hsl(0, 0%, 18%);
 	--tl-color-text-3: hsl(204, 4%, 45%);
+	--tl-color-text-disabled: hsl(204, 4%, 55%);
 	--tl-color-text-shadow: hsl(0, 0%, 100%);
 	--tl-color-text-highlight: hsl(52, 100%, 50%);
 	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -236,6 +237,7 @@
 	--tl-color-text-0: hsl(0, 9%, 94%);
 	--tl-color-text-1: hsl(0, 0%, 85%);
 	--tl-color-text-3: hsl(204, 4%, 75%);
+	--tl-color-text-disabled: hsl(204, 4%, 50%);
 	--tl-color-text-shadow: hsl(210, 13%, 18%);
 	--tl-color-text-highlight: hsl(52, 100%, 41%);
 	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -762,17 +764,17 @@ input,
 .tl-rich-text ol {
 	text-align: left;
 	margin: 0;
-	padding-left: 3.25ch;
+	padding-left: 1.625ch;
 	/* Some resets, like Tailwind, nix the list styling. */
 	list-style: revert;
 }
 
 .tl-rich-text ol:has(> li:nth-child(10)) {
-	padding-left: 4.25ch;
+	padding-left: 2.625ch;
 }
 
 .tl-rich-text ol:has(> li:nth-child(100)) {
-	padding-left: 5.25ch;
+	padding-left: 3.625ch;
 }
 
 .tl-rich-text h1,
@@ -811,6 +813,7 @@ input,
 .tl-theme__dark .tl-rich-text mark {
 	background-color: var(--tl-color-text-highlight);
 	color: currentColor;
+	text-shadow: none;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
@@ -983,6 +986,15 @@ input,
 	color: var(--tl-color-text-1);
 }
 
+.tl-content-slot {
+	position: absolute;
+	inset: 0px;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+	transform-origin: top left;
+}
+
 /* -------------------- Group shape ------------------ */
 
 .tl-group {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.2.0-next.ee0fa4d6244f",
+  "version": "5.2.0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.2.0-next.ee0fa4d6244f",
-    "@tldraw/state-react": "5.2.0-next.ee0fa4d6244f",
-    "@tldraw/store": "5.2.0-next.ee0fa4d6244f",
-    "@tldraw/tlschema": "5.2.0-next.ee0fa4d6244f",
-    "@tldraw/utils": "5.2.0-next.ee0fa4d6244f",
-    "@tldraw/validate": "5.2.0-next.ee0fa4d6244f",
+    "@tldraw/state": "5.2.0",
+    "@tldraw/state-react": "5.2.0",
+    "@tldraw/store": "5.2.0",
+    "@tldraw/tlschema": "5.2.0",
+    "@tldraw/utils": "5.2.0",
+    "@tldraw/validate": "5.2.0",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
@@ -80,7 +80,10 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "resize-observer-polyfill": "^1.5.1",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.7"
+  },
+  "engines": {
+    "node": ">=22.12.0"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/index.ts

@@ -23,10 +23,6 @@ export {
 	type TLErrorFallbackComponent,
 } from './lib/components/default-components/DefaultErrorFallback'
 export { DefaultGrid, type TLGridProps } from './lib/components/default-components/DefaultGrid'
-export {
-	DefaultSelectionBackground,
-	type TLSelectionBackgroundProps,
-} from './lib/components/default-components/DefaultSelectionBackground'
 export { type TLShapeErrorFallbackComponent } from './lib/components/default-components/DefaultShapeErrorFallback'
 export {
 	DefaultShapeWrapper,
@@ -128,6 +124,7 @@ export {
 export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
+	resolveLineHeightPx,
 	type BatchMeasurementRequest,
 	type TLMeasuredTextSize,
 	type TLMeasureTextOpts,
@@ -185,11 +182,7 @@ export {
 	type TLOverlay,
 	type TLOverlayUtilConstructor,
 } from './lib/editor/overlays/OverlayUtil'
-export {
-	ShapeIndicatorOverlayUtil,
-	strokeShapeIndicators,
-	type TLShapeIndicatorOverlay,
-} from './lib/editor/overlays/ShapeIndicatorOverlayUtil'
+export { strokeShapeIndicators } from './lib/editor/overlays/strokeShapeIndicators'
 export {
 	getPerfectDashProps,
 	type PerfectDashTerminal,
@@ -198,6 +191,7 @@ export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/res
 export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { maybeSnapToGrid } from './lib/editor/tools/BaseBoxShapeTool/children/Pointing'
+export { cancelShapeCreationOnLongPress } from './lib/editor/tools/cancelShapeCreationOnLongPress'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
 export { type TLContent } from './lib/editor/types/clipboard-types'
 export { type TLEventMap, type TLEventMapHandler } from './lib/editor/types/emit-types'
@@ -325,7 +319,6 @@ export {
 	type SafeId,
 } from './lib/hooks/useSafeId'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
-export { useTransform } from './lib/hooks/useTransform'
 export { useViewportHeight } from './lib/hooks/useViewportHeight'
 export {
 	LicenseManager,
@@ -458,6 +451,7 @@ export {
 	getGlobalDocument,
 	getGlobalWindow,
 	loopToHtmlElement,
+	moveElementInto,
 	preventDefault,
 	releasePointerCapture,
 	setPointerCapture,

package/src/lib/components/MenuClickCapture.tsx

@@ -6,6 +6,7 @@ import { useEditor } from '../hooks/useEditor'
 import { Vec } from '../primitives/Vec'
 import { releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
+import { getPointerEventButton } from '../utils/pointer'
 
 /**
  * When a menu is open, this component prevents the user from interacting with the canvas.
@@ -68,18 +69,19 @@ export function MenuClickCapture() {
 
 	const handlePointerDown = useCallback(
 		(e: PointerEvent) => {
-			if (e.button !== 0 && e.button !== 2) return
+			const button = getPointerEventButton(e)
+			if (button !== 0 && button !== 2) return
 
 			flushSync(() => setIsPointing(true))
 			setPointerCapture(e.currentTarget, e)
 			rPointerState.current = {
 				isDown: true,
 				isDragging: false,
-				button: e.button,
+				button,
 				start: new Vec(e.clientX, e.clientY),
 			}
 
-			if (e.button === 2) {
+			if (button === 2) {
 				if (!editor.options.rightClickPanning) {
 					// Right-click panning off: close the open menu and swallow the native
 					// contextmenu that would otherwise briefly open a new one (causing a flash).
@@ -141,13 +143,15 @@ export function MenuClickCapture() {
 
 	const handlePointerUp = useCallback(
 		(e: PointerEvent) => {
-			const isStaticRightClick = e.button === 2 && !rPointerState.current.isDragging
+			const isStaticRightClick =
+				rPointerState.current.button === 2 && !rPointerState.current.isDragging
 
 			editor.dispatch({
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
 				...getPointerInfo(editor, e),
+				button: rPointerState.current.button === 2 ? 2 : getPointerEventButton(e),
 			})
 
 			if (isStaticRightClick && editor.options.rightClickPanning) {

package/src/lib/components/Shape.tsx

@@ -1,14 +1,16 @@
 import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { warnOnce } from '@tldraw/utils'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { Editor } from '../editor/Editor'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditorComponents } from '../hooks/EditorComponentsContext'
 import { useEditor } from '../hooks/useEditor'
 import { useShapeCulling } from '../hooks/useShapeCulling'
 import { Mat } from '../primitives/Mat'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
-import { setStyleProperty } from '../utils/dom'
+import { moveElementInto, setStyleProperty } from '../utils/dom'
 import { OptionalErrorBoundary } from './ErrorBoundary'
 
 /*
@@ -153,11 +155,96 @@ export const Shape = memo(function Shape({
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
+				{util.getAppOwnedElement && <ContentElementSlot id={id} util={util} />}
 			</ShapeWrapper>
 		</>
 	)
 })
 
+/*
+The content element slot hosts an app-owned element provided by the shape util's
+getAppOwnedElement method. The contract: while the shape is mounted, tldraw never
+unmounts, recreates, or relocates the element (the canvas renders shapes in stable
+id-sorted DOM order, so reorders and reparenting never move DOM nodes), and before
+the slot is destroyed — shape deletion, page change, error teardown, or the whole
+editor unmounting — onReleaseAppOwnedElement is called while the slot is still
+connected to the document, so the app can move the element to a new parent with
+Node.moveBefore without resetting its state. That last guarantee relies on this
+being a layout effect: React runs layout effect cleanups before it detaches the
+host nodes of a deleted subtree, which is not true of passive effects.
+*/
+const ContentElementSlot = memo(function ContentElementSlot({
+	id,
+	util,
+}: {
+	id: TLShapeId
+	util: ShapeUtil
+}) {
+	const editor = useEditor()
+	const slotRef = useRef<HTMLDivElement>(null)
+
+	useLayoutEffect(() => {
+		const slot = slotRef.current
+		if (!slot) return
+
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		// getAppOwnedElement is called once per shape mount (the effect deps below are
+		// [editor, id, util], none of which change on a prop edit), so the adopted element is
+		// not refreshed when the shape's props change. A util whose element identity depends on
+		// props must mutate the existing element in place rather than return a new one. Likewise,
+		// if this returns null now and an element only later, the element is never adopted for
+		// this mount — return a stable element up front and populate it asynchronously instead.
+		const element = util.getAppOwnedElement?.(shape)
+		if (!element) return
+
+		// An element that was connected before adoption (e.g. parked off-canvas by the
+		// app between editor sessions) should survive the move without reloading.
+		const wasConnectedBeforeAdoption = element.isConnected
+
+		if (element.parentNode !== slot) {
+			moveElementInto(slot, element)
+		}
+
+		if (process.env.NODE_ENV !== 'production' && wasConnectedBeforeAdoption) {
+			warnIfContentElementReloads(editor, slot, element)
+		}
+
+		return () => {
+			// Note: under React StrictMode (dev only) this effect runs mount → cleanup → mount,
+			// so onReleaseAppOwnedElement fires once even though the shape was not removed, and on
+			// the appendChild fallback path the element is detached and re-adopted (reloading it).
+			// onReleaseAppOwnedElement must therefore be safe to call when the shape still exists;
+			// don't treat it as a definitive "shape removed" signal (check the store if you need
+			// to know). With Node.moveBefore the re-adoption preserves state, so this is benign.
+			const latestShape = editor.getShape(id) ?? shape
+			util.onReleaseAppOwnedElement?.(latestShape, element)
+			if (process.env.NODE_ENV !== 'production' && element.parentNode === slot) {
+				warnOnce(
+					`The content element for shape "${id}" was not reclaimed by onReleaseAppOwnedElement and will be destroyed along with its slot, losing any state it holds.`
+				)
+			}
+		}
+	}, [editor, id, util])
+
+	return <div ref={slotRef} className="tl-content-slot" draggable={false} />
+})
+
+// Dev-mode assertion that adoption kept the platform's state-preservation promise: a
+// load event firing on a previously-connected adopted element means the embed reloaded.
+// load doesn't bubble, but capture-phase listeners on ancestors still observe it.
+function warnIfContentElementReloads(editor: Editor, slot: HTMLElement, element: HTMLElement) {
+	const onLoad = (event: Event) => {
+		if (event.target !== element && !element.contains(event.target as Node)) return
+		warnOnce(
+			'A load event fired on an adopted content element. The element reloaded when it was moved into the shape, losing its state. State-preserving moves need Node.moveBefore (Chromium 133+, Firefox 144+) and a continuously connected element.'
+		)
+	}
+	slot.addEventListener('load', onLoad, { capture: true })
+	editor.timers.setTimeout(() => slot.removeEventListener('load', onLoad, { capture: true }), 1000)
+}
+
 export const InnerShape = memo(
 	function InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {
 		return useStateTracking(

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

@@ -32,7 +32,7 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { SelectionBackground, Background, SvgDefs } = useEditorComponents()
+	const { Background, SvgDefs } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
@@ -160,7 +160,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				{isGridMode && Grid && <GridWrapper />}
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
-					{SelectionBackground && <SelectionBackgroundWrapper />}
 					{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}
 				</div>
 				<CanvasOverlays />
@@ -345,21 +344,6 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 	)
 }
 
-function SelectionBackgroundWrapper() {
-	const editor = useEditor()
-	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [
-		editor,
-	])
-	const selectionBounds = useValue(
-		'selection bounds',
-		() => editor.getSelectionRotatedPageBounds(),
-		[editor]
-	)
-	const { SelectionBackground } = useEditorComponents()
-	if (!selectionBounds || !SelectionBackground) return null
-	return <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />
-}
-
 function OnTheCanvasWrapper() {
 	const { OnTheCanvas } = useEditorComponents()
 	if (!OnTheCanvas) return null

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

@@ -96,6 +96,42 @@ describe('updateShape', () => {
 	})
 })
 
+describe('updateViewportScreenBounds', () => {
+	it('bails without crashing or updating bounds when the container document has no body', () => {
+		const documentSpy = vi
+			.spyOn(editor, 'getContainerDocument')
+			.mockReturnValue({ body: null } as unknown as Document)
+
+		const prevScreenBounds = editor.getInstanceState().screenBounds
+		const prevInsets = editor.getInstanceState().insets
+
+		try {
+			expect(() => editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))).not.toThrow()
+			// A torn-down document is not measurable, so the bounds are left untouched.
+			expect(editor.getInstanceState().screenBounds).toEqual(prevScreenBounds)
+			expect(editor.getInstanceState().insets).toEqual(prevInsets)
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+
+	it('uses the container document body to calculate right and bottom insets', () => {
+		const documentSpy = vi.spyOn(editor, 'getContainerDocument').mockReturnValue({
+			body: {
+				scrollWidth: 500,
+				scrollHeight: 400,
+			},
+		} as unknown as Document)
+
+		try {
+			editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))
+			expect(editor.getInstanceState().insets).toEqual([true, true, true, true])
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+})
+
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
 		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))