@tldraw/editor 3.8.0-canary.7a17cab026a3 → 3.8.0-canary.7d3367070334

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.8.0-canary.7a17cab026a3";
+const version = "3.8.0-canary.7d3367070334";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-01-28T10:43:47.114Z",
-  patch: "2025-01-28T10:43:47.114Z"
+  minor: "2025-02-03T09:42:24.222Z",
+  patch: "2025-02-03T09:42:24.222Z"
 };
 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 = '3.8.0-canary.7a17cab026a3'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-01-28T10:43:47.114Z',\n\tpatch: '2025-01-28T10:43:47.114Z',\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 = '3.8.0-canary.7d3367070334'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-02-03T09:42:24.222Z',\n\tpatch: '2025-02-03T09:42:24.222Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -39,9 +39,10 @@
 	--layer-overlays-user-brush: 50;
 	--layer-overlays-user-indicator-selected: 60;
 	--layer-overlays-user-indicator-hovered: 70;
-	--layer-overlays-user-handles: 80;
 	--layer-overlays-user-snapline: 90;
 	--layer-overlays-selection-fg: 100;
+	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
+	--layer-overlays-user-handles: 105;
 	--layer-overlays-user-indicator-hint: 110;
 	--layer-overlays-collaborator-cursor-hint: 120;
 	--layer-overlays-collaborator-cursor: 130;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.8.0-canary.7a17cab026a3",
+  "version": "3.8.0-canary.7d3367070334",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,37 +45,37 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.8.0-canary.7a17cab026a3",
-    "@tldraw/state-react": "3.8.0-canary.7a17cab026a3",
-    "@tldraw/store": "3.8.0-canary.7a17cab026a3",
-    "@tldraw/tlschema": "3.8.0-canary.7a17cab026a3",
-    "@tldraw/utils": "3.8.0-canary.7a17cab026a3",
-    "@tldraw/validate": "3.8.0-canary.7a17cab026a3",
-    "@types/core-js": "^2.5.5",
-    "@use-gesture/react": "^10.2.27",
+    "@tldraw/state": "3.8.0-canary.7d3367070334",
+    "@tldraw/state-react": "3.8.0-canary.7d3367070334",
+    "@tldraw/store": "3.8.0-canary.7d3367070334",
+    "@tldraw/tlschema": "3.8.0-canary.7d3367070334",
+    "@tldraw/utils": "3.8.0-canary.7d3367070334",
+    "@tldraw/validate": "3.8.0-canary.7d3367070334",
+    "@types/core-js": "^2.5.8",
+    "@use-gesture/react": "^10.3.1",
     "canvas-size": "~2.0.0",
-    "classnames": "^2.3.2",
-    "core-js": "^3.31.1",
+    "classnames": "^2.5.1",
+    "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
     "is-plain-object": "^5.0.0",
     "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@peculiar/webcrypto": "^1.4.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^15.0.6",
-    "@types/benchmark": "^2.1.2",
+    "@peculiar/webcrypto": "^1.5.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^15.0.7",
+    "@types/benchmark": "^2.1.5",
     "@types/canvas-size": "^1.2.2",
-    "@types/wicg-file-system-access": "^2020.9.5",
+    "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
-    "fake-indexeddb": "^4.0.0",
+    "fake-indexeddb": "^4.0.2",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
     "resize-observer-polyfill": "^1.5.1"
   },

package/src/index.ts

@@ -25,6 +25,7 @@ export {
 	useStateTracking,
 	useValue,
 } from '@tldraw/state-react'
+export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
@@ -239,9 +240,21 @@ export {
 	type UiEventType,
 } from './lib/editor/types/event-types'
 export {
-	type TLExternalAssetContent,
+	type TLBaseExternalContent,
+	type TLEmbedExternalContent,
+	type TLErrorExternalContentSource,
+	type TLExcalidrawExternalContentSource,
+	type TLExternalAsset,
 	type TLExternalContent,
 	type TLExternalContentSource,
+	type TLFileExternalAsset,
+	type TLFilesExternalContent,
+	type TLSvgTextExternalContent,
+	type TLTextExternalContent,
+	type TLTextExternalContentSource,
+	type TLTldrawExternalContentSource,
+	type TLUrlExternalAsset,
+	type TLUrlExternalContent,
 } from './lib/editor/types/external-content'
 export {
 	type TLHistoryBatchOptions,

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

@@ -160,7 +160,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				<div className="tl-overlays">
 					<div ref={rHtmlLayer2} className="tl-html-layer">
 						{debugGeometry ? <GeometryDebuggingView /> : null}
-						<HandlesWrapper />
 						<BrushWrapper />
 						<ScribbleWrapper />
 						<ZoomBrushWrapper />
@@ -168,6 +167,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<HintedShapeIndicator />
 						<SnapIndicatorWrapper />
 						<SelectionForegroundWrapper />
+						<HandlesWrapper />
 						<LiveCollaborators />
 					</div>
 				</div>

package/src/lib/config/TLSessionStateSnapshot.ts

@@ -50,7 +50,9 @@ function iOS() {
  * @public
  */
 export const TAB_ID: string = window
-	? window[tabIdKey] ?? getFromSessionStorage(tabIdKey) ?? `TLDRAW_INSTANCE_STATE_V1_` + uniqueId()
+	? (window[tabIdKey] ??
+		getFromSessionStorage(tabIdKey) ??
+		`TLDRAW_INSTANCE_STATE_V1_` + uniqueId())
 	: '<error>'
 if (window) {
 	window[tabIdKey] = TAB_ID

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,
@@ -929,6 +929,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return shapeUtil
 	}
 
+	/**
+	 * Returns true if the editor has a shape util for the given shape / shape type.
+	 *
+	 * @param shape - A shape, shape partial, or shape type.
+	 */
+	hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean
+	hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean
+	hasShapeUtil<T extends ShapeUtil>(
+		type: T extends ShapeUtil<infer R> ? R['type'] : string
+	): boolean
+	hasShapeUtil(arg: string | { type: string }): boolean {
+		const type = typeof arg === 'string' ? arg : arg.type
+		return hasOwnProperty(this.shapeUtils, type)
+	}
+
 	/* ------------------- Binding Utils ------------------ */
 	/**
 	 * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -1666,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()
@@ -1923,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)
@@ -2006,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)
@@ -2067,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(
 			() => {
@@ -2216,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(
 				() => {
@@ -6760,6 +6775,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
+		let didResize = false
+
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
 			const newPagePoint = this._scalePagePoint(
@@ -6798,24 +6815,30 @@ export class Editor extends EventEmitter<TLEventMap> {
 				)
 			}
 
+			const resizedShape = util.onResize(
+				{ ...initialShape, x, y },
+				{
+					newPoint: newLocalPoint,
+					handle: opts.dragHandle ?? 'bottom_right',
+					// don't set isSingle to true for children
+					mode: opts.mode ?? 'scale_shape',
+					scaleX: myScale.x,
+					scaleY: myScale.y,
+					initialBounds,
+					initialShape,
+				}
+			)
+
+			if (resizedShape) {
+				didResize = true
+			}
+
 			workingShape = applyPartialToRecordWithProps(workingShape, {
 				id,
 				type: initialShape.type as any,
 				x: newLocalPoint.x,
 				y: newLocalPoint.y,
-				...util.onResize(
-					{ ...initialShape, x, y },
-					{
-						newPoint: newLocalPoint,
-						handle: opts.dragHandle ?? 'bottom_right',
-						// don't set isSingle to true for children
-						mode: opts.mode ?? 'scale_shape',
-						scaleX: myScale.x,
-						scaleY: myScale.y,
-						initialBounds,
-						initialShape,
-					}
-				),
+				...resizedShape,
 			})
 
 			if (!opts.skipStartAndEndCallbacks) {
@@ -6826,7 +6849,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 
 			this.updateShapes([workingShape])
-		} else {
+		}
+
+		if (!didResize) {
+			// reposition shape (rather than resizing it) based on where its resized center would be
+
 			const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center)
 			// get the model changes from the shape util
 			const newPageCenter = this._scalePagePoint(
@@ -7948,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,
@@ -7980,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
@@ -8050,11 +8075,11 @@ 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]
 	}
 
@@ -8776,8 +8801,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: {},
 					},
@@ -9342,6 +9367,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/shared/resizeScaled.ts

@@ -0,0 +1,61 @@
+import { TLBaseShape } from '@tldraw/tlschema'
+import { exhaustiveSwitchError } from '@tldraw/utils'
+import { Vec } from '../../../primitives/Vec'
+import { TLResizeInfo } from '../ShapeUtil'
+
+/**
+ * Resize a shape that has a scale prop.
+ *
+ * @param shape - The shape to resize
+ * @param info - The resize info
+ *
+ * @public */
+export function resizeScaled(
+	shape: TLBaseShape<any, { scale: number }>,
+	{ initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>
+) {
+	let scaleDelta: number
+	switch (handle) {
+		case 'bottom_left':
+		case 'bottom_right':
+		case 'top_left':
+		case 'top_right': {
+			scaleDelta = Math.max(0.01, Math.max(Math.abs(scaleX), Math.abs(scaleY)))
+			break
+		}
+		case 'left':
+		case 'right': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleX))
+			break
+		}
+		case 'bottom':
+		case 'top': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleY))
+			break
+		}
+		default: {
+			throw exhaustiveSwitchError(handle)
+		}
+	}
+
+	// Compute the offset (if flipped X or flipped Y)
+	const offset = new Vec(0, 0)
+
+	if (scaleX < 0) {
+		offset.x = -(initialBounds.width * scaleDelta)
+	}
+	if (scaleY < 0) {
+		offset.y = -(initialBounds.height * scaleDelta)
+	}
+
+	// Apply the offset to the new point
+	const { x, y } = Vec.Add(newPoint, offset.rot(shape.rotation))
+
+	return {
+		x,
+		y,
+		props: {
+			scale: scaleDelta * shape.props.scale,
+		},
+	}
+}

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,97 @@ 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 type TLExternalContent<EmbedDefinition> =
+	| TLTextExternalContent
+	| TLFilesExternalContent
+	| TLUrlExternalContent
+	| TLSvgTextExternalContent
+	| TLEmbedExternalContent<EmbedDefinition>
+
+/** @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/options.ts

@@ -66,6 +66,11 @@ export interface TldrawOptions {
 	 * external context providers. By default, this is `React.Fragment`.
 	 */
 	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.
+	 */
+	readonly noteShapeResizeMode: 'none' | 'scale'
 }
 
 /** @public */
@@ -111,4 +116,5 @@ export const defaultTldrawOptions = {
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
+	noteShapeResizeMode: 'none',
 } as const satisfies TldrawOptions

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.7a17cab026a3'
+export const version = '3.8.0-canary.7d3367070334'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-28T10:43:47.114Z',
-	patch: '2025-01-28T10:43:47.114Z',
+	minor: '2025-02-03T09:42:24.222Z',
+	patch: '2025-02-03T09:42:24.222Z',
 }