ac0259a6af
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.
|
||
|---|---|---|
| .. | ||
| api | ||
| app | ||
| components | ||
| content | ||
| public | ||
| scripts | ||
| styles | ||
| types | ||
| utils | ||
| .gitignore | ||
| .prettierignore | ||
| CHANGELOG.md | ||
| content.d.ts | ||
| LICENSE.md | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.content.json | ||
| tsconfig.json | ||
| watcher.ts | ||
tldraw-docs
Welcome to the source for the tldraw docs site.
This site is a Next.js app that uses MDX for content. It contains human-written docs in the content folder as well as generated docs in the api folder.
We have several scripts that build these files into a SQLite database that is used to generate the site's pages.
To pull the most recent docs from the tldraw repo, create an .env file with a GitHub personal access token and the SHA of the commit or branch that you'd like to pull from.
ACCESS_TOKEN=your_github_access_token
SOURCE_SHA=main
The files are also provided in this repo.
Building the content
You can build the markdown and API content using the following scripts:
yarn refresh-everythingto reset the database, generate the markdown from the API docs, and populate the database with articles from both the regular content and the generated API contentyarn refresh-contentto generate just the regular content
Content
The docs has two types of content: regular content that is written by the team and auto-generated content that is created using tsdoc and API extractor.
The content folder contains all content in the form of MDX files. All articles belong to a "section" and a "category". The sections.json defines each section and any categories belonging to that section.
A section looks like this:
{
"id": "community",
"title": "Community",
"description": "Guides for contributing to tldraw's open source project.",
"categories": []
}
The content is organized into folders for each section. The gen folder contains auto-generated content.
Regular Content
The content folder contains all "regular" content in the form of MDX files.All articles belong to a "section" and a "category". The content is organized into folders for each "section".
An article's frontmatter looks like this:
---
title: User Interface
description: How to customize the tldraw user interface using overrides.
status: published
author: steveruizok
date: 3/22/2023
order: 8
keywords:
- ui
- interface
- tools
- shapes
- custom
- button
- toolbar
- styles
---
Title
The title is displayed in the article's header, in the page title, in the search bar, and in search results. It is used to find an article through the site's search feature.
Description
The description is hidden in the article's frontmatter, but is used to populate the article's meta description tag. It is also used to find an article through the site's search feature.
Hero
The hero is used for the article's social media image. It is not displayed in the article. It should refer to a page in the public/images folder.
Category
An article may declare its category in its frontmatter. Any article that does not declare a category will be placed into the "ucg" category for "uncategorized" articles.
Order
The order property defines the article's order in its category. Uncategorized articles are placed at the end of the list of categories sorted by its order. For a section without categories, the order keyword effectively defines the order that the article will appear in the section list.
Author
The author must refer to an author named in the content/authors.json file.
An author looks like this:
"steveruizok": {
"name": "Steve Ruiz",
"email": "steve@tldraw.com",
"twitter": "steveruizok",
"image": "steve_ruiz.jpg"
}
The image should refer to an image in public/avatars.
Date
The date is formatted as DD/MM/YYYY.
Status
An article's status may be either draft or published. A draft article is hidden in production.
Keywords
The keywords are used to find an article through the site's search feature.
Auto-generated content
The auto-generated docs content is created using tsdoc and API extractor. The source is the API documentation created by yarn build or yarn build-api. The output is placed in the gen folder.
Developing the docs
When developing the docs, any change to the content folder will cause the page to refresh. This is a little shitty but it mostly works.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
License
The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use.
If you wish to use this project in commercial product, you need to purchase a commercial license. matPlease contact us at hello@tldraw.com for more inforion about obtaining a commercial license.
Trademarks
Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.