tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

package/src/lib/tools/SelectTool/DragAndDropManager.ts

@@ -92,10 +92,13 @@ export class DragAndDropManager {
 		this.intervalTimerId = this.editor.timers.setInterval(
 			() => {
 				skip2of3FramesWhileMovingFast++
-				if (skip2of3FramesWhileMovingFast % 3 && this.editor.inputs.pointerVelocity.len() > 0.5) {
+				if (
+					skip2of3FramesWhileMovingFast % 3 &&
+					this.editor.inputs.getPointerVelocity().len() > 0.5
+				) {
 					return
 				}
-				this.updateDraggingShapes(editor.inputs.currentPagePoint, cb)
+				this.updateDraggingShapes(editor.inputs.getCurrentPagePoint(), cb)
 			},
 			movingShapes.length > 10 ? SLOW_POINTER_LAG_DURATION : FAST_POINTER_LAG_DURATION
 		)
@@ -103,9 +106,10 @@ export class DragAndDropManager {
 
 	dropShapes(shapes: TLShape[]) {
 		const { editor } = this
-		this.updateDraggingShapes(editor.inputs.currentPagePoint)
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		this.updateDraggingShapes(currentPagePoint)
 
-		const draggingOverShape = editor.getDraggingOverShape(editor.inputs.currentPagePoint, shapes)
+		const draggingOverShape = editor.getDraggingOverShape(currentPagePoint, shapes)
 
 		if (draggingOverShape) {
 			const util = editor.getShapeUtil(draggingOverShape)
@@ -147,8 +151,9 @@ export class DragAndDropManager {
 		// This is the shape under the pointer that can handle at least one of the dragging shapes
 		const nextDraggingOverShape = editor.getDraggingOverShape(point, this.shapesToActuallyMove)
 
-		const cursorDidMove = !this.prevPagePoint.equals(editor.inputs.currentPagePoint)
-		this.prevPagePoint.setTo(editor.inputs.currentPagePoint)
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const cursorDidMove = !this.prevPagePoint.equals(currentPagePoint)
+		this.prevPagePoint.setTo(currentPagePoint)
 
 		editor.run(() => {
 			if (this.prevDraggingOverShape?.id === nextDraggingOverShape?.id) {
@@ -156,7 +161,7 @@ export class DragAndDropManager {
 					cursorDidMove &&
 					nextDraggingOverShape &&
 					isShapeId(nextDraggingOverShape.id) &&
-					!editor.inputs.previousPagePoint.equals(editor.inputs.currentPagePoint)
+					!editor.inputs.getPreviousPagePoint().equals(currentPagePoint)
 				) {
 					// If the cursor moved, call onDragShapesOver for the previous dragging over shape
 					const util = editor.getShapeUtil(nextDraggingOverShape)

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

@@ -31,7 +31,7 @@ export class Brushing extends StateNode {
 
 	override onEnter(info: TLPointerEventInfo & { target: 'canvas' }) {
 		const { editor } = this
-		const { altKey } = editor.inputs
+		const altKey = editor.inputs.getAltKey()
 
 		this.isWrapMode = editor.user.getIsWrapMode()
 
@@ -96,7 +96,7 @@ export class Brushing extends StateNode {
 	}
 
 	override onKeyDown(info: TLKeyboardEventInfo) {
-		if (this.editor.inputs.altKey) {
+		if (this.editor.inputs.getAltKey()) {
 			this.parent.transition('scribble_brushing', info)
 		} else {
 			this.hitTestShapes()
@@ -114,9 +114,10 @@ export class Brushing extends StateNode {
 
 	private hitTestShapes() {
 		const { editor, excludedShapeIds, isWrapMode } = this
-		const {
-			inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },
-		} = editor
+		const originPagePoint = editor.inputs.getOriginPagePoint()
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const shiftKey = editor.inputs.getShiftKey()
+		const ctrlKey = editor.inputs.getCtrlKey()
 
 		// We'll be collecting shape ids of selected shapes; if we're holding shift key, we start from our initial shapes
 		const results = new Set(shiftKey ? this.initialSelectedShapeIds : [])

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

@@ -83,9 +83,12 @@ export class Cropping extends StateNode {
 		const util = this.editor.getShapeUtil<ShapeWithCrop>(shape.type)
 		if (!util) return
 
-		const { shiftKey } = this.editor.inputs
-		const currentPagePoint = this.editor.inputs.currentPagePoint.clone().sub(cursorHandleOffset)
-		const originPagePoint = this.editor.inputs.originPagePoint.clone().sub(cursorHandleOffset)
+		const shiftKey = this.editor.inputs.getShiftKey()
+		const currentPagePoint = this.editor.inputs
+			.getCurrentPagePoint()
+			.clone()
+			.sub(cursorHandleOffset)
+		const originPagePoint = this.editor.inputs.getOriginPagePoint().clone().sub(cursorHandleOffset)
 		const change = currentPagePoint.clone().sub(originPagePoint).rot(-shape.rotation)
 
 		const crop = shape.props.crop ?? getDefaultCrop()
@@ -145,9 +148,7 @@ export class Cropping extends StateNode {
 
 	private createSnapshot() {
 		const selectionRotation = this.editor.getSelectionRotation()
-		const {
-			inputs: { originPagePoint },
-		} = this.editor
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const shape = this.editor.getOnlySelectedShape() as ShapeWithCrop
 

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

@@ -112,7 +112,7 @@ export class Idle extends StateNode {
 	override onDoubleClick(info: TLClickEventInfo) {
 		// Without this, the double click's "settle" would trigger the reset
 		// after the user double clicked the edge to begin cropping
-		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
+		if (this.editor.inputs.getShiftKey() || info.phase !== 'up') return
 
 		const croppingShapeId = this.editor.getCroppingShapeId()
 		if (!croppingShapeId) return

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

@@ -8,7 +8,7 @@ export class PointingCrop extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startDragging(info)
 		}
 	}

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

@@ -31,7 +31,7 @@ export class PointingCropHandle extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startCropping()
 		}
 	}

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

@@ -94,7 +94,8 @@ export class TranslatingCrop extends StateNode {
 
 		if (!shape) return
 
-		const { originPagePoint, currentPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 		const delta = currentPagePoint.clone().sub(originPagePoint)
 		const partial = getTranslateCroppedImageChange(this.editor, shape, delta)
 

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

@@ -12,7 +12,7 @@ export function getTranslateCroppedImageChange(editor: Editor, shape: ShapeWithC
 		return
 	}
 
-	const flatten: 'x' | 'y' | null = editor.inputs.shiftKey
+	const flatten: 'x' | 'y' | null = editor.inputs.getShiftKey()
 		? Math.abs(delta.x) < Math.abs(delta.y)
 			? 'x'
 			: 'y'

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

@@ -73,7 +73,7 @@ export class DraggingHandle extends StateNode {
 
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
-		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
+		this.initialPagePoint = this.editor.inputs.getOriginPagePoint().clone()
 
 		this.editor.setCursor({ type: isCreating ? 'cross' : 'grabbing', rotation: 0 })
 
@@ -284,10 +284,12 @@ export class DraggingHandle extends StateNode {
 		const { editor, shapeId, initialPagePoint } = this
 		const { initialHandle, initialPageRotation, initialAdjacentHandle } = this
 		const isSnapMode = this.editor.user.getIsSnapMode()
-		const {
-			snaps,
-			inputs: { currentPagePoint, shiftKey, ctrlKey, altKey, pointerVelocity },
-		} = editor
+		const { snaps } = editor
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const shiftKey = editor.inputs.getShiftKey()
+		const ctrlKey = editor.inputs.getCtrlKey()
+		const altKey = editor.inputs.getAltKey()
+		const pointerVelocity = editor.inputs.getPointerVelocity()
 
 		const initial = this.info.shape
 

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

@@ -18,13 +18,25 @@ interface EditingShapeInfo {
 export class EditingShape extends StateNode {
 	static override id = 'editing_shape'
 
-	hitShapeForPointerUp: TLShape | null = null
+	hitLabelOnShapeForPointerUp: TLShape | null = null
 	private info = {} as EditingShapeInfo
+	private didPointerDownOnEditingShape = false
+
+	private isTextInputFocused(): boolean {
+		const container = this.editor.getContainer()
+		return (
+			container.contains(document.activeElement) &&
+			(document.activeElement?.nodeName === 'INPUT' ||
+				document.activeElement?.nodeName === 'TEXTAREA' ||
+				(document.activeElement as HTMLElement)?.isContentEditable)
+		)
+	}
 
 	override onEnter(info: EditingShapeInfo) {
 		const editingShape = this.editor.getEditingShape()
 		if (!editingShape) throw Error('Entered editing state without an editing shape')
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		this.info = info
 
@@ -54,15 +66,34 @@ export class EditingShape extends StateNode {
 	override onPointerMove(info: TLPointerEventInfo) {
 		// In the case where on pointer down we hit a shape's label, we need to check if the user is dragging.
 		// and if they are, we need to transition to translating instead.
-		if (this.hitShapeForPointerUp && this.editor.inputs.isDragging) {
+		if (this.hitLabelOnShapeForPointerUp && this.editor.inputs.getIsDragging()) {
 			if (this.editor.getIsReadonly()) return
-			if (this.hitShapeForPointerUp.isLocked) return
-			this.editor.select(this.hitShapeForPointerUp)
+			if (this.hitLabelOnShapeForPointerUp.isLocked) return
+
+			this.editor.select(this.hitLabelOnShapeForPointerUp)
 			this.parent.transition('translating', info)
-			this.hitShapeForPointerUp = null
+			this.hitLabelOnShapeForPointerUp = null
 			return
 		}
 
+		// Check if dragging from editing shape with blurred input
+		if (this.didPointerDownOnEditingShape && this.editor.inputs.isDragging) {
+			if (this.editor.getIsReadonly()) return
+
+			const editingShape = this.editor.getEditingShape()
+			if (!editingShape || editingShape.isLocked) return
+
+			if (!this.isTextInputFocused()) {
+				// Input blurred during drag - exit edit mode and start translating
+				this.editor.select(editingShape)
+				this.parent.transition('translating', info)
+				this.didPointerDownOnEditingShape = false
+				return
+			}
+			// Input still focused - user is selecting text, stay in edit mode
+			this.didPointerDownOnEditingShape = false
+		}
+
 		switch (info.target) {
 			case 'shape':
 			case 'canvas': {
@@ -73,7 +104,8 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		switch (info.target) {
 			// N.B. This bit of logic has a bit of history to it.
@@ -112,7 +144,7 @@ export class EditingShape extends StateNode {
 				if (textLabel && !isEmptyTextShape) {
 					const pointInShapeSpace = this.editor.getPointInShapeSpace(
 						selectingShape,
-						this.editor.inputs.currentPagePoint
+						this.editor.inputs.getCurrentPagePoint()
 					)
 					if (
 						textLabel.bounds.containsPoint(pointInShapeSpace, 0) &&
@@ -120,10 +152,11 @@ export class EditingShape extends StateNode {
 					) {
 						// it's a hit to the label!
 						if (selectingShape.id === editingShape.id) {
-							// If we clicked on the editing geo / arrow shape's label, do nothing
+							// Track click on editing shape for drag detection
+							this.didPointerDownOnEditingShape = true
 							return
 						} else {
-							this.hitShapeForPointerUp = selectingShape
+							this.hitLabelOnShapeForPointerUp = selectingShape
 
 							this.editor.markHistoryStoppingPoint('editing on pointer up')
 							this.editor.select(selectingShape.id)
@@ -156,10 +189,20 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerUp(info: TLPointerEventInfo) {
+		if (this.didPointerDownOnEditingShape) {
+			this.didPointerDownOnEditingShape = false
+			if (!this.isTextInputFocused()) {
+				// We clicked on the text label, which blured the input.
+				// We want to stay in edit mode and select all the text.
+				this.editor.getRichTextEditor()?.commands.focus('all')
+				return
+			}
+		}
+
 		// If we're not dragging, and it's a hit to the label, begin editing the shape.
-		const hitShape = this.hitShapeForPointerUp
+		const hitShape = this.hitLabelOnShapeForPointerUp
 		if (!hitShape) return
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
 
 		// Stay in edit mode to maintain flow of editing.
 		const util = this.editor.getShapeUtil(hitShape)

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

@@ -16,10 +16,9 @@ import {
 } 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'
 import { updateHoveredShapeId } from '../../selection-logic/updateHoveredShapeId'
-import { startEditingShapeWithLabel } from '../selectHelpers'
+import { hasRichText, startEditingShapeWithRichText } from '../selectHelpers'
 
 const SKIPPED_KEYS_FOR_AUTO_EDITING = [
 	'Delete',
@@ -53,8 +52,6 @@ export class Idle extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
-		const shouldEnterCropMode = info.ctrlKey && getShouldEnterCropMode(this.editor)
-
 		switch (info.target) {
 			case 'canvas': {
 				// Check to see if we hit any shape under the pointer; if so,
@@ -71,9 +68,7 @@ export class Idle extends StateNode {
 
 				const selectedShapeIds = this.editor.getSelectedShapeIds()
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				const {
-					inputs: { currentPagePoint },
-				} = this.editor
+				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
 				if (
 					selectedShapeIds.length > 1 ||
@@ -106,7 +101,7 @@ export class Idle extends StateNode {
 			}
 			case 'handle': {
 				if (this.editor.getIsReadonly()) break
-				if (this.editor.inputs.altKey) {
+				if (this.editor.inputs.getAltKey()) {
 					this.parent.transition('pointing_shape', info)
 				} else {
 					// If we're holding ctrl key, we might select it, or start brushing...
@@ -136,7 +131,8 @@ export class Idle extends StateNode {
 					case 'top_right':
 					case 'bottom_left':
 					case 'bottom_right': {
-						if (shouldEnterCropMode) {
+						const onlySelectedShape = this.editor.getOnlySelectedShape()
+						if (info.ctrlKey && this.editor.canCropShape(onlySelectedShape)) {
 							this.parent.transition('crop.pointing_crop_handle', info)
 						} else {
 							if (info.accelKey) {
@@ -171,7 +167,7 @@ export class Idle extends StateNode {
 	}
 
 	override onDoubleClick(info: TLClickEventInfo) {
-		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
+		if (this.editor.inputs.getShiftKey() || info.phase !== 'up') return
 
 		// We don't want to double click while toggling shapes
 		if (info.ctrlKey || info.shiftKey) return
@@ -187,11 +183,12 @@ export class Idle extends StateNode {
 				// of the shape yet because that also creates text shapes, and can produce
 				// unexpected results when working "inside of" a hollow shape.
 
+				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 				const hitShape =
 					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
 						? hoveredShape
-						: (this.editor.getSelectedShapeAtPoint(this.editor.inputs.currentPagePoint) ??
-							this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
+						: (this.editor.getSelectedShapeAtPoint(currentPagePoint) ??
+							this.editor.getShapeAtPoint(currentPagePoint, {
 								margin: this.editor.options.hitTestMargin / this.editor.getZoomLevel(),
 								hitInside: false,
 							}))
@@ -232,30 +229,45 @@ export class Idle extends StateNode {
 					return
 				}
 
-				if (!this.editor.inputs.shiftKey) {
+				if (!this.editor.inputs.getShiftKey()) {
 					this.handleDoubleClickOnCanvas(info)
 				}
 				break
 			}
 			case 'selection': {
-				if (this.editor.getIsReadonly()) break
-
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
 
 				if (onlySelectedShape) {
 					const util = this.editor.getShapeUtil(onlySelectedShape)
-
-					if (!this.canInteractWithShapeInReadOnly(onlySelectedShape)) {
-						return
-					}
-
-					// Test edges for an onDoubleClickEdge handler
-					if (
+					const isEdge =
 						info.handle === 'right' ||
 						info.handle === 'left' ||
 						info.handle === 'top' ||
 						info.handle === 'bottom'
-					) {
+					const isCorner =
+						info.handle === 'top_left' ||
+						info.handle === 'top_right' ||
+						info.handle === 'bottom_right' ||
+						info.handle === 'bottom_left'
+
+					if (this.editor.getIsReadonly()) {
+						// includes readonly check
+						if (
+							this.editor.canEditShape(onlySelectedShape, {
+								type: isCorner
+									? 'double-click-corner'
+									: isEdge
+										? 'double-click-edge'
+										: 'double-click',
+							})
+						) {
+							this.startEditingShape(onlySelectedShape, info, true /* select all */)
+						}
+						break
+					}
+
+					// Test edges for an onDoubleClickEdge handler
+					if (isEdge) {
 						const change = util.onDoubleClickEdge?.(onlySelectedShape, info)
 						if (change) {
 							this.editor.markHistoryStoppingPoint('double click edge')
@@ -265,12 +277,7 @@ export class Idle extends StateNode {
 						}
 					}
 
-					if (
-						info.handle === 'top_left' ||
-						info.handle === 'top_right' ||
-						info.handle === 'bottom_right' ||
-						info.handle === 'bottom_left'
-					) {
+					if (isCorner) {
 						const change = util.onDoubleClickCorner?.(onlySelectedShape, info)
 						if (change) {
 							this.editor.markHistoryStoppingPoint('double click corner')
@@ -279,16 +286,14 @@ export class Idle extends StateNode {
 							return
 						}
 					}
+
 					// For corners OR edges but NOT rotation corners
-					if (
-						util.canCrop(onlySelectedShape) &&
-						!this.editor.isShapeOrAncestorLocked(onlySelectedShape)
-					) {
+					if (this.editor.canCropShape(onlySelectedShape)) {
 						this.parent.transition('crop', info)
 						return
 					}
 
-					if (this.shouldStartEditingShape(onlySelectedShape)) {
+					if (this.editor.canEditShape(onlySelectedShape)) {
 						this.startEditingShape(onlySelectedShape, info, true /* select all */)
 					}
 				}
@@ -319,7 +324,7 @@ export class Idle extends StateNode {
 				}
 
 				// If the shape can edit, then begin editing
-				if (this.shouldStartEditingShape(shape)) {
+				if (this.editor.canEditShape(shape)) {
 					this.startEditingShape(shape, info, true /* select all */)
 				} else {
 					// If the shape's double click handler has not created a change,
@@ -341,7 +346,7 @@ export class Idle extends StateNode {
 				} else {
 					// If the shape's double click handler has not created a change,
 					// and if the shape can edit, then begin editing the shape.
-					if (this.shouldStartEditingShape(shape)) {
+					if (this.editor.canEditShape(shape)) {
 						this.startEditingShape(shape, info, true /* select all */)
 					}
 				}
@@ -356,7 +361,7 @@ export class Idle extends StateNode {
 				const hitShape =
 					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
 						? hoveredShape
-						: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
+						: this.editor.getShapeAtPoint(this.editor.inputs.getCurrentPagePoint(), {
 								margin: this.editor.options.hitTestMargin / this.editor.getZoomLevel(),
 								hitInside: false,
 								hitLabels: true,
@@ -376,9 +381,7 @@ export class Idle extends StateNode {
 
 				const selectedShapeIds = this.editor.getSelectedShapeIds()
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				const {
-					inputs: { currentPagePoint },
-				} = this.editor
+				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
 				if (
 					selectedShapeIds.length > 1 ||
@@ -471,7 +474,7 @@ export class Idle extends StateNode {
 					// If it's a note shape, then edit on type
 					this.editor.isShapeOfType(onlySelectedShape, 'note') &&
 					// If it's not locked or anything
-					this.shouldStartEditingShape(onlySelectedShape)
+					this.editor.canEditShape(onlySelectedShape)
 				) {
 					this.startEditingShape(
 						onlySelectedShape,
@@ -532,7 +535,10 @@ export class Idle extends StateNode {
 
 				// If the only selected shape is editable, then begin editing it
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				if (onlySelectedShape && this.shouldStartEditingShape(onlySelectedShape)) {
+				if (
+					onlySelectedShape &&
+					this.editor.canEditShape(onlySelectedShape, { type: 'press_enter' })
+				) {
 					this.startEditingShape(
 						onlySelectedShape,
 						{
@@ -546,7 +552,7 @@ export class Idle extends StateNode {
 				}
 
 				// If the only selected shape is croppable, then begin cropping it
-				if (getShouldEnterCropMode(this.editor)) {
+				if (this.editor.canCropShape(onlySelectedShape)) {
 					this.parent.transition('crop', info)
 				}
 				break
@@ -561,23 +567,18 @@ export class Idle extends StateNode {
 		}
 	}
 
-	private shouldStartEditingShape(
-		shape: TLShape | null = this.editor.getOnlySelectedShape()
-	): boolean {
-		if (!shape) return false
-		if (this.editor.isShapeOrAncestorLocked(shape) && shape.type !== 'embed') return false
-		if (!this.canInteractWithShapeInReadOnly(shape)) return false
-		return this.editor.getShapeUtil(shape).canEdit(shape)
-	}
-
 	private startEditingShape(
 		shape: TLShape,
 		info: TLClickEventInfo | TLKeyboardEventInfo,
 		shouldSelectAll?: boolean
 	) {
-		if (this.editor.isShapeOrAncestorLocked(shape) && shape.type !== 'embed') return
+		const { editor } = this
 		this.editor.markHistoryStoppingPoint('editing shape')
-		startEditingShapeWithLabel(this.editor, shape, shouldSelectAll)
+		if (hasRichText(shape)) {
+			startEditingShapeWithRichText(editor, shape, { selectAll: shouldSelectAll })
+		} else {
+			editor.setEditingShape(shape)
+		}
 		this.parent.transition('editing_shape', info)
 	}
 
@@ -597,7 +598,7 @@ export class Idle extends StateNode {
 
 		const id = createShapeId()
 
-		const { x, y } = this.editor.inputs.currentPagePoint
+		const { x, y } = this.editor.inputs.getCurrentPagePoint()
 
 		// Allow this to trigger the max shapes reached alert
 		this.editor.createShapes([
@@ -616,16 +617,9 @@ export class Idle extends StateNode {
 		const shape = this.editor.getShape(id)
 		if (!shape) return
 
-		const util = this.editor.getShapeUtil(shape)
-		if (this.editor.getIsReadonly()) {
-			if (!util.canEditInReadonly(shape)) {
-				return
-			}
-		}
+		if (!this.editor.canEditShape(shape)) return
 
-		this.editor.setEditingShape(id)
-		this.editor.select(id)
-		this.parent.transition('editing_shape', info)
+		startEditingShapeWithRichText(this.editor, id, { info })
 	}
 
 	private nudgeSelectedShapes(ephemeral = false) {
@@ -665,13 +659,6 @@ export class Idle extends StateNode {
 		this.editor.nudgeShapes(selectedShapeIds, delta.mul(step))
 		kickoutOccludedShapes(this.editor, selectedShapeIds)
 	}
-
-	private canInteractWithShapeInReadOnly(shape: TLShape) {
-		if (!this.editor.getIsReadonly()) return true
-		const util = this.editor.getShapeUtil(shape)
-		if (util.canEditInReadonly(shape)) return true
-		return false
-	}
 }
 
 export const MAJOR_NUDGE_FACTOR = 10

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

@@ -11,6 +11,7 @@ import {
 	getArrowBodyGeometry,
 	getArrowLabelDefaultPosition,
 } from '../../../shapes/arrow/arrowLabel'
+import { startEditingShapeWithRichText } from '../selectHelpers'
 
 export class PointingArrowLabel extends StateNode {
 	static override id = 'pointing_arrow_label'
@@ -54,7 +55,7 @@ export class PointingArrowLabel extends StateNode {
 		if (!labelGeometry) {
 			throw Error(`Expected to find an arrow label geometry for shape: ${shape.id}`)
 		}
-		const { currentPagePoint } = this.editor.inputs
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 		const pointInShapeSpace = this.editor.getPointInShapeSpace(shape, currentPagePoint)
 
 		this._labelDragOffset = Vec.Sub(labelGeometry.center, pointInShapeSpace)
@@ -81,7 +82,7 @@ export class PointingArrowLabel extends StateNode {
 	private _labelDragOffset = new Vec(0, 0)
 
 	override onPointerMove() {
-		const { isDragging } = this.editor.inputs
+		const isDragging = this.editor.inputs.getIsDragging()
 		if (!isDragging) return
 
 		if (this.didCtrlOnEnter) {
@@ -97,7 +98,7 @@ export class PointingArrowLabel extends StateNode {
 		const transform = this.editor.getShapePageTransform(shape.id)
 
 		const pointInShapeSpace = this.editor
-			.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)
+			.getPointInShapeSpace(shape, this.editor.inputs.getCurrentPagePoint())
 			.add(this._labelDragOffset)
 
 		const defaultLabelPosition = getArrowLabelDefaultPosition(this.editor, shape)
@@ -137,10 +138,8 @@ export class PointingArrowLabel extends StateNode {
 
 		if (this.didDrag || !this.wasAlreadySelected) {
 			this.complete()
-		} else if (!this.editor.getIsReadonly()) {
-			// Go into edit mode.
-			this.editor.setEditingShape(shape.id)
-			this.editor.setCurrentTool('select.editing_shape')
+		} else if (this.editor.canEditShape(shape)) {
+			startEditingShapeWithRichText(this.editor, shape.id)
 		}
 	}
 

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

@@ -16,7 +16,7 @@ export class PointingCanvas extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.parent.transition('brushing', info)
 		}
 	}