diff --git a/example/scripts/dev.mjs b/example/scripts/dev.mjs
index b9e79090d..2c523a39e 100644
--- a/example/scripts/dev.mjs
+++ b/example/scripts/dev.mjs
@@ -14,8 +14,6 @@ async function main() {
if (err) throw err
})
- console.log(process.env.LIVEBLOCKS_PUBLIC_API_KEY)
-
try {
await esbuildServe(
{
diff --git a/packages/tldraw/README.md b/packages/tldraw/README.md
index 5f23103ea..965593ab2 100644
--- a/packages/tldraw/README.md
+++ b/packages/tldraw/README.md
@@ -98,20 +98,25 @@ Internally, the `TLDraw` component's user interface uses this API to make change
The `TLDraw` React component is the [tldraw](https://tldraw.com) editor exported as a standalone component. You can control the editor through props, or through the `TLDrawState`'s imperative API. **All props are optional.**
-| Prop | Type | Description |
-| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id` | `string` | An id under which to persist the component's state. |
-| `document` | `TLDrawDocument` | An initial [`TLDrawDocument`](#tldrawdocument) object. |
-| `currentPageId` | `string` | A current page id, referencing the `TLDrawDocument` object provided via the `document` prop. |
-| `onMount` | `Function` | A callback function that will be called when the editor first mounts, receiving the current `TLDrawState`. |
-| `onChange` | `Function` | A callback function that will be called whenever the `TLDrawState` updates. The update will include the current `TLDrawState` and the reason for the change. |
-| `onUserChange` | `Function` | A callback function that will be fired when the user's "presence" information changes. |
-| `autofocus` | `boolean` | Whether the editor should immediately receive focus. Defaults to true. |
-| `showMenu` | `boolean` | Whether to show the menu. |
-| `showPages` | `boolean` | Whether to show the pages menu. |
-| `showStyles` | `boolean` | Whether to show the styles menu. |
-| `showTools` | `boolean` | Whether to show the tools. |
-| `showUI` | `boolean` | Whether to show any UI other than the canvas. |
+| Prop | Type | Description |
+| --------------- | ---------------- | -------------------------------------------------------------------------------------------- |
+| `id` | `string` | An id under which to persist the component's state. |
+| `document` | `TLDrawDocument` | An initial [`TLDrawDocument`](#tldrawdocument) object. |
+| `currentPageId` | `string` | A current page id, referencing the `TLDrawDocument` object provided via the `document` prop. |
+| `onMount` | `Function` | Called when the editor first mounts, receiving the current `TLDrawState`. |
+| `onPatch` | `Function` | Called when the state is updated via a patch. |
+| `onCommand` | `Function` | Called when the state is updated via a command. |
+| `onPersist` | `Function` | Called when the state is persisted after an action. |
+| `onChange` | `Function` | Called when the `TLDrawState` updates for any reason. |
+| `onUndo` | `Function` | Called when the `TLDrawState` updates after an undo. |
+| `onRedo` | `Function` | Called when the `TLDrawState` updates after a redo. |
+| `onUserChange` | `Function` | Called when the user's "presence" information changes. |
+| `autofocus` | `boolean` | Whether the editor should immediately receive focus. Defaults to true. |
+| `showMenu` | `boolean` | Whether to show the menu. |
+| `showPages` | `boolean` | Whether to show the pages menu. |
+| `showStyles` | `boolean` | Whether to show the styles menu. |
+| `showTools` | `boolean` | Whether to show the tools. |
+| `showUI` | `boolean` | Whether to show any UI other than the canvas. |
### `TLDrawDocument`
@@ -247,6 +252,72 @@ A binding is a connection **from** one shape and **to** another shape. At the mo
| `distance` | `number` | The distance from the bound point. |
| `point` | `number[]` | A normalized point representing the bound point. |
+### `TLDrawState` API
+
+You can change the `TLDraw` component's state through an imperative API called `TLDrawState`. To access this API, use the `onMount` callback, or any of the component's callback props, like `onPersist`.
+
+```tsx
+import { TLDraw, TLDrawState } from '@tldraw/tldraw'
+
+function App() {
+ const handleMount = React.useCallback((state: TLDrawState) => {
+ state.selectAll()
+ }, [])
+
+ return
+}
+```
+
+The `TLDrawState` API is too large to document here. To view documentation for the API, build the documentation by running `yarn docs` from the root folder and open the file at `/packages/tldraw/docs/classes/TLDrawState.html` in your browser.
+
+Here are some useful methods:
+
+| Method | Description |
+| ----------------- | ----------- |
+| `loadDocument` | |
+| `select` | |
+| `selectAll` | |
+| `selectNone` | |
+| `delete` | |
+| `deleteAll` | |
+| `deletePage` | |
+| `changePage` | |
+| `cut` | |
+| `copy` | |
+| `paste` | |
+| `copyJson` | |
+| `copySvg` | |
+| `undo` | |
+| `redo` | |
+| `zoomIn` | |
+| `zoomOut` | |
+| `zoomToContent` | |
+| `zoomToSelection` | |
+| `zoomToFit` | |
+| `zoomTo` | |
+| `resetZoom` | |
+| `setCamera` | |
+| `resetCamera` | |
+| `align` | |
+| `distribute` | |
+| `stretch` | |
+| `nudge` | |
+| `duplicate` | |
+| `flipHorizontal` | |
+| `flipVertical` | |
+| `rotate` | |
+| `style` | |
+| `group` | |
+| `ungroup` | |
+| `createShapes` | |
+| `updateShapes` | |
+| `updateDocument` | |
+| `updateUsers` | |
+| `removeUser` | |
+| `setSetting` | |
+| `selectTool` | |
+| `cancel` | |
+
## Local Development
- Run `yarn` to install dependencies.
diff --git a/packages/tldraw/src/TLDraw.tsx b/packages/tldraw/src/TLDraw.tsx
index e937aeea4..4c6ae4f4c 100644
--- a/packages/tldraw/src/TLDraw.tsx
+++ b/packages/tldraw/src/TLDraw.tsx
@@ -184,7 +184,25 @@ export function TLDraw({
}: TLDrawProps) {
const [sId, setSId] = React.useState(id)
- const [state, setState] = React.useState(() => new TLDrawState(id))
+ const [state, setState] = React.useState(
+ () =>
+ new TLDrawState(id, {
+ onMount,
+ onChange,
+ onUserChange,
+ onNewProject,
+ onSaveProject,
+ onSaveProjectAs,
+ onOpenProject,
+ onSignOut,
+ onSignIn,
+ onUndo,
+ onRedo,
+ onPatch,
+ onCommand,
+ onPersist,
+ })
+ )
const [context, setContext] = React.useState(() => ({
state,
@@ -194,7 +212,22 @@ export function TLDraw({
React.useEffect(() => {
if (id === sId) return
- const newState = new TLDrawState(id)
+ const newState = new TLDrawState(id, {
+ onMount,
+ onChange,
+ onUserChange,
+ onNewProject,
+ onSaveProject,
+ onSaveProjectAs,
+ onOpenProject,
+ onSignOut,
+ onSignIn,
+ onUndo,
+ onRedo,
+ onPatch,
+ onCommand,
+ onPersist,
+ })
setSId(id)
diff --git a/packages/tldraw/src/components/Kbd/Kbd.tsx b/packages/tldraw/src/components/Kbd/Kbd.tsx
index bc6e9d10a..63e2978ee 100644
--- a/packages/tldraw/src/components/Kbd/Kbd.tsx
+++ b/packages/tldraw/src/components/Kbd/Kbd.tsx
@@ -34,6 +34,7 @@ export const StyledKbd = styled('kbd', {
fontSize: '$0',
fontFamily: '$ui',
fontWeight: 400,
+ color: '$text',
gap: '$1',
display: 'flex',
alignItems: 'center',