Export renderer

Author: kaznaan

packages/editor/api-report.api.md

@@ -21,6 +21,7 @@ import { HistoryEntry } from '@tldraw/store';
 import { IndexKey } from '@tldraw/utils';
 import { JsonObject } from '@tldraw/utils';
 import { JSX } from 'react/jsx-runtime';
+import { JSXElementConstructor } from 'react';
 import { LegacyMigrations } from '@tldraw/store';
 import { MigrationSequence } from '@tldraw/store';
 import { NamedExoticComponent } from 'react';
@@ -657,6 +658,9 @@ export const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
 // @public (undocumented)
 export const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
 
+// @public (undocumented)
+export function DefaultShapeRenderer({ renderShape }: TLShapeRendererProps): ReactElement<unknown, JSXElementConstructor<any> | string>[];
+
 // @public (undocumented)
 export const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
 
@@ -3620,6 +3624,8 @@ export interface TLEditorComponents {
     // (undocumented)
     ShapeIndicators?: ComponentType | null;
     // (undocumented)
+    ShapeRenderer?: ComponentType<TLShapeRendererProps> | null;
+    // (undocumented)
     ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
     // (undocumented)
     SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
@@ -4344,6 +4350,12 @@ export interface TLShapeIndicatorsProps {
     showAll?: boolean;
 }
 
+// @public (undocumented)
+export interface TLShapeRendererProps {
+    // (undocumented)
+    renderShape(shape: TLRenderingShape): ReactElement;
+}
+
 // @public
 export interface TLShapeUtilCanBeLaidOutOpts {
     shapes?: TLShape[];

packages/editor/src/index.ts

@@ -17,7 +17,9 @@ export { DefaultBackground } from './lib/components/default-components/DefaultBa
 export { DefaultBrush, type TLBrushProps } from './lib/components/default-components/DefaultBrush'
 export {
 	DefaultCanvas,
+	DefaultShapeRenderer,
 	type TLCanvasComponentProps,
+	type TLShapeRendererProps,
 } from './lib/components/default-components/DefaultCanvas'
 export {
 	DefaultCollaboratorHint,

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

@@ -3,7 +3,8 @@ import { useQuickReactor, useValue } from '@tldraw/state-react'
 import { TLHandle, TLShapeId } from '@tldraw/tlschema'
 import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
-import { Fragment, JSX, useEffect, useRef, useState } from 'react'
+import { Fragment, JSX, ReactElement, useEffect, useRef, useState } from 'react'
+import type { TLRenderingShape } from '../../editor/Editor'
 import { tlenv } from '../../globals/environment'
 import { useCanvasEvents } from '../../hooks/useCanvasEvents'
 import { useCoarsePointer } from '../../hooks/useCoarsePointer'
@@ -450,21 +451,30 @@ function CullingController() {
 }
 
 function ShapesToDisplay() {
-	const editor = useEditor()
-
-	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
+	const { ShapeRenderer } = useEditorComponents()
+	const Renderer = ShapeRenderer ?? DefaultShapeRenderer
 
 	return (
 		<ShapeCullingProvider>
-			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} />
-			))}
+			<Renderer renderShape={(shape) => <Shape key={shape.id + '_shape'} {...shape} />} />
 			<CullingController />
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</ShapeCullingProvider>
 	)
 }
 
+/** @public */
+export interface TLShapeRendererProps {
+	renderShape(shape: TLRenderingShape): ReactElement
+}
+
+/** @public @react */
+export function DefaultShapeRenderer({ renderShape }: TLShapeRendererProps) {
+	const editor = useEditor()
+	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
+	return renderingShapes.map((shape) => renderShape(shape))
+}
+
 function HintedShapeIndicator() {
 	const editor = useEditor()
 	const { ShapeIndicator } = useEditorComponents()

packages/editor/src/lib/hooks/useEditorComponents.tsx

@@ -3,7 +3,9 @@ import { DefaultBackground } from '../components/default-components/DefaultBackg
 import { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'
 import {
 	DefaultCanvas,
+	DefaultShapeRenderer,
 	TLCanvasComponentProps,
+	TLShapeRendererProps,
 } from '../components/default-components/DefaultCanvas'
 import {
 	DefaultCollaboratorHint,
@@ -72,6 +74,7 @@ export interface TLEditorComponents {
 	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
 	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
 	ShapeIndicators?: ComponentType | null
+	ShapeRenderer?: ComponentType<TLShapeRendererProps> | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
 	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
 	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
@@ -119,6 +122,7 @@ export function EditorComponentsProvider({
 			SelectionForeground: DefaultSelectionForeground,
 			ShapeIndicator: DefaultShapeIndicator,
 			ShapeIndicators: DefaultShapeIndicators,
+			ShapeRenderer: DefaultShapeRenderer,
 			ShapeWrapper: DefaultShapeWrapper,
 			SnapIndicator: DefaultSnapIndicator,
 			Spinner: DefaultSpinner,