Fix <InFrontOfTheCanvas/> (#4024)

This PR:
- fixes the placement of the InFrontOfTheCanvas component

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Fixed placement of the InFrontOfTheCanvas component.

packages/editor/editor.css

@@ -41,7 +41,6 @@
 	--layer-collaborator-cursor: 130;
 	--layer-grid: 150;
 	--layer-culled-shapes: 175;
-	--layer-canvas: 200;
 	--layer-shapes: 300;
 	--layer-overlays: 400;
 	--layer-in-front-overlay: 500;
@@ -257,7 +256,6 @@ input,
 	height: 100%;
 	width: 100%;
 	color: var(--color-text);
-	z-index: var(--layer-canvas);
 	cursor: var(--tl-cursor);
 	overflow: clip;
 	content-visibility: auto;
@@ -313,17 +311,6 @@ input,
 	pointer-events: none;
 }
 
-.tl-front {
-	z-index: var(--layer-in-front);
-	position: absolute;
-	inset: 0px;
-	height: 100%;
-	width: 100%;
-	overflow: clip;
-	content-visibility: auto;
-	touch-action: none;
-	pointer-events: none;
-}
 /* ------------------- Background ------------------- */
 
 .tl-background__wrapper {
@@ -1068,7 +1055,7 @@ input,
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: var(--layer-canvas);
+	z-index: 200;
 	font-size: 12px;
 	font-weight: 400;
 	color: var(--color-text-1);

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -125,53 +125,62 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	)
 
 	return (
-		<div
+		<>
-			ref={rCanvas}
+			<div
-			draggable={false}
+				ref={rCanvas}
-			data-iseditinganything={isEditingAnything}
+				draggable={false}
-			data-isselectinganything={isSelectingAnything}
+				data-iseditinganything={isEditingAnything}
-			className={classNames('tl-canvas', className)}
+				data-isselectinganything={isSelectingAnything}
-			data-testid="canvas"
+				className={classNames('tl-canvas', className)}
-			{...events}
+				data-testid="canvas"
-		>
+				{...events}
-			<svg className="tl-svg-context">
+			>
-				<defs>
+				<svg className="tl-svg-context">
-					{shapeSvgDefs}
+					<defs>
-					<CursorDef />
+						{shapeSvgDefs}
-					<CollaboratorHintDef />
+						<CursorDef />
-					{SvgDefs && <SvgDefs />}
+						<CollaboratorHintDef />
-				</defs>
+						{SvgDefs && <SvgDefs />}
-			</svg>
+					</defs>
-			{Background && (
+				</svg>
-				<div className="tl-background__wrapper">
+				{Background && (
-					<Background />
+					<div className="tl-background__wrapper">
+						<Background />
+					</div>
+				)}
+				<GridWrapper />
+				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+					<OnTheCanvasWrapper />
+					<SelectionBackgroundWrapper />
+					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 				</div>
-			)}
+				<div className="tl-overlays">
-			<GridWrapper />
+					<div ref={rHtmlLayer2} className="tl-html-layer">
-			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+						{debugGeometry ? <GeometryDebuggingView /> : null}
-				<OnTheCanvasWrapper />
+						<HandlesWrapper />
-				<SelectionBackgroundWrapper />
+						<BrushWrapper />
-				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
+						<ScribbleWrapper />
-			</div>
+						<ZoomBrushWrapper />
-			<div className="tl-overlays">
+						<ShapeIndicators />
-				<div ref={rHtmlLayer2} className="tl-html-layer">
+						<HintedShapeIndicator />
-					{debugGeometry ? <GeometryDebuggingView /> : null}
+						<SnapIndicatorWrapper />
-					<HandlesWrapper />
+						<SelectionForegroundWrapper />
-					<BrushWrapper />
+						<LiveCollaborators />
-					<ScribbleWrapper />
+					</div>
-					<ZoomBrushWrapper />
-					<ShapeIndicators />
-					<HintedShapeIndicator />
-					<SnapIndicatorWrapper />
-					<SelectionForegroundWrapper />
-					<LiveCollaborators />
 				</div>
+				<MovingCameraHitTestBlocker />
 			</div>
-			<MovingCameraHitTestBlocker />
+			<InFrontOfTheCanvasWrapper />
-		</div>
+		</>
 	)
 }
 
+function InFrontOfTheCanvasWrapper() {
+	const { InFrontOfTheCanvas } = useEditorComponents()
+	if (!InFrontOfTheCanvas) return null
+	return <InFrontOfTheCanvas />
+}
+
 function GridWrapper() {
 	const editor = useEditor()
 	const gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -1,4 +1,4 @@
-import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'
+import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
@@ -87,21 +87,10 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 		<>
 			{children}
 			{hideUi ? null : <TldrawUiContent {...rest} />}
-			<InFrontOfTheCanvasWrapper />
 		</>
 	)
 })
 
-function InFrontOfTheCanvasWrapper() {
-	const { InFrontOfTheCanvas } = useEditorComponents()
-	if (!InFrontOfTheCanvas) return null
-	return (
-		<div className="tl-front">
-			<InFrontOfTheCanvas />
-		</div>
-	)
-}
-
 const TldrawUiContent = React.memo(function TldrawUI() {
 	const editor = useEditor()
 	const msg = useTranslation()