diff --git a/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx b/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
index 2adbc7260..10e4af301 100644
--- a/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
+++ b/apps/examples/src/examples/meta-on-change/OnChangeShapeMetaExample.tsx
@@ -1,23 +1,22 @@
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 OnChangeShapeMetaExample() {
return (
{
- // See the "meta-on-create" example for more about setting the
- // initial meta for a shape.
+ // [1]
editor.getInitialMetaForShape = (_shape) => {
return {
updatedBy: editor.user.getId(),
updatedAt: Date.now(),
}
}
- // We can also use the sideEffects API to modify a shape before
- // its change is committed to the database. This will run for
- // all shapes whenever they are updated.
+ // [2]
editor.sideEffects.registerBeforeChangeHandler('shape', (_prev, next, source) => {
if (source !== 'user') return next
return {
@@ -36,8 +35,10 @@ export default function OnChangeShapeMetaExample() {
)
}
+// [3]
type ShapeWithMyMeta = TLShape & { meta: { updatedBy: string; updatedAt: string } }
+// [4]
export const MetaUiHelper = track(function MetaUiHelper() {
const editor = useEditor()
const onlySelectedShape = editor.getOnlySelectedShape() as ShapeWithMyMeta | null
@@ -50,3 +51,29 @@ export const MetaUiHelper = track(function MetaUiHelper() {
)
})
+
+/*
+This example shows how to add meta data to shapes when they are created and
+updated. In this case we are adding `updatedBy` and `updatedAt` fields.
+
+[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]
+Here we're using the side effects API to add meta data to shapes when they are
+updated. You can use the side effects API to do something on create, update or
+delete, and you can target many things including: shapes, pages, the camera,
+the pointer etc.
+
+[3]
+All tldraw shapes have a meta property with a type of unknown. To type your
+meta data you can use a union like this.
+
+[4]
+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
+*/