Fix text-wrapping on Safari (#1980)
Co-authored-by: Alex Alex@dytry.ch closes [#1978](https://github.com/tldraw/tldraw/issues/1978) Text was wrapping on Safari because the measure text div was rendered differently on different browsers. Interestingly, when forcing the text-measure div to be visible and on-screen in Chrome, the same text-wrapping behaviour was apparent. By setting white-space to 'pre' when width hasn't been set by the user, we can ensure that only line breaks the user has inputted are rendered by default on all browsers. ### Change Type - [x] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [ ] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. On Safari 2. Make a new text shape and start typing 3. At a certain point the text starts to wrap without the width having been set ### Release Notes - Fix text wrapping differently on Safari and Chrome/Firefox Before/After <image width="350" src="https://github.com/tldraw/tldraw/assets/98838967/320171b4-61e0-4a41-b8d3-830bd90bea65"> <image width="350" src="https://github.com/tldraw/tldraw/assets/98838967/b42d7156-0ce9-4894-9692-9338dc931b79">
This commit is contained in:
parent
da33179a31
commit
f73bf9a7fe
8 changed files with 29 additions and 20 deletions
|
@ -7,7 +7,7 @@ export function sleep(ms: number) {
|
|||
}
|
||||
|
||||
const measureTextOptions = {
|
||||
width: 'fit-content',
|
||||
width: null,
|
||||
fontFamily: 'var(--tl-font-draw)',
|
||||
fontSize: 24,
|
||||
lineHeight: 1.35,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue