Commit graph

302 commits

Author SHA1 Message Date
alex
245f74010c
speed up playwright and add visual regression tests (#1638)
This diff:
- tweaks how playwright runs in CI to have it go a bit faster
- uploads nice browsable reports to S3 for looking at playwright
failures and traces
- adds visual regression testing to playwright

### Change Type

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

### Test Plan

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

### Release Notes

--

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-06-23 11:53:04 +00:00
Lu Wilson
0c046a561b
[docs] Allow sidebar to be scrolled on short screens (#1632)
This PR changes how the sidebar works on the docs site.

## What's the problem?
Previously, you couldn't reach the bottom of the sidebar on some screens
- unless you scroll to the very bottom of the main content. Some of our
pages are [very
long](https://canary.tldraw.dev/gen/editor/Editor-class), so this isn't
practical.

![2023-06-22 at 11 25 26 - Violet
Gazelle](https://github.com/tldraw/tldraw/assets/15892272/873ffa98-5eea-48b4-a005-c3aa89074065)

## How are we fixing it?
This PR makes the sidebar scroll separately from the main content.
It's less fancy and less pretty :/ 
But it's usable.

Maybe we could make it sleeker somehow, but this works at least.

![2023-06-22 at 11 27 29 - Rose
Hedgehog](https://github.com/tldraw/tldraw/assets/15892272/99bd47b9-d07c-46ff-b1bb-de0ac289d294)

## Admin

### 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. On the docs site, make your browser window short so that you can't
see the whole sidebar.
2. Make sure that you can scroll down to the bottom on the sidebar,
separately from the rest of the page.

### Release Notes

- Documentation: Fixed the sidebar being unscrollable on some short
screens.
2023-06-23 09:59:57 +00:00
Lu Wilson
004787d5bd
[docs] Add feedback when you search (#1633)
This PR adds some immediate feedback when you search on the docs site —
so that you know that your query has been submitted. This is most
noticeable on slower internet connections. But even on fast connections,
search feels a bit untrustworthy because you don't get that immediate
feedback.

We could make a little loading spinner or something. But for now, I just
disabled the search input when you submit it, because it didn't require
any design work!

## Before

No way of telling that the search results are loading. No immediate
feedback:

![2023-06-22 at 12 17 34 - Fuchsia
Fowl](https://github.com/tldraw/tldraw/assets/15892272/da3b3d7f-fc6a-49f9-9352-58949ca917d5)

## After
![2023-06-22 at 13 09 26 - Turquoise
Cat](https://github.com/tldraw/tldraw/assets/15892272/9e44061a-c4b9-43d2-8b8f-e1c4dce60c48)


## Admin

### 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. Throttle your network tab!
2. Search for something on the docs site (eg: Editor)
3. The search input should get disabled when you press the Enter key.

### Release Notes

- Documentation: Added some immediate feedback when you search.
2023-06-23 09:57:57 +00:00
Lu Wilson
c5fe399842
[docs] Separate some pages out of the Docs section (#1626)
This PR changes the structure of the docs site's sidebar.


![image](https://github.com/tldraw/tldraw/assets/15892272/ffe1e152-c921-43f0-9ba2-d084bda5e1e3)

I think this signposts more clearly what the different pages are for.
And it also paves the way for some work I want to do on
expanding+refining the Editor docs.

This PR also simplifies URL for all sidebar links.
It's a bit scrappy, but I think it feels simple enough to work with, and
easy-enough to change in the future.
> But hey! I've been doing this a couple times recently. Maybe we should
refactor? Or maybe we should keep going with what we've got and focus on
getting these docs *done*.

### 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. Check that all the sidebar links go to where you expect.
2. Check that old URLs redirect to the right pages, eg: `/docs/usage`
should go to the usage page.


### Release Notes

- Documentation: Restructured the sidebar for clarity.
2023-06-23 09:53:22 +00:00
Lu Wilson
d2c51ae3ba
[docs] Fix wrong cursor when hovering buttons (#1630)
This PR fixes your cursor when you hover some buttons in the docs site.

This makes them consistent with all other buttons.


![image](https://github.com/tldraw/tldraw/assets/15892272/d918e12e-2831-49fe-acf7-34c67a9cd976)

### 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. On the docs site, hover your cursor over the light/dark button.
2. Make sure that your cursor is a pointing finger.


### Release Notes

- Documentation: Fixed the wrong cursor showing when hovering some
buttons.
2023-06-23 09:51:42 +00:00
Lu Wilson
db68473db9
[docs] Tighten up wording & structure of Usage page (#1624)
This PR tightens up the wording of the Usage docs page, and it
restructures it slightly.

See my comments in the code for more info.

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

### Release Notes

- Documentation: Impoved clarity of wording and structure of the Usage
page.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-20 15:42:51 +00:00
Steve Ruiz
83184aaf43
[fix] react component runaways, error boundaries (#1625)
This PR fixes a few components that were updating too often. It changes
the format of our error boundaries in order to avoid re-rendering them
as changed props.

### Change Type

- [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
Steve Ruiz
5cb08711c1
Incorporate signia as @tldraw/state (#1620)
It tried to get out but we're dragging it back in. 

This PR brings [signia](https://github.com/tldraw/signia) back into
tldraw as @tldraw/state.

### Change Type

- [x] major

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
Lu Wilson
655d3b39ee
[docs] Tighten up Editor page introduction (#1622)
This PR improves the wording in the Editor docs page.
It only touches the intro section.

See the comments for more details!



I'm also looking at the page in entirety - will cover that in another
PR.

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

### Release Notes

- Documentation: Simplified the Editor page.
2023-06-20 10:53:26 +00:00
Lu Wilson
8d28d16943
[docs] Tighten up Introduction page (#1621)
This PR contains some feedback for the Introduction page of the docs.
I've written comments explaining my feedback, and the changes are some
potential changes (but they're just 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

### Release Notes

- Documentation: Simplified the Introduction page.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-20 09:12:20 +00:00
Lu Wilson
8329b1da89
[docs] Simplify paths for uncategorised pages (#1619)
This PR changes the paths that we use for uncategorised pages on the
docs site.
It also redirects the old paths to the new ones.

```
// BEFORE
tldraw.dev/docs/ucg/shapes

// AFTER
tldraw.dev/docs/shapes
```

I think that this is more intuitive, and will make the links that we
share a bit clearer.
eg: As a by-product, it fixes some broken links from the introduction
page.

As a trade-off, this PR makes our pathing system a bit more complicated.
But I don't think it's tooooo bad? WDYT?

### 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. Navigate to `/docs/shapes` on the docs site.
2. Make sure that it goes to the Shapes page.
3. Do the same for `/docs/ucg/shapes`


### Release Notes

- Documentation: Cleaned up some paths.
2023-06-19 18:48:55 +00:00
Steve Ruiz
57bb341593
ShapeUtil refactor, Editor cleanup (#1611)
This PR improves the ergonomics of `ShapeUtil` classes.

### Cached methods

First, I've remove the cached methods (such as `bounds`) from the
`ShapeUtil` class and lifted this to the `Editor` class.

Previously, calling `ShapeUtil.getBounds` would return the un-cached
bounds of a shape, while calling `ShapeUtil.bounds` would return the
cached bounds of a shape. We also had `Editor.getBounds`, which would
call `ShapeUtil.bounds`. It was confusing. The cached methods like
`outline` were also marked with "please don't override", which suggested
the architecture was just wrong.

The only weirdness from this is that utils sometimes reach out to the
editor for cached versions of data rather than calling their own cached
methods. It's still an easier story to tell than what we had before.

### More defaults

We now have three and only three `abstract` methods for a `ShapeUtil`:
- `getDefaultProps` (renamed from `defaultProps`)
- `getBounds`,
- `component`
-  `indicator`

Previously, we also had `getCenter` as an abstract method, though this
was usually just the middle of the bounds anyway.

### Editing bounds

This PR removes the concept of editingBounds. The viewport will no
longer animate to editing shapes.

### Active area manager

This PR also removes the active area manager, which was not being used
in the way we expected it to be.

### Dpr manager

This PR removes the dpr manager and uses a hook instead to update it
from React. This is one less runtime browser dependency in the app, one
less thing to document.

### Moving things around

This PR also continues to try to organize related methods and properties
in the editor.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] renames `defaultProps` to `getDefaultProps`
- [editor] removes `outline`, `outlineSegments`, `handles`, `bounds`
- [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
alex
38d74a9ff0
Revert "Update dependencies (#1613)" (#1617)
This reverts commit b6716a3750.

Not sure why, but this introduced a `/// <references />` comment in the
tldraw/tldraw api-report.md file that doesn't show up when you build
from brivate. Reverting for now.

### Change Type

- [x] `dependencies` — Changes to package dependencies[^1]


### Test Plan

-

### Release Notes

-
2023-06-19 09:49:44 +00:00
Steve Ruiz
b6716a3750
Update dependencies (#1613)
This PR updates a few key dependencies.

### Change Type

- [x] `dependencies` — Changes to package dependencies
2023-06-18 18:26:33 +00:00
Steve Ruiz
3129bae6e2
Rename ShapeUtil.render -> ShapeUtil.component (#1609)
This PR renames `ShapeUtil.render` to `ShapeUtil.component`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
Steve Ruiz
4dfc59e5cb
tldraw.css (#1607)
This PR introduces `@tldraw/tldraw/tldraw.css`, an exported CSS file
that replaces the `editor.css` and `ui.css` that were previously copied
from the editor and ui packages. Instead, these files are combined into
the `tldraw.css` file, simplifying the import story when using
`@tldraw/tldraw`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [tldraw] Removes `editor.css` and `ui.css` exports, replaces with
`tldraw.css`
2023-06-17 22:33:21 +00:00
Steve Ruiz
b9c6bf2fe8
Auto content refresh for docs site (#1606)
This PR improves the author experience when working on the docs site. 

When running `docs-dev`, the site's content will now update whenever a
content file is changed.

### Context

In the docs project, we generate content from two sources: from API
documentation generated by api-extractor and from markdown files in the
docs/content folder. Generating API docs is a relatively slow process
because it involves building and parsing TypeScript declaration files
for each package in the monorepo; however, generating docs from the
markdown files is basically instantaneous. The same script used to
address both tasks, which meant it was too slow to run on each save.
Instead, the script needed to be run manually or the dev server would
need to be restarted.

We now split the generation into two separate scripts. First, the script
runs to generate the API content; and then a second script runs to
generate the markdown content. The second script also imports and
combines the two sources of content. When we build the docs, both
scripts are run. When a markdown file changes, the new watcher only runs
the second script. This allows the site's content to be updated quickly
without having to generate the API docs each time.

Note that this does not incorporate live changes to package APIs, though
I can't think of a time where we be developing the docs and the APIs at
the same time.

### Change Type

- [x] `documentation` — Changes to the documentation only
2023-06-17 09:46:46 +00:00
Steve Ruiz
3f52c24fec
[fix] yjs presence (#1603)
This PR:
- updates the yjs example to include user presence
- tweaks the `createPresenceStateDerivation` API
- fix a "double update" bug caused by re-syncing local changes
- fix connection bugs

### Change Type

- [x] `minor` — New feature
2023-06-16 15:59:13 +00:00
alex
b88a2370b3
Styles API (#1580)
Removes `propsForNextShape` and replaces it with the new styles API. 

Changes in here:
- New custom style example
- `setProp` is now `setStyle` and takes a `StyleProp` instead of a
string
- `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and
`Editor.sharedOpacity`
- They return an object that flags mixed vs shared types instead of
using null to signal mixed types
- `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp`
instead of `string`
- `StateNode.shapeType` is now the shape util rather than just a string.
This lets us pull the styles from the shape type directly.
- `color` is no longer a core part of the editor set on the shape
parent. Individual child shapes have to use color directly.
- `propsForNextShape` is now `stylesForNextShape`
- `InstanceRecordType` is created at runtime in the same way
`ShapeRecordType` is. This is so it can pull style validators out of
shape defs for `stylesForNextShape`
- Shape type are now defined by their props rather than having separate
validators & type defs

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Big time regression testing around styles!
2. Check UI works as intended for all shape/style/tool combos

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

### Release Notes

-

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
Lu Wilson
6d4d9424df
Remove @tldraw/utils from the docs site (#1596)
This PR removes the `@tldraw/utils` package from the docs site's API
reference. It does this by removing it from the docs site's
`devDependencies`.

The reason for this is this:

<img width="899" alt="Screenshot 2023-06-15 at 15 52 24"
src="https://github.com/tldraw/tldraw/assets/15892272/3b00e9da-663d-45e5-8b77-ab0a4fc466ad">


### 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. Check the API Reference page of the docs.
2. Make that `@tldraw/utils` isn't there.

### Release Notes

- [docs] Removed an internal utilities package.
2023-06-15 15:35:23 +00:00
Lu Wilson
3bbb34eba8
(1/2) Cursor Chat - Presence (#1487)
This PR adds support for seeing **another user**'s chat messages.

It's part 1 of two PRs relating to Cursor Chat.
And it's needed for the much bigger part 2:
https://github.com/tldraw/brivate/pull/1981

# Presence

You can see another person's chat messages!

![2023-06-02 at 17 42 33 - Blush
Capybara](https://github.com/tldraw/tldraw/assets/15892272/8f3efb5f-9c05-459c-aa7e-24842be75e58)

If they have a name, it gets popped on top.

![2023-06-02 at 17 45 34 - Sapphire
Meerkat](https://github.com/tldraw/tldraw/assets/15892272/749bd924-c1f5-419b-a028-1fafe1b61292)

That's it!
With this PR, there's no way of actually *typing* your chat messages.
That comes with the [next
one](https://github.com/tldraw/brivate/pull/1981)!

# Admin

### To-do

- [x] Store chat message
- [x] Allow overflowing chat
- [x] Presence for chat message
- [x] Display chat message to others

### Change Type

- [x] `minor` — New Feature

### Test Plan

To test this, I recommend checking out both `lu/cursor-chat` branches,
and opening two browser sessions in the same shared project.

1. In one session, type some cursor chat by pressing the Enter key while
on the canvas (and typing).
2. On the other session, check that you can see the chat message appear.
3. Repeat this while being both named, and unnamed.

I recommend just focusing on the visible presense in this PR.
The [other PR](https://github.com/tldraw/brivate/pull/1981) is where we
can focus about how we _input_ the cursor chat.

### Release Notes

- [dev] Added support for cursor chat presence.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:10:08 +00:00
Lu Wilson
0bbdcdd91b
[docs] Add barebones note about translations (#1593)
This PR adds a bare-minimum note to the Translations page on the docs
site.

### 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. Take a look at the Translations docs page.

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

### Release Notes

- [docs] Added brief info on how to join as a translations contributor.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 14:53:30 +00:00
Lu Wilson
519d0dd348
Change app to editor in docs (#1592)
This PR changes App to Editor in the docs.
It goes alongside some changes that I accidentally commited to main...
so feel free to review those here as well!
([this
one](be1ec9699c))
and ([this
one](5a9f3a1726))

### 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. Check that there's an Editor page in the docs sidebar.

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

### Release Notes

- [docs] Updated 'App' to 'Editor'.
2023-06-15 12:37:42 +00:00
Lu[ke] Wilson
5a9f3a1726 change App to Editor in docs 2023-06-15 11:36:54 +01:00
Lu[ke] Wilson
be1ec9699c rename api.mdx to editor.mdx 2023-06-15 11:35:39 +01:00
Steve Ruiz
6a8eb283ba
update exports for user presence (#1583)
This PR updates exports related to user presence, in order to enable
external sync solutions that use user presence.

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-06-14 22:08:07 +00:00
Lu Wilson
3e2f2e0884
Add tsdocs to Editor methods (#1581)
This PR does a first-pass of adding tsdocs to the methods of the Editor
class.
It's a minimal start — just descriptions of them, and their parameters.
It makes the Editor docs page a lot more fleshed out though, and easier
to quickly scan.
There's still a lot more to do!

### Change Type

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

### Release Notes

- [dev] Added initial documentation for the Editor class.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-14 06:40:10 +00:00
Steve Ruiz
014576ba87
add presence to yjs example (#1582)
This PR adds presence to the yjs example.

![Kapture 2023-06-13 at 19 47
16](https://github.com/tldraw/tldraw/assets/23072548/759e0bf9-a934-47c7-979f-512c16b03e48)


### Change Type

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

### Release Notes

- [editor] Add presence to yjs example.
2023-06-13 21:00:53 +01:00
Steve Ruiz
ce1cf82029
Add optional generic to updateShapes / createShapes (#1579)
This PR adds a generic that we can use with `updateShapes` and
`createShapes` in order to type the partials being passed into those
methods. By default, the partials are typed as `TLUnknownShape`, which
accepts any props.

### Change Type

- [x] `minor` — New feature

### Test Plan

- [x] Unit Tests

### Release Notes

- [editor] adds an optional shape generic to `updateShapes` and
`createShapes`
2023-06-13 18:02:17 +00:00
Shahriar Shojib
69e5b248ca
fix: properly remove awareness from store (#1565)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type
This pr updates yjs example to remove awareness when a peer disconnects

<!-- 💡 Indicate the type of change your pull request is. -->
<!-- 🤷‍♀️ If you're not sure, don't select anything -->
<!-- ✂️ Feel free to delete unselected options -->

<!-- To select one, put an x in the box: [x] -->

- [ ] `patch` — Bug Fix
- [ ] `minor` — New Feature
- [ ] `major` — Breaking Change
- [ ] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
- [x] `documentation` — Changes to the documentation only (will not
publish a new version)
- [ ] `tests` — Changes to any testing-related code only (will not
publish a new version)
- [ ] `internal` — Any other changes that don't affect the published
package (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
- [ ] Webdriver tests

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-13 17:05:28 +00:00
Mitja Bezenšek
edd393353e
Add anchor targets to our headings. (#1571)
Add anchor target for our headings. Makes it much easier to share a link
to a specific part of the page.

### Change Type

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

### Test Plan

1. Open the docs page.
2. The headings should now be anchors to this part of the page.

### Release Notes

- Improve documentation to include anchor targets.
2023-06-12 17:09:17 +00:00
alex
7b03ef9d0c
shapes folder, move tools into shape defs (#1574)
This diff adds a new property to `defineShape`: `tool`.

The tool prop allows shapes to bring a tool along with them as part of
their definition. E.g. the draw shape isn't much use without the draw
tool, so adding the draw shape to your app gives you the draw tool tool.

As part of this, i renamed the `shapeutils` folder to just `shapes`, and
moved a bunch of shape-specific tools from the tools folder into the
shapes folder. This more closely reflects how things will be once we
move our default shapes out of core for tldraw-zero.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Tested locally

### Release Notes

n/a
2023-06-12 15:39:50 +00:00
alex
1927f88041
mini defineShape API (#1563)
Based on #1549, but with a lot of code-structure related changes backed
out. Shape schemas are still defined in tlschemas with this diff.

Couple differences between this and #1549:
- This tightens up the relationship between store schemas and editor
schemas a bit
- Reduces the number of places we need to remember to include core
shapes
- Only `<TLdrawEditor />` sets default shapes by default. If you're
doing something funky with lower-level APIs, you need to specify
`defaultShapes` manually
- Replaces `validator` with `props` for shapes

### Change Type

- [x] `major` — Breaking Change

### Test Plan

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

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

[dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
Steve Ruiz
d71d15124c
yjs example (#1560)
This PR adds a yjs example to the examples app.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Release Notes

- [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
Mitja Bezenšek
bacb307bad
Asset improvements (#1557)
This PR does the following:
- Add `selfHosted.js`, which is a great option for users that wish to
self host the assets. Works well for both self hosting from the public
folder or via a CDN.
- Updates the docs for assets. We now have a dedicated page for assets
where all the options are more clearly explained. I also removed the
assets explanation from the main docs as the unpkg option should work
out of the box and setting up the assets is no longer necessary.
- Cleaned up the `refresh-assets` script. We now use common `types.d.ts`
file to define our types. All the other options then reuse them.
- Pulled out the `formatAssetUrl` into it's own file. It's now static an
no longer generated.
- `urls.d.ts`, `import.d.ts`, and newly added `selfhosted.d.ts` are now
also no longer generated as we can import the types from `types.d.ts`.
- You can now pass a subset of `assetUrls` to `<Tldraw />` and it will
override the default option with the passed in overrides. This makes it
easy to only customizes certain assets (only change the draw font as an
example).

### Change Type

- [x] `patch` — Bug Fix
2023-06-09 11:43:01 +00:00
Steve Ruiz
0cc91eec62
ExternalContentManager for handling external content (files, images, etc) (#1550)
This PR improves the editor's APIs around creating assets and files.
This allows end user developers to replace behavior that might occur,
for example, when pasting images or dragging files onto the canvas.

Here, we:
- remove `onCreateAssetFromFile` prop
- remove `onCreateBookmarkFromUrl` prop
- introduce `onEditorReady` prop
- introduce `onEditorWillDispose` prop
- introduce `ExternalContentManager`

The `ExternalContentManager` (ECM) is used in circumstances where we're
turning external content (text, images, urls, etc) into assets or
shapes. It is designed to allow certain methods to be overwritten by
other developers as a kind of weakly supported hack.

For example, when a user drags an image onto the canvas, the event
handler passes a `TLExternalContent` object to the editor's
`putExternalContent` method. This method runs the ECM's handler for this
content type. That handler may in turn run other methods, such as
`createAssetFromFile` or `createShapesForAssets`, which will lead to the
image being created on the canvas.

If a developer wanted to change the way that assets are created from
files, then they could overwrite that method at runtime.

```ts
const handleEditorReady = (editor: Editor) => {
  editor.externalContentManager.createAssetFromFile = myHandler
}

function Example() {
  return <Tldraw onEditorReady={handleEditorReady}/>
}
```

If you wanted to go even deeper, you could override the editor's
`putExternalContent` method.

```ts
const handleEditorReady = (editor: Editor) => {
const handleExternalContent = (info: TLExternalContent): Promise<void> => {
	if (info.type === 'files') {
	   // do something here
	} else {
          // do the normal thing
          editor.externalContentManager.handleContent(info)
        }
}
```

### Change Type

- [x] `major`

### Test Plan

1. Drag images, urls, etc. onto the canvas
2. Use copy and paste for single and multiple files
3. Use bookmark / embed shapes and convert between eachother

### Release Notes

- [editor] add `ExternalContentManager` for plopping content onto the
canvas
- [editor] remove `onCreateAssetFromFile` prop
- [editor] remove `onCreateBookmarkFromUrl` prop
- [editor] introduce `onEditorReady` prop
- [editor] introduce `onEditorWillDispose` prop
- [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
Steve Ruiz
f2e95988e0
Add contributor license agreement. (#1556)
This PR adds a contributor license agreement (CLA) to the project.
Contributors will need to sign the CLA before we merge their PRs. This
will be handled automatically via a bot here on GitHub.

## Context

Did you know tldraw is a [venture
backed](https://tldraw.substack.com/p/tiny-little-seed-round) company?
Our CLA is designed to protect our options for any future re-licensing
of the project's code or transferring ownership, which can become
complicated when taking public contributions community, but which can
become necessary by fate and/or go to market strategies.

A CLA adds a bit of friction and hassle for contributors, however I'd
prefer to be upfront about our relationship rather than doing what many
open source projects have done in the past, which is relicensing code
contributed without such prior agreement.

If you have any questions, feel free to post them below.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-06-08 12:45:44 +00:00
Mitja Bezenšek
21cefc77f5
Use unpkg as a default for serving assets. (#1548)
Use unpkg to host our assets and use that as a default. This will smooth
out the first run experience.

The way this works for different use cases:
- It doesn't change the asset loading for VS Code extension and
tldraw.com
- When running our examples (and our local development) [we still
override the
urls](4a9ef5044c/apps/examples/src/index.tsx (L32-L34))
to use the assets from the filesystem. This allows the assets to still
update when you change them.
- When you use our `Tldraw` component and when just copying the examples
code we will now serve the assets from unpkg by default.

I guess it's a breaking change since we will now use unpkg by default.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Use unpkg asset hosting as a default.
2023-06-07 21:01:38 +00:00
Mitja Bezenšek
2372478556
Update changelog. Bump version. (#1546)
Update the VS Code changelog and bump the version.

### Change Type

- [x] `patch` — Bug Fix
2023-06-06 16:24:09 +00:00
alex
f2d8fae6ea
hoist opacity out of props (#1526)
This change hoists opacity out of props and changes it to a number
instead of an enum.

The change to a number is to make tldraw more flexible for library
consumers who might want more expressivity with opacity than our 5
possible values allow. the tldraw editor will now happily respect any
opacity between 0 and 1. The limit to our supported values is enforced
only in the UI. I think this is limited enough that it's a reasonable
tradeoff between in-app simplicity and giving external developers the
flexibility they need.

There's a new `opacityForNextShape` property on the instance. This works
exactly the same way as propsForNextShape does, except... it's just for
opacity. With this, there should be no user-facing changes to how
opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs
in the editor that work with it/selections similar to how props do.

@ds300 do you mind reviewing the migrations here?

### Change Type

- [x] `major` — Breaking Change

### Test Plan

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

[internal only for now]
2023-06-06 16:15:12 +00:00
David Sheldrick
a4fff303bf update lazyrepo 2023-06-05 18:32:32 +01:00
Steve Ruiz
2fc70a7b37
Update examples links to point to examples folder. (#1522)
This PR updates the docs examples links to point to the examples folder.

### Change Type

- [x] `documentation` — Changes to the documentation only (will not
publish a new version)
2023-06-05 14:52:28 +00:00
David Sheldrick
f15a8797f0
Independent instance state persistence (#1493)
This PR 

- Removes UserDocumentRecordType
  - moving isSnapMode to user preferences
  - moving isGridMode and isPenMode to InstanceRecordType
  - deleting the other properties which are no longer needed.
 
- Creates a separate pipeline for persisting instance state.
  
Previously the instance state records were stored alongside the document
state records, and in order to load the state for a particular instance
(in our case, a particular tab) you needed to pass the 'instanceId'
prop. This prop ended up totally pervading the public API and people ran
into all kinds of issues with it, e.g. using the same instance id in
multiple editor instances.

There was also an issue whereby it was hard for us to clean up old
instance state so the idb table ended up bloating over time.
  
This PR makes it so that rather than passing an instanceId, you load the
instance state yourself while creating the store. It provides tools to
make that easy.

- Undoes the assumption that we might have more than one instance's
state in the store.

- Like `document`, `instance` now has a singleton id
`instance:instance`.
- Page state ids and camera ids are no longer random, but rather derive
from the page they belong to. This is like having a foreign primary key
in SQL databases. It's something i'd love to support fully as part of
the RecordType/Store api.

Tests to do

- [x] Test Migrations
- [x] Test Store.listen filtering
- [x] Make type sets in Store public and readonly
- [x] Test RecordType.createId
- [x] Test Instance state snapshot loading/exporting
- [x] Manual test File I/O
- [x] Manual test Vscode extension with multiple tabs
- [x] Audit usages of store.query
- [x] Audit usages of changed types: InstanceRecordType, 'instance',
InstancePageStateRecordType, 'instance_page_state', 'user_document',
'camera', CameraRecordType, InstancePresenceRecordType,
'instance_presence'
- [x] Test user preferences
- [x] Manual test isSnapMode and isGridMode and isPenMode
- [ ] Test indexedDb functions
- [x] Add instanceId stuff back


### Change Type

- [x] `major` — Breaking Change


### Test Plan

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

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
Steve Ruiz
0f89309604
Renaming types, shape utils, tools (#1513)
This PR renames all exported types to include the `TL` prefix. It also
removes the `TL` prefix from things that are not types, including:
- shape utils (e.g. `TLArrowUtil` becomes `ArrowShapeUtil`)
- tools (e.g. `TLArrowTool` becomes `ArrowShapeTool`, `TLSelectTool`
becomes `SelectTool`)

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Renaming of types, shape utils, tools
2023-06-04 10:38:53 +00:00
Steve Ruiz
4b6383ed90
tlschema cleanup (#1509)
This PR cleans up the file names and imports for @tldraw/tlschema.

It also:
- renames some erroneously named validators / migrators (e.g.
`pageTypeValidator` -> `pageValidator`)
- removes the duplicated `languages.ts` and makes `tlschema` the source
of truth for languages
- renames ID to RecordId

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [editor] Remove `app.createShapeId`
- [tlschema] Cleans up exports
2023-06-03 20:46:53 +00:00
Steve Ruiz
c1b84bf246
Rename tlstore to store (#1507)
This PR renames the `@tldraw/tlstore` package to `@tldraw/store`, mainly
to avoid confusion between `TLStore`. Will be doing the same with other
packages.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Replace @tldraw/tlstore with @tldraw/store
2023-06-03 08:59:04 +00:00
Steve Ruiz
7307282f1f
Rename tlvalidate to validate (#1508)
This PR renames the @tldraw/tlvalidate package to @tldraw/validate. 

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Rename tlvalidate to validate
2023-06-03 08:27:44 +00:00
Steve Ruiz
a5e653b225
Cleanup @tldraw/ui types / exports (#1504)
This PR cleans up exports from TldrawUi, unifying types under `TLUi` and
removing many items from exports / marking others as internal.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [editor] clean up / unify types
2023-06-02 21:16:09 +00:00
Steve Ruiz
735f1c41b7
rename app to editor (#1503)
This PR renames `App`, `app` and all appy names to `Editor`, `editor`,
and editorry names.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Rename `App` to `Editor` and many other things that reference `app` to
`editor`.
2023-06-02 15:21:45 +00:00
alex
640bc9de24
Revert 09c36781 & tweak linting (#1501)
This diff reverts 09c36781 and tweaks how some of our linting was
working.

I'm not actually sure what caused the regression that 09c36781 was
fixing - it was something to do with typescript being used to transpile
eslintrc.js, but that being excluded from the tsconfig for those
projects. I fixed that by removing `rootDir` from those, but that
revealed some other issues with files not getting ignored correctly.

I fixed the ignoring issue with a change I've wanted to make to these
scripts for a while: only running them on files that are actually
tracked by git, instead of on everything with a relevant extension. A
side effect of that is that we have to re-implement .eslintignore
support ourselves, but that's very straight forward: the `ignore`
package that eslint uses is very easy to include.

### Change Type
- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Test Plan
-

### Release Notes
[internal-only]
2023-06-02 10:45:51 +00:00