Commit graph

59 commits

Author SHA1 Message Date
alex
05f58f7c2a
React-powered SVG exports (#3117)
## Migration path
1. If any of your shapes implement `toSvg` for exports, you'll need to
replace your implementation with a new version that returns JSX (it's a
react component) instead of manually constructing SVG DOM nodes
2. `editor.getSvg` is deprecated. It still works, but will be going away
in a future release. If you still need SVGs as DOM elements rather than
strings, use `new DOMParser().parseFromString(svgString,
'image/svg+xml').firstElementChild`

## The change in detail
At the moment, our SVG exports very carefully try to recreate the
visuals of our shapes by manually constructing SVG DOM nodes. On its own
this is really painful, but it also results in a lot of duplicated logic
between the `component` and `getSvg` methods of shape utils.

In #3020, we looked at using string concatenation & DOMParser to make
this a bit less painful. This works, but requires specifying namespaces
everywhere, is still pretty painful (no syntax highlighting or
formatting), and still results in all that duplicated logic.

I briefly experimented with creating my own version of the javascript
language that let you embed XML like syntax directly. I was going to
call it EXTREME JAVASCRIPT or XJS for short, but then I noticed that we
already wrote the whole of tldraw in this thing called react and a (imo
much worse named) version of the javascript xml thing already existed.

Given the entire library already depends on react, what would it look
like if we just used react directly for these exports? Turns out things
get a lot simpler! Take a look at lmk what you think

This diff was intended as a proof of concept, but is actually pretty
close to being landable. The main thing is that here, I've deliberately
leant into this being a big breaking change to see just how much code we
could delete (turns out: lots). We could if we wanted to make this
without making it a breaking change at all, but it would add back a lot
of complexity on our side and run a fair bit slower

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-03-25 14:16:55 +00:00
Mime Čuvalo
a8477d00fa
toolbar: fix missing title attributes (#3244)
The `title` attribute is currently missing in production. It was using
`title` when it should have been using `titleStr`
This also nixes the `title` attribute which is used just twice in the
codebase — probably not necessary to have a different title/label but
lemme know if you disagree.

Adds this behavior back in:
<img width="204" alt="Screenshot 2024-03-22 at 18 15 42"
src="https://github.com/tldraw/tldraw/assets/469604/f9b6d8d7-07ea-4f2f-8b45-e650ede18ae4">


### 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


### Release Notes

- Fix title's being missing on toolbar items.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-24 14:47:21 +00:00
alex
854bfee0c6
top bar design tweaks (#3205)
For a while, there've been a couple design issues with our top bar that
have been bothering me:


![image](https://github.com/tldraw/tldraw/assets/1489520/55355b7c-7ff2-4843-841c-5e53cbd788b2)

This diff:
- Makes the document title and share button have the same height and
vertical alignment
- Vertically centers the share button between the top of the viewport
and the share panel
- Aligns the right of the share button to the right of the style panel

<img width="1512" alt="Screenshot 2024-03-18 at 16 08 09"
src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e">

<img width="1512" alt="Screenshot 2024-03-18 at 16 08 18"
src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67">

Also tweaking some of the spacing and radiuses around the document title
itself to get things pixel perfect
 
Before:
<img width="395" alt="Screenshot 2024-03-19 at 15 23 05"
src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394">

After:
<img width="378" alt="Screenshot 2024-03-19 at 15 22 27"
src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1">


### Change Type

- [x] `dotcom` — Changes the tldraw.com web app
- [x] `bugfix` — Bug fix
2024-03-19 15:29:01 +00:00
Dan Groshev
d7b80baa31
use native structuredClone on node, cloudflare workers, and in tests (#3166)
Currently, we only use native `structuredClone` in the browser, falling
back to `JSON.parse(JSON.stringify(...))` elsewhere, despite Node
supporting `structuredClone` [since
v17](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)
and Cloudflare Workers supporting it [since
2022](https://blog.cloudflare.com/standards-compliant-workers-api/).
This PR adjusts our shim to use the native `structuredClone` on all
platforms, if available.

Additionally, `jsdom` doesn't implement `structuredClone`, a bug [open
since 2022](https://github.com/jsdom/jsdom/issues/3363). This PR patches
`jsdom` environment in all packages/apps that use it for tests.

Also includes a driveby removal of `deepCopy`, a function that is
strictly inferior to `structuredClone`.

### Change Type

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

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

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [x] `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. A smoke test would be enough

- [ ] Unit Tests
- [x] End to end tests
2024-03-18 17:16:09 +00:00
Mitja Bezenšek
d16e06ff40
Update the document title to include the document name. (#3197)
We now update the `document.title` with the document name. For empty
rooms we default back to `tldraw`, just as we have it in `index.html`.

### Change Type

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

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

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `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

### Release Notes

- Use the document name in the `document.title`.
2024-03-18 15:34:08 +00:00
Mitja Bezenšek
cef70d6a81
Remove access token logic. (#3187)
Looks like we had some leftover logic from pro. We removed it from
workers, but not (completely) from the client.

### Change Type

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

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

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [x] `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


### Release Notes

- Remove some leftover logic from pro days.
2024-03-18 14:34:38 +00:00
David Sheldrick
4d8dab843e
Enable document name (#3150)
Apparently we were supposed to do this for the previous release, and the
release notes mentioned the document title, so I'm doing a quick hotfix
for dotcom.

### Change Type

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

- [x] `dotcom` — Changes the tldraw.com web app

<!--  Please select a 'Type' label ️ -->

- [x] `feature` — New feature
2024-03-14 10:39:33 +00:00
Steve Ruiz
599a6cd484
quick fixes (#3128)
- Menu items
- keyboard shortcuts dialog menu

### Change Type

- [x] `patch` — Bug fix
2024-03-12 11:50:12 +00:00
Steve Ruiz
b0210c0d6d
Restore export menu content (#3126)
This PR restores the export menu on dotcom.

Before:
<img width="545" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7377c9ae-7644-4889-a01f-7e304fbc8c68">

After:
<img width="824" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/4f634d53-06ed-42a7-b8bb-f92e183ce5dd">


### Change Type

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

### Test Plan

1. Check the menu on tldraw.com / readonly / shared room / snapshot
2024-03-12 11:45:59 +00:00
Steve Ruiz
60cc0dcce3
Menu updates / fix flip / add export / remove Shape menu (#3115)
This PR:
- adds the export all menu items to the main menu
- removes the export all menu items from the dotcom menus
- removes the shape menu and reverts several changes from
https://github.com/tldraw/tldraw/pull/2782. This was not properly
reviewed (I thought it was a PR about hiding / showing menu items).
- fixes a bug with exporting (exporting JSON was not working when the
user had no selected shapes)
- fixes a bug that would prevent "flip shapes" from appearing in the
menu
- prevents export / copy actions from running if there are no shapes on
the page
- allows export / copy actions to default to all shapes on the page if
no shapes are selected

These changes have not been released in the dotcom yet. There's will be
some thrash in the APIs.

# Menu philosophy

In the menu, the **edit** submenu relates to undo/redo, plus the user's
current selection.

Menu items that relate to specific to certain shapes are hidden when not
available.

Menu items that relate to all shapes are disabled when not available.

<img width="640" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/e467e6bb-d958-4a9a-ac19-1dada52dcfa6">

### Change Type

- [x] `major` — Bug fix

### Test

- Select no shapes (arrange / flip should not be visible)
- Select one geo shape (arrange / flip should not be visible)
- Select two geo shapes (arrange / flip should be visible)
- Select one draw shape (arrange / flip should not be visible)

### Release Notes

- Revert some changes in the menu.
2024-03-11 18:31:28 +00:00
Dan Groshev
19a1d01b8e
attempted fix of a flaky ClientWebSocketAdapter test (#3114)
### Change Type

- [x] `tests` — Changes to any test code only
2024-03-11 17:33:02 +00:00
David Sheldrick
47a85896e0
[dx] Allow vscode to search inside md files by default (#3105)
Before this PR all .md files were targeted by the `.ignore` file, which
has bitten me on a number of occasions since .md files often contain
valuable information (e.g. the vscode extensions docs). This PR
unignores .md files while still ignoring _generated_ .md files like our
changelogs, the api-report files, and the generated docs sections.

Additionally, the `yarn format` and `yarn lint` commands were configured
slightly differently, which was confusing, so I've unified those and
simplified the lint.ts script at the same time.

### 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
2024-03-11 14:08:04 +00:00
Dan Groshev
e527d7d0d7
Debounce/aggregate tlsync messages (#3012)
There is very little point sending data messages more often than 60
times a second, so we buffer them before sending.

### Change Type

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

### Test Plan

1. Smoke test (on a retro?)

- [x] End to end tests

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2024-03-11 13:33:47 +00:00
Mitja Bezenšek
40c20e5585
Fix viewport params for pages. (#3079) 2024-03-07 15:50:25 +01:00
Dan Groshev
c3e8628680
Better websocket reconnection handling (#2960)
Right now it's fairly easy to encounter a situation when a tab coming
online wouldn't recognise that the connection can now be reestablished
for a while. This PR cleans up reconnection logic, reenables tests, and
makes sure we get online as robustly as possible.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Check that reconnection works as expected

- [x] End to end tests

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2024-03-04 16:48:14 +00:00
Steve Ruiz
f0f133fdd2
Shorten url state (#3041)
This PR shortens the URL parameters for the dot com. Old formal still
works but this is shorter (it has bugged me for ages).

Before: 
tldraw.com/r/ok?viewport=0,0,1080,720&page=page:ashdsad_sadsadasd
After: 
tldraw.com/r/ok?v=0,0,1080,720&p=ashdsad_sadsadasd


### Change Type

- [x] `internal` 

### Test Plan

1. Try the old url parameter format.
2. Try the new one.

### Release Notes

- Shortens url parameters for dot com.
2024-03-04 16:21:59 +00:00
alex
ce782dc70b
Wrap local/session storage calls in try/catch (take 2) (#3066)
Steve tried this in #3043, but we reverted it in #3063. Steve's version
added `JSON.parse`/`JSON.stringify` to the helpers without checking for
where we were already `JSON.parse`ing (or not). In some places we just
store strings directly rather than wanting them jsonified, so in this
version we leave the jsonification to the callers - the helpers just do
the reading/writing and return the string values.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 16:15:20 +00:00
alex
8adaaf8e22
Revert "Protect local storage calls (#3043)" (#3063)
This reverts commit 2f28d7c6f8.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 15:48:31 +00:00
alex
15c760f7ea
children: any -> children: ReactNode (#3061)
We use `children: any` in a bunch of places, but the proper type for
these is `ReactNode`. This diff fixes those.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 14:48:40 +00:00
Steve Ruiz
08a2b59238
Fix cursor chat bubble position. (#3042)
This PR fixes the position of the cursor chat bubble when the canvas is
not positioned at the top left.

### Change Type

- [x] `internal`

### Test Plan

1. Using CSS, add a margin left to the tldraw component on a multiplayer
route.
2. Use cursor chat.

### Release Notes

- Fixed a bug where cursor chat bubble position could be wrong when a
sidebar was open.

---------

Co-authored-by: Lu Wilson <l2wilson94@gmail.com>
2024-03-04 14:12:21 +00:00
Steve Ruiz
2f28d7c6f8
Protect local storage calls (#3043)
This PR provides some safe wrappers for local storage calls. Local
storage is not available in all environments (for example, a React
Native web view). The PR also adds an eslint rule preventing direct
calls to local / session storage.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a bug that could cause crashes in React Native webviews.
2024-03-04 13:37:09 +00:00
huppy-bot[bot]
ba6cba64c6 Update CHANGELOG.md [skip ci] 2024-02-29 18:28:45 +00:00
huppy-bot[bot]
ed1a031a69 Update CHANGELOG.md [skip ci] 2024-02-29 18:12:00 +00:00
David Sheldrick
a25d58e9b6 fix refresh-assets cache inputs 2024-02-29 18:03:10 +00:00
David Sheldrick
7fdaa3b7ed use glob to pick up version files? 2024-02-29 17:55:36 +00:00
David Sheldrick
ba26324058
Fix publish script one more time (#3010)
follow up to #3009 

the versions.ts files were not being updated since things had been added
and moved around

### 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

### 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-29 17:38:19 +00:00
David Sheldrick
9d237eec73
Fix publishing scripts (#3008)
Follow up to #3006 

### 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

### 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-29 16:59:05 +00:00
alex
a0628f9cb2
tldraw_final_v6_final(old version).docx.pdf (#2998)
Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists
as an alias to `tldraw` for folks who are still using that.

### Test Plan

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

### Release Notes

- The `@tldraw/tldraw` package has been renamed to `tldraw`. You can
keep using the old version if you want though!
2024-02-29 16:06:19 +00:00
Steve Ruiz
ae531da193
Don't add editor / app to window. (#2995)
This PR removes code that would add a reference to the editor to the
window. This is a feature that we added very early on during testing,
but which we should have moved out of the library earlier. Adding it
here as one of our last PRs before release.

If you've relied on this, you'll need to update your use of the library
to do it manually:

```ts
<Tldraw onMount={(editor) => {
  ;(window as any).app = editor
  ;(window as any).editor = editor
}}/>
```

### Change Type

- [x] `major` — Breaking change

### Release Notes

- Remove `window.editor` and `window.app` references to editor.
2024-02-29 15:42:36 +00:00
Taha
a62932d4ed
fix document name overlapping people menu (#2970)
When the people menu grew too large it would [overlap the document
name](https://github.com/orgs/tldraw/projects/38/views/1?pane=issue&itemId=54609134)

This PR checks if the right layout panel has grown beyond the style
panel width (plus the width of the button) and includes the button width
in the calculation if so.



- [x] `patch` — Bug fix

### Release Notes

- Fix people menu overlapping with document name when it grew too large.
2024-02-28 16:27:56 +00:00
alex
82f2c97816
Open iframe production links in new tab (#2966)
cuz otherwise they don't work

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-27 19:08:28 +00:00
Mime Čuvalo
2a8ae6188e
menu: export followup with different semantics for file menu (#2968)
Renamed Object → Shape
Different semantics for Export under file menu. Thanks @TodePond !

### Change Type

- [x] `patch` — Bug fix
2024-02-27 12:48:20 +00:00
Steve Ruiz
6d417577be
Prevent iframe embedding for dotcom (except on tldraw.com) (#2947)
This PR fixes a check on whether the dot com multiplayer editor has been
loaded in an iframe.

It tries to keep it working on tldraw.com itself.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Load me in an iframe
2024-02-26 18:30:55 +00:00
Mime Čuvalo
fb852459db
menu: rework File menu / ensure Export menu is present (#2783)
<img width="428" alt="Screenshot 2024-02-16 at 16 46 28"
src="https://github.com/tldraw/tldraw/assets/469604/334cd0db-d9d5-4993-8012-c6985173edfb">


- re-orders to be the normative New / Open / Save order — we shouldn't
be messing with this conventional ordering
- removes the "Don't ask again" from New/Open dialogs because they're
non-undoable and not what _anybody_ should ever select. we shouldn't
offer users a loaded footgun! :P
- makes File menu be part of the default menu — it's presence is
glaringly missing for regular development
- along with that, make the pieces of that menu available as lego pieces
to use - it can't just be `DefaultMainMenuContent`, all or nothing,
forcing downstream users to import everything from scratch
- finally, adds the Export menu as initially intended by this PR!

@steveruizok let's discuss if you have some notes on this and we can
talk about the shape of things here.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Composable UI: makes File items be more granularly accessible / usable
- Menu: show Export under the File menu.
2024-02-26 15:01:56 +00:00
David Sheldrick
f19b12c42e
[dx] Derive vercel routes from react-router config (#2937)
I had some free time at the end of the week so I investigated the idea
of deriving the vercel routing config from the react-router config, then
storing the derived vercel route info in a jest snapshot, and then
loading the jest snapshot during the build script.

Seems to work well!



### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-26 12:30:35 +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
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
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
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
Steve Ruiz
7ece89a357
UI components round two (#2847)
This PR:
- replaces the `shareZone` prop with `SharePanel` component
- replaces the `topZone` prop with `TopPanel` components
- replaces the `Button` component with `TldrawUiButton` and
subcomponents
- adds `TldrawUi` prefix to our primitives
- fixes a couple of bugs with the components

### Change Type

- [x] `major` — Breaking change
2024-02-16 09:13:04 +00:00
Steve Ruiz
ac0259a6af
Composable custom UI (#2796)
This PR refactors our menu systems and provides an interface to hide or
replace individual user interface elements.

# Background

Previously, we've had two types of overrides:
- "schema" overrides that would allow insertion or replacement of items
in the different menus
- "component" overrides that would replace components in the editor's
user interface

This PR is an attempt to unify the two and to provide for additional
cases where the "schema-based" user interface had begun to break down.

# Approach

This PR makes no attempt to change the `actions` or `tools`
overrides—the current system seems to be correct for those because they
are not reactive. The challenge with the other ui schemas is that they
_are_ reactive, and thus the overrides both need to a) be fed in from
outside of the editor as props, and b) react to changes from the editor,
which is an impossible situation.

The new approach is to use React to declare menu items. (Surprise!) 

```tsx
function CustomHelpMenuContent() {
	return (
		<>
			<DefaultHelpMenuContent />
			<TldrawUiMenuGroup id="custom stuff">
				<TldrawUiMenuItem
					id="about"
					label="Like my posts"
					icon="external-link"
					readonlyOk
					onSelect={() => {
						window.open('https://x.com/tldraw', '_blank')
					}}
				/>
			</TldrawUiMenuGroup>
		</>
	)
}

const components: TLComponents = {
	HelpMenuContent: CustomHelpMenuContent,
}

export default function CustomHelpMenuContentExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw components={components} />
		</div>
	)
}
```

We use a `components` prop with the combined editor and ui components.

- [ ] Create a "layout" component?
- [ ] Make UI components more isolated? If possible, they shouldn't
depend on styles outside of themselves, so that they can be used in
other layouts. Maybe we wait on this because I'm feeling a slippery
slope toward presumptions about configurability.
- [ ] OTOH maybe we go hard and consider these things as separate
components, even packages, with their own interfaces for customizability
/ configurability, just go all the way with it, and see what that looks
like.

# Pros

Top line: you can customize tldraw's user interface in a MUCH more
granular / powerful way than before.

It solves a case where menu items could not be made stateful from
outside of the editor context, and provides the option to do things in
the menus that we couldn't allow previously with the "schema-based"
approach.

It also may (who knows) be more performant because we can locate the
state inside of the components for individual buttons and groups,
instead of all at the top level above the "schema". Because items /
groups decide their own state, we don't have to have big checks on how
many items are selected, or whether we have a flippable state. Items and
groups themselves are allowed to re-build as part of the regular React
lifecycle. Menus aren't constantly being rebuilt, if that were ever an
issue.

Menu items can be shared between different menu types. We'll are
sometimes able to re-use items between, for example, the menu and the
context menu and the actions menu.

Our overrides no longer mutate anything, so there's less weird searching
and finding.

# Cons

This approach can make customization menu contents significantly more
complex, as an end user would need to re-declare most of a menu in order
to make any change to it. Luckily a user can add things to the top or
bottom of the context menu fairly easily. (And who knows, folks may
actually want to do deep customization, and this allows for it.)

It's more code. We are shipping more react components, basically one for
each menu item / group.

Currently this PR does not export the subcomponents, i.e. menu items. If
we do want to export these, then heaven help us, it's going to be a
_lot_ of exports.

# Progress 

- [x] Context menu
- [x] Main menu
- [x] Zoom menu
- [x] Help menu
- [x] Actions menu
- [x] Keyboard shortcuts menu
- [x] Quick actions in main menu? (new)
- [x] Helper buttons? (new)
- [x] Debug Menu

And potentially
- [x] Toolbar
- [x] Style menu
- [ ] Share zone
- [x] Navigation zone
- [ ] Other zones

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. use the context menu
2. use the custom context menu example
3. use cursor chat in the context menu

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

### Release Notes

- Add a brief release note for your PR here.
2024-02-15 12:10:09 +00:00
Mime Čuvalo
5bb60858b9
seo: take 2 (#2817)
(pending landing on: "Going to wait to land this one until the Google
SEO 'soft 404' validation finishes. I want to make sure we're testing
separate things.")

- removes Loading text
- adds sitemap to try to get Google to play nice

### Change Type

- [x] `patch` — Bug fix

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-15 11:28:43 +00:00
Mime Čuvalo
c621a43d19
humans.txt (#2842)
see: https://humanstxt.org/

@TodePond if you wanna help wordsmith/riff here, please do :) even after
it lands

i've added this in a bunch of places :)
https://paper.dropbox.com/humans.txt
https://www.rewiringamerica.org/humans.txt
https://www.mobilize.us/humans.txt
https://www.joingreenwork.com/humans.txt
https://nightlight.rocks/humans.txt

### Change Type

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

---------

Co-authored-by: Lu Wilson <l2wilson94@gmail.com>
2024-02-15 10:57:46 +00:00
Mime Čuvalo
2ad47958bb
dev: swap yarn test and test-dev for better dx (#2773)
As discussed offline, just making `yarn test` do what we expect it to.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-14 16:05:59 +00:00
Taha
7caaa2fbbb
Readonly defaults to the hand tool (#2833)
#2720 
This PR makes it so that the editor defaults to the hand tool in read
only mode

### Change Type

- [x] `minor` — New feature


### Test Plan

1. Open the editor in readonly mode
2. It should default to the hand tool

### Release Notes

- Shared projects in  read only mode now default to the hand tool
2024-02-14 15:07:25 +00:00
Steve Ruiz
79460cbf3a
Use canvas bounds for viewport bounds (#2798)
This PR changes the way that viewport bounds are calculated by using the
canvas element as the source of truth, rather than the container. This
allows for cases where the canvas is not the same dimensions as the
component. (Given the way our UI and context works, there are cases
where this is desired, i.e. toolbars and other items overlaid on top of
the canvas area).

The editor's `getContainer` is now only used for the text measurement.
It would be good to get that out somehow.

# Pros

We can inset the canvas

# Cons

We can no longer imperatively call `updateScreenBounds`, as we need to
provide those bounds externally.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Use the examples, including the new inset canvas example.

- [x] Unit Tests

### Release Notes

- Changes the source of truth for the viewport page bounds to be the
canvas instead.
2024-02-12 15:03:25 +00:00
Dan Groshev
86cce6d161
Unbiome (#2776)
Biome as it is now didn't work out for us 😢 

Summary for posterity:

* it IS much, much faster, fast enough to skip any sort of caching
* we couldn't fully replace Prettier just yet. We use Prettier
programmatically to format code in docs, and Biome's JS interface is
officially alpha and [had legacy peer deps
set](https://github.com/biomejs/biome/pull/1756) (which would fail our
CI build as we don't allow installation warnings)
* ternary formatting differs from Prettier, leading to a large diff
https://github.com/biomejs/biome/issues/1661
* import sorting differs from Prettier's
`prettier-plugin-organize-imports`, making the diff even bigger
* the deal breaker is a multi-second delay on saving large files (for us
it's
[Editor.ts](https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/editor/Editor.ts))
in VSCode when import sorting is enabled. There is a seemingly relevant
Biome issue where I posted a small summary of our findings:
https://github.com/biomejs/biome/issues/1569#issuecomment-1930411623

Further actions:

* reevaluate in a few months as Biome matures

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2024-02-07 16:02:22 +00:00
David Sheldrick
533d389953
fix(infra): Fix routing config (#2741)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [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
2024-02-06 13:31:02 +00:00
Mime Čuvalo
d47152d864
seo: attempt at avoiding a "soft 404" with there being thin content on dotcom (#2737)
### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Add a "Loading..." text to help SEO.
2024-02-06 11:38:59 +00:00