Fix typos and add comments for persistence example (#2450)

Fix typos and add comments for persistence 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

- Fix typos and add comments for persistence example

apps/examples/src/examples/custom-styles/CustomStylesExample.tsx

@@ -34,7 +34,7 @@ create a custom style for a card shape that lets the user apply a filter to blur
 invert or grayscale the card.
 
 [1]
-We define an array to hold the custom shape util and cusom tool. It's important to 
+We define an array to hold the custom shape util and custom tool. It's important to 
 do this outside of any React component so that this array doesn't get redefined on 
 every render. We'll pass this into the Tldraw component's `shapeUtils` and `tools` 
 props.

apps/examples/src/examples/persistence/PersistenceExample.tsx

@@ -2,16 +2,20 @@ import { Tldraw, createTLStore, defaultShapeUtils, throttle } from '@tldraw/tldr
 import '@tldraw/tldraw/tldraw.css'
 import { useLayoutEffect, useState } from 'react'
 
+// There's a guide at the bottom of this file!
+
 const PERSISTENCE_KEY = 'example-3'
 
 export default function PersistenceExample() {
+	//[1]
 	const [store] = useState(() => createTLStore({ shapeUtils: defaultShapeUtils }))
+	//[2]
 	const [loadingState, setLoadingState] = useState<
 		{ status: 'loading' } | { status: 'ready' } | { status: 'error'; error: string }
 	>({
 		status: 'loading',
 	})
-
+	//[3]
 	useLayoutEffect(() => {
 		setLoadingState({ status: 'loading' })
 
@@ -43,6 +47,7 @@ export default function PersistenceExample() {
 		}
 	}, [store])
 
+	// [4]
 	if (loadingState.status === 'loading') {
 		return (
 			<div className="tldraw__editor">
@@ -66,3 +71,38 @@ export default function PersistenceExample() {
 		</div>
 	)
 }
+
+/*
+This example shows how to implement persistence in the Tldraw component. We do
+this by saving the editor's state to local storage each time it changes. You 
+should replace this in your app with some sort of backend storage solution. If 
+you just want to save to local storage, you can use the `persistenceKey` prop
+instead. Simply pass any string to this prop and the editor will automatically 
+save to local storage.
+
+[1]
+We create a new store using the `createTLStore` helper function. We pass in the 
+default shape utils so that the store knows how to handle the built-in shapes. 
+We also wrap this in a `useState` hook so that the store is only created once.
+
+[2]
+This is a cool pattern that uses Typescript to help keep track of our app's
+loading state.
+
+[3]
+We use the `useLayoutEffect` hook to run our persistence code after the first
+render. First we grab the persisted snapshot from local storage. If there is
+one, we load it into the store and set the loading state to ready. If there
+isn't one, we just set the loading state to ready.
+
+Then we setup a listener on the store that will run our persistence code each
+time the store changes. We use the `throttle` helper function to debounce the
+listener so that it doesn't run too often. We also return a cleanup function
+that will remove the listener when the component unmounts.
+
+[4]
+This is where we render our application depending on the loading state. If the
+loading state is `loading`, we render a loading message. If the loading state
+is `error`, we render an error message. If the loading state is `ready`, we
+render the Tldraw component.
+*/