fix pasted tabs not getting converted to space (#1388)

This PR fixes a bug where pasted tabs didn't get converted to spaces.
Fixes #1387

We manually convert tabs to spaces when pressing the tab key. But we
were missing cases where you pasted tabs.

This may or may not be needed with @SomeHats's incoming text change!

<img width="825" alt="Screenshot 2023-05-16 at 12 35 37"
src="https://github.com/tldraw/tldraw/assets/15892272/239771d5-ab65-41e1-9215-60af3fab5c8b">

<img width="763" alt="Screenshot 2023-05-16 at 12 25 03"
src="https://github.com/tldraw/tldraw/assets/15892272/307a6c3a-9f8f-44a8-9e66-a694b92c5067">

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Copy a tab character: `	`
2. Make a text shape.
3. Paste the tab character.
4. Make sure that it has been converted into 2 spaces.

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Fixed a bug where pasted tabs wouldn't get converted into spaces.

packages/editor/src/lib/app/shapeutils/shared/useEditableText.ts

@@ -131,7 +131,20 @@ export function useEditableText<T extends Extract<TLShape, { props: { text: stri
 	// When the text changes, update the text value.
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-			const text = TextHelpers.normalizeText(e.currentTarget.value)
+			let text = TextHelpers.normalizeText(e.currentTarget.value)
+
+			// ------- Bug fix ------------
+			// Replace tabs with spaces when pasting
+			const untabbedText = text.replace(/\t/g, '  ')
+			if (untabbedText !== text) {
+				const selectionStart = e.currentTarget.selectionStart
+				e.currentTarget.value = untabbedText
+				e.currentTarget.selectionStart = selectionStart + (untabbedText.length - text.length)
+				e.currentTarget.selectionEnd = selectionStart + (untabbedText.length - text.length)
+				text = untabbedText
+			}
+			// ----------------------------
+
 			app.updateShapes([{ id, type, props: { text } }])
 		},
 		[app, id, type]