Shape with onDoubleClickEdge

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { ResizableShapeUtil } from './ResizableShapeUtil'

// [1]
const customShapeUtils = [ResizableShapeUtil]

// [2]
export default function ShapeWithOnDoubleClickEdgeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				shapeUtils={customShapeUtils}
				onMount={(editor) => {
					editor.createShape({
						type: 'resizable',
						x: 200,
						y: 200,
					})
				}}
			/>
		</div>
	)
}

/*
[1]
We define the custom shape utils array outside of the component so it doesn't get
recreated on every render.

[2]
We pass our custom shape util to the Tldraw component and create an initial shape
on mount so there's something to interact with right away.

Try it:
- Select the shape, then double-click one of its edge resize handles
- The shape toggles between 400×320 and 200×200
*/