annotate meta oncreate example (#2426)

annotate meta oncreate 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

- annotate meta oncreate example

apps/examples/src/examples/meta-on-create/OnCreateShapeMetaExample.tsx

@@ -1,15 +1,15 @@
 import { TLShape, Tldraw, track, useEditor } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
+// There's a guide at the bottom of this file!
+
 export default function OnCreateShapeMetaExample() {
 	return (
 		<div className="tldraw__editor">
 			<Tldraw
 				persistenceKey="tldraw_example"
 				onMount={(editor) => {
-					// There's no API for setting getInitialMetaForShape yet, but
+					//[1]
-					// you can replace it at runtime like this. This will run for
-					// all shapes created by the user.
 					editor.getInitialMetaForShape = (_shape) => {
 						return {
 							createdBy: editor.user.getId(),
@@ -24,8 +24,10 @@ export default function OnCreateShapeMetaExample() {
 	)
 }
 
+// [2]
 type ShapeWithMyMeta = TLShape & { meta: { updatedBy: string; updatedAt: string } }
 
+// [3]
 export const MetaUiHelper = track(function MetaUiHelper() {
 	const editor = useEditor()
 	const onlySelectedShape = editor.getOnlySelectedShape() as ShapeWithMyMeta | null
@@ -38,3 +40,23 @@ export const MetaUiHelper = track(function MetaUiHelper() {
 		</pre>
 	)
 })
+
+/* 
+This is example demonstrates how to add your own data to shapes using the meta property as they're
+created. Check out the docs for a more detailed explanation of the meta property: 
+https://tldraw.dev/docs/shapes#Meta-information
+
+[1]
+getInitialMetaForShape is a method you can replace at runtime. Here we use a callback on the onMount
+prop to replace the default implementation with our own.
+
+[2]
+All tldraw shapes have a meta property with a type of unknown. To type your meta data you can use 
+a union like this.
+
+[3]
+A minimal ui component that displays the meta data of the selected shape. We use track to make sure
+that the component is re-rendered when the signals it's tracking change. Check out the signia docs
+for more info: https://signia.tldraw.dev/docs/API/signia_react/functions/track
+
+*/