examples: let people copy out code (#2920)

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx

@@ -48,6 +48,7 @@ export default function CanvasEventsExample() {
 					overflow: 'auto',
 					whiteSpace: 'pre-wrap',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<div>{JSON.stringify(events, undefined, 2)}</div>
 			</div>

apps/examples/src/examples/store-events/StoreEventsExample.tsx

@@ -92,6 +92,7 @@ export default function StoreEventsExample() {
 					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<pre>{storeEvents}</pre>
 			</div>

apps/examples/src/examples/ui-events/UiEventsExample.tsx

@@ -11,8 +11,8 @@ export default function UiEventsExample() {
 	const handleUiEvent = useCallback<TLUiEventHandler>((name, data: any) => {
 		const codeSnippet = getCodeSnippet(name, data)
 		setUiEvents((events) => [
-			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 			...events,
+			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 		])
 	}, [])
 
@@ -31,10 +31,9 @@ export default function UiEventsExample() {
 					fontFamily: 'monospace',
 					fontSize: 12,
 					borderLeft: 'solid 2px #333',
-					display: 'flex',
-					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				{uiEvents.map((t, i) => (
 					<Fragment key={i}>