Adding an image shape from a file the public folder (#2370)

Adds an example of adding an image shape from the public folder.

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `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

### Release Notes

- Adds a simple image example.

apps/examples/src/examples/HostedImagesExample.tsx

@@ -14,7 +14,7 @@ import { useCallback } from 'react'
 
 const UPLOAD_URL = '/SOME_ENDPOINT'
 
-export default function AssetPropsExample() {
+export default function HostedImagesExample() {
 	const handleMount = useCallback((editor: Editor) => {
 		// When a user uploads a file, create an asset from it
 		editor.registerExternalAssetHandler('file', async ({ file }: { type: 'file'; file: File }) => {

apps/examples/src/examples/ImagesExamples.tsx

@@ -0,0 +1,57 @@
+import { AssetRecordType, Editor, Tldraw } from '@tldraw/tldraw'
+import '@tldraw/tldraw/tldraw.css'
+import { useCallback } from 'react'
+
+// This is an example of how you can add an image to the editor. The image is already
+// present in the `public` folder, so we can just use it directly.
+// If you want to allow users to upload the images please take a look at the `HostedImagesExample.tsx`
+export default function ImageExample() {
+	const handleMount = useCallback((editor: Editor) => {
+		// Assets are records that store data about shared assets like images, videos, etc.
+		// Each image has an associated asset record, so we'll create that first.
+
+		// We need an `assetId` so that we can later associate it with the image.
+		const assetId = AssetRecordType.createId()
+		const imageWidth = 1200
+		const imageHeight = 675
+
+		editor.createAssets([
+			{
+				id: assetId,
+				type: 'image',
+				typeName: 'asset',
+				props: {
+					name: 'tldraw.png',
+					src: '/tldraw.png',
+					w: imageWidth,
+					h: imageHeight,
+					mimeType: 'image/png',
+					isAnimated: false,
+				},
+				meta: {},
+			},
+		])
+		editor.createShape({
+			type: 'image',
+			// Let's center the image in the editor
+			x: (window.innerWidth - imageWidth) / 2,
+			y: (window.innerHeight - imageHeight) / 2,
+			props: {
+				assetId,
+				// We are using the full image size here, but as the user resizes the image
+				// these values will get updated.
+				// This shows why it's important to have a separate assets entity. Resizing an image
+				// does not change the dimensions of the file itself, it just updates the dimensions
+				// of the displayed image.
+				w: imageWidth,
+				h: imageHeight,
+			},
+		})
+	}, [])
+
+	return (
+		<div className="tldraw__editor">
+			<Tldraw persistenceKey="tldraw_example" onMount={handleMount} />
+		</div>
+	)
+}

apps/examples/src/index.tsx

@@ -27,6 +27,8 @@ import ExternalContentSourcesExample from './examples/ExternalContentSourcesExam
 import FloatyExample from './examples/FloatyExample'
 import ForceMobileExample from './examples/ForceBreakpointExample'
 import HideUiExample from './examples/HideUiExample'
+import HostedImagesExample from './examples/HostedImagesExample'
+import ImageExample from './examples/ImagesExamples'
 import MetaExample from './examples/MetaExample'
 import MultipleExample from './examples/MultipleExample'
 import OnTheCanvasExample from './examples/OnTheCanvas'
@@ -189,6 +191,16 @@ export const allExamples: Example[] = [
 		path: 'only-editor',
 		element: <OnlyEditorExample />,
 	},
+	{
+		title: 'Adding images',
+		path: 'images',
+		element: <ImageExample />,
+	},
+	{
+		title: 'Hosted images example',
+		path: 'hosted-images',
+		element: <HostedImagesExample />,
+	},
 	{
 		title: 'Asset props',
 		path: 'asset-props',
@@ -208,7 +220,7 @@ export const allExamples: Example[] = [
 		title: 'Custom Shape With Handles',
 		path: 'custom-shape-with-handles',
 		element: <CustomShapeWithHandles />,
-	}, // not listed
+	},
 	// not listed
 	{
 		path: 'end-to-end',