tldraw/apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots
Mime Čuvalo 68bc29f103
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>
2024-05-03 13:40:59 +00:00
..
Export-snapshots-Exports-with-arrow-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-none-in-dark-mode-1-chromium-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-in-dark-mode-1-chromium-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-in-dark-mode-1-chromium-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-in-dark-mode-1-chromium-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
Export-snapshots-Exports-with-arrow-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-arrow-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-draw-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-chromium-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-chromium-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-draw-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-chromium-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-draw-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-chromium-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-mixed-RTL-in-dark-mode-1-chromium-linux.png textfields: fix RTL layout for SVG exports (#3680) 2024-05-03 13:40:59 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-mixed-RTL-in-dark-mode-1-Mobile-Chrome-linux.png textfields: fix RTL layout for SVG exports (#3680) 2024-05-03 13:40:59 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-none-in-dark-mode-1-chromium-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-geo-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-in-dark-mode-1-chromium-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-geo-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-in-dark-mode-1-chromium-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-geo-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png Make sure correct dark mode colours get used in exports (#2492) 2024-01-17 14:31:38 +00:00
Export-snapshots-Exports-with-geo-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-in-dark-mode-1-chromium-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-geo-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png [hot take] Make dark mode colours pop more (#2478) 2024-01-16 17:03:58 +00:00
Export-snapshots-Exports-with-geo-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-in-dark-mode-1-chromium-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-geo-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png Color tweaks (light and dark mode) (#3486) 2024-04-17 09:31:55 +00:00
Export-snapshots-Exports-with-note-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-in-dark-mode-1-chromium-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-in-dark-mode-1-chromium-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-in-dark-mode-1-chromium-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-in-dark-mode-1-chromium-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-note-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png Stickies: release candidate (#3249) 2024-04-14 18:40:02 +00:00
Export-snapshots-Exports-with-text-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-in-dark-mode-1-chromium-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-in-dark-mode-1-chromium-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-in-dark-mode-1-chromium-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-in-dark-mode-1-chromium-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00
Export-snapshots-Exports-with-text-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png Separate text-align property for shapes (#3627) 2024-04-29 10:58:15 +00:00