Merge cc12b7b513 into 7442456d85

packages/editor/editor.css

@@ -1087,13 +1087,15 @@ input,
  * One extra nuance is we don't use this behavior for:
  *  - arrows which have weird geometry and just gets in the way.
  *  - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
+ *  - shapes that are not filled
  */
-.tl-canvas[data-iseditinganything='true']
+.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
 	.tl-shape:not(
 		[data-shape-type='arrow'],
 		[data-shape-type='draw'],
 		[data-shape-type='line'],
-		[data-shape-type='highlight']
+		[data-shape-type='highlight'],
+		[data-shape-is-filled='false']
 	) {
 	pointer-events: all;
 }

packages/editor/src/lib/components/Shape.tsx

@@ -142,6 +142,8 @@ export const Shape = memo(function Shape({
 
 	if (!shape) return null
 
+	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
+
 	return (
 		<>
 			{util.backgroundComponent && (
@@ -156,7 +158,13 @@ export const Shape = memo(function Shape({
 					</OptionalErrorBoundary>
 				</div>
 			)}
-			<div ref={containerRef} className="tl-shape" data-shape-type={shape.type} draggable={false}>
+			<div
+				ref={containerRef}
+				className="tl-shape"
+				data-shape-type={shape.type}
+				data-shape-is-filled={isFilledShape}
+				draggable={false}
+			>
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -121,12 +121,18 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 		() => editor.getEditingShapeId() !== null,
 		[editor]
 	)
+	const isSelectingAnything = useValue(
+		'isSelectingAnything',
+		() => !!editor.getSelectedShapeIds().length,
+		[editor]
+	)
 
 	return (
 		<div
 			ref={rCanvas}
 			draggable={false}
 			data-iseditinganything={isEditingAnything}
+			data-isselectinganything={isSelectingAnything}
 			className={classNames('tl-canvas', className)}
 			data-testid="canvas"
 			{...events}

packages/tldraw/src/lib/shapes/shared/useEditableText.ts

@@ -160,10 +160,15 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
 
 	const handleInputPointerDown = useCallback(
 		(e: React.PointerEvent) => {
-			// This is important that we only dispatch when editing.
-			// Otherwise, you can get into a state where you're editing
-			// able to drag a selected shape behind another shape.
-			if (!isEditing) return
+			// N.B. We used to only do this only when isEditing to help
+			// prevent an issue where you could drag a selected shape
+			// behind another shape. That is addressed now by the CSS logic
+			// looking at data-isselectinganything.
+			//
+			// We still need to follow this logic even if not isEditing
+			// because otherwise there is some flakiness in selection.
+			// When selecting text, it would sometimes select some text
+			// partially if we didn't dispatch/stop below.
 
 			editor.dispatch({
 				...getPointerInfo(e),
@@ -175,7 +180,7 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
 
 			stopEventPropagation(e) // we need to prevent blurring the input
 		},
-		[editor, id, isEditing]
+		[editor, id]
 	)
 
 	return {