rename and annotate user presence example (#2462)

Mildly spicy take, should we call this the user presence example if it
isn't an example of how to implement user presence? Presence record
example is closer to what it is.

### 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 user presence example and rename to presence-record

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/examples/src/examples/user-presence/README.md

@@ -1,5 +1,5 @@
 ---
-title: User presence
+title: User Presence
 component: ./UserPresenceExample.tsx
 ---
 

apps/examples/src/examples/user-presence/UserPresenceExample.tsx

@@ -3,17 +3,15 @@ import { InstancePresenceRecordType, Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 import { useRef } from 'react'
 
+// There's a guide at the bottom of this file!
+
+// [1]
 const USER_NAME = 'huppy da arrow'
 const MOVING_CURSOR_SPEED = 0.25 // 0 is stopped, 1 is full send
 const MOVING_CURSOR_RADIUS = 100
 const CURSOR_CHAT_MESSAGE = 'Hey, I think this is just great.'
 
-// Note:
-// Almost all of the information below is calculated automatically by helpers in the editor.
-// For a more realistic implementation, see https://github.com/tldraw/tldraw-yjs-example. If anything,
-// this example should be used to understand the data model and test designs, not as a reference
-// for how to implement user presence.
-
+// [2]
 export default function UserPresenceExample() {
 	const rRaf = useRef<any>(-1)
 	return (
@@ -21,9 +19,7 @@ export default function UserPresenceExample() {
 			<Tldraw
 				persistenceKey="user-presence-example"
 				onMount={(editor) => {
-					// For every connected peer you should put a TLInstancePresence record in the
-					// store with their cursor position etc.
-
+					// [a]
 					const peerPresence = InstancePresenceRecordType.create({
 						id: InstancePresenceRecordType.createId(editor.store.id),
 						currentPageId: editor.getCurrentPageId(),
@@ -35,7 +31,7 @@ export default function UserPresenceExample() {
 
 					editor.store.put([peerPresence])
 
-					// Make the fake user's cursor rotate in a circle
+					// [b]
 					const raf = rRaf.current
 					cancelAnimationFrame(raf)
 
@@ -92,3 +88,21 @@ export default function UserPresenceExample() {
 		</div>
 	)
 }
+
+/* 
+This example shows how to add instance presence records to the store to show other users' cursors.
+It is not an example of how to implement user presence, check out the yjs example for that:
+https://github.com/tldraw/tldraw-yjs-example
+
+[1]
+We're going to a fake a user's cursor and chat message, these are the values we'll use.
+
+[2]
+This is where we'll render the Tldraw component. We'll use the onMount callback to access the editor 
+instance.
+	[a] For every connected peer we need to add an instance presence record to the store. We can do
+		this using the InstancePresenceRecordType.create function and add it to the store using the
+		store.put method.
+	[b] We'll use the requestAnimationFrame function to update the cursor position and chat message.
+		This is just for demonstration purposes.
+*/