@tldraw/editor 4.6.0-internal.e29318c66fb0 → 4.6.0-next.0eb36d65eec3

package/src/lib/editor/Editor.ts

@@ -10,10 +10,10 @@ import {
 import {
 	ComputedCache,
 	RecordType,
-	StoreSideEffects,
-	StoreSnapshot,
 	UnknownRecord,
 	reverseRecordsDiff,
+	StoreSnapshot,
+	StoreSideEffects,
 } from '@tldraw/store'
 import {
 	CameraRecordType,
@@ -90,15 +90,15 @@ import {
 	uniqueId,
 } from '@tldraw/utils'
 import EventEmitter from 'eventemitter3'
+import { TLUser, createTLUser } from '../config/createTLUser'
+import { TLAnyBindingUtilConstructor, checkBindings } from '../config/defaultBindings'
+import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from '../config/defaultShapes'
 import {
 	TLEditorSnapshot,
 	TLLoadSnapshotOptions,
 	getSnapshot,
 	loadSnapshot,
 } from '../config/TLEditorSnapshot'
-import { TLUser, createTLUser } from '../config/createTLUser'
-import { TLAnyBindingUtilConstructor, checkBindings } from '../config/defaultBindings'
-import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from '../config/defaultShapes'
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
@@ -115,14 +115,13 @@ import { tlmenus } from '../globals/menus'
 import { tltime } from '../globals/time'
 import { TldrawOptions, defaultTldrawOptions } from '../options'
 import { Box, BoxLike } from '../primitives/Box'
-import { Mat, MatLike } from '../primitives/Mat'
-import { Vec, VecLike } from '../primitives/Vec'
 import { EASINGS } from '../primitives/easings'
 import { Geometry2d } from '../primitives/geometry/Geometry2d'
 import { Group2d } from '../primitives/geometry/Group2d'
 import { intersectPolygonPolygon } from '../primitives/intersect'
+import { Mat, MatLike } from '../primitives/Mat'
 import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from '../primitives/utils'
-import { ReadonlySharedStyleMap, SharedStyle, SharedStyleMap } from '../utils/SharedStylesMap'
+import { Vec, VecLike } from '../primitives/Vec'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { dataUrlToFile } from '../utils/assets'
 import { debugFlags } from '../utils/debug-flags'
@@ -137,6 +136,7 @@ import { getReorderingShapesChanges } from '../utils/reorderShapes'
 import { getDroppedShapesToNewParents, kickoutOccludedShapes } from '../utils/reparenting'
 import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
+import { ReadonlySharedStyleMap, SharedStyle, SharedStyleMap } from '../utils/SharedStylesMap'
 import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
 import { bindingsIndex } from './derivations/bindingsIndex'
 import { notVisibleShapes } from './derivations/notVisibleShapes'
@@ -9071,6 +9071,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		opts = {} as { force?: boolean }
 	): Promise<void> {
 		if (!opts.force && this.getIsReadonly()) return
+
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 

package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts

@@ -1,5 +1,5 @@
-import { Vec } from '../../../primitives/Vec'
 import { EASINGS } from '../../../primitives/easings'
+import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 
 /** @public */

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -10,8 +10,8 @@ import {
 	isSelectionCorner,
 } from '../../../primitives/Box'
 import { Mat } from '../../../primitives/Mat'
-import { Vec } from '../../../primitives/Vec'
 import { rangeIntersection, rangesOverlap } from '../../../primitives/utils'
+import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 import type {
 	GapsSnapIndicator,

package/src/lib/editor/managers/SnapManager/HandleSnaps.ts

@@ -1,8 +1,8 @@
 import { computed } from '@tldraw/state'
 import { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'
 import { assertExists, uniqueId } from '@tldraw/utils'
-import { Vec } from '../../../primitives/Vec'
 import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
+import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 import type { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
 

package/src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts

@@ -1,7 +1,7 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
 import type { RecordsDiff } from '@tldraw/store'
-import type { TLRecord } from '@tldraw/tlschema'
 import { TLPageId, TLShape, TLShapeId, isShape } from '@tldraw/tlschema'
+import type { TLRecord } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Box } from '../../../primitives/Box'
 import type { Editor } from '../../Editor'
@@ -74,7 +74,7 @@ export class SpatialIndexManager {
 		// Collect all shape elements for bulk loading
 		for (const shape of shapes) {
 			const bounds = this.editor.getShapePageBounds(shape.id)
-			if (bounds) {
+			if (bounds && bounds.isValid()) {
 				elements.push({
 					minX: bounds.minX,
 					minY: bounds.minY,
@@ -101,7 +101,7 @@ export class SpatialIndexManager {
 			for (const shape of objectMapValues(changes.added) as TLShape[]) {
 				if (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {
 					const bounds = this.editor.getShapePageBounds(shape.id)
-					if (bounds) {
+					if (bounds && bounds.isValid()) {
 						this.rbush.upsert(shape.id, bounds)
 					}
 					processedShapeIds.add(shape.id)
@@ -125,7 +125,7 @@ export class SpatialIndexManager {
 
 				if (isOnPage) {
 					const bounds = this.editor.getShapePageBounds(to.id)
-					if (bounds) {
+					if (bounds && bounds.isValid()) {
 						this.rbush.upsert(to.id, bounds)
 					}
 				} else {
@@ -145,7 +145,7 @@ export class SpatialIndexManager {
 			const indexedBounds = this.rbush.getBounds(shapeId)
 
 			if (!this.areBoundsEqual(currentBounds, indexedBounds)) {
-				if (currentBounds) {
+				if (currentBounds && currentBounds.isValid()) {
 					this.rbush.upsert(shapeId, currentBounds)
 				} else {
 					this.rbush.remove(shapeId)

package/src/lib/editor/managers/TextManager/TextManager.test.ts

@@ -3,6 +3,22 @@ import { Editor } from '../../Editor'
 import { TextManager, TLMeasureTextSpanOpts } from './TextManager'
 
 // Create a simple mock DOM environment
+function createMockStyle() {
+	const properties = new Map<string, string>()
+
+	return {
+		setProperty: vi.fn((key: string, value: string) => {
+			properties.set(key, value)
+		}),
+		getPropertyValue: vi.fn((key: string) => properties.get(key) ?? ''),
+		removeProperty: vi.fn((key: string) => {
+			const previous = properties.get(key) ?? ''
+			properties.delete(key)
+			return previous
+		}),
+	}
+}
+
 const mockElement = {
 	classList: { add: vi.fn() },
 	tabIndex: -1,
@@ -10,10 +26,7 @@ const mockElement = {
 	innerHTML: '',
 	textContent: '',
 	setAttribute: vi.fn(),
-	style: {
-		setProperty: vi.fn(),
-		getPropertyValue: vi.fn(() => ''),
-	},
+	style: createMockStyle(),
 	scrollWidth: 100,
 	getBoundingClientRect: vi.fn(() => ({
 		width: 100,
@@ -31,6 +44,7 @@ const mockElement = {
 // Mock document.createElement to return our mock element
 const mockCreateElement = vi.fn(() => {
 	const element = { ...mockElement }
+	element.style = createMockStyle()
 	element.cloneNode = vi.fn(() => ({ ...element }))
 
 	// Make textContent and innerHTML reactive like real DOM elements

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -21,6 +21,23 @@ const textAlignmentsForLtr = {
 	'end-legacy': 'right',
 }
 
+interface PoolItem {
+	el: HTMLDivElement
+	html: string
+	appliedStyleKeys: string[]
+}
+
+/** @public */
+export interface BatchMeasurementRequest {
+	html: string
+	opts: TLMeasureTextOpts
+}
+
+/** @public */
+export type TLMeasuredTextSize = BoxModel & {
+	scrollWidth: number
+}
+
 /** @public */
 export interface TLMeasureTextOpts {
 	fontStyle: string
@@ -73,53 +90,66 @@ const initialDefaultStyles = Object.freeze({
 /** @public */
 export class TextManager {
 	private elm: HTMLDivElement
+	private poolElms: PoolItem[] = []
 
 	constructor(public editor: Editor) {
-		const elm = editor.getContainerDocument().createElement('div')
+		this.elm = this.createMeasurementEl()
+		this.editor.getContainer().appendChild(this.elm)
+	}
+
+	private createMeasurementEl(): HTMLDivElement {
+		const elm = this.editor.getContainerDocument().createElement('div')
 		elm.classList.add('tl-text')
 		elm.classList.add('tl-text-measure')
 		elm.setAttribute('dir', 'auto')
 		elm.tabIndex = -1
-		this.editor.getContainer().appendChild(elm)
-
-		this.elm = elm
-
 		for (const key of objectMapKeys(initialDefaultStyles)) {
 			elm.style.setProperty(key, initialDefaultStyles[key])
 		}
+
+		return elm
 	}
 
-	private setElementStyles(styles: Record<string, string | undefined>) {
-		const stylesToReinstate = {} as any
-		for (const key of objectMapKeys(styles)) {
-			if (typeof styles[key] === 'string') {
-				const oldValue = this.elm.style.getPropertyValue(key)
-				if (oldValue === styles[key]) continue
-				stylesToReinstate[key] = oldValue
-				this.elm.style.setProperty(key, styles[key])
-			}
-		}
-		return () => {
-			for (const key of objectMapKeys(stylesToReinstate)) {
-				this.elm.style.setProperty(key, stylesToReinstate[key])
+	private resetElementStyles(el: HTMLElement, appliedStyleKeys: string[]) {
+		for (const key of appliedStyleKeys) {
+			if (key in initialDefaultStyles) {
+				el.style.setProperty(key, initialDefaultStyles[key as keyof typeof initialDefaultStyles])
+			} else {
+				el.style.removeProperty(key)
 			}
 		}
 	}
 
-	dispose() {
-		return this.elm.remove()
-	}
+	private setElementStyles(el: HTMLElement, styles: Record<string, string | undefined | null>) {
+		type StyleValue = string | null
+		type RestoreEntry = [prop: string, value: StyleValue]
 
-	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
-		const div = this.editor.getContainerDocument().createElement('div')
-		div.textContent = normalizeTextForDom(textToMeasure)
-		return this.measureHtml(div.innerHTML, opts)
-	}
+		const restore: RestoreEntry[] = []
 
-	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
-		const { elm } = this
+		for (const [key, nextValue] of Object.entries(styles)) {
+			const oldValue = el.style.getPropertyValue(key)
 
-		const newStyles = {
+			if (typeof nextValue === 'string') {
+				if (oldValue === nextValue) continue
+				restore.push([key, oldValue || null])
+				el.style.setProperty(key, nextValue)
+			} else {
+				if (!oldValue) continue
+				restore.push([key, oldValue])
+				el.style.removeProperty(key)
+			}
+		}
+
+		return () => {
+			for (const [key, value] of restore) {
+				if (value === null || value === '') el.style.removeProperty(key)
+				else el.style.setProperty(key, value)
+			}
+		}
+	}
+
+	private getMeasureStyles(opts: TLMeasureTextOpts): Record<string, string | undefined> {
+		return {
 			'font-family': opts.fontFamily,
 			'font-style': opts.fontStyle,
 			'font-weight': opts.fontWeight,
@@ -128,11 +158,87 @@ export class TextManager {
 			padding: opts.padding,
 			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
 			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
-			'overflow-wrap': opts.disableOverflowWrapBreaking ? 'normal' : undefined,
+			'overflow-wrap': opts.disableOverflowWrapBreaking ? 'normal' : 'break-word',
 			...opts.otherStyles,
 		}
+	}
+
+	dispose() {
+		this.elm.remove()
+		for (const { el } of this.poolElms) {
+			el.remove()
+		}
+		this.poolElms.length = 0
+	}
+
+	private ensurePoolSize(size: number) {
+		if (this.poolElms.length >= size) return
+
+		const fragment = this.editor.getContainerDocument().createDocumentFragment()
+		while (this.poolElms.length < size) {
+			const el = this.createMeasurementEl()
+			this.poolElms.push({ el, html: '', appliedStyleKeys: [] })
+			fragment.appendChild(el)
+		}
+		this.editor.getContainer().appendChild(fragment)
+	}
+
+	private getPoolItem(index: number): PoolItem {
+		this.ensurePoolSize(index + 1)
+		return this.poolElms[index]
+	}
+
+	measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[] {
+		if (requests.length === 0) return []
+
+		while (this.poolElms.length > requests.length) {
+			const { el } = this.poolElms.pop()!
+			el.remove()
+		}
+
+		for (let i = 0; i < requests.length; i++) {
+			const { html, opts } = requests[i]
+			const poolItem = this.getPoolItem(i)
+
+			const { el } = poolItem
+			this.resetElementStyles(el, poolItem.appliedStyleKeys)
+			const styles = this.getMeasureStyles(opts)
+			this.setElementStyles(el, styles)
+			poolItem.appliedStyleKeys = Object.keys(styles)
+			// Skip innerHTML parsing if the content hasn't changed
+			if (poolItem.html !== html) {
+				el.innerHTML = html
+				poolItem.html = html
+			}
+		}
+
+		const results: TLMeasuredTextSize[] = []
+		for (let i = 0; i < requests.length; i++) {
+			const el = this.getPoolItem(i).el
+			const scrollWidth = requests[i].opts.measureScrollWidth ? el.scrollWidth : 0
+			const rect = el.getBoundingClientRect()
+			results.push({
+				x: 0,
+				y: 0,
+				w: rect.width,
+				h: rect.height,
+				scrollWidth,
+			})
+		}
+
+		return results
+	}
+
+	measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize {
+		const div = this.editor.getContainerDocument().createElement('div')
+		div.textContent = normalizeTextForDom(textToMeasure)
+		return this.measureHtml(div.innerHTML, opts)
+	}
+
+	measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize {
+		const { elm } = this
 
-		const restoreStyles = this.setElementStyles(newStyles)
+		const restoreStyles = this.setElementStyles(elm, this.getMeasureStyles(opts))
 
 		try {
 			elm.innerHTML = html
@@ -280,11 +386,11 @@ export class TextManager {
 			width: `${elementWidth}px`,
 			height: 'min-content',
 			'text-align': textAlignmentsForLtr[opts.textAlign],
-			'overflow-wrap': shouldTruncateToFirstLine ? 'anywhere' : undefined,
-			'word-break': shouldTruncateToFirstLine ? 'break-all' : undefined,
+			'overflow-wrap': shouldTruncateToFirstLine ? 'anywhere' : 'break-word',
+			'word-break': shouldTruncateToFirstLine ? 'break-all' : 'normal',
 			...opts.otherStyles,
 		}
-		const restoreStyles = this.setElementStyles(newStyles)
+		const restoreStyles = this.setElementStyles(elm, newStyles)
 
 		try {
 			const normalizedText = normalizeTextForDom(textToMeasure)

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -1,7 +1,7 @@
 import { atom } from '@tldraw/state'
 import { Mocked, vi } from 'vitest'
-import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
+import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { UserPreferencesManager } from './UserPreferencesManager'
 
 // Mock window.matchMedia

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts

@@ -1,6 +1,6 @@
 import { atom, computed } from '@tldraw/state'
-import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
+import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { getGlobalWindow } from '../../../utils/dom'
 
 /** @public */

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

@@ -15,15 +15,15 @@ import {
 import { IndexKey } from '@tldraw/utils'
 import { ReactElement } from 'react'
 import { Box, SelectionHandle } from '../../primitives/Box'
-import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
+import { Vec } from '../../primitives/Vec'
 import type { Editor } from '../Editor'
 import { TLFontFace } from '../managers/FontManager/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
-import { SvgExportContext } from '../types/SvgExportContext'
 import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
+import { SvgExportContext } from '../types/SvgExportContext'
 
 /** @public */
 export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T> = ShapeUtil<T>> {

package/src/lib/exports/StyleEmbedder.ts

@@ -1,5 +1,4 @@
 import { assertExists, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'
-import { FontEmbedder } from './FontEmbedder'
 import { ReadonlyStyles, Styles, cssRules } from './cssRules'
 import {
 	elementStyle,
@@ -9,6 +8,7 @@ import {
 	isElement,
 } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
+import { FontEmbedder } from './FontEmbedder'
 import { parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'
 
 const NO_STYLES = {} as const

package/src/lib/exports/getSvgJsx.tsx

@@ -23,12 +23,12 @@ import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import type { Editor, TLRenderingShape } from '../editor/Editor'
 import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
+import { TLImageExportOptions } from '../editor/types/misc-types'
 import {
 	SvgExportContext,
 	SvgExportContextProvider,
 	SvgExportDef,
 } from '../editor/types/SvgExportContext'
-import { TLImageExportOptions } from '../editor/types/misc-types'
 import { useEditor } from '../hooks/useEditor'
 import { useEvent } from '../hooks/useEvent'
 import { suffixSafeId, useUniqueSafeId } from '../hooks/useSafeId'

package/src/lib/hooks/useEditorComponents.tsx

@@ -19,8 +19,8 @@ import { DefaultShapeWrapper } from '../components/default-components/DefaultSha
 import { DefaultSnapIndicator } from '../components/default-components/DefaultSnapIndictor'
 import { DefaultSpinner } from '../components/default-components/DefaultSpinner'
 import { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'
-import type { TLEditorComponents } from './EditorComponentsContext'
 import { EditorComponentsContext } from './EditorComponentsContext'
+import type { TLEditorComponents } from './EditorComponentsContext'
 import { useShallowObjectIdentity } from './useIdentity'
 
 export { useEditorComponents } from './EditorComponentsContext'

package/src/lib/hooks/useLocalStore.ts

@@ -1,8 +1,8 @@
 import { TLAsset, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
 import { WeakCache } from '@tldraw/utils'
 import { useEffect } from 'react'
-import { TLEditorSnapshot } from '../config/TLEditorSnapshot'
 import { TLStoreOptions, createTLStore } from '../config/createTLStore'
+import { TLEditorSnapshot } from '../config/TLEditorSnapshot'
 import { TLStoreWithStatus } from '../utils/sync/StoreWithStatus'
 import { TLLocalSyncClient } from '../utils/sync/TLLocalSyncClient'
 import { useShallowObjectIdentity } from './useIdentity'

package/src/lib/options.ts

@@ -1,10 +1,50 @@
+import { Awaitable } from '@tldraw/utils'
 import { ComponentType, Fragment } from 'react'
 import { DEFAULT_CAMERA_OPTIONS } from './constants'
+import type { Editor } from './editor/Editor'
+import { TLContent } from './editor/types/clipboard-types'
+import { TLExternalContent } from './editor/types/external-content'
 import { TLCameraOptions } from './editor/types/misc-types'
 import { VecLike } from './primitives/Vec'
 import { TLDeepLinkOptions } from './utils/deepLinks'
 import { TLTextOptions } from './utils/richText'
 
+/**
+ * Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
+ *
+ * @public
+ */
+export interface TLClipboardWriteInfo {
+	readonly operation: 'copy' | 'cut'
+	readonly source: 'native' | 'menu'
+}
+
+/**
+ * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
+ *
+ * - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
+ *   `navigator.clipboard.read()`).
+ * - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
+ *   exists
+ *   (no `DataTransfer`).
+ *
+ * @public
+ */
+export type TLClipboardPasteRawInfo =
+	| {
+			readonly editor: Editor
+			readonly source: 'native-event'
+			readonly event: ClipboardEvent
+			readonly clipboardData: DataTransfer | null
+			readonly point: VecLike | undefined
+	  }
+	| {
+			readonly editor: Editor
+			readonly source: 'clipboard-read'
+			readonly clipboardItems: readonly ClipboardItem[]
+			readonly point: VecLike | undefined
+	  }
+
 /**
  * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.
  *
@@ -156,6 +196,71 @@ export interface TldrawOptions {
 	 * viewport's page dimensions regardless of overview zoom changes.
 	 */
 	readonly quickZoomPreservesScreenBounds: boolean
+	/**
+	 * Called before content is written to the clipboard during a copy or cut operation.
+	 * Receives the serialized content (shapes, bindings, assets) and can filter or transform
+	 * it before it reaches the clipboard.
+	 *
+	 * Return a modified `TLContent` object to change what is copied or cut. Return `false` to
+	 * cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
+	 * (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
+	 * the hook is async.
+	 *
+	 * @example
+	 * ```tsx
+	 * // Filter out "locked" shapes from copy
+	 * onBeforeCopyToClipboard({ content, operation }) {
+	 *     return {
+	 *         ...content,
+	 *         shapes: content.shapes.filter(s => !s.meta.locked),
+	 *         rootShapeIds: content.rootShapeIds.filter(id =>
+	 *             content.shapes.find(s => s.id === id && !s.meta.locked)
+	 *         ),
+	 *     }
+	 * }
+	 * ```
+	 */
+	onBeforeCopyToClipboard?(
+		info: { editor: Editor; content: TLContent } & TLClipboardWriteInfo
+	): Awaitable<TLContent | false | void>
+	/**
+	 * Called before pasted content is processed and shapes are created. Receives the parsed
+	 * external content from the clipboard and can filter, transform, or cancel it.
+	 *
+	 * Return `false` to cancel the paste. Return a modified content object to transform it.
+	 * Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
+	 * those values if the hook is async.
+	 *
+	 * This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
+	 * not for file drops or programmatic `putExternalContent` calls.
+	 *
+	 * @example
+	 * ```tsx
+	 * // Block pasting of image files
+	 * onBeforePasteFromClipboard({ content }) {
+	 *     if (content.type === 'files') {
+	 *         const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
+	 *         if (nonImages.length === 0) return false
+	 *         return { ...content, files: nonImages }
+	 *     }
+	 * }
+	 * ```
+	 */
+	onBeforePasteFromClipboard?(info: {
+		editor: Editor
+		content: TLExternalContent<unknown>
+		source: 'native-event' | 'clipboard-read'
+		point?: VecLike
+	}): Awaitable<TLExternalContent<unknown> | false | void>
+	/**
+	 * Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
+	 * (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
+	 *
+	 * Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
+	 * {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
+	 * raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
+	 */
+	onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void
 	/**
 	 * Called when content is dropped on the canvas. Provides the page position
 	 * where the drop occurred and the underlying drag event object.
@@ -227,5 +332,8 @@ export const defaultTldrawOptions = {
 	text: {},
 	deepLinks: undefined,
 	quickZoomPreservesScreenBounds: true,
+	onBeforeCopyToClipboard: undefined,
+	onBeforePasteFromClipboard: undefined,
+	onClipboardPasteRaw: undefined,
 	experimental__onDropOnCanvas: undefined,
 } as const satisfies TldrawOptions

package/src/lib/primitives/Box.ts

@@ -1,6 +1,6 @@
 import { BoxModel } from '@tldraw/tlschema'
-import { Vec, VecLike } from './Vec'
 import { approximatelyLte, PI, PI2, toPrecision } from './utils'
+import { Vec, VecLike } from './Vec'
 
 /** @public */
 export type BoxLike = BoxModel | Box

package/src/lib/primitives/geometry/Arc2d.ts

@@ -1,8 +1,8 @@
-import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils'
-import { Geometry2d, Geometry2dOptions } from './Geometry2d'
+import { Vec, VecLike } from '../Vec'
 import { getVerticesCountForArcLength } from './geometry-constants'
+import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Arc2d extends Geometry2d {

package/src/lib/primitives/geometry/Circle2d.ts

@@ -1,9 +1,9 @@
 import { Box } from '../Box'
-import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { PI2, getPointOnCircle } from '../utils'
-import { Geometry2d, Geometry2dOptions } from './Geometry2d'
+import { Vec, VecLike } from '../Vec'
 import { getVerticesCountForArcLength } from './geometry-constants'
+import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Circle2d extends Geometry2d {