Examples: update kbd shortcuts, add actions overrides example (#3330)

I think the keyboard shortcuts example already teaches the concept that
the actions overrides example does. I've updated the keyboard shortcuts
example and included an action override example in case we want that
too.

### 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
- [ ] `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. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add action overrides example, update keyboard shortcuts example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/examples/src/examples/action-overrides/ActionOverridesExample.tsx

@@ -0,0 +1,27 @@
+import { Tldraw } from 'tldraw'
+import 'tldraw/tldraw.css'
+
+export default function BasicExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw
+				overrides={{
+					actions: (_editor, actions, _helpers) => {
+						const newActions = {
+							...actions,
+							delete: { ...actions['delete'], kbd: 'x' },
+						}
+						return newActions
+					},
+				}}
+			/>
+		</div>
+	)
+}
+
+/* 
+This example shows how you can override tldraw's actions object to change the keyboard shortcuts.
+In this case we're changing the delete action's shortcut to 'x'. To customize the actions menu
+please see the custom actions menu example. For more information on keyboard shortcuts see the
+keyboard shortcuts example.
+*/

apps/examples/src/examples/action-overrides/README.md

@@ -0,0 +1,12 @@
+---
+title: Action overrides
+component: ./ActionOverridesExample.tsx
+category: ui
+priority: 2
+---
+
+Override tldraw's actions
+
+---
+
+This example shows how you can override tldraw's actions object to change the keyboard shortcuts. In this case we're changing the delete action's shortcut to 'x'. To customize the actions menu please see the custom actions menu example. For more information on keyboard shortcuts see the keyboard shortcuts example.

apps/examples/src/examples/keyboard-shortcuts/KeyboardShortcuts.tsx

@@ -1,6 +1,5 @@
 import { TLUiActionsContextType, TLUiOverrides, TLUiToolsContextType, Tldraw } from 'tldraw'
 import 'tldraw/tldraw.css'
-import jsonSnapshot from './snapshot.json'
 
 // There's a guide at the bottom of this file!
 
@@ -8,13 +7,18 @@ import jsonSnapshot from './snapshot.json'
 const overrides: TLUiOverrides = {
 	//[a]
 	actions(_editor, actions): TLUiActionsContextType {
-		actions['toggle-grid'].kbd = 'x'
+		const newActions = {
-		return actions
+			...actions,
+			'toggle-grid': { ...actions['toggle-grid'], kbd: 'x' },
+			'copy-as-png': { ...actions['copy-as-png'], kbd: '$1' },
+		}
+
+		return newActions
 	},
 	//[b]
 	tools(_editor, tools): TLUiToolsContextType {
-		tools['draw'].kbd = 'p'
+		const newTools = { ...tools, draw: { ...tools.draw, kbd: 'p' } }
-		return tools
+		return newTools
 	},
 }
 
@@ -22,7 +26,7 @@ const overrides: TLUiOverrides = {
 export default function KeyboardShortcuts() {
 	return (
 		<div className="tldraw__editor">
-			<Tldraw persistenceKey="tldraw_kbd_shortcuts" overrides={overrides} snapshot={jsonSnapshot} />
+			<Tldraw overrides={overrides} />
 		</div>
 	)
 }

apps/examples/src/examples/keyboard-shortcuts/README.md

@@ -5,8 +5,14 @@ category: ui
 priority: 2
 ---
 
-Override default keyboard shortcuts.
+How to replace tldraw's default keyboard shortcuts with your own.
 
 ---
 
-How to replace tldraw's default keyboard shortcuts with your own.
+This example shows how you can replace tldraw's default keyboard shortcuts with your own,
+or add a shortcut for an action that doesn't have one. An example of how to add shortcuts
+for custom tools can be found in the custom-config example.
+
+- Toggle show grid by pressing 'x'
+- Select the Draw tool by pressing 'p'
+- Copy as png by pressing 'ctrl/cmd + 1'