[feature] Things on the canvas (#2150)

This PR adds two new component overrides to the editor's `components`
slot. They are:

- `<OnTheCanvas/>`, which renders inside of the html layer that scales
and translates with the camera
- `<InFrontOfTheCanvas/>`, which renders in front of the canvas but
behind any UI elements, and which does not scale / pan with the camera.

![Kapture 2023-11-06 at 12 19
15](https://github.com/tldraw/tldraw/assets/23072548/51c0421d-8b39-48b5-9b8a-c717253c3423)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. See the "on the canvas" example.

### Release Notes

- [editor] Adds two new components, `OnTheCanvas` and
`InFrontOfTheCanvas`.

packages/editor/src/lib/components/Canvas.tsx

@@ -109,6 +109,7 @@ export function Canvas({ className }: { className?: string }) {
 				</defs>
 			</svg>
 			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+				<OnTheCanvasWrapper />
 				<SelectionBackgroundWrapper />
 				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 			</div>
@@ -126,6 +127,7 @@ export function Canvas({ className }: { className?: string }) {
 					<SelectionForegroundWrapper />
 					<LiveCollaborators />
 				</div>
+				<InFrontOfTheCanvasWrapper />
 			</div>
 		</div>
 	)
@@ -518,3 +520,15 @@ export function SelectionBackgroundWrapper() {
 	if (!selectionBounds || !SelectionBackground) return null
 	return <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />
 }
+
+export function OnTheCanvasWrapper() {
+	const { OnTheCanvas } = useEditorComponents()
+	if (!OnTheCanvas) return null
+	return <OnTheCanvas />
+}
+
+export function InFrontOfTheCanvasWrapper() {
+	const { InFrontOfTheCanvas } = useEditorComponents()
+	if (!InFrontOfTheCanvas) return null
+	return <InFrontOfTheCanvas />
+}