Add shape change examples (#4043)

This PR adds two new examples showing how to reject changes to shape or
instance records.

### Change type

- [x] `other`

### Release notes

- Adds shape / instance change examples.

apps/examples/src/examples/prevent-instance-change/PreventInstanceChangeExample.tsx

@@ -0,0 +1,38 @@
+import { Tldraw } from 'tldraw'
+import 'tldraw/tldraw.css'
+
+// There's a guide at the bottom of this page!
+
+export default function PreventInstanceChangeExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw
+				onMount={(editor) => {
+					editor.updateInstanceState({ isGridMode: true })
+
+					// [1]
+					editor.sideEffects.registerBeforeChangeHandler('instance', (prev, next) => {
+						if (!next.isGridMode) {
+							return prev
+						}
+						return next
+					})
+				}}
+			/>
+		</div>
+	)
+}
+
+/*
+In this example, we want to prevent the user from changing the isGridMode property.
+
+[1]
+Here we register a handler that will run whenever a change is about to be made to
+to an "instance" type record.
+
+The logic we want is that: if the new instance has `isGridMode` set to `false`, then
+we want to reject the change; otherwise, we want to allow it.
+
+To reject the change, we return the previous record. To allow the change, we
+return the next record.
+*/

apps/examples/src/examples/prevent-instance-change/README.md

@@ -0,0 +1,12 @@
+---
+title: Prevent instance change
+component: ./PreventInstanceChangeExample.tsx
+category: editor-api
+keywords: [side, effect, instance, grid, mode, prevent]
+---
+
+Prevent a change to the "instance" record that would turn off grid mode.
+
+---
+
+You can use Editor's side effects API to prevent certain changes from occuring in the instance state. In this example, we prevent the user from changing the instance's `isGridMode` property.

apps/examples/src/examples/prevent-shape-change/PreventShapeChangeExample.tsx

@@ -0,0 +1,55 @@
+import { TLGeoShape, Tldraw } from 'tldraw'
+import 'tldraw/tldraw.css'
+
+// There's a guide at the bottom of this page!
+
+export default function PreventMoveExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw
+				onMount={(editor) => {
+					editor.createShape({
+						type: 'geo',
+						x: 100,
+						y: 100,
+						props: { w: 300, h: 300, text: "style me but don't transform me" },
+					})
+
+					// [1]
+					editor.sideEffects.registerBeforeChangeHandler('shape', (prev, next) => {
+						if (
+							editor.isShapeOfType<TLGeoShape>(prev, 'geo') &&
+							editor.isShapeOfType<TLGeoShape>(next, 'geo') &&
+							next.props.geo === 'rectangle'
+						) {
+							if (
+								next.x !== prev.x ||
+								next.y !== prev.y ||
+								next.rotation !== prev.rotation ||
+								next.props.w !== prev.props.w ||
+								next.props.h !== prev.props.h
+							) {
+								return prev
+							}
+						}
+						return next
+					})
+				}}
+			/>
+		</div>
+	)
+}
+
+/*
+[1]
+Here we register a handler that will run whenever a change is about to be made to
+a shape's record.
+
+The logic we want is that: if the shape is a geo shape and a rectangle, and then
+if the x, y, or rotation properties would be different in the next version of
+the shape record, or if the props.w, or props.h properties would change, then
+we want to reject the change; otherwise, we want to allow it.
+
+To reject the change, we return the previous record. To allow the change, we
+return the next record.
+*/

apps/examples/src/examples/prevent-shape-change/README.md

@@ -0,0 +1,10 @@
+---
+title: Prevent shape change
+component: ./PreventShapeChangeExample.tsx
+category: editor-api
+keywords: [side, effect, move, prevent]
+---
+
+---
+
+You can use Editor's side effects API to prevent certain changes from occuring in a shape. In this example, we prevent any changes to the shape's position, rotation, or size.