tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/index.ts

@@ -22,19 +22,8 @@ export {
 } from './lib/shapes/shared/PathBuilder'
 export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMotion'
 export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
-export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
-export {
-	TldrawUiColumn,
-	TldrawUiGrid,
-	TldrawUiOrientationProvider,
-	TldrawUiRow,
-	useTldrawUiOrientation,
-	type TldrawUiOrientationContext,
-	type TldrawUiOrientationProviderProps,
-	type TLUiLayoutProps,
-} from './lib/ui/components/primitives/layout'
 export {
 	TldrawUiMenuActionCheckboxItem,
 	type TLUiMenuActionCheckboxItemProps,
@@ -52,7 +41,6 @@ export { TldrawUiTranslationProvider } from './lib/ui/hooks/useTranslation/useTr
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/editor'
 export { ArrowBindingUtil } from './lib/bindings/arrow/ArrowBindingUtil'
-export { TldrawCropHandles, type TldrawCropHandlesProps } from './lib/canvas/TldrawCropHandles'
 export { TldrawHandles } from './lib/canvas/TldrawHandles'
 export { TldrawArrowHints, TldrawOverlays } from './lib/canvas/TldrawOverlays'
 export { TldrawScribble } from './lib/canvas/TldrawScribble'
@@ -83,7 +71,6 @@ export {
 	defaultHandleExternalTldrawContent,
 	defaultHandleExternalUrlAsset,
 	defaultHandleExternalUrlContent,
-	getAssetInfo,
 	getMediaAssetInfoPartial,
 	registerDefaultExternalContentHandlers,
 	type TLDefaultExternalContentHandlerOpts,
@@ -166,9 +153,6 @@ export {
 	type TLDefaultFont,
 	type TLDefaultFonts,
 } from './lib/shapes/shared/defaultFonts'
-export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
-export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
-export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
 export {
 	PlainTextLabel,
 	TextLabel,
@@ -199,7 +183,6 @@ export { TldrawImage, type TldrawImageProps } from './lib/TldrawImage'
 export { EraserTool } from './lib/tools/EraserTool/EraserTool'
 export { HandTool } from './lib/tools/HandTool/HandTool'
 export { LaserTool } from './lib/tools/LaserTool/LaserTool'
-export { getHitShapeOnCanvasPointerDown } from './lib/tools/selection-logic/getHitShapeOnCanvasPointerDown'
 export { SelectTool } from './lib/tools/SelectTool/SelectTool'
 export { ZoomTool } from './lib/tools/ZoomTool/ZoomTool'
 export {
@@ -267,7 +250,6 @@ export {
 	EditSubmenu,
 	ExportFileContentSubMenu,
 	ExtrasGroup,
-	LockGroup,
 	MiscMenuGroup,
 	PreferencesGroup,
 	UndoRedoGroup,
@@ -301,14 +283,12 @@ export {
 	ToggleEdgeScrollingItem,
 	ToggleFocusModeItem,
 	ToggleGridItem,
-	ToggleKeyboardShortcutsItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
 	ToggleReduceMotionItem,
 	ToggleSnapModeItem,
 	ToggleToolLockItem,
 	ToggleTransparentBgMenuItem,
-	ToggleUiLabelsItem,
 	ToggleWrapModeItem,
 	UngroupMenuItem,
 	UnlockAllMenuItem,
@@ -401,11 +381,7 @@ export {
 	type TLUiDropdownMenuSubTriggerProps,
 	type TLUiDropdownMenuTriggerProps,
 } from './lib/ui/components/primitives/TldrawUiDropdownMenu'
-export {
-	TldrawUiIcon,
-	type TLUiIconJsx,
-	type TLUiIconProps,
-} from './lib/ui/components/primitives/TldrawUiIcon'
+export { TldrawUiIcon, type TLUiIconProps } from './lib/ui/components/primitives/TldrawUiIcon'
 export { TldrawUiInput, type TLUiInputProps } from './lib/ui/components/primitives/TldrawUiInput'
 export { TldrawUiKbd, type TLUiKbdProps } from './lib/ui/components/primitives/TldrawUiKbd'
 export {
@@ -427,12 +403,6 @@ export {
 	type TLUiToolbarToggleGroupProps,
 	type TLUiToolbarToggleItemProps,
 } from './lib/ui/components/primitives/TldrawUiToolbar'
-export {
-	TldrawUiTooltip,
-	TldrawUiTooltipProvider,
-	type TldrawUiTooltipProps,
-	type TldrawUiTooltipProviderProps,
-} from './lib/ui/components/primitives/TldrawUiTooltip'
 export {
 	DefaultQuickActions,
 	type TLUiQuickActionsProps,
@@ -493,7 +463,6 @@ export {
 	EraserToolbarItem,
 	FrameToolbarItem,
 	HandToolbarItem,
-	HeartToolbarItem,
 	HexagonToolbarItem,
 	HighlightToolbarItem,
 	LaserToolbarItem,
@@ -524,10 +493,6 @@ export {
 	OverflowingToolbar,
 	type OverflowingToolbarProps,
 } from './lib/ui/components/Toolbar/OverflowingToolbar'
-export {
-	ToggleToolLockedButton,
-	type ToggleToolLockedButtonProps,
-} from './lib/ui/components/Toolbar/ToggleToolLockedButton'
 export {
 	CenteredTopPanelContainer,
 	type CenteredTopPanelContainerProps,
@@ -597,7 +562,7 @@ export {
 	type TLUiToastsContextType,
 	type TLUiToastsProviderProps,
 } from './lib/ui/context/toasts'
-export { useCanRedo, useCanUndo, useUnlockedSelectedShapesCount } from './lib/ui/hooks/menu-hooks'
+export { useCanRedo, useCanUndo } from './lib/ui/hooks/menu-hooks'
 export { useMenuClipboardEvents, useNativeClipboardEvents } from './lib/ui/hooks/useClipboardEvents'
 export {
 	useCollaborationStatus,
@@ -611,9 +576,7 @@ export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
 export { useReadonly } from './lib/ui/hooks/useReadonly'
 export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
 export {
-	onDragFromToolbarToCreateShape,
 	useTools,
-	type OnDragFromToolbarToCreateShapesOpts,
 	type TLUiToolItem,
 	type TLUiToolsContextType,
 	type TLUiToolsProviderProps,

package/src/lib/TldrawImage.tsx

@@ -15,7 +15,6 @@ import { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { defaultBindingUtils } from './defaultBindingUtils'
 import { defaultShapeUtils } from './defaultShapeUtils'
 import { TLUiAssetUrlOverrides } from './ui/assetUrls'
-import { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'
 
 /** @public */
@@ -112,7 +111,6 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		assetUrls,
 		textOptions = defaultTextOptions,
 	} = props
-	const assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls)
 
 	useLayoutEffect(() => {
 		if (!container) return
@@ -131,7 +129,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 			tools: [],
 			getContainer: () => tempElm,
 			licenseKey,
-			fontAssetUrls: assetUrlsWithOverrides.fonts,
+			fontAssetUrls: assetUrls?.fonts,
 			textOptions,
 		})
 
@@ -140,8 +138,6 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		const shapeIds = editor.getCurrentPageShapeIds()
 
 		async function setSvg() {
-			// We have to wait for the fonts to load so that we can correctly measure text sizes
-			await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
 			const imageResult = await editor.toImage([...shapeIds], {
 				bounds,
 				scale,
@@ -179,7 +175,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		preserveAspectRatio,
 		licenseKey,
 		pixelRatio,
-		assetUrlsWithOverrides,
+		assetUrls,
 		textOptions,
 	])
 

package/src/lib/canvas/TldrawCropHandles.tsx

@@ -2,7 +2,6 @@ import { toDomPrecision } from '@tldraw/editor'
 import classNames from 'classnames'
 import { useTranslation } from '../ui/hooks/useTranslation/useTranslation'
 
-/** @public */
 export interface TldrawCropHandlesProps {
 	size: number
 	width: number
@@ -10,7 +9,6 @@ export interface TldrawCropHandlesProps {
 	hideAlternateHandles: boolean
 }
 
-/** @public @react */
 export function TldrawCropHandles({
 	size,
 	width,
@@ -22,7 +20,7 @@ export function TldrawCropHandles({
 	const msg = useTranslation()
 
 	return (
-		<svg className="tl-overlays__item" aria-hidden="true">
+		<svg className="tl-overlays__item">
 			{/* Top left */}
 			<polyline
 				className="tl-corner-crop-handle"

package/src/lib/canvas/TldrawHandles.tsx

@@ -23,9 +23,5 @@ export function TldrawHandles({ children }: TLHandlesProps) {
 
 	if (!shouldDisplayHandles) return null
 
-	return (
-		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
-			{children}
-		</svg>
-	)
+	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
 }

package/src/lib/canvas/TldrawOverlays.tsx

@@ -60,7 +60,7 @@ export function TldrawArrowHints() {
 			{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}
 
 			{showEdgeHints && (
-				<svg className="tl-overlays__item" aria-hidden="true">
+				<svg className="tl-overlays__item">
 					<circle
 						cx={anchorInPageSpace.x}
 						cy={anchorInPageSpace.y}

package/src/lib/canvas/TldrawScribble.tsx

@@ -31,7 +31,7 @@ export function TldrawScribble({ scribble, zoom, color, opacity, className }: TL
 			<path
 				className="tl-scribble"
 				d={d}
-				fill={color ?? `var(--tl-color-${scribble.color})`}
+				fill={color ?? `var(--color-${scribble.color})`}
 				opacity={opacity ?? scribble.opacity}
 			/>
 		</svg>

package/src/lib/canvas/TldrawSelectionForeground.tsx

@@ -192,11 +192,7 @@ export const TldrawSelectionForeground = track(function TldrawSelectionForegroun
 		textHandleHeight * zoom >= 4
 
 	return (
-		<svg
-			className="tl-overlays__item tl-selection__fg"
-			data-testid="selection-foreground"
-			aria-hidden="true"
-		>
+		<svg className="tl-overlays__item tl-selection__fg" data-testid="selection-foreground">
 			<g ref={rSvg}>
 				{shouldDisplayBox && (
 					<rect

package/src/lib/defaultExternalContentHandlers.ts

@@ -915,8 +915,7 @@ function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts)
 	return true
 }
 
-/** @public */
-export async function getAssetInfo(
+async function getAssetInfo(
 	file: File,
 	options: TLDefaultExternalContentHandlerOpts,
 	assetId?: TLAssetId

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -1,5 +1,4 @@
 import { TLArrowShape, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { updateArrowTargetState } from './arrowTargetState'
@@ -13,7 +12,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -1,5 +1,4 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
@@ -14,7 +13,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
 	clearTimeout(id)
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -243,7 +242,7 @@ describe('When pointing an end shape', () => {
 			},
 		})
 
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -307,7 +306,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Give time for the velocity to die down
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -1,5 +1,4 @@
-import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
-import { vi } from 'vitest'
+import { HALF_PI, TLArrowShape, TLShapeId, createShapeId } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
 
@@ -13,7 +12,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)
@@ -218,7 +217,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -228,7 +227,7 @@ describe('Other cases when arrow are moved', () => {
 		// maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
 		editor.select(ids.arrow1, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: true } },
@@ -245,7 +244,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -255,7 +254,7 @@ describe('Other cases when arrow are moved', () => {
 		// unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
 		editor.select(ids.arrow1, ids.box3, ids.box4)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		// The arrow didn't actually move
 		expect(bindings()).toMatchObject({
@@ -266,7 +265,7 @@ describe('Other cases when arrow are moved', () => {
 		// The arrow will not move because it is still bound to another shape
 		editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: undefined,
@@ -334,7 +333,7 @@ describe('Arrow labels', () => {
 		editor.setCurrentTool('arrow').pointerDown(10, 10).pointerMove(100, 100).pointerUp()
 		const arrowId = editor.getOnlySelectedShape()!.id
 		editor.updateShapes<TLArrowShape>([
-			{ id: arrowId, type: 'arrow', props: { richText: toRichText('Test Label') } },
+			{ id: arrowId, type: 'arrow', props: { text: 'Test Label' } },
 		])
 	})
 
@@ -342,7 +341,7 @@ describe('Arrow labels', () => {
 		const arrowId = editor.getOnlySelectedShape()!.id
 		expect(arrow(arrowId)).toMatchObject({
 			props: {
-				richText: toRichText('Test Label'),
+				text: 'Test Label',
 			},
 		})
 	})
@@ -350,11 +349,11 @@ describe('Arrow labels', () => {
 	it('should update the label of an arrow', () => {
 		const arrowId = editor.getOnlySelectedShape()!.id
 		editor.updateShapes<TLArrowShape>([
-			{ id: arrowId, type: 'arrow', props: { richText: toRichText('New Label') } },
+			{ id: arrowId, type: 'arrow', props: { text: 'New Label' } },
 		])
 		expect(arrow(arrowId)).toMatchObject({
 			props: {
-				richText: toRichText('New Label'),
+				text: 'New Label',
 			},
 		})
 	})

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -31,16 +31,13 @@ import {
 	clamp,
 	debugFlags,
 	exhaustiveSwitchError,
-	getColorValue,
 	getDefaultColorTheme,
-	getFontsFromRichText,
 	invLerp,
 	lerp,
 	mapObjectMapValues,
 	maybeSnapToGrid,
 	structuredClone,
 	toDomPrecision,
-	toRichText,
 	track,
 	useEditor,
 	useIsEditing,
@@ -49,11 +46,12 @@ import {
 } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import { updateArrowTerminal } from '../../bindings/arrow/ArrowBindingUtil'
-import { isEmptyRichText, renderPlaintextFromRichText } from '../../utils/text/richText'
 import { PathBuilder } from '../shared/PathBuilder'
-import { RichTextLabel, RichTextSVG } from '../shared/RichTextLabel'
+import { PlainTextLabel } from '../shared/PlainTextLabel'
 import { ShapeFill } from '../shared/ShapeFill'
+import { SvgTextLabel } from '../shared/SvgTextLabel'
 import { ARROW_LABEL_PADDING, STROKE_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
+import { DefaultFontFaces } from '../shared/defaultFonts'
 import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
 import { getArrowBodyPath, getArrowHandlePath } from './ArrowPath'
@@ -132,6 +130,10 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	override canSnap() {
 		return false
 	}
+	override canTabTo(shape: TLArrowShape) {
+		const bindings = getArrowBindings(this.editor, shape)
+		return !!(bindings.start || bindings.end || shape.props.text)
+	}
 	override hideResizeHandles() {
 		return true
 	}
@@ -158,13 +160,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	}
 
 	override getFontFaces(shape: TLArrowShape) {
-		if (isEmptyRichText(shape.props.richText)) return EMPTY_ARRAY
-
-		return getFontsFromRichText(this.editor, shape.props.richText, {
-			family: `tldraw_${shape.props.font}`,
-			weight: 'normal',
-			style: 'normal',
-		})
+		if (!shape.props.text) return EMPTY_ARRAY
+		return [DefaultFontFaces[`tldraw_${shape.props.font}`].normal.normal]
 	}
 
 	override getDefaultProps(): TLArrowShape['props'] {
@@ -181,7 +178,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 			end: { x: 2, y: 0 },
 			arrowheadStart: 'none',
 			arrowheadEnd: 'arrow',
-			richText: toRichText(''),
+			text: '',
 			labelPosition: 0.5,
 			font: 'draw',
 			scale: 1,
@@ -211,7 +208,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					: new Polyline2d({ points: info.route.points })
 
 		let labelGeom
-		if (isEditing || !isEmptyRichText(shape.props.richText)) {
+		if (isEditing || shape.props.text.trim()) {
 			const labelPosition = getArrowLabelPosition(this.editor, shape)
 			if (debugFlags.debugGeometry.get()) {
 				debugGeom.push(...labelPosition.debugGeom)
@@ -283,7 +280,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	}
 
 	override getText(shape: TLArrowShape) {
-		return renderPlaintextFromRichText(this.editor, shape.props.richText)
+		return shape.props.text
 	}
 
 	override onHandleDrag(shape: TLArrowShape, info: TLHandleDragInfo<TLArrowShape>) {
@@ -764,7 +761,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		const labelPosition = getArrowLabelPosition(this.editor, shape)
 		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
 		const isEditing = this.editor.getEditingShapeId() === shape.id
-		const showArrowLabel = isEditing || !isEmptyRichText(shape.props.richText)
+		const showArrowLabel = isEditing || shape.props.text
 
 		return (
 			<>
@@ -778,16 +775,17 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					)}
 				</SVGContainer>
 				{showArrowLabel && (
-					<RichTextLabel
+					<PlainTextLabel
 						shapeId={shape.id}
+						classNamePrefix="tl-arrow"
 						type="arrow"
 						font={shape.props.font}
 						fontSize={getArrowLabelFontSize(shape)}
 						lineHeight={TEXT_PROPS.lineHeight}
 						align="middle"
 						verticalAlign="middle"
-						labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
-						richText={shape.props.richText}
+						text={shape.props.text}
+						labelColor={theme[shape.props.labelColor].solid}
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
 						isSelected={isSelected}
 						padding={0}
@@ -812,9 +810,9 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		const { start, end } = getArrowTerminalsInArrowSpace(this.editor, shape, info?.bindings)
 		const geometry = this.editor.getShapeGeometry<Group2d>(shape)
 		const bounds = geometry.bounds
-		const isEmpty = isEmptyRichText(shape.props.richText)
 
-		const labelGeometry = isEditing || !isEmpty ? (geometry.children[1] as Rectangle2d) : null
+		const labelGeometry =
+			isEditing || shape.props.text.trim() ? (geometry.children[1] as Rectangle2d) : null
 
 		if (Vec.Equals(start, end)) return null
 
@@ -853,7 +851,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					<defs>
 						<ArrowClipPath
 							radius={3.5 * shape.props.scale}
-							hasText={!isEmpty}
+							hasText={shape.props.text.trim().length > 0}
 							bounds={bounds}
 							labelBounds={labelBounds}
 							as={clipStartArrowhead && as ? as : ''}
@@ -911,7 +909,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	}
 
 	override onEditStart(shape: TLArrowShape) {
-		if (isEmptyRichText(shape.props.richText)) {
+		if (shape.props.text.trim() === '') {
 			// editing text for the first time, so set the position to the default:
 			const labelPosition = getArrowLabelDefaultPosition(this.editor, shape)
 			this.editor.updateShape<TLArrowShape>({
@@ -922,6 +920,26 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		}
 	}
 
+	override onEditEnd(shape: TLArrowShape) {
+		const {
+			id,
+			type,
+			props: { text },
+		} = shape
+
+		if (text.trimEnd() !== shape.props.text) {
+			this.editor.updateShapes<TLArrowShape>([
+				{
+					id,
+					type,
+					props: {
+						text: text.trimEnd(),
+					},
+				},
+			])
+		}
+	}
+
 	override toSvg(shape: TLArrowShape, ctx: SvgExportContext) {
 		ctx.addExportDef(getFillDefForExport(shape.props.fill))
 		const theme = getDefaultColorTheme(ctx)
@@ -930,18 +948,17 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		return (
 			<g transform={`scale(${scaleFactor})`}>
 				<ArrowSvg shape={shape} shouldDisplayHandles={false} />
-				<RichTextSVG
+				<SvgTextLabel
 					fontSize={getArrowLabelFontSize(shape)}
 					font={shape.props.font}
 					align="middle"
 					verticalAlign="middle"
-					labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
-					richText={shape.props.richText}
+					text={shape.props.text}
+					labelColor={theme[shape.props.labelColor].solid}
 					bounds={getArrowLabelPosition(this.editor, shape)
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
 					padding={0}
-					showTextOutline={true}
 				/>
 			</g>
 		)
@@ -1017,7 +1034,6 @@ const ArrowSvg = track(function ArrowSvg({
 	if (!geometry) return null
 	const bounds = Box.ZeroFix(geometry.bounds)
 	const bindings = getArrowBindings(editor, shape)
-	const isEmpty = isEmptyRichText(shape.props.richText)
 
 	if (!info?.isValid) return null
 
@@ -1068,7 +1084,7 @@ const ArrowSvg = track(function ArrowSvg({
 				<clipPath id={clipPathId}>
 					<ArrowClipPath
 						radius={3.5 * shape.props.scale}
-						hasText={isEditing || !isEmpty}
+						hasText={isEditing || shape.props.text.trim().length > 0}
 						bounds={bounds}
 						labelBounds={labelPosition.box}
 						as={clipStartArrowhead && as ? as : ''}
@@ -1078,7 +1094,7 @@ const ArrowSvg = track(function ArrowSvg({
 			</defs>
 			<g
 				fill="none"
-				stroke={getColorValue(theme, shape.props.color, 'solid')}
+				stroke={theme[shape.props.color].solid}
 				strokeWidth={strokeWidth}
 				strokeLinejoin="round"
 				strokeLinecap="round"

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

@@ -9,17 +9,13 @@ 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,
@@ -63,18 +59,14 @@ const labelSizeCache = createComputedCache(
 
 		const bodyGeom = getArrowBodyGeometry(editor, shape)
 		// We use 'i' as a default label to measure against as a minimum width.
-		const isEmpty = isEmptyRichText(shape.props.richText)
-		const html = renderHtmlFromRichTextForMeasurement(
-			editor,
-			isEmpty ? toRichText('i') : shape.props.richText
-		)
+		const text = shape.props.text || 'i'
 
 		const bodyBounds = bodyGeom.bounds
 
 		const fontSize = getArrowLabelFontSize(shape)
 
 		// First we measure the text with no constraints
-		const { w, h } = editor.textMeasure.measureHtml(html, {
+		const { w, h } = editor.textMeasure.measureText(text, {
 			...TEXT_PROPS,
 			fontFamily: FONT_FAMILIES[shape.props.font],
 			fontSize,
@@ -104,7 +96,7 @@ const labelSizeCache = createComputedCache(
 		}
 
 		if (shouldSquish) {
-			const { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureHtml(html, {
+			const { w: squishedWidth, h: squishedHeight } = editor.textMeasure.measureText(text, {
 				...TEXT_PROPS,
 				fontFamily: FONT_FAMILIES[shape.props.font],
 				fontSize,
@@ -300,15 +292,3 @@ 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)
-}