[fix] text editing outline when scaled (#1826)

This PR counter-scales the outline of editing text shapes.

<img width="410" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7a6652b9-10d3-42a5-a4b3-58508b862f8a">
<img width="654" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7d536dd8-e40f-495f-b059-cbcd450134c2">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a text shape
2. Scale it up
3. Edit it
4. Check that the outline isn't ridiculously big

packages/editor/editor.css

@@ -729,10 +729,6 @@ input,
 	text-shadow: var(--tl-text-outline);
 }
 
-.tl-text-shape__wrapper[data-isediting='true'] {
-	outline: calc(var(--tl-scale) * 1.5px) solid var(--color-selected);
-}
-
 .tl-text-shape__wrapper[data-align='start'] {
 	text-align: left;
 }

packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx

@@ -17,6 +17,7 @@ import {
 	textShapeMigrations,
 	textShapeProps,
 	toDomPrecision,
+	useValue,
 } from '@tldraw/editor'
 import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
 import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
@@ -85,6 +86,8 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 			handleInputPointerDown,
 		} = useEditableText(id, type, text)
 
+		const zoomLevel = useValue('zoomLevel', () => this.editor.zoomLevel, [this.editor])
+
 		return (
 			<HTMLContainer id={shape.id}>
 				<div
@@ -95,6 +98,9 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 					data-isediting={isEditing}
 					data-textwrap={true}
 					style={{
+						outline: isEditing
+							? `${1.5 / zoomLevel / shape.props.scale}px solid var(--color-selected)`
+							: '',
 						fontSize: FONT_SIZES[shape.props.size],
 						lineHeight: FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + 'px',
 						transform: `scale(${shape.props.scale})`,