tldraw 3.15.0 → 3.16.0-next.c30b1b5e551a

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -9,13 +9,17 @@ import {
 	Polygon2d,
 	Polyline2d,
 	TLArrowShape,
+	TLShape,
 	Vec,
 	VecLike,
 	clamp,
 	createComputedCache,
 	exhaustiveSwitchError,
 	getChangedKeys,
+	pointInPolygon,
+	toRichText,
 } from '@tldraw/editor'
+import { isEmptyRichText, renderHtmlFromRichTextForMeasurement } from '../../utils/text/richText'
 import {
 	ARROW_LABEL_FONT_SIZES,
 	ARROW_LABEL_PADDING,
@@ -59,14 +63,18 @@ const labelSizeCache = createComputedCache(
 
 		const bodyGeom = getArrowBodyGeometry(editor, shape)
 		// We use 'i' as a default label to measure against as a minimum width.
-		const text = shape.props.text || 'i'
+		const isEmpty = isEmptyRichText(shape.props.richText)
+		const html = renderHtmlFromRichTextForMeasurement(
+			editor,
+			isEmpty ? toRichText('i') : shape.props.richText
+		)
 
 		const bodyBounds = bodyGeom.bounds
 
 		const fontSize = getArrowLabelFontSize(shape)
 
 		// First we measure the text with no constraints
-		const { w, h } = editor.textMeasure.measureText(text, {
+		const { w, h } = editor.textMeasure.measureHtml(html, {
 			...TEXT_PROPS,
 			fontFamily: FONT_FAMILIES[shape.props.font],
 			fontSize,
@@ -96,7 +104,7 @@ const labelSizeCache = createComputedCache(
 		}
 
 		if (shouldSquish) {
-			const { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureText(text, {
+			const { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureHtml(html, {
 				...TEXT_PROPS,
 				fontFamily: FONT_FAMILIES[shape.props.font],
 				fontSize,
@@ -292,3 +300,15 @@ export function getArrowLabelDefaultPosition(editor: Editor, shape: TLArrowShape
 			exhaustiveSwitchError(info, 'type')
 	}
 }
+
+/** @internal */
+export function isOverArrowLabel(editor: Editor, shape: TLShape) {
+	if (!editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return false
+
+	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)
+	// How should we handle multiple labels? Do shapes ever have multiple labels?
+	const labelGeometry = editor.getShapeGeometry<Group2d>(shape).children[1]
+	// Knowing what we know about arrows... if the shape has no text in its label,
+	// then the label geometry should not be there.
+	return labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)
+}

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

@@ -118,6 +118,7 @@ export class Pointing extends StateNode {
 		const change = util.onHandleDrag?.(shape, {
 			handle: { ...startHandle, x: 0, y: 0 },
 			isPrecise: true,
+			isCreatingShape: true,
 			initial: initial,
 		})
 
@@ -145,6 +146,7 @@ export class Pointing extends StateNode {
 			const change = util.onHandleDrag?.(shape, {
 				handle: { ...startHandle, x: 0, y: 0 },
 				isPrecise: this.isPrecise,
+				isCreatingShape: true,
 				initial: initial,
 			})
 
@@ -162,6 +164,7 @@ export class Pointing extends StateNode {
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },
 				isPrecise: false,
+				isCreatingShape: true,
 				initial: initial,
 			})
 

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -145,8 +145,6 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	}
 
 	override onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
-		// we should only ever be dragging vertex handles
-		if (handle.type !== 'vertex') return
 		const newPoint = maybeSnapToGrid(new Vec(handle.x, handle.y), this.editor)
 		return {
 			...shape,
@@ -160,6 +158,25 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 		}
 	}
 
+	override onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
+		// For line shapes, if we're dragging a "create" handle, then
+		// create a new vertex handle at that point; and make this handle
+		// the handle that we're dragging.
+		if (handle.type === 'create') {
+			return {
+				...shape,
+				props: {
+					...shape.props,
+					points: {
+						...shape.props.points,
+						[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
+					},
+				},
+			}
+		}
+		return
+	}
+
 	component(shape: TLLineShape) {
 		return (
 			<SVGContainer style={{ minWidth: 50, minHeight: 50 }}>

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

@@ -1,4 +1,5 @@
 import {
+	Mat,
 	StateNode,
 	TLArrowShape,
 	TLHandle,
@@ -26,20 +27,20 @@ export type DraggingHandleInfo = TLPointerEventInfo & {
 export class DraggingHandle extends StateNode {
 	static override id = 'dragging_handle'
 
-	shapeId = '' as TLShapeId
-	initialHandle = {} as TLHandle
-	initialAdjacentHandle = null as TLHandle | null
-	initialPagePoint = {} as Vec
+	shapeId!: TLShapeId
+	initialHandle!: TLHandle
+	initialAdjacentHandle!: TLHandle | null
+	initialPagePoint!: Vec
 
-	markId = ''
-	initialPageTransform: any
-	initialPageRotation: any
+	markId!: string
+	initialPageTransform!: Mat
+	initialPageRotation!: number
 
-	info = {} as DraggingHandleInfo
+	info!: DraggingHandleInfo
 
 	isPrecise = false
-	isPreciseId = null as TLShapeId | null
-	pointingId = null as TLShapeId | null
+	isPreciseId: TLShapeId | null = null
+	pointingId: TLShapeId | null = null
 
 	override onEnter(info: DraggingHandleInfo) {
 		const { shape, isCreating, creatingMarkId, handle } = info
@@ -66,26 +67,6 @@ export class DraggingHandle extends StateNode {
 
 		this.initialHandle = structuredClone(handle)
 
-		if (this.editor.isShapeOfType<TLLineShape>(shape, 'line')) {
-			// For line shapes, if we're dragging a "create" handle, then
-			// create a new vertex handle at that point; and make this handle
-			// the handle that we're dragging.
-			if (this.initialHandle.type === 'create') {
-				this.editor.updateShape({
-					...shape,
-					props: {
-						points: {
-							...shape.props.points,
-							[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
-						},
-					},
-				})
-				const handlesAfter = this.editor.getShapeHandles(shape)!
-				const handleAfter = handlesAfter.find((h) => h.index === handle.index)!
-				this.initialHandle = structuredClone(handleAfter)
-			}
-		}
-
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
 		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
@@ -135,6 +116,19 @@ export class DraggingHandle extends StateNode {
 		}
 		// -->
 
+		// Call onHandleDragStart callback
+		const handleDragInfo = {
+			handle: this.initialHandle,
+			isPrecise: this.isPrecise,
+			isCreatingShape: !!this.info.isCreating,
+			initial: shape,
+		}
+		const util = this.editor.getShapeUtil(shape)
+		const startChanges = util.onHandleDragStart?.(shape, handleDragInfo)
+		if (startChanges) {
+			this.editor.updateShapes([{ ...startChanges, id: shape.id, type: shape.type }])
+		}
+
 		this.update()
 
 		this.editor.select(this.shapeId)
@@ -204,6 +198,22 @@ export class DraggingHandle extends StateNode {
 		this.editor.snaps.clearIndicators()
 		kickoutOccludedShapes(this.editor, [this.shapeId])
 
+		// Call onHandleDragEnd callback before state transitions
+		const shape = this.editor.getShape(this.shapeId)
+		if (shape) {
+			const util = this.editor.getShapeUtil(shape)
+			const handleDragInfo = {
+				handle: this.initialHandle,
+				isPrecise: this.isPrecise,
+				isCreatingShape: !!this.info.isCreating,
+				initial: this.info.shape,
+			}
+			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
+			if (endChanges) {
+				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
+			}
+		}
+
 		const { onInteractionEnd } = this.info
 		if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
 			// Return to the tool that was active before this one,
@@ -216,6 +226,19 @@ export class DraggingHandle extends StateNode {
 	}
 
 	private cancel() {
+		// Call onHandleDragCancel callback before bailing to mark
+		const shape = this.editor.getShape(this.shapeId)
+		if (shape) {
+			const util = this.editor.getShapeUtil(shape)
+			const handleDragInfo = {
+				handle: this.initialHandle,
+				isPrecise: this.isPrecise,
+				isCreatingShape: !!this.info.isCreating,
+				initial: this.info.shape,
+			}
+			util.onHandleDragCancel?.(shape, handleDragInfo)
+		}
+
 		this.editor.bailToMark(this.markId)
 		this.editor.snaps.clearIndicators()
 
@@ -284,6 +307,7 @@ export class DraggingHandle extends StateNode {
 		const changes = util.onHandleDrag?.(shape, {
 			handle: nextHandle,
 			isPrecise: this.isPrecise || altKey,
+			isCreatingShape: !!this.info.isCreating,
 			initial: initial,
 		})
 

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -1,9 +1,7 @@
 import {
 	Editor,
-	Group2d,
 	StateNode,
 	TLAdjacentDirection,
-	TLArrowShape,
 	TLClickEventInfo,
 	TLGroupShape,
 	TLKeyboardEventInfo,
@@ -18,6 +16,7 @@ import {
 	pointInPolygon,
 	toRichText,
 } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
@@ -98,12 +97,6 @@ export class Idle extends StateNode {
 			case 'shape': {
 				const { shape } = info
 
-				if (this.isOverArrowLabelTest(shape)) {
-					// We're moving the label on a shape.
-					this.parent.transition('pointing_arrow_label', info)
-					break
-				}
-
 				if (this.editor.isShapeOrAncestorLocked(shape)) {
 					this.parent.transition('pointing_canvas', info)
 					break
@@ -595,22 +588,7 @@ export class Idle extends StateNode {
 	isOverArrowLabelTest(shape: TLShape | undefined) {
 		if (!shape) return false
 
-		// todo: Extract into general hit test for arrows
-		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
-			const pointInShapeSpace = this.editor.getPointInShapeSpace(
-				shape,
-				this.editor.inputs.currentPagePoint
-			)
-			// How should we handle multiple labels? Do shapes ever have multiple labels?
-			const labelGeometry = this.editor.getShapeGeometry<Group2d>(shape).children[1]
-			// Knowing what we know about arrows... if the shape has no text in its label,
-			// then the label geometry should not be there.
-			if (labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)) {
-				return true
-			}
-		}
-
-		return false
+		return isOverArrowLabel(this.editor, shape)
 	}
 
 	handleDoubleClickOnCanvas(info: TLClickEventInfo) {

package/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -1,4 +1,5 @@
 import { StateNode, TLPointerEventInfo, TLShape } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
 export class PointingShape extends StateNode {
@@ -210,6 +211,12 @@ export class PointingShape extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
+			if (isOverArrowLabel(this.editor, this.hitShape)) {
+				// We're moving the label on a shape.
+				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })
+				return
+			}
+
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -122,8 +122,19 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
-		// Restore initial models
+		// Call onResizeCancel callback before resetting
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onResizeCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
+
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
 		} else {

package/src/lib/tools/SelectTool/childStates/Rotating.ts

@@ -109,6 +109,17 @@ export class Rotating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onRotateCancel callback before bailing to mark
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onRotateCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -203,6 +203,17 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onTranslateCancel callback before resetting
+		const { movingShapes } = this.snapshot
+
+		movingShapes.forEach((shape) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onTranslateCancel?.(shape, current)
+			}
+		})
+
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,5 +1,6 @@
 import { Editor, TLShape } from '@tldraw/editor'
 
+/** @public */
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,
 	hitLabels = false

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -210,6 +210,38 @@ export function DefaultKeyboardShortcutsDialogContent() {
 						/* do nothing */
 					}}
 				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-cw"
+					label="a11y.rotate-shape-cw"
+					kbd="shift+﹥"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-cw-fine"
+					label="a11y.rotate-shape-cw-fine"
+					kbd="shift+alt+﹥"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-ccw"
+					label="a11y.rotate-shape-ccw"
+					kbd="shift+﹤"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-ccw-fine"
+					label="a11y.rotate-shape-ccw-fine"
+					kbd="shift+alt+﹤"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
 				<TldrawUiMenuActionItem actionId="enlarge-shapes" />
 				<TldrawUiMenuActionItem actionId="shrink-shapes" />
 				<TldrawUiMenuActionItem actionId="a11y-repeat-shape-announce" />

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -6,10 +6,12 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 
-interface ToggleToolLockedButtonProps {
+/** @public */
+export interface ToggleToolLockedButtonProps {
 	activeToolId?: string
 }
 
+/** @public @react */
 export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()

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

@@ -86,6 +86,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 						aria-valuemin={(min ?? 0) * ariaValueModifier}
 						aria-valuenow={value * ariaValueModifier}
 						aria-valuemax={steps * ariaValueModifier}
+						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}

package/src/lib/ui/context/actions.tsx

@@ -1037,17 +1037,20 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-cw',
 				label: 'action.rotate-cw',
 				icon: 'rotate-cw',
+				kbd: 'shift+.,shift+alt+.',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-cw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
-						const dontUseOffset = approximately(offset, 0) || approximately(offset, HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
+						const dontUseOffset = approximately(offset, 0) || approximately(offset, rotation)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, HALF_PI / 2 - (dontUseOffset ? 0 : offset))
+						editor.rotateShapesBy(selectedShapeIds, rotation - (dontUseOffset ? 0 : offset))
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},
@@ -1056,17 +1059,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-ccw',
 				label: 'action.rotate-ccw',
 				icon: 'rotate-ccw',
+				// omg double comma
+				kbd: 'shift+,,shift+alt+,',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-ccw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
 						const offsetCloseToZero = approximately(offset, 0)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -(HALF_PI / 2) : -offset)
+						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -rotation : -offset)
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},

package/src/lib/ui/context/events.tsx

@@ -76,8 +76,8 @@ export interface TLUiEventMap {
 	'delete-shapes': null
 	'select-all-shapes': null
 	'select-none-shapes': null
-	'rotate-ccw': null
-	'rotate-cw': null
+	'rotate-ccw': { fine: boolean }
+	'rotate-cw': { fine: boolean }
 	'zoom-in': { towardsCursor: boolean }
 	'zoom-out': { towardsCursor: boolean }
 	'zoom-to-fit': null

package/src/lib/ui/hooks/menu-hooks.ts

@@ -123,6 +123,7 @@ export function useAnySelectedShapesCount(min?: number, max?: number) {
 
 /**
  * Returns true if the number of UNLOCKED selected shapes is at least min or at most max.
+ * @public
  */
 export function useUnlockedSelectedShapesCount(min?: number, max?: number) {
 	const editor = useEditor()

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -286,6 +286,10 @@ export type TLUiTranslationKey =
 	| 'a11y.repeat-shape'
 	| 'a11y.move-shape'
 	| 'a11y.move-shape-faster'
+	| 'a11y.rotate-shape-cw'
+	| 'a11y.rotate-shape-ccw'
+	| 'a11y.rotate-shape-cw-fine'
+	| 'a11y.rotate-shape-ccw-fine'
 	| 'a11y.enlarge-shape'
 	| 'a11y.shrink-shape'
 	| 'a11y.pan-camera'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -287,6 +287,10 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.repeat-shape': 'Repeat shape',
 	'a11y.move-shape': 'Move shape',
 	'a11y.move-shape-faster': 'Move shape faster',
+	'a11y.rotate-shape-cw': 'Rotate shape clockwise',
+	'a11y.rotate-shape-ccw': 'Rotate shape counterclockwise',
+	'a11y.rotate-shape-cw-fine': 'Rotate shape clockwise (fine)',
+	'a11y.rotate-shape-ccw-fine': 'Rotate shape counterclockwise (fine)',
 	'a11y.enlarge-shape': 'Enlarge shape',
 	'a11y.shrink-shape': 'Shrink shape',
 	'a11y.pan-camera': 'Pan camera',

package/src/lib/ui/kbd-utils.ts

@@ -2,6 +2,7 @@ import { tlenv } from '@tldraw/editor'
 
 // N.B. We rework these Windows placeholders down below.
 const cmdKey = tlenv.isDarwin ? '⌘' : '__CTRL__'
+const ctrlKey = tlenv.isDarwin ? '⌃' : '__CTRL__'
 const altKey = tlenv.isDarwin ? '⌥' : '__ALT__'
 
 /** @public */
@@ -19,7 +20,7 @@ export function kbd(str: string) {
 					? s.replace(/[[\]]/g, '')
 					: s
 							.replace(/cmd\+/g, cmdKey)
-							.replace(/ctrl\+/g, cmdKey)
+							.replace(/ctrl\+/g, ctrlKey)
 							.replace(/alt\+/g, altKey)
 							.replace(/shift\+/g, '⇧')
 							// Backwards compatibility with the old system.

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.15.0'
+export const version = '3.16.0-next.c30b1b5e551a'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-30T09:07:27.887Z',
-	patch: '2025-07-30T09:07:27.887Z',
+	minor: '2025-07-30T09:52:11.036Z',
+	patch: '2025-07-30T09:52:11.036Z',
 }

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -149,13 +149,20 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
       "kind": "arc",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -315,13 +322,20 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
       "kind": "elbow",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -221,7 +221,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						text,
+						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
 						dash: getDash(element),