Renames `@tldraw/sync` to `@tldraw/sync-core`, and `@tldraw/sync-react`
to `@tldraw/sync`. This also adds an export * from sync-core to sync.
- [x] `other`
Adds a new `multiplayerStatus` store prop. This can either be `null`
(indicating this isn't a multiplayer store) or a signal containing
`online` or `offline` indicating that it is. We move a bunch of
previously dotcom specific UI into `tldraw` and use this new prop to
turn it on or off by default.
closes TLD-2611
### Change type
- [x] `improvement`
Adds a new `onEditorMount` callback to the store, allowing store
creators to do things like registering bookmark handlers. We use this in
the new demo hook.
This also renames `useRemoteSyncClient` to `useMultiplayerSync`, and
`useRemoteSyncDemo` to `useMultiplayerDemo`.
Closes TLD-2601
### Change type
- [x] `api`
Reworks the store to include information about how blob assets
(images/videos) are stored/retrieved. This replaces the old
internal-only `assetOptions` prop, and supplements the existing
`registerExternalAssetHandler` API.
Previously, `registerExternalAssetHandler` had two responsibilities:
1. Extracting asset metadata
2. Uploading the asset and returning its URL
Existing `registerExternalAssetHandler` implementation will still work,
but now uploading is the responsibility of a new `editor.uploadAsset`
method which calls the new store-based upload method. Our default asset
handlers extract metadata, then call that new API. I think this is a
pretty big improvement over what we had before: overriding uploads was a
pretty common ask, but doing so meant having to copy paste our metadata
extraction which felt pretty fragile. Just in this codebase, we had a
bunch of very slightly different metadata extraction code-paths that had
been copy-pasted around then diverged over time. Now, you can change how
uploads work without having to mess with metadata extraction and
vice-versa.
As part of this we also:
1. merge the old separate asset indexeddb store with the main one.
because this warrants some pretty big migration stuff, i refactored our
indexed-db helpers to work around an instance instead of being free
functions
2. move our existing asset stuff over to the new approach
3. add a new hook in `sync-react` to create a demo store with the new
assets
### Change type
- [x] `api`
### Release notes
Introduce a new `assets` option for the store, describing how to save
and retrieve asset blobs like images & videos from e.g. a user-content
CDN. These are accessible through `editor.uploadAsset` and
`editor.resolveAssetUrl`. This supplements the existing
`registerExternalAssetHandler` API: `registerExternalAssetHandler` is
for customising metadata extraction, and should call
`editor.uploadAsset` to save assets. Existing
`registerExternalAssetHandler` calls will still work, but if you're only
using them to configure uploads and don't want to customise metadata
extraction, consider switching to the new `assets` store prop.
Previously, we had a single hard-coded DOM ID for grids. This meant that
if you had multiple editors with grids on a page, they would all point
at the svg `<defs>` from the first instance. Now, each grid generates a
unique ID.
### Change type
- [x] `bugfix`
### Release notes
- Fix a bug causing multiple tldraw instances to share the same grid
background
This has been something we've been asked about 3-4 times on the discord
so far. So here is an example to point people towards in the future.
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- [examples app] added an example of how to export the page as an image
Allow us to preview docs + examples changes on staging.tldraw.dev. Also
allow previewing the docs app on phones in local dev.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
Looks like some leftovers since we are conditionally doing the same
thing on the next line. I might be missing something though.
### Change type
- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Remove some duplicate code which should make some of the exports a bit
smaller.
This icon went missing. I had a larger diff here that made the icon
types stricter to catch errors but I'll save it for another PR.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- Fixed a bug with…
Adds toasts for cases when the file type is not allowed or the file is
too big.
Resolves
https://github.com/orgs/tldraw/projects/53?pane=issue&itemId=70298205
### Change type
- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Upload a file that is either too big (over 10mb) or of incorrect file
type (pdf, docx,...).
2. You should see a toast explaining what went wrong.
### Release notes
- Show a toast when uploading an unsupported file type or a file that is
too large (more than 10mb).
This PR adds the ability to flip images.
### Change type
- [x] `improvement`
### Test plan
1. Resize an image shape
2. Select an image shape and use the flip X / flip Y options in the
context menu.
- [x] Unit tests
### Release notes
- Adds the ability to flip images.
This PR fixes the paste at point logic.
### Change type
- [x] `bugfix`
### Test plan
1. copy, paste (in original position)
2. hold shift to paste at cursor
3. turn on paste at cursor mode
4. copy, paste (at cursor)
5. hold shift to paste in original position
GET requests to the same origin don't send the `origin` headers. in
other situations we care about (CORS requests) we want to block unknown
origins, but if the origin header is missing it's probably because this
is a same-origin request, so we should allow it. Fixes an issue loading
bookmarks on mobile devices
### Change type
- [x] `bugfix`
Add an option to make paste at cursor the default.
Not sure if we also want to expose this on tldraw.com? For now I did,
but happy to remove if we'd want to keep the preferences simple.
We could also add this to the `TldrawOptions`, but it felt like some
apps might actually allow this customization on a per user level.
Solves https://github.com/tldraw/tldraw/issues/4066
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [x] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Copy / pasting should still work as it works now: `⌘ + v` pastes on
top of the shape, `⌘ + ⇧ + v` pastes at cursor.
2. There's now a new option under Preferences to paste at cursor. This
just swaps the logic between the two shortcuts: `⌘ + v` then pastes at
cursor and `⌘ + ⇧ + v` pastes on top of the shape.
### Release notes
- Allow users and sdk users to make pasting at the cursor a default
instead of only being available with `⌘ + ⇧ + v`.
Fixes asset loading/processing on staging/previews by introducing a new
image processing worker. This worker acts as a proxy for our various
image hosts and resizes/optimizes/caches images on the fly. Like the old
bookmark worker, this one is deployed in an ad-hoc fashion as it works
across environments and we're not likely to change it often.
### Change type
- [x] `other`
This PR just adds a thing to set the bemo URL during build. No bemo
example page yet
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- Fixed a bug with...
this was a very minor oversight when doing the bindings work. It won't
have caused any bugs for anyone but conceptually this should be
`retroactive: false`
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- Fixed a bug with...
Currently, the editor gets recreated whenever the camera options (or
several other props that are only relevant at initialisation time) get
changed.
This diff makes it so that:
- init-only props are kept in a ref so they don't invalidate the editor
(but are used when the editor _does_ get recreated)
- camera options are kept up to date in a separate effect
### Change type
- [x] `bugfix`
### Release notes
Fix an issue where changing `cameraOptions` via react would cause the
entire editor to re-render
Improves share menu:
* Seems like we lost the logic of opening the share menu after sharing a
project.
* Using `/new` did open the share menu after creating a new room, but
the qr code flickered. This was because the create project action
created a new room but there were no search params set (for viewport and
page). So we first created the qr code for that url, but then we update
the url with those params and regenerate the qr code which caused the
flicker. That said the current logic does show a gray box a bit longer,
so not sure how much of an improvement this is.
### Before
https://github.com/tldraw/tldraw/assets/2523721/cdb4e3b8-46cb-48d9-bd23-66b2f4f55cff
### After
https://github.com/tldraw/tldraw/assets/2523721/f035bd48-6e59-4d3d-8e04-640c866c9395
### Change type
- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Share a local room. The share menu should be open after the redirect.
1. Use the `/new` route. The qr code in the share menu should not
flicker.
### Release notes
- Make sure the share menu is open after sharing a room. Prevent the qr
code from flickering when navigating to `/new`
This PR adds a component for `ShapeIndicators` to the UI component
overrides. It moves the "select tool" state logic up to the new
`TldrawShapeIndicators` component.
### Change type
- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [x] `api`
- [ ] `other`
### Release notes
- Added new `ShapeIndicators` component to `components` object.
- Added new `TldrawShapeIndicators` component.
this PR puts sync stuff in the bemo worker, and sets up a temporary
dev-only page in dotcom for testing bemo stuff
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [x] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- Fixed a bug with...
This adds the HTMLRewriter-based bookmark unfurler to the demo server.
It moves the unfurler into worker-shared, and adds some better shared
error handling across our workers.
I removed the fallback bookmark fetcher where we try and fetch websites
locally. This will almost never work, as it requires sites to set public
CORS.
### Change type
- [x] `other`
In dev mode you get the below error when visiting the `/new` route. The
route seems to be hit several times before finally navigating to the
correct room. This seems to solve it.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Fixed a but with navigating to `/new`.
Adds an assets server to the demo worker, and reworks the existing asset
server to use the same code. There are a few simplifications to the code
due to some DX improvements working with R2 and caches. I also removed
the `HEAD` request from the assets server: i took a look at our logs and
it's not actually used at all.
This also fixes an issue where users could overwrite the contents of the
asset uploads bucket.
### Change type
- [x] `other`
Describe what your pull request does. If you can, add GIFs or images
showing the before and after of your change.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Test plan
1. Create a shape...
2.
- [ ] Unit tests
- [ ] End to end tests
### Release notes
- Fixed a bug with...
---------
Co-authored-by: alex <alex@dytry.ch>
This is a more surgical fix while these other diffs are being hashed
out: https://github.com/tldraw/tldraw/pull/4045 and
https://github.com/tldraw/tldraw/pull/4048
Problem was that we always waited a minimum of 500ms and we really
should have a `leading: true` to our debounce.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Assets: fix artificial delay in showing an image.
This PR fixes the distance between duplicated shapes to match the
editor.options.adjacentPositions value.
### Change type
- [x] `bugfix`
### Release notes
- Fixed a bug that caused the distance offset for duplicated shapes to
not match other duplication distance offsets.
This PR adds a `GET /api/unfurl?url=blahblah` endpoint to our worker.
I tried out the existing cheerio implementation but it added 300kb to
our worker bundle in the end, due to transitive dependencies.
So I implemented the same logic with cloudflare's sanctioned streaming
HTML parser `HTMLRewriter` and it seems to work fine.
I also made the vscode extension do its fetching locally (from the node
process so it's not bound by security policies), retaining the cheerio
version for that. At the same time I fixed a bug in the RPC layer that
was preventing unfurled metadata from loading correctly.
In a few months we can retire the bookmark-extractor app by just
deleting it in the vercel dashboard.
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [x] `improvement` — Product improvement
- [ ] `api` — API change
- [ ] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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
- Do link unfurling on the same subdomain as all our other api
endpoints.
- Structure wrangler.toml for asset uploads the same way we structure it
for other workers
- Extract worker name from wrangler output, not wrangler.toml - not all
workers have explicit names for all environments
- Remove DNS settings for preview workers - `tldraw.workers.dev` is fine
### Change type
- [x] `bugfix`
Sets up preview deploys etc. for bemo worker.
There's enough going on here that I wanted to make it its own PR. I'll
rework david's spike on top of it once it's landed.
### Change Type
- [x] `internal` — Does not affect user-facing stuff
- [x] `chore` — Updating dependencies, other boring stuff
---------
Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
This PR adds a way to set the default value of a style property.
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [x] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Adds a method for changing the default style of a `StyleProp`
instance.
This PR adds two new examples showing how to reject changes to shape or
instance records.
### Change type
- [x] `other`
### Release notes
- Adds shape / instance change examples.
Adds an example of implementing layout contraints using bindings.
### Change Type
<!-- ❗ Please select a 'Scope' label ❗️ -->
- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [x] `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
- [x] `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. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Adds an example of how to use bindings to create layout constraints
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This PR fixes a case where right clicking on an empty canvas would
display the edit menu, even when there was nothing to do in the menu.
### Change Type
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### Test Plan
1. Right click on the canvas
### Release Notes
- Fixes a bug where the context menu would display an empty edit menu.
Still some improvements to be made with how we determine when to close a
draw shape, but filled draw shapes now close more reliably in dynamic
size mode.
### 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
### Test Plan
1. Select the draw tool
2. set dynamic resize mode
3. Zoom in to 800%
4. Try to draw a closed shape, it should close!
### Release Notes
- Improve closing of draw shapes in dynamic size mode
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
fixes#4033
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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.
This PR aims to make sure #4030 doesn't need to happen again. We check
that the worker file sizes stay within a given limit, and require people
to explicitly up this limit if they decide to add new deps that grow the
bundle size significantly.
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [ ] `bugfix` — Bug fix
- [x] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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.
This PR:
- simplifies a lot of z-index layers
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Release Notes
- Cleans up z-indexes and removes some unused CSS.
