textfields: fix up flakiness in text selection (#3578)

This PR https://github.com/tldraw/tldraw/pull/3498 which tried to fix
accidentally dragging shapes behind other shapes made clicking into
textfields worse unfortunately. (as seen below in the Before video).

This PR takes a different tact by introducing not just
`data-iseditinganything` but now also `data-isselectinganything` which
makes Shapes z-indices actually be relevant vs. the canvas being the top
z-index layer, when something is selected or being editing. It's worth a
good think over this and any downstream consequences this might
introduce. I _think_ this change will actually be ok for when we're in
select state but I wouldn't be surprised if I'm missing some nuance.

Before:


https://github.com/tldraw/tldraw/assets/469604/4a0346de-359f-4664-b273-746b4aa3d6fd



After:


https://github.com/tldraw/tldraw/assets/469604/5ee574ae-fa6b-4dac-a2c4-a94d4da90615


### 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

- Textfields: fix up regression to selection when clicking into a text
shape.

packages/editor/editor.css

@@ -1089,7 +1089,7 @@ input,
  *  - 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'],

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 {