[fix] missing file menu (#231)

* Fix missing file menu

* Update TLDraw.tsx

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(
       {

packages/tldraw/README.md

@@ -99,13 +99,18 @@ 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`.                                                   |
+| `onMount`       | `Function`       | 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. |
+| `onPatch`       | `Function`       | Called when the state is updated via a patch.                                                |
-| `onUserChange`  | `Function`       | A callback function that will be fired when the user's "presence" information changes.                                                                       |
+| `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.                                                              |
@@ -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 <TLDraw onMount={handleMount} />
+}
+```
+
+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.

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<TLDrawContextType>(() => ({
     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)
 

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',