Annotate custom ui example (#2408)

Adds annotation to the custom-ui example.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: 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
- [ ] End to end tests

### Release Notes

- Adds annotation to the custom ui example

apps/examples/src/examples/custom-ui/CustomUiExample.tsx

@@ -3,6 +3,9 @@ import '@tldraw/tldraw/tldraw.css'
 import { useEffect } from 'react'
 import './custom-ui.css'
 
+// There's a guide at the bottom of this file!
+
+// [1]
 export default function CustomUiExample() {
 	return (
 		<div className="tldraw__editor">
@@ -13,6 +16,7 @@ export default function CustomUiExample() {
 	)
 }
 
+// [2]
 const CustomUi = track(() => {
 	const editor = useEditor()
 
@@ -76,3 +80,26 @@ const CustomUi = track(() => {
 		</div>
 	)
 })
+
+/* 
+This example shows how to create your own custom ui for the editor.
+
+[1]
+We render the Tldraw component with the `hideUi` prop. This will hide the default
+toolbar, style menu and pages menu. We also render our custom ui component inside the 
+Tldraw component. This gives us access to the editor instance via React context.
+
+The context menu isn't hidden by the `hideUi` prop, if you want to hide it you can
+render the parts that make up the Tldraw component separately and omit the context
+menu. Check out the exploded example to see how to do this.
+
+[2]
+We use the `track` function to wrap our component. This makes our component reactive- it will
+re-render when the signals it is tracking change. Check out the signia docs for more: 
+https://signia.tldraw.dev/docs/API/signia_react/functions/track
+
+We gain access to the editor instance via the `useEditor` hook. We use the `useEffect` hook
+to add event listeners for keyboard shortcuts. We use editor methods to change the current
+tool and delete shapes.
+
+*/