Consolidate Keystatic renderers into a single registry factory

apps/web/src/lib/keystatic/document-renderer.tsx

@@ -2,13 +2,19 @@ import {
 	type DocumentRendererProps,
 	DocumentRenderer as KeystaticDocumentRenderer,
 } from '@keystatic/core/renderer';
-import { highlighter } from '../highlighter';
-import { componentBlockRenderers, getDocumentRenderers } from './renderers';
+import type { Highlighter } from 'shiki';
 
-export function DocumentRenderer(props: DocumentRendererProps) {
+import { highlighter as defaultHighlighter } from '../highlighter';
+import { createKeystaticRenderers } from './renderers';
+
+export function DocumentRenderer({
+	highlighter = defaultHighlighter,
+	...props
+}: DocumentRendererProps & { highlighter?: Highlighter }) {
+	const registry = createKeystaticRenderers(highlighter);
 	const {
-		componentBlocks = componentBlockRenderers,
-		renderers = getDocumentRenderers(highlighter),
+		componentBlocks = registry.componentBlocks,
+		renderers = registry.renderers,
 		...consumerProps
 	} = props;
 

apps/web/src/lib/keystatic/renderers/index.tsx

@@ -10,38 +10,37 @@ import { InlineCode } from './inline-code';
 import { Link } from './link';
 
 /**
- * Returns Keystatic document renderers for Code, Headings etc.
+ * Single registry for all Keystatic renderers. Returns both the
+ * component-block renderers and the document block/inline renderers, with the
+ * Shiki highlighter injected as a dependency.
  */
-export function getDocumentRenderers(
-	highlighter: Highlighter,
-): DocumentRendererProps['renderers'] {
+export function createKeystaticRenderers(highlighter: Highlighter): {
+	componentBlocks: InferRenderersForComponentBlocks<typeof componentBlocks>;
+	renderers: DocumentRendererProps['renderers'];
+} {
 	return {
-		block: {
-			code(props) {
-				return <Code {...props} highlighter={highlighter} />;
-			},
-			heading(props) {
-				return <Heading {...props} />;
+		componentBlocks: {
+			cloudImage(props) {
+				return <CloudImage {...props} />;
 			},
 		},
-		inline: {
-			code(props) {
-				return <InlineCode {...props} />;
+		renderers: {
+			block: {
+				code(props) {
+					return <Code {...props} highlighter={highlighter} />;
+				},
+				heading(props) {
+					return <Heading {...props} />;
+				},
 			},
-			link(props) {
-				return <Link {...props} />;
+			inline: {
+				code(props) {
+					return <InlineCode {...props} />;
+				},
+				link(props) {
+					return <Link {...props} />;
+				},
 			},
 		},
 	};
 }
-
-/**
- * Returns renderers for Keystatic component blocks.
- */
-export const componentBlockRenderers: InferRenderersForComponentBlocks<
-	typeof componentBlocks
-> = {
-	cloudImage(props) {
-		return <CloudImage {...props} />;
-	},
-};