From 05a2751eb67e96f9cb500e06b9815822a28e5a80 Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:25:09 +0000
Subject: [PATCH] Annotate api example (#2395)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Annotates the API example, updates from calling it app to calling it
editor.

### 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 API example
---
 apps/examples/src/examples/api/APIExample.tsx | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/examples/src/examples/api/APIExample.tsx b/apps/examples/src/examples/api/APIExample.tsx
index 2c358b439..3ef120c3e 100644
--- a/apps/examples/src/examples/api/APIExample.tsx
+++ b/apps/examples/src/examples/api/APIExample.tsx
@@ -10,13 +10,9 @@ import {
 import '@tldraw/tldraw/tldraw.css'
 import { useEffect } from 'react'
 
-// The tldraw component shares its App instance via its onMount callback prop.
-
-// The App instance is tldraw's "god object". You can use the app to do
-// just about everything that's possible in tldraw. Internally, the canvas
-// component and all shapes, tools, and UI components use this instance to
-// send events, observe changes, and perform actions.
+// There's a guide at the bottom of this file!
 
+//[1]
 export default function APIExample() {
 	const handleMount = (editor: Editor) => {
 		// Create a shape id
@@ -77,10 +73,7 @@ export default function APIExample() {
 	)
 }
 
-// Another (sneakier) way to access the current app is through React context.
-// The Tldraw component provides the context, so you can add children to
-// the component and access the app through the useEditor hook.
-
+//[2]
 const InsideOfEditorContext = () => {
 	const editor = useEditor()
 
@@ -103,3 +96,28 @@ const InsideOfEditorContext = () => {
 
 	return null
 }
+
+
+/* 
+Introduction: 
+
+This example shows how to use the tldraw editor instance to make changes 
+to the canvas. The editor instance is tldraw's "god object". You can use 
+the app to do just about everything that's possible in tldraw. Internally, 
+the canvas component and all shapes, tools, and UI components use this instance 
+to send events, observe changes, and perform actions. 
+
+There are two main ways to use the editor:
+
+[1] 
+The tldraw component shares its editor instance via its onMount callback prop.
+When you define a function for the onMount callback, it receives the editor 
+instance as an argument. You can use this to manipulate the canvas.
+
+
+[2]
+Another (sneakier) way to access the current app is through React context.
+The Tldraw component provides the context, so you can add children to
+the component and access the app through the useEditor hook. This is cool.
+
+*/
\ No newline at end of file