Commit graph

2654 commits

Author SHA1 Message Date
Steve Ruiz
ad902be5e6
Expand props (#2948)
This PR expands the tldraw / tldraweditor component props.

### Change Type

- [x] `patch` — Bug fix
2024-02-25 11:16:10 +00:00
Steve Ruiz
b2cb0d27b0
fix structured clone reference in drawing (#2945)
This PR fixes a rogue structuredClone reference in the drawing state.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a reference to structuredClone that caused a crash on older
browsers.
2024-02-24 20:02:17 +00:00
Steve Ruiz
0f1599d5b3
[fix] Corejs imports (#2940)
This PR fixes a bug with corejs imports. See
https://github.com/tldraw/tldraw/issues/1947

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a bug effecting some users related to corejs imports.
2024-02-23 17:36:27 +00:00
Lu Wilson
7a09581081
Add example for external UI (#2846)
This PR adds an example for how to add external UI components.

It's something that I've been asked for help with in the past, and it's
something I wish more consumers would do when using tldraw inline - it
would help the editor feel less cramped. Therefore, I'd like to have it
is as an example we can point people to.

![2024-02-19 at 11 53 18 - Maroon
Boar](https://github.com/tldraw/tldraw/assets/15892272/f043bb77-3181-4a7d-b736-2b6a5012e208)

> Some other context:
> We've talked about giving this sorta thing more first-class support in
the future, eg: with a `useEditorInstance` hook or something.

Closes TLD-2128

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Try out the External UI example.
2. Make sure you can change tool by pressing the toolbar buttons.
3. Make sure you can change tool by pressing keys (eg: d, e)

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

### Release Notes

- Docs: Added external UI example.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-23 16:07:08 +00:00
Taha
d731951fcf
Remove template references (#2919)
Removes references to the vite template

- [x] `documentation` — Changes to the documentation only[^2]
### Release Notes

- changes the doc site so it no longer references the site template
2024-02-23 15:37:59 +00:00
Steve Ruiz
37bd92ef60
Fix keyboard shortcuts bugs (#2936)
This PR moves the focus 

### Change Type

- [x] `minor` 

### Test Plan

1. Select an element.
2. Press the delete quick action menu button.
3. Undo the delete with a keyboard shortcut.

1. Create a geo shape
2. Use the style panel to change the geo type
3. Undo so that it deletes
4. Try to redo

### Release Notes

- [Fix] Keyboard shortcut focus bug

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2024-02-23 15:35:13 +00:00
Taha
fcf97958e8
E2E Style Panel Tests (#2878)
This PR adds E2E tests for the style panel.

It checks that: 
- the style panel opens and closes as expected on mobile
- the style panel button is disabled for the eraser tool on mobile
- selecting a style hints the button
- changing a style changes the appearance of the shape
- It also moves a test from the toolbar tests that checks the correct
styles are exposed for the right tools


fixes tld-2222

- [x] `tests` — Changes to any test code only[^2]


### Release Notes

- Add style panel E2E tests

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-23 14:37:15 +00:00
David Sheldrick
046ebc4ac0
Fix undo/redo for Opacity Slider + Style dropdowns. (#2933)
Closes #2664 and #2929 

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Fixed issues where undo/redo entries were not being set up correctly
for the opacity slider or the style dropdown menus.
2024-02-23 14:25:36 +00:00
Steve Ruiz
521d84a611
Add custom static assets example, extract preloadFont (#2932)
This PR adds a custom static assets example.

It also:
- extracts preloadFont into a async function to make custom preloading
easier
- accounts for file-based formats

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Test the example.

### Release Notes

- Docs, added custom static assets example.
2024-02-23 13:58:06 +00:00
Mitja Bezenšek
303c8782e3
Fix an issue with publishing canary (#2931)
Our canary builds are broken right now, see
https://github.com/tldraw/tldraw/actions/runs/8018554530/job/21904677162#step:4:13

Looks like `auto@11.0.5` solves this
https://github.com/intuit/auto/issues/2425

### Change Type

- [ ] `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]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
2024-02-23 12:27:37 +00:00
Mitja Bezenšek
217a1d073f
Fix frames not preserving shape order (#2928)
It looks like enclosing shapes with a new frame did not preserve the
order of the shapes. Also makes framing inside of frames work.

Solves https://github.com/tldraw/tldraw/issues/2892

Before:


https://github.com/tldraw/tldraw/assets/2523721/90da4fc0-92a1-49fe-b658-73842c4ef4c2


After:


https://github.com/tldraw/tldraw/assets/2523721/0558d22e-8216-4d84-8a89-7dd049c37974

### 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. Add a few shapes.
2. Make sure to change some of their order (example in the gif puts the
last created shape to the back)
3. Create a new frame that encloses these shapes.
4. The order of the shapes should be preseved.

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

### Release Notes

- Fix an issue when framing shapes did not preserve the original order
of the shapes.
2024-02-23 11:25:13 +00:00
Steve Ruiz
e3ed84f1ff
Export history hooks (#2926)
This PR restores `useCanUndo` and `useCanRedo` to exports from tldraw.

### Change Type

- [ ] `patch` — Bug fix
- [x] `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
2024-02-22 19:25:08 +00:00
Dan Groshev
a8999aa0a0
Make Vercel URL rewrites precise (#2913)
### The problem

Right now we use a catchall path in Vercel routing config to rewrite all
requests that don't match existing assets to `/index.html`, which is
needed for client side routing to work. This, however, messes up 404
errors for truly non-existing files which won't be handled by the SPA,
because they get redirected to index.html.

Even worse, this interacts very poorly with caching. Normally if we
request a non-existent file, then put the file in place, and request the
file again, we'll get 404 the first time and the actual file the second
time. However, in our case we instead return `/index.html` after the
first attempt and cache that response, making it impossible to correct a
missing file without cache flush.

### The solution

One way to fix this is to make the regex in Vercel config precise, so
that they only match our SPA routes. However, it can be dangerous,
because this means we'll need to manually update the config with new SPA
routes every time we add any. This PR tests that regexes we're using in
Vercel match all routes that we set in the SPA router.

### Potential future improvements

It's very possible to generate Vercel's config from React Router routing
objects, but at the moment it's not done because that would require
importing most of dotcom during the build phase, which seem to cause
errors.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

### Test Plan

1. Might need a light smoke test after deployment to dotcom.

- [x] End to end tests
2024-02-22 18:25:45 +00:00
Taha
eb3706e918
Bounds snapping shape (#2909)
This PR adds an example of how to use the new getBoundsSnapGeometry
method to get custom snapping behaviour on your shapes.

![2024-02-21 at 15 58 23 - Purple
Bovid](https://github.com/tldraw/tldraw/assets/98838967/8d7e73bb-ea29-45f6-98ed-141a8ce17065)


- [x] `documentation` — Changes to the documentation only[^2]


### Release Notes

- Adds a custom bounds snapping shape
2024-02-22 17:10:50 +00:00
Lu Wilson
8bc108462a
Improve dialog appearance on small components (#2884)
This PR fixes and improves the appearance on dialogs on small tldraw
components, eg: Inline components.

Fixes TLD-2232


![image](https://github.com/tldraw/tldraw/assets/15892272/0fae3be9-4a52-45f3-a107-529e101aa4bd)


![image](https://github.com/tldraw/tldraw/assets/15892272/eb0ad67f-b390-4738-885a-65c968d7c989)

![image](https://github.com/tldraw/tldraw/assets/15892272/24946c06-4762-4e51-8113-797be2203f79)


![image](https://github.com/tldraw/tldraw/assets/15892272/0d646044-c8a5-4b05-9530-5f3758767d0d)

Marking as minor instead of patch because it adds a new prop to
`TldrawUiKbd`.

### Change Type

- [ ] `patch` — Bug fix
- [x] `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. Open the "Inset editor" example.
2. Open the keyboard shortcuts dialog.
3. Shrink the window down.
4. Make sure the dialog remains visible at all window sizes.

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

### Release Notes

- Dev: Made default dialogs work better when used in small components.
2024-02-22 12:42:01 +00:00
Mime Čuvalo
07f58b6885
examples: let people copy out code (#2920)
### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-22 12:36:03 +00:00
Lu Wilson
e15c9f12bb
Lokalise: Translations update (#2908)
This PR just changes the ordering of our translations files.

I did this because it makes it easier for contributors to update
translations directly in those files without causing lots of
hard-to-read formatting changes each time we export from Lokalise.

I also updated our Notion doc instructions on how to export from
Lokalise:
https://www.notion.so/tldraw/How-to-make-a-PR-from-Lokalise-e63e61f6beec495bbb4c31c376e9c1a1?pvs=4
2024-02-22 11:20:51 +00:00
荣顶
07dfc1b5b6
docs: Adjust max columns of contributor list in README. (#2917)
<img width="947" alt="image"
src="https://github.com/tldraw/tldraw/assets/42437658/ec5fe1b9-fef2-4675-a59e-9339e4077c8c">
2024-02-22 11:01:06 +00:00
Taha
f3f8475fc5
Better example intros (#2912)
Moves the article content above the iframe and adds the description to
the title.


- [x] `documentation` — Changes to the documentation only[^2]


### Release Notes

- Adds more info to the examples section of the docs.
2024-02-22 09:05:35 +00:00
Mitja Bezenšek
ee5b70dfc7
VS Code 2.0.25 (#2911)
VS Code version bump.

### 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
2024-02-22 08:50:14 +00:00
荣顶
8bd18e40d4
docs: add star history and contributor list to README. (#2914)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `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

[ ]: publishes a `patch` release, for devDependencies use `internal`
[x]: will not publish a new version

### Test Plan

No need to test

### Release Notes

add star history and contributor list to README.

<img width="854" alt="image"
src="https://github.com/tldraw/tldraw/assets/42437658/d0c73289-9fb1-4dc0-882a-0593ebc13895">


- Increases project transparency: This can help other developers
understand the popularity and activity level of the project.

- Recognizes contributors: Listing contributors can recognize those who
have contributed to the project, which may also motivate more people to
participate in the project.

- Provides more information: The star history chart and contributor list
provide more information for potential users or contributors, helping
them make decisions about whether to use or participate in the project.

- Enhances the project's professionalism: A detailed README file can
enhance the professionalism of the
2024-02-22 08:33:52 +00:00
huppy-bot[bot]
82527884ad Update CHANGELOG.md [skip ci] 2024-02-21 15:28:00 +00:00
Mime Čuvalo
e9dc9a1158
menu fixes: add company links in general; add tracking to lang menu (#2902)
- the company links appear back in the burger menu. they could be
selectively shown if mobile but i'd argue they should just always be
there.
- add the `track` to LanguageMenu to make the menu update. however, i'm
a little annoyed that i don't understand why the Help menu already works
without this :-/

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Add company menu links back in and make sure the Language menu is
updated on change.
2024-02-21 15:19:56 +00:00
Lu Wilson
a8ca235eaf
Fix some menu issues on mobile (#2906)
This PR fixes some issues with menus on mobile.

- Adds the missing submenu button on the pages menu.
- Re-adds the min-width for the main menu. Looks like it was
accidentally copy-pasted over?

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. On mobile...
2. In an empty board...
3. Open the Edit menu.
4. Make sure the buttons are not tenny tiny.
5. Open the pages menu.
6. Press the pencil button in the pages menu.
7. Make sure you can see the submenu button on each page (icon is three
dots).

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

### Release Notes

- Add a brief release note for your PR here.
2024-02-21 15:18:53 +00:00
alex
1850602ea7
fix invite others (#2904)
"Invite others" button in the people menu looked off - icon was in the
wrong place and it was messing up the layout.

### Change Type

- [x] `patch` — Bug fix
2024-02-21 15:16:06 +00:00
David Sheldrick
987a576423
Check tsconfig "references" arrays (#2891)
Closes #2800

This PR makes it so that `check-scripts` will error out if you forget to
add a "references" entry to a tsconfig file when adding an internal
dependency in our monorepo.

If these project references are missed it can prevent TS from
building/rebuilding things when they need to be built/rebuilt.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-21 13:07:53 +00:00
Mitja Bezenšek
5fd6b4dca7
Fix object validator (#2897)
Make sure we check if we have the optional function before calling it

### 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
2024-02-21 12:15:51 +00:00
Mime Čuvalo
f5f9da4f64
[experiment] paste: show little puff when pasting to denote something happened (#2787)
@steveruizok go ahead and take a look at the animation css and tweak as
you like.
@SomeHats and @steveruizok this is an experiment in that this is prbly
the wrong way to approach it? But I'd be curious to learn if there was a
more proper route here


https://github.com/tldraw/tldraw/assets/469604/40a7029c-f4e8-4f2a-914e-8e6f264be4c7

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- UI: add a little 'puff' when something is pasted to tell that
something has happened.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-21 10:46:57 +00:00
alex
fd4b5c6291
Add line IDs & fractional indexes (#2890)
In #2856, we moved changed line handles into an array of points. This
introduced an issue where some concurrent operations wouldn't work
because they array indexes change. We need some sort of stable way of
referring to these points. Our existing fractional indexing system is a
good fit.

In this version, instead of making the points be a map from index to
x/y, we make the points be a map from id (the index) to
x/y/index/id(also index). This is "kinda silly" (steve's words) but
might be more familiar to devs who are expecting maps to be keyed on IDs
rather than anything else.

### Change Type

- [x] `major` — Breaking change
2024-02-21 10:06:14 +00:00
Lu Wilson
dac814fd39
Fix custom keyboard shortcut dialog example (#2876)
This PR fixes the custom keyboard shortcut dialog example.

Previously, the custom menu item wasn't appearing in the menu because it
didn't have a shortcut associated with it. (we filter out any actions
without one).

I fixed it by adding a smiley face. I tried adding a real shortcut, but
I think it made the example too complicated. So I decided on a fake
smiley face instead! After all, the example is demonstrating how to
customise the UI, not how to add an action.


![image](https://github.com/tldraw/tldraw/assets/15892272/e521c603-9978-439b-8f51-684c2e2d3f97)


### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Open the custom keyboard shortcuts dialog example.
2. Open the keyboard shortcuts menu.
3. Check that it says "Like my posts" in the dialog.

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

### Release Notes

- Docs: Fixed custom keyboard shortcut dialog example.
2024-02-21 09:41:54 +00:00
Lu Wilson
59285690d2
Sentence case all example titles (#2889)
This PR converts all example titles and categories to sentence case, to
make them consistent with our UI and the other examples.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Look at the examples app.
2. Check that all the titles of examples make you feel calm and good
inside.

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

### Release Notes

- Docs: Made the examples titles sentence case.
2024-02-20 18:13:50 +00:00
David Sheldrick
3e12b27728
Fix 'style panel doesn't always disappear if you switch to the hand/laser tools' (#2886)
We had some bad logic in `useRelevantStyles` explicitly allowing an
opacity-slider to be rendered at all times when there is at least one
shape selected.

This shouldn't be the case when the editor is in non-shape-focused tools
like the move tool and the laser pointer tool. I refactored the hook
slightly to make it easier to express the correct logic. See the comment
for a more detailed description.

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version


### Release Notes

- Fixes an bug causing the opacity slider to show up in the move tool
and laser pointer tool.
2024-02-20 15:09:45 +00:00
Mime Čuvalo
9b65b0e20f
docs: fix scroll position and theming issue for code snippets (#2883)
- scrolling to a section was hiding the header under the top layout when
clicking on the sidebar
- dark mode wasn't hydrating correctly and we only render on client, for
now

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-02-20 14:24:54 +00:00
David Sheldrick
d372010ad3
remove stray 'console' (#2881)
tiny cleanup, closes #2839

### Change Type

- [x] `patch` — Bug fix
2024-02-20 13:41:58 +00:00
David Sheldrick
4a2040f92c
Faster validations + record reference stability at the same time (#2848)
This PR adds a validation mode whereby previous known-to-be-valid values
can be used to speed up the validation process itself. At the same time
it enables us to do fine-grained equality checking on records much more
quickly than by using something like lodash isEqual, and using that we
can prevent triggering effects for record updates that don't actually
alter any values in the store.

Here's some preliminary perf testing of average time spent in
`store.put()` during some common interactions

| task | before (ms) | after (ms) |
| ---- | ---- | ---- |
| drawing lines | 0.0403 | 0.0214 |
| drawing boxes | 0.0408 | 0.0348 |
| translating lines | 0.0352 | 0.0042 |
| translating boxes | 0.0051 | 0.0032 |
| rotating lines | 0.0312 | 0.0065 |
| rotating boxes | 0.0053 | 0.0035 |
| brush selecting boxes | 0.0200 | 0.0232 |
| traversal with shapes | 0.0130 | 0.0108 |
| traversal without shapes | 0.0201 | 0.0173 |

**traversal** means moving the camera and pointer around the canvas

#### Discussion

At the scale of hundredths of a millisecond these .put operations are so
fast that even if they became literally instantaneous the change would
not be human perceptible. That said, there is an overall marked
improvement here. Especially for dealing with draw shapes.

These figures are also mostly in line with expectations, aside from a
couple of things:

- I don't understand why the `brush selecting boxes` task got slower
after the change.
- I don't understand why the `traversal` tasks are slower than the
`translating boxes` task, both before and after. I would expect that
.putting shape records would be much slower than .putting pointer/camera
records (since the latter have fewer and simpler properties)

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add a brief release note for your PR here.
2024-02-20 12:35:25 +00:00
alex
50f77fe75c
[Snapping 6/6] Self-snapping API (#2869)
This diff adds a self-snapping API for handles. Self-snapping is used
when a shape's handles want to snap to the shape itself. By default,
this isn't allowed because moving the handle might move the snap point,
which creates a janky user experience.

Now, shapes can return customised versions of their normal handle
snapping geometry in these cases. As a bonus, line shapes now snap to
other handles on their own line!

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Line handles should snap to other handles on the same line when
holding command

- [x] Unit Tests

### Release Notes

- Line handles now snap to other handles on the same line when holding
command

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-19 17:27:29 +00:00
Steve Ruiz
31ce1c1a89
[handles] Line shape handles -> points (#2856)
This PR replaces the line shape's `handles` prop with `points`, an array
of `VecModel`s.

### Change Type

- [x] `minor` — New feature

### Test Plan

- [x] Unit Tests
- [ ] End to end tests
2024-02-19 17:10:31 +00:00
Lu Wilson
b1b821e529
Update Hungarian and Korean (#2871)
This PR pulls over updated translations of Hungarian and Korean from
Lokalise.
2024-02-19 16:31:03 +00:00
Taha
d1151a7af5
Editable shape example (#2853)
This PR adds an example for an editable shape. I wanted to show the
onEditEnd method so I just made the shape do a little wiggle.

Closes #2592 

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
### Release Notes

- Adds an editable shape example
2024-02-19 16:00:37 +00:00
Lu Wilson
8b390dddb1
Fix dialog title styles (#2873)
This PR fixes default dialog styles being wrong.


![image](https://github.com/tldraw/tldraw/assets/15892272/0f541111-f9b1-4ae4-9019-aaf725ab2cd2)


### Change Type

- [x] `patch` — Bug fix
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

Try opening the following dialogs to check their titles look correct:
1. Keyboard shortcuts.
2. Edit link.
3. Insert embed.

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

### Release Notes

- Unreleased bug: Fixed dialog titles appearance.
2024-02-19 15:58:07 +00:00
Lu Wilson
c57f81fdc9
Fix some incorrect translation keys (#2870)
This PR fixes some cases where translation keys became wrong. They
slipped in with the composable UI changes.

(side-note: the styling of those titles looks wrong right? that wasnt an
intentional change right?)


![image](https://github.com/tldraw/tldraw/assets/15892272/187d5256-3820-491f-a946-1affca2a6161)


![image](https://github.com/tldraw/tldraw/assets/15892272/cfb809c1-c0e3-45b6-b27c-1b5d1829550e)


To validate for yourself, you can:
- Change the typing of `msg` in `useTranslation` to accept only
translation keys. (no strings)
- Run `yarn lint`.
- Look for any errors where we're passing in a string literal. There
should be none now!

---

In the future, I'd love to add a tiny eslint rule that enforces this for
string literals. We accept strings in `msg` because it makes it easier
for consumers (and us) to add custom labels, etc.

Or... if @mimecuvalo does some bigger work on translations, we might
have a better solution.

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

To validate for yourself, you can:
- Change the typing of `msg` in `useTranslation` to accept only
translation keys. (no strings)
- Run `yarn lint`.
- Look for any errors where we're passing in a string literal. There
should be none now!

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

### Release Notes

- Unreleased issue. Fixed some translation keys being wrong.
2024-02-19 14:54:39 +00:00
Steve Ruiz
9fc5f4459f
Roundup fixes (#2862)
This one is a roundup of superficial changes, apologies for having them
in a single PR.

This PR:
- does some chair re-arranging for one of our hotter paths related to
updating shapes
- changes our type exports for editor components
- adds shape indicator to editor components
- moves canvas to be an editor component
- fixes a CSS bug with hinted buttons
- fixes CSS bugs with the menus
- fixes bad imports in examples

### Change Type

- [x] `major`
2024-02-19 14:52:43 +00:00
Mitja Bezenšek
b3d6af4454
Allow users to set document name and use it for exporting / saving (#2685)
Adds the ability to change document names in the top center part of the
UI. This mostly brings back the functionality we already had in the
past.

This is basically a port of what @SomeHats did a while back. I changed
the dropdown options and removed some of the things (we are not dealing
with network requests directly so some of that logic did not apply any
longer). We did have autosave back then, not sure if we want to bring
that back?

Changes the `exportAs` api, thus braking.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [x] `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. Top center should now show a new UI element. It has a dropdown with a
few actions.
2. Double clicking the name should also start editing it.
3. The name should also be respected when exporting things. Not if you
select some shapes or a frame. In that case we still use the old names.
But if you don't have anything selected and then export / save a project
it should have the document name.

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

### Release Notes

- Allow users to name their documents.
2024-02-19 12:30:26 +00:00
Rokixy
1e7af3a3e0
Fix some problem under Windows OS development enviroment (#2722)
1. language.ts will be changed in every commit when commiting with a
'zh-cn' OS language setting. Fix it by specifying the locale 'en' when
sorting languages with localeCompare().

2. The parameter of glob.sync() must in posix path form. In Win32 system
the path separator '\\' considered as a escape char by node-glob, Fix it
by replace '\\' with '/'.

3. build-api with child_process.execFile() will cause "Error: spawn yarn
ENOENT" in Win32. Replace it with child_process.exec().
### Change Type

- [ ] `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]
- [x] `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

### Release Notes

- stablize language.ts when running under different OS language.
- add isWin32() and posixPath() to format the parameter of glob.sync().
- use child_process.exec() instead of child_process.execFile() for win32
platform.
2024-02-19 11:14:33 +00:00
Rokixy
a3bce9ecb4
doc: fix typo in examples (#2859)
fix typo in examples

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `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

### Release Notes

- fix typo in examples
2024-02-19 07:59:19 +00:00
Steve Ruiz
3e41c3acd7
[fix] grid, other insets (#2858)
Fix the grid and other insets, a few CSS cleanups.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Turn on the grid.

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

### Release Notes

- Fixes a bug with the grid not appearing.
2024-02-18 23:01:00 +00:00
Taha
7e673b5e37
E2e tests for the toolbar (#2709)
This PR adds some e2e tests for the toolbar.

Fixtures have been set up for the toolbar and style panel, and are
fairly barebones at the moment. Eventually each menu should have a
fixture associated with it, and all tests will use the class defined in
the fixtures file.

### Change Type

- [x] `tests` — Changes to any test code only[^2]

### Release Notes

- Add e2e tests for the toolbar
2024-02-16 14:15:00 +00:00
Taha
c039d44f72
fix frame style panel (#2851)
Opacity slider was squished when frame tool was selected. I think it's
because this PR #2847 got rid of the tlui-style-panel div. Putting it
back seems to fix it.

### Change Type

- [x] `patch` — Bug fix



### Release Notes

- Fixes an issue with the opacity slider getting squished.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-16 13:56:21 +00:00
Lu Wilson
212eb88480
Add component for viewing an image of a snapshot (#2804)
This PR adds the `TldrawImage` component that displays a tldraw snapshot
as an SVG image.

![2024-02-15 at 12 29 52 - Coral
Cod](https://github.com/tldraw/tldraw/assets/15892272/14140e9e-7d6d-4dd3-88a3-86a6786325c5)

## Why

We've seen requests for this kind of thing from users. eg: GitBook, and
on discord:

<img width="710" alt="image"
src="https://github.com/tldraw/tldraw/assets/15892272/3d3a3e9d-66b9-42e7-81de-a70aa7165bdc">

The component provides a way to do that.
This PR also untangles various bits of editor state from image
exporting, which makes it easier for library users to export images more
agnostically. (ie: they can now export any shapes on any page in any
theme. previously, they had to change the user's state to do that).

## What else

- This PR also adds an **Image snapshot** example to demonstrate the new
component.
- We now pass an `isDarkMode` property to the `toSvg` method (inside the
`ctx` argument). This means that `toSvg` doesn't have to rely on editor
state anymore. I updated all our `toSvg` methods to use it.
- See code comments for more info.

## Any issues?

When you toggle to editing mode in the new example, text measurements
are initially wrong (until you edit the size of a text shape). Click on
the text shape to see how its indicator is wrong. Not sure why this is,
or if it's even related. Does it ring a bell with anyone? If not, I'll
take a closer look. (fixed, see comments --steve)

## Future work

Now that we've untangled image exporting from editor state, we could
expose some more helpful helpers for making this easier.

Fixes tld-2122

### Change Type

- [x] `minor` — New feature

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Open the **Image snapshot** example.
2. Try editing the image, saving the image, and making sure the image
updates.

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

### Release Notes

- Dev: Added the `TldrawImage` component.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-16 13:54:48 +00:00
Steve Ruiz
dd67577fea
[fix] pointer capture logging when debug flag is off (#2850)
This PR fixes a bug where pointer capture would log when the debug flag
was off.

### Change Type

- [x] `patch` — Bug fix
2024-02-16 10:41:27 +00:00