@tldraw/editor 3.8.0-canary.c5d6281c3fdd → 3.8.0-canary.c738f8c4d6db

package/src/lib/editor/Editor.ts

@@ -155,7 +155,7 @@ import {
 	TLPointerEventInfo,
 	TLWheelEventInfo,
 } from './types/event-types'
-import { TLExternalAssetContent, TLExternalContent } from './types/external-content'
+import { TLExternalAsset, TLExternalContent } from './types/external-content'
 import { TLHistoryBatchOptions } from './types/history-types'
 import {
 	OptionalKeys,
@@ -1400,8 +1400,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @example
 	 * ```ts
-	 * state.getStateDescendant('select')
-	 * state.getStateDescendant('select.brushing')
+	 * editor.getStateDescendant('select')
+	 * editor.getStateDescendant('select.brushing')
 	 * ```
 	 *
 	 * @param path - The descendant's path of state ids, separated by periods.
@@ -1681,7 +1681,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	isAncestorSelected(shape: TLShape | TLShapeId): boolean {
-		const id = typeof shape === 'string' ? shape : shape?.id ?? null
+		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		const _shape = this.getShape(id)
 		if (!_shape) return false
 		const selectedShapeIds = this.getSelectedShapeIds()
@@ -1938,7 +1938,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setFocusedGroup(shape: TLShapeId | TLGroupShape | null): this {
-		const id = typeof shape === 'string' ? shape : shape?.id ?? null
+		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 
 		if (id !== null) {
 			const shape = this.getShape(id)
@@ -2021,7 +2021,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
-		const id = typeof shape === 'string' ? shape : shape?.id ?? null
+		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		if (id !== this.getEditingShapeId()) {
 			if (id) {
 				const shape = this.getShape(id)
@@ -2082,7 +2082,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setHoveredShape(shape: TLShapeId | TLShape | null): this {
-		const id = typeof shape === 'string' ? shape : shape?.id ?? null
+		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		if (id === this.getHoveredShapeId()) return this
 		this.run(
 			() => {
@@ -2231,7 +2231,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setCroppingShape(shape: TLShapeId | TLShape | null): this {
-		const id = typeof shape === 'string' ? shape : shape?.id ?? null
+		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		if (id !== this.getCroppingShapeId()) {
 			this.run(
 				() => {
@@ -7975,10 +7975,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	externalAssetContentHandlers: {
-		[K in TLExternalAssetContent['type']]: {
-			[Key in K]:
-				| null
-				| ((info: TLExternalAssetContent & { type: Key }) => Promise<TLAsset | undefined>)
+		[K in TLExternalAsset['type']]: {
+			[Key in K]: null | ((info: TLExternalAsset & { type: Key }) => Promise<TLAsset | undefined>)
 		}[K]
 	} = {
 		file: null,
@@ -8007,9 +8005,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(
+	registerExternalAssetHandler<T extends TLExternalAsset['type']>(
 		type: T,
-		handler: null | ((info: TLExternalAssetContent & { type: T }) => Promise<TLAsset>)
+		handler: null | ((info: TLExternalAsset & { type: T }) => Promise<TLAsset>)
 	): this {
 		this.externalAssetContentHandlers[type] = handler as any
 		return this
@@ -8077,18 +8075,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @param info - Info about the external content.
 	 * @returns The asset.
 	 */
-	async getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined> {
+	async getAssetForExternalContent(info: TLExternalAsset): Promise<TLAsset | undefined> {
 		return await this.externalAssetContentHandlers[info.type]?.(info as any)
 	}
 
-	hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean {
+	hasExternalAssetHandler(type: TLExternalAsset['type']): boolean {
 		return !!this.externalAssetContentHandlers[type]
 	}
 
 	/** @internal */
 	externalContentHandlers: {
 		[K in TLExternalContent<any>['type']]: {
-			[Key in K]: null | ((info: TLExternalContent<any> & { type: Key }) => void)
+			[Key in K]: null | ((info: Extract<TLExternalContent<any>, { type: Key }>) => void)
 		}[K]
 	} = {
 		text: null,
@@ -8096,6 +8094,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		embed: null,
 		'svg-text': null,
 		url: null,
+		tldraw: null,
+		excalidraw: null,
 	}
 
 	/**
@@ -8123,7 +8123,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			| null
 			| ((
 					info: T extends TLExternalContent<E>['type']
-						? TLExternalContent<E> & { type: T }
+						? Extract<TLExternalContent<E>, { type: T }>
 						: TLExternalContent<E>
 			  ) => void)
 	): this {
@@ -8803,8 +8803,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 							// If our pointer moved only because we're following some other user, then don't
 							// update our last activity timestamp; otherwise, update it to the current timestamp.
 							info.type === 'pointer' && info.pointerId === INTERNAL_POINTER_IDS.CAMERA_MOVE
-								? this.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ??
-									this._tickManager.now
+								? (this.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ??
+									this._tickManager.now)
 								: this._tickManager.now,
 						meta: {},
 					},
@@ -9369,6 +9369,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// todo: replace with new readonly mode?
 		if (this.getCrashingError()) return this
 
+		this.emit('before-event', info)
+
 		const { inputs } = this
 		const { type } = info
 

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

@@ -390,8 +390,8 @@ export class BoundsSnaps {
 
 		// at the same time, calculate how far we need to nudge the shape to 'snap' to the target point(s)
 		const nudge = new Vec(
-			lockedAxis === 'x' ? 0 : nearestSnapsX[0]?.nudge ?? 0,
-			lockedAxis === 'y' ? 0 : nearestSnapsY[0]?.nudge ?? 0
+			lockedAxis === 'x' ? 0 : (nearestSnapsX[0]?.nudge ?? 0),
+			lockedAxis === 'y' ? 0 : (nearestSnapsY[0]?.nudge ?? 0)
 		)
 
 		// ok we've figured out how much the box should be nudged, now let's find all the snap points
@@ -504,8 +504,8 @@ export class BoundsSnaps {
 
 		// at the same time, calculate how far we need to nudge the shape to 'snap' to the target point(s)
 		const nudge = new Vec(
-			isXLocked ? 0 : nearestSnapsX[0]?.nudge ?? 0,
-			isYLocked ? 0 : nearestSnapsY[0]?.nudge ?? 0
+			isXLocked ? 0 : (nearestSnapsX[0]?.nudge ?? 0),
+			isYLocked ? 0 : (nearestSnapsY[0]?.nudge ?? 0)
 		)
 
 		if (isAspectRatioLocked && isSelectionCorner(handle) && nudge.len() !== 0) {

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

@@ -230,6 +230,7 @@ export class TextManager {
 		elm.style.setProperty('font-weight', opts.fontWeight)
 		elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
 		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
+		elm.style.setProperty('font-style', opts.fontStyle)
 
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'

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

@@ -53,8 +53,27 @@ export interface TLShapeUtilCanvasSvgDef {
 
 /** @public */
 export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
+	/** Configure this shape utils {@link ShapeUtil.options | `options`}. */
+	static configure<T extends TLShapeUtilConstructor<any, any>>(
+		this: T,
+		options: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never
+	): T {
+		// @ts-expect-error -- typescript has no idea what's going on here but it's fine
+		return class extends this {
+			// @ts-expect-error
+			options = { ...this.options, ...options }
+		}
+	}
+
 	constructor(public editor: Editor) {}
 
+	/**
+	 * Options for this shape util. If you're implementing a custom shape util, you can override
+	 * this to provide customization options for your shape. If using an existing shape util, you
+	 * can customizing this by calling {@link ShapeUtil.configure}.
+	 */
+	options = {}
+
 	/**
 	 * Props allow you to define the shape's properties in a way that the editor can understand.
 	 * This has two main uses:

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

@@ -12,6 +12,7 @@ export interface TLEventMap {
 	crash: [{ error: unknown }]
 	'stop-camera-animation': []
 	'stop-following': []
+	'before-event': [TLEventInfo]
 	event: [TLEventInfo]
 	tick: [number]
 	frame: [number]

package/src/lib/editor/types/external-content.ts

@@ -2,57 +2,111 @@ import { TLAssetId } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
 import { TLContent } from './clipboard-types'
 
+/** @public */
+export interface TLTldrawExternalContentSource {
+	type: 'tldraw'
+	data: TLContent
+}
+
+/** @public */
+export interface TLExcalidrawExternalContentSource {
+	type: 'excalidraw'
+	data: any
+}
+
+/** @public */
+export interface TLTextExternalContentSource {
+	type: 'text'
+	data: string
+	subtype: 'json' | 'html' | 'text' | 'url'
+}
+
+/** @public */
+export interface TLErrorExternalContentSource {
+	type: 'error'
+	data: string | null
+	reason: string
+}
+
 /** @public */
 export type TLExternalContentSource =
-	| {
-			type: 'tldraw'
-			data: TLContent
-	  }
-	| {
-			type: 'excalidraw'
-			data: any
-	  }
-	| {
-			type: 'text'
-			data: string
-			subtype: 'json' | 'html' | 'text' | 'url'
-	  }
-	| {
-			type: 'error'
-			data: string | null
-			reason: string
-	  }
-
-/** @public */
-export type TLExternalContent<EmbedDefinition> = {
+	| TLTldrawExternalContentSource
+	| TLExcalidrawExternalContentSource
+	| TLTextExternalContentSource
+	| TLErrorExternalContentSource
+
+/** @public */
+export interface TLBaseExternalContent {
 	sources?: TLExternalContentSource[]
 	point?: VecLike
-} & (
-	| {
-			type: 'text'
-			text: string
-	  }
-	| {
-			type: 'files'
-			files: File[]
-			ignoreParent: boolean
-	  }
-	| {
-			type: 'url'
-			url: string
-	  }
-	| {
-			type: 'svg-text'
-			text: string
-	  }
-	| {
-			type: 'embed'
-			url: string
-			embed: EmbedDefinition
-	  }
-)
-
-/** @public */
-export type TLExternalAssetContent =
-	| { type: 'file'; file: File; assetId?: TLAssetId }
-	| { type: 'url'; url: string }
+}
+
+/** @public */
+export interface TLTextExternalContent extends TLBaseExternalContent {
+	type: 'text'
+	text: string
+}
+
+/** @public */
+export interface TLFilesExternalContent extends TLBaseExternalContent {
+	type: 'files'
+	files: File[]
+	ignoreParent: boolean
+}
+
+/** @public */
+export interface TLUrlExternalContent extends TLBaseExternalContent {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export interface TLSvgTextExternalContent extends TLBaseExternalContent {
+	type: 'svg-text'
+	text: string
+}
+
+/** @public */
+export interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
+	type: 'embed'
+	url: string
+	embed: EmbedDefinition
+}
+
+/** @public */
+export interface TLTldrawExternalContent extends TLBaseExternalContent {
+	type: 'tldraw'
+	content: TLContent
+}
+
+/** @public */
+export interface TLExcalidrawExternalContent extends TLBaseExternalContent {
+	type: 'excalidraw'
+	content: any
+}
+
+/** @public */
+export type TLExternalContent<EmbedDefinition> =
+	| TLTextExternalContent
+	| TLFilesExternalContent
+	| TLUrlExternalContent
+	| TLSvgTextExternalContent
+	| TLEmbedExternalContent<EmbedDefinition>
+	| TLTldrawExternalContent
+	| TLExcalidrawExternalContent
+
+/** @public */
+export interface TLFileExternalAsset {
+	type: 'file'
+	file: File
+	assetId?: TLAssetId
+}
+
+/** @public */
+export interface TLUrlExternalAsset {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset

package/src/lib/exports/StyleEmbedder.ts

@@ -54,7 +54,7 @@ export class StyleEmbedder {
 			: NO_STYLES
 
 		const parentStyles = shouldSkipInheritedParentStyles
-			? this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES
+			? (this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES)
 			: NO_STYLES
 
 		const info: ElementStyleInfo = {

package/src/lib/hooks/useCanvasEvents.ts

@@ -117,16 +117,28 @@ export function useCanvasEvents() {
 			async function onDrop(e: React.DragEvent<Element>) {
 				preventDefault(e)
 				stopEventPropagation(e)
-				if (!e.dataTransfer?.files?.length) return
 
-				const files = Array.from(e.dataTransfer.files)
+				if (e.dataTransfer?.files?.length) {
+					const files = Array.from(e.dataTransfer.files)
 
-				await editor.putExternalContent({
-					type: 'files',
-					files,
-					point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
-					ignoreParent: false,
-				})
+					await editor.putExternalContent({
+						type: 'files',
+						files,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						ignoreParent: false,
+					})
+					return
+				}
+
+				const url = e.dataTransfer.getData('url')
+				if (url) {
+					await editor.putExternalContent({
+						type: 'url',
+						url,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+					})
+					return
+				}
 			}
 
 			function onClick(e: React.MouseEvent) {

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -274,15 +274,6 @@ export function useDocumentEvents() {
 	}, [editor, container, isAppFocused])
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 function areShortcutsDisabled(editor: Editor) {
-	const { activeElement } = document
-
-	return (
-		editor.menus.hasOpenMenus() ||
-		(activeElement &&
-			(activeElement.getAttribute('contenteditable') ||
-				INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1))
-	)
+	return editor.menus.hasOpenMenus() || activeElementShouldCaptureKeys()
 }

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -11,6 +11,13 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	useEffect(() => {
 		function onWheel(e: WheelEvent) {
 			if ((e as any).isSpecialRedispatchedEvent) return
+
+			// if the element is scrollable, don't redispatch the event
+			const elm = ref.current
+			if (elm && elm.scrollHeight > elm.clientHeight) {
+				return
+			}
+
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return

package/src/lib/options.ts

@@ -29,7 +29,6 @@ export interface TldrawOptions {
 	readonly dragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
-	readonly maxPointsPerDrawShape: number
 	readonly gridSteps: readonly {
 		readonly min: number
 		readonly mid: number
@@ -67,10 +66,9 @@ export interface TldrawOptions {
 	 */
 	readonly exportProvider: ComponentType<{ children: React.ReactNode }>
 	/**
-	 * How should the note shape resize? By default it does not resize (except automatically based on its text content),
-	 * but you can set it to be user-resizable using scale.
+	 * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
 	 */
-	readonly noteShapeResizeMode: 'none' | 'scale'
+	readonly enableToolbarKeyboardShortcuts: boolean
 }
 
 /** @public */
@@ -86,7 +84,6 @@ export const defaultTldrawOptions = {
 	dragDistanceSquared: 16, // 4 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
-	maxPointsPerDrawShape: 500,
 	gridSteps: [
 		{ min: -1, mid: 0.15, step: 64 },
 		{ min: 0.05, mid: 0.375, step: 16 },
@@ -116,5 +113,5 @@ export const defaultTldrawOptions = {
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
-	noteShapeResizeMode: 'none',
+	enableToolbarKeyboardShortcuts: true,
 } as const satisfies TldrawOptions

package/src/lib/utils/dom.ts

@@ -90,3 +90,15 @@ export const setStyleProperty = (
 	if (!elm) return
 	elm.style.setProperty(property, value as string)
 }
+
+const INPUTS = ['input', 'select', 'button', 'textarea']
+
+/** @internal */
+export function activeElementShouldCaptureKeys() {
+	const { activeElement } = document
+	return !!(
+		activeElement &&
+		(activeElement.getAttribute('contenteditable') ||
+			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+	)
+}

package/src/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.8.0-canary.c5d6281c3fdd'
+export const version = '3.8.0-canary.c738f8c4d6db'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-28T16:50:53.939Z',
-	patch: '2025-01-28T16:50:53.939Z',
+	minor: '2025-02-12T15:13:37.538Z',
+	patch: '2025-02-12T15:13:37.538Z',
 }