Fix blur bug in editable text (#3343)

This PR fixes a bug that was introduced by #3223. There was a code path
that normally used to never run (a blur event running when the shape was
no longer editing) but which was being run now that shapes aren't
immediately removed on pointer down.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Test Plan

1. Create a sticky note
2. Begin editing the note
3. click on the canvas
4. You should be in pointing_canvas

packages/editor/src/lib/editor/Editor.ts

@@ -8229,7 +8229,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	cancel(): this {
 		this.dispatch({ type: 'misc', name: 'cancel' })
-		this._tickManager.tick()
 		return this
 	}
 
@@ -8245,7 +8244,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	interrupt(): this {
 		this.dispatch({ type: 'misc', name: 'interrupt' })
-		this._tickManager.tick()
 		return this
 	}
 
@@ -8367,6 +8365,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	dispatch = (info: TLEventInfo): this => {
 		this._pendingEventsForNextTick.push(info)
+		if (!(info.type === 'pointer' || info.type === 'wheel' || info.type === 'pinch')) {
+			this._flushEventsForTick(0)
+		}
 		return this
 	}
 
@@ -8381,8 +8382,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 					this._flushEventForTick(info)
 				}
 			}
-			this.root.handleEvent({ type: 'misc', name: 'tick', elapsed })
-			this.scribbles.tick(elapsed)
+			if (elapsed > 0) {
+				this.root.handleEvent({ type: 'misc', name: 'tick', elapsed })
+				this.scribbles.tick(elapsed)
+			}
 		})
 	}
 

packages/state/api/api.json

@@ -2387,7 +2387,7 @@
             },
             {
               "kind": "Content",
-              "text": "(() => Value) | Value"
+              "text": "Value | (() => Value)"
             },
             {
               "kind": "Content",
@@ -2813,7 +2813,7 @@
             },
             {
               "kind": "Content",
-              "text": "any[] | undefined"
+              "text": "undefined | any[]"
             },
             {
               "kind": "Content",

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

@@ -63,32 +63,27 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
 			const elm = rInput.current
 			const editingShapeId = editor.getEditingShapeId()
 			// Did we move to a different shape?
-			if (elm && editingShapeId) {
-				// important! these ^v are two different things
-				// is that shape OUR shape?
-				if (editingShapeId === id) {
-					if (ranges) {
-						if (!ranges.length) {
-							// If we don't have any ranges, restore selection
-							// and select all of the text
-							elm.focus()
-						} else {
-							// Otherwise, skip the select-all-on-focus behavior
-							// and restore the selection
-							rSkipSelectOnFocus.current = true
-							elm.focus()
-							const selection = window.getSelection()
-							if (selection) {
-								ranges.forEach((range) => selection.addRange(range))
-							}
-						}
-					} else {
+			// important! these ^v are two different things
+			// is that shape OUR shape?
+			if (elm && editingShapeId === id) {
+				if (ranges) {
+					if (!ranges.length) {
+						// If we don't have any ranges, restore selection
+						// and select all of the text
 						elm.focus()
+					} else {
+						// Otherwise, skip the select-all-on-focus behavior
+						// and restore the selection
+						rSkipSelectOnFocus.current = true
+						elm.focus()
+						const selection = window.getSelection()
+						if (selection) {
+							ranges.forEach((range) => selection.addRange(range))
+						}
 					}
+				} else {
+					elm.focus()
 				}
-			} else {
-				window.getSelection()?.removeAllRanges()
-				editor.complete()
 			}
 		})
 	}, [editor, id])

packages/tldraw/src/test/SelectTool.test.ts

@@ -494,3 +494,14 @@ describe('When in readonly mode', () => {
 		expect(editor.getEditingShapeId()).toBe(ids.embed1)
 	})
 })
+
+// This should be end to end, the problem is the blur handler of the react component
+it('goes into pointing canvas', () => {
+	editor
+		.createShape({ type: 'note' })
+		.pointerMove(50, 50)
+		.doubleClick()
+		.expectToBeIn('select.editing_shape')
+		.pointerDown(300, 300)
+		.expectToBeIn('select.pointing_canvas')
+})