textfields: for unfilled geo shapes fix edit->edit (#3577) (#3643)

We need to treat unfilled geo shapes as hollow to click 'through' them.

Before:



https://github.com/tldraw/tldraw/assets/469604/bf7b520c-c6f5-41cd-88e9-b020fe0ebb32



After:



https://github.com/tldraw/tldraw/assets/469604/e39d9bcf-2b94-46d5-ace4-8a1053b2ee81




### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Text labels: fix edit→edit not working as expected when unfilled geo
shapes are on 'top' of other shapes.

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.

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 {