Stop editing frame headers when clicking inside a frame. (#1955)

Before (notice how we stay in `editing_shape`:


https://github.com/tldraw/tldraw/assets/2523721/d4553675-8412-41d9-b300-bbe87b719caa

After:



https://github.com/tldraw/tldraw/assets/2523721/e9788b1c-f2d9-473d-ba4c-cec7f822547a

It selects the shape, similar to what we do with geo shapes:



https://github.com/tldraw/tldraw/assets/2523721/a6210577-aec0-4fc0-892a-eedfed6f737b


The only downside is that we also stop editing shape if we click on the
frame header. That said that case is currently a bit broken. We'd
probably want to insert caret at the clicked position (which we
currently don't do).

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Insert a frame.
2. Double click the frame header to edit it.
3. Click inside the frame. 
4. This should now stop editing the header.

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

Closes #1965 

### Release Notes

- Stop editing frame headers when clicking inside of a frame.

---------

Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>

packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx

@@ -31,6 +31,10 @@ export const FrameHeading = function FrameHeading({
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent) => {
 			const event = getPointerInfo(e)
+
+			// If we're editing the frame label, we shouldn't hijack the pointer event
+			if (editor.editingShapeId === id) return
+
 			editor.dispatch({
 				type: 'pointer',
 				name: 'pointer_down',

packages/tldraw/src/lib/tools/SelectTool/children/EditingShape.ts

@@ -1,4 +1,11 @@
-import { Group2d, StateNode, TLArrowShape, TLEventHandlers, TLGeoShape } from '@tldraw/editor'
+import {
+	Group2d,
+	StateNode,
+	TLArrowShape,
+	TLEventHandlers,
+	TLFrameShape,
+	TLGeoShape,
+} from '@tldraw/editor'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { updateHoveredId } from '../../selection-logic/updateHoveredId'
 
@@ -85,6 +92,10 @@ export class EditingShape extends StateNode {
 						}
 					} else {
 						if (shape.id === editingShape.id) {
+							// If we clicked on a frame, while editing its heading, cancel editing
+							if (this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {
+								this.editor.setEditingShape(null)
+							}
 							// If we clicked on the editing shape (which isn't a shape with a label), do nothing
 						} else {
 							// But if we clicked on a different shape of the same type, edit it instead