tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

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

@@ -32,14 +32,12 @@ import {
 	debugFlags,
 	exhaustiveSwitchError,
 	getDefaultColorTheme,
-	getFontsFromRichText,
 	invLerp,
 	lerp,
 	mapObjectMapValues,
 	maybeSnapToGrid,
 	structuredClone,
 	toDomPrecision,
-	toRichText,
 	track,
 	useEditor,
 	useIsEditing,
@@ -48,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'
@@ -131,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
 	}
@@ -157,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'] {
@@ -180,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,
@@ -210,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)
@@ -282,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>) {
@@ -763,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 (
 			<>
@@ -777,15 +775,16 @@ 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"
-						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}
@@ -811,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
 
@@ -852,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 : ''}
@@ -910,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>({
@@ -921,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)
@@ -929,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"
-					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>
 		)
@@ -1016,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
 
@@ -1067,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 : ''}

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)
-}

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

@@ -94,7 +94,7 @@ export function updateArrowTargetState({
 	const target = editor.getShapeAtPoint(pointInPageSpace, {
 		hitInside: true,
 		hitFrameInside: true,
-		margin: arrowKind === 'elbow' ? 8 : [8, 0],
+		margin: arrowKind === 'elbow' ? 8 : 0,
 		filter: (targetShape) => {
 			return (
 				!targetShape.isLocked &&
@@ -187,7 +187,6 @@ export function updateArrowTargetState({
 	}
 
 	const shouldSnapCenter = !isExact && precise && targetGeometryInTargetSpace.isClosed
-	// const shouldSnapEdges = !isExact && (precise || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdges =
 		!isExact && ((precise && arrowKind === 'elbow') || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdgePoints =

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

@@ -118,7 +118,6 @@ export class Pointing extends StateNode {
 		const change = util.onHandleDrag?.(shape, {
 			handle: { ...startHandle, x: 0, y: 0 },
 			isPrecise: true,
-			isCreatingShape: true,
 			initial: initial,
 		})
 
@@ -146,7 +145,6 @@ export class Pointing extends StateNode {
 			const change = util.onHandleDrag?.(shape, {
 				handle: { ...startHandle, x: 0, y: 0 },
 				isPrecise: this.isPrecise,
-				isCreatingShape: true,
 				initial: initial,
 			})
 
@@ -164,7 +162,6 @@ 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/draw/DrawShapeUtil.tsx

@@ -51,6 +51,10 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 		maxPointsPerShape: 600,
 	}
 
+	override canTabTo() {
+		return false
+	}
+
 	override hideResizeHandles(shape: TLDrawShape) {
 		return getIsDot(shape)
 	}

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -219,6 +219,9 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 			[shape.id]
 		)
 
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const zoomLevel = useValue('zoom level', () => this.editor.getZoomLevel(), [this.editor])
+
 		const showFrameColors = this.options.showColors
 
 		const color = theme[shape.props.color]
@@ -233,13 +236,12 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 				<SVGContainer>
 					<rect
 						className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
+						width={shape.props.w + 1 / zoomLevel}
+						height={shape.props.h + 1 / zoomLevel}
 						fill={frameFill}
 						stroke={frameStroke}
-						style={{
-							width: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,
-							height: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,
-							transform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,
-						}}
+						y={-0.5 / zoomLevel}
+						x={-0.5 / zoomLevel}
 					/>
 				</SVGContainer>
 				{isCreating ? null : (

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -51,6 +51,9 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		overlayOpacity: 0.35,
 	}
 
+	override canTabTo() {
+		return false
+	}
 	override hideResizeHandles(shape: TLHighlightShape) {
 		return getIsDot(shape)
 	}

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

@@ -35,6 +35,9 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	static override props = lineShapeProps
 	static override migrations = lineShapeMigrations
 
+	override canTabTo() {
+		return false
+	}
 	override hideResizeHandles() {
 		return true
 	}
@@ -145,6 +148,8 @@ 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,
@@ -158,25 +163,6 @@ 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/shapes/note/NoteShapeUtil.tsx

@@ -346,7 +346,6 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				labelColor={theme[shape.props.color].note.text}
 				bounds={bounds}
 				padding={LABEL_PADDING}
-				showTextOutline={false}
 			/>
 		)
 

package/src/lib/shapes/shared/PathBuilder.test.tsx

@@ -138,7 +138,7 @@ describe('PathBuilder', () => {
 				.toGeometry()
 
 			expect(geometry?.toSimpleSvgPath()).toMatchInlineSnapshot(
-				`"M0,0L100,100L100,0L84.92197106154207,-11.50593202657044L67.93757691512266,-18.409491194065584L50.000000178767834,-20.71067750830319L32.06242347050369,-18.409490975101022L15.078029408356239,-11.505931600276853L6.103515630684342e-7,6.103515559630068e-7L-11.505931600276849,15.078029408356231L-18.409490975101022,32.062423470503674L-20.710677508303192,50.00000017876782L-18.409491194065588,67.93757691512262L-11.50593202657045,84.92197106154204L-1.4210854715202004e-14,99.99999999999999L0,0Z"`
+				`"M0,0L100,100L100,0L91.23532468849007,-7.455843959357096L81.64709960511827,-13.25483368860933L71.44121219537817,-17.39696918901332L60.82354990476352,-19.882250461825734L50.000000178767834,-20.71067750830319L39.17645046288481,-19.882250329702327L28.558788202608024,-17.396968927279783L18.35290084343114,-13.254833302292194L8.764675830847777,-7.455843455996203L6.103515630684342e-7,6.103515559630068e-7L-7.4558434559962,8.764675830847771L-13.254833302292194,18.35290084343114L-17.396968927279772,28.55878820260801L-19.882250329702327,39.17645046288479L-20.710677508303192,50.00000017876782L-19.88225046182574,60.823549904763496L-17.39696918901333,71.44121219537817L-13.254833688609331,81.64709960511824L-7.455843959357106,91.23532468849007L-1.4210854715202004e-14,99.99999999999999L0,0Z"`
 			)
 		})
 	})

package/src/lib/shapes/shared/PathBuilder.tsx

@@ -10,7 +10,6 @@ import {
 	Geometry2dFilters,
 	Geometry2dOptions,
 	getPerfectDashProps,
-	getVerticesCountForArcLength,
 	Group2d,
 	modulate,
 	PerfectDashTerminal,
@@ -122,7 +121,6 @@ export interface CubicBezierToPathBuilderCommand extends PathBuilderCommandBase
 	type: 'cubic'
 	cp1: VecModel
 	cp2: VecModel
-	resolution?: number
 }
 
 /** @internal */
@@ -319,17 +317,8 @@ export class PathBuilder {
 		// Calculate the sweep angle
 		const sweepAngle = endAngle - startAngle
 
-		// Calculate the approximate arc length. General ellipse arc length is expensive - there's
-		// no closed form solution, so we have to do iterative numerical approximation. As we only
-		// use this to control the resolution of later approximations, let's cheat and just use the
-		// circular arc length with the largest radius:
-		const approximateArcLength = Math.max(rx1, ry1) * Math.abs(sweepAngle)
-
 		// Approximate the arc using cubic bezier curves
 		const numSegments = Math.min(4, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)))
-		const resolutionPerSegment = Math.ceil(
-			getVerticesCountForArcLength(approximateArcLength) / numSegments
-		)
 		const anglePerSegment = sweepAngle / numSegments
 
 		// Helper function to compute point on ellipse
@@ -375,16 +364,7 @@ export class PathBuilder {
 			const cp2y = end.y - handleScale * d2.y
 
 			const bezierOpts = i === 0 ? opts : { ...opts, mergeWithPrevious: true }
-			this.cubicBezierToWithResolution(
-				end.x,
-				end.y,
-				cp1x,
-				cp1y,
-				cp2x,
-				cp2y,
-				bezierOpts,
-				resolutionPerSegment
-			)
+			this.cubicBezierTo(end.x, end.y, cp1x, cp1y, cp2x, cp2y, bezierOpts)
 		}
 
 		return this
@@ -398,18 +378,6 @@ export class PathBuilder {
 		cp2X: number,
 		cp2Y: number,
 		opts?: PathBuilderCommandOpts
-	) {
-		return this.cubicBezierToWithResolution(x, y, cp1X, cp1Y, cp2X, cp2Y, opts)
-	}
-	private cubicBezierToWithResolution(
-		x: number,
-		y: number,
-		cp1X: number,
-		cp1Y: number,
-		cp2X: number,
-		cp2Y: number,
-		opts?: PathBuilderCommandOpts,
-		resolution?: number
 	) {
 		this.assertHasMoveTo()
 		this.commands.push({
@@ -420,7 +388,6 @@ export class PathBuilder {
 			cp2: { x: cp2X, y: cp2Y },
 			isClose: false,
 			opts,
-			resolution,
 		})
 		return this
 	}
@@ -1005,7 +972,6 @@ export class PathBuilderGeometry2d extends Geometry2d {
 							cp1: Vec.From(command.cp1),
 							cp2: Vec.From(command.cp2),
 							end: Vec.From(command),
-							resolution: command.resolution,
 						})
 					)
 					break

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -81,7 +81,6 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}
-			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -128,7 +128,6 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
-			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}
@@ -194,7 +193,6 @@ export interface RichTextSVGProps {
 	wrap?: boolean
 	labelColor: string
 	padding: number
-	showTextOutline?: boolean
 }
 
 /**
@@ -212,7 +210,6 @@ export function RichTextSVG({
 	wrap,
 	labelColor,
 	padding,
-	showTextOutline = true,
 }: RichTextSVGProps) {
 	const editor = useEditor()
 	const html = renderHtmlFromRichText(editor, richText)
@@ -248,7 +245,6 @@ export function RichTextSVG({
 		wordWrap: 'break-word' as const,
 		overflowWrap: 'break-word' as const,
 		whiteSpace: 'pre-wrap',
-		textShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',
 	}
 
 	return (

package/src/lib/shapes/shared/SvgTextLabel.tsx

@@ -21,7 +21,6 @@ export function SvgTextLabel({
 	bounds,
 	padding = 16,
 	stroke = true,
-	showTextOutline = true,
 }: {
 	fontSize: number
 	font: TLDefaultFontStyle
@@ -34,7 +33,6 @@ export function SvgTextLabel({
 	bounds: Box
 	padding?: number
 	stroke?: boolean
-	showTextOutline?: boolean
 }) {
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
@@ -70,10 +68,10 @@ export function SvgTextLabel({
 	const mainSpans = createTextJsxFromSpans(editor, spans, opts)
 
 	let outlineSpans = null
-	if (showTextOutline && stroke) {
+	if (stroke) {
 		opts.fill = theme.background
 		opts.stroke = theme.background
-		opts.strokeWidth = 3
+		opts.strokeWidth = 2
 		outlineSpans = createTextJsxFromSpans(editor, spans, opts)
 	}
 

package/src/lib/shapes/shared/usePrefersReducedMotion.tsx

@@ -1,20 +1,10 @@
-import { useMaybeEditor, useValue } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 
 /** @public */
 export function usePrefersReducedMotion() {
-	const editor = useMaybeEditor()
-	const animationSpeed = useValue('animationSpeed', () => editor?.user.getAnimationSpeed(), [
-		editor,
-	])
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
 
 	useEffect(() => {
-		if (animationSpeed !== undefined) {
-			setPrefersReducedMotion(animationSpeed === 0 ? true : false)
-			return
-		}
-
 		if (typeof window === 'undefined' || !('matchMedia' in window)) return
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
 		const handler = () => {
@@ -23,7 +13,7 @@ export function usePrefersReducedMotion() {
 		handler()
 		mql.addEventListener('change', handler)
 		return () => mql.removeEventListener('change', handler)
-	}, [animationSpeed])
+	}, [])
 
 	return prefersReducedMotion
 }

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -303,26 +303,33 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 }
 
 function getTextSize(editor: Editor, props: TLTextShape['props']) {
-	const { font, richText, size, w } = props
+	const { font, richText, autoSize, size, w } = props
 
-	const minWidth = 16
+	const minWidth = autoSize ? 16 : Math.max(16, w)
 	const fontSize = FONT_SIZES[size]
 
-	const maybeFixedWidth = props.autoSize ? null : Math.max(minWidth, Math.floor(w))
+	const cw = autoSize
+		? null
+		: // `measureText` floors the number so we need to do the same here to avoid issues.
+			Math.floor(Math.max(minWidth, w))
 
 	const html = renderHtmlFromRichTextForMeasurement(editor, richText)
 	const result = editor.textMeasure.measureHtml(html, {
 		...TEXT_PROPS,
 		fontFamily: FONT_FAMILIES[font],
 		fontSize: fontSize,
-		maxWidth: maybeFixedWidth,
+		maxWidth: cw,
 	})
 
 	// If we're autosizing the measureText will essentially `Math.floor`
 	// the numbers so `19` rather than `19.3`, this means we must +1 to
 	// whatever we get to avoid wrapping.
+	if (autoSize) {
+		result.w += 1
+	}
+
 	return {
-		width: maybeFixedWidth ?? Math.max(minWidth, result.w + 1),
+		width: Math.max(minWidth, result.w),
 		height: Math.max(fontSize, result.h),
 	}
 }

package/src/lib/styles.tsx

@@ -1,9 +1,7 @@
-import { TLUiIconJsx } from './ui/components/primitives/TldrawUiIcon'
-
 /** @public */
 export type StyleValuesForUi<T> = readonly {
 	readonly value: T
-	readonly icon: string | TLUiIconJsx
+	readonly icon: string
 }[]
 
 // todo: default styles prop?

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts

@@ -9,18 +9,11 @@ export class PointingCrop extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
-			this.startDragging(info)
+			this.editor.setCurrentTool('select.crop.translating_crop', info)
 		}
 	}
-	override onLongPress(info: TLPointerEventInfo) {
-		this.startDragging(info)
-	}
 
 	override onPointerUp(info: TLPointerEventInfo) {
 		this.editor.setCurrentTool('select.crop.idle', info)
 	}
-
-	startDragging(info: TLPointerEventInfo) {
-		this.editor.setCurrentTool('select.crop.translating_crop', info)
-	}
 }