d48e403ed1
This diff fixes a number of issues with text export by completely overhauling how we approach laying out text in exports. Currently, we try to carefully replicate in-browser behaviour around line breaks and whitespace collapsing. We do this using an iterative algorithm that forces the browser to perform a layout for each word, and attempting to re-implement how the browser does things like whitespace collapsing & finding line break opportunities. Lots of export issues come from the fact that this is almost impossible to do well (short of sending a complete text layout algorithm & full unicode lookup tables). Luckily, the browser already has a complete text layout algorithm and full unicode lookup tables! In the new approach, we ask the browser to lay the text out once. Then, we use the [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) API to loop over every character in the rendered text and measure its position. These character positions are then grouped into "spans". A span is a contiguous range of either whitespace or non-whitespace characters, uninterrupted by any browser-inserting line breaks. When we come to render the SVG, each span gets its own `<tspan>` element, absolutely positioned according to where it ended up in the user's browser. This fixes a bunch of issues: **Misaligned text due to whitespace collapsing at line breaks**  **Hyphenated text (or text with non-trivial/whitespace-based breaking rules like Thai) not splitting correctly**  **Weird alignment issues in note shapes**  **Frame labels not respecting multiple spaces & not truncating correctly**  #### Quick note on browser compatibility This approach works well across all browsers, but in some cases actually _increases_ x-browser variance. Consider these screenshots of the same element (original above, export below):  Notice how on chrome, the whitespace at the end of each line of right-aligned text is preserved. On safari, it's collapsed. The safari option looks better - so our manual line-breaking/white-space-collapsing algorithm preferred safari's approach. That meant that in-app, this shape looks very slightly different from browser to browser. But out of the app, the exports would have been the same (although also note that hyphenation is broken). Now, because these shapes look different across browsers, the exports now look different across browsers too. We're relying on the host-browsers text layout algorithm, which means we'll faithfully reproduce any quirks/inconsistencies of that algorithm. I think this is an acceptable tradeoff. ### Change Type - [x] `patch` — Bug Fix ### Test Plan * Comprehensive testing of text in exports, paying close attention to details around white-space, line-breaking and alignment * Consider setting `tldrawDebugSvg = true` * Check text shapes, geo shapes with labels, arrow shapes with labels, note shapes, frame labels * Check different alignments and fonts (including vertical alignment) ### Release Notes - Add a brief release note for your PR here. |
||
|---|---|---|
| .github | ||
| .husky | ||
| .yarn | ||
| apps | ||
| assets | ||
| config | ||
| e2e | ||
| packages | ||
| scripts | ||
| .eslintignore | ||
| .eslintplugin.js | ||
| .eslintrc.js | ||
| .gitignore | ||
| .ignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| lazy.config.ts | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| public-yarn.lock | ||
| README.md | ||
tldraw
Welcome to the public monorepo for tldraw.
What is tldraw?
tldraw is a collaborative digital whiteboard available at tldraw.com. Its editor, user interface, and other underlying libraries are open source and available in this repository. They are also distributed on npm. You can use tldraw to create a drop-in whiteboard for your product or as the foundation on which to build your own inifinite canvas applications.
Learn more at tldraw.dev.
Note
This repo contains source code for the current version of tldraw. You can find the source for the original version here.
Installation & Usage
To learn more about using tldraw in your React application, follow our guide here or see this StackBlitz.
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'
function TldrawExample() {
return <Tldraw />
}
Local development
To run the local development server, first clone this repo.
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420.
Examples
Our development server contains several examples that demonstrates different ways that you can customize tldraw or use its APIs. Each example is found in the apps/examples/src folder.
- eg:
localhost:5420for the basic example. - eg:
localhost:5420/apifor the API example.
To learn more about using tldraw, visit our docs.
About this repository
Top-level layout
This repository's contents is divided across four primary sections:
/appscontains the source for our applications/packagescontains the source for our public packages/scriptscontains scripts used for building and publishing/assetscontains icons and translations relied on by the app
Applications
examples: our local development / examples projectdocs: our docs site at tldraw.devvscode: our Visual Studio Code extension
Packages
editor: the tldraw editorui: the editor's user interfacetldraw: the main tldraw package containing both the editor and the UIprimitives: low-level primitives for working with vectors and geometrytlschema: shape definitions and migrationstlsync-client: a library for (locally) syncronizing editor instancestlstore: an in-memory reactive databasetlvalidate: a validation library used for run-time validationtlassets: a library for working with tldraw's fonts and translationsfile-format: a library for working with tldraw's.tldrfile formatutils: low-level data utilities shared by other libraries
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Distributions
You can find tldraw on npm here.
License
The source code for various apps and packages in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Note: we are currently unable to accept contributions on the @tldraw/tldraw or @tldraw/editor packages while we work out our final licensing.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.