annotate snapshot example (#2454)

annotate snapshot 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 snapshot example

apps/examples/src/examples/snapshots/SnapshotExample.tsx

@@ -1,28 +1,21 @@
 import { Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 import jsonSnapshot from './snapshot.json'
-// ^^^
-// This snapshot was previously created with `editor.store.getSnapshot()`
-// We'll now load this into the editor with `editor.store.loadSnapshot()`.
-// Loading it also migrates the snapshot, so even though the snapshot was
-// created in the past (potentially a few versions ago) it should load
-// successfully.
+
+// There's a guide at the bottom of this file!
 
 const LOAD_SNAPSHOT_WITH_INITIAL_DATA = true
 
+//[1]
 export default function SnapshotExample() {
 	if (LOAD_SNAPSHOT_WITH_INITIAL_DATA) {
-		// If you want to use the snapshot as the store's initial data, you can do so like this:
 		return (
 			<div className="tldraw__editor">
 				<Tldraw snapshot={jsonSnapshot} />
 			</div>
 		)
 	}
-
-	// You can also load the snapshot an existing editor instance afterwards. Note that this
-	// does not create a new editor, and doesn't change the editor's state or the editor's undo
-	// history, so you should only ever use this on mount.
+	//[2]
 	return (
 		<div className="tldraw__editor">
 			<Tldraw
@@ -33,6 +26,20 @@ export default function SnapshotExample() {
 		</div>
 	)
 }
+/*
+This example shows how to load a snapshot into the editor. Thanks to our 
+migration system, you can load snapshots from any version of Tldraw. The
+snapshot we're using can be found in the snapshot.json file in this folder.
+You can generate a snapshot by using editor.store.getSnapshot().
 
-// Tips:
-// Want to migrate a snapshot but not load it? Use `editor.store.migrateSnapshot()`
+There are two ways to load a snapshot:
+
+[1] Via the `snapshot` prop of the Tldraw component.
+
+[2] Using editor.store.loadSnapshot() in the callback of the onMount prop of the
+	Tldraw component.
+
+
+Tips:
+Want to migrate a snapshot but not load it? Use `editor.store.migrateSnapshot()`
+ */