Fix textbox direction when it contains both RTL and LTR languages (#3188)

**Beofre:**

1. In a text box, text direction was set to Left-to-Right, regardless of
the text language.



**After:**
1. Text box direction is set to auto, so that it matches the direction
of text language.
2. Text dir is set to auto for each line of the text. To achieve this,
each line of text is now put in separated `<span>` tags with
`dir="auto"`.


![Screenshot_20240318_152725](https://github.com/tldraw/tldraw/assets/18334056/bfa8dd11-a2d1-46d0-b205-7a192c403fcd)


Note: Without putting each line of text into separated `<span>` tags,
whole text direction was in direction of initial line text. So each line
of text is now wrapped into separate tags.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `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
- [x] `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


### Test Plan

Enter a text right-to-left and left-to-right into textboxes and note the
change of direction by clicking outside of the box, before and after
this PR.

### Release Notes

Fix textbox direction when it contains both RTL and LTR languages

---------

Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/tldraw/src/lib/shapes/shared/TextLabel.tsx

@@ -104,8 +104,12 @@ export const TextLabel = React.memo(function TextLabel({
 					height: textHeight,
 				}}
 			>
-				<div className={`${cssPrefix} tl-text tl-text-content`} dir="ltr">
-					{finalText}
+				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">
+					{finalText.split('\n').map((lineOfText, index) => (
+						<div key={index} dir="auto">
+							{lineOfText}
+						</div>
+					))}
 				</div>
 				{(isEditingAnything || isSelected) && (
 					<TextArea