textfields: fix RTL layout for SVG exports (#3680)

Followup to https://github.com/tldraw/tldraw/pull/3188 (although this
problem was there before that PR)

This does more work for RTL rendering in SVG context, especially since
we position each span one-by-one.

I had to do a bit of esoteric spelunking and it turns out
[`unicode-bidi:
plaintext`](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)
solves our issue even though it isn't really recommend to be used by web
developers. Fun times 🙃

Before:
<img width="369" alt="Screenshot 2024-05-02 at 11 45 44"
src="https://github.com/tldraw/tldraw/assets/469604/df55e03a-4760-4b8f-adad-ed1a8c13ad51">


After:
<img width="365" alt="Screenshot 2024-05-02 at 11 54 48"
src="https://github.com/tldraw/tldraw/assets/469604/3339bbf4-041a-4fdf-8b6e-6fa19dfb0a9e">




### Change Type

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

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

1. Test LTR text.
2. Test RTL text.
3. Test mixed LTR/RTL on different lines.

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

### Release Notes

- [Add a brief release note for your PR here.](textfields: fix RTL
layout for SVG exports)

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>

apps/examples/e2e/tests/export-snapshots.spec.ts

@@ -33,6 +33,17 @@ test.describe('Export snapshots', () => {
 				},
 			},
 		],
+		'Exports geo text with mixed RTL': [
+			{
+				id: 'shape:testShape' as TLShapeId,
+				type: 'geo',
+				props: {
+					w: 300,
+					h: 300,
+					text: 'unicode is cool!\nكتابة باللغة  العرب!',
+				},
+			},
+		],
 	} as Record<string, TLShapePartial[]>
 
 	for (const fill of ['none', 'semi', 'solid', 'pattern']) {

packages/editor/src/lib/editor/managers/TextManager.ts

@@ -79,7 +79,10 @@ export class TextManager {
 		const elm = this.baseElm?.cloneNode() as HTMLDivElement
 		this.baseElm.insertAdjacentElement('afterend', elm)
 
-		elm.setAttribute('dir', 'ltr')
+		elm.setAttribute('dir', 'auto')
+		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
+		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
+		elm.style.setProperty('unicode-bidi', 'plaintext')
 		elm.style.setProperty('font-family', opts.fontFamily)
 		elm.style.setProperty('font-style', opts.fontStyle)
 		elm.style.setProperty('font-weight', opts.fontWeight)
@@ -130,6 +133,7 @@ export class TextManager {
 		let currentSpan = null
 		let prevCharWasSpaceCharacter = null
 		let prevCharTop = 0
+		let prevCharLeftForRTLTest = 0
 		let didTruncate = false
 		for (const childNode of element.childNodes) {
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
@@ -148,6 +152,7 @@ export class TextManager {
 				const top = rect.top + offsetY
 				const left = rect.left + offsetX
 				const right = rect.right + offsetX
+				const isRTL = left < prevCharLeftForRTLTest
 
 				const isSpaceCharacter = spaceCharacterRegex.test(char)
 				if (
@@ -175,12 +180,22 @@ export class TextManager {
 						box: { x: left, y: top, w: rect.width, h: rect.height },
 						text: char,
 					}
+					prevCharLeftForRTLTest = left
 				} else {
+					// Looks like we're in RTL mode, so we need to adjust the left position.
+					if (isRTL) {
+						currentSpan.box.x = left
+					}
+
 					// otherwise we just need to extend the current span with the next character
-					currentSpan.box.w = right - currentSpan.box.x
+					currentSpan.box.w = isRTL ? currentSpan.box.w + rect.width : right - currentSpan.box.x
 					currentSpan.text += char
 				}
 
+				if (char === '\n') {
+					prevCharLeftForRTLTest = 0
+				}
+
 				prevCharWasSpaceCharacter = isSpaceCharacter
 				prevCharTop = top
 				idx += char.length
@@ -213,9 +228,12 @@ export class TextManager {
 		this.baseElm.insertAdjacentElement('afterend', elm)
 
 		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
+		elm.setAttribute('dir', 'auto')
+		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
+		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
+		elm.style.setProperty('unicode-bidi', 'plaintext')
 		elm.style.setProperty('width', `${elementWidth}px`)
 		elm.style.setProperty('height', 'min-content')
-		elm.style.setProperty('dir', 'ltr')
 		elm.style.setProperty('font-size', `${opts.fontSize}px`)
 		elm.style.setProperty('font-family', opts.fontFamily)
 		elm.style.setProperty('font-weight', opts.fontWeight)

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

@@ -75,6 +75,9 @@ export function createTextJsxFromSpans(
 				alignmentBaseline="mathematical"
 				x={box.x + offsetX}
 				y={box.y + offsetY}
+				// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
+				// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
+				unicodeBidi="plaintext"
 			>
 				{correctSpacesToNbsp(text)}
 			</tspan>

packages/tldraw/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -86,6 +86,7 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
       >
         <tspan
           alignment-baseline="mathematical"
+          unicode-bidi="plaintext"
           x="16"
           y="-17"
         >
@@ -103,6 +104,7 @@ exports[`Matches a snapshot: Basic SVG 1`] = `
       >
         <tspan
           alignment-baseline="mathematical"
+          unicode-bidi="plaintext"
           x="16"
           y="-17"
         >