From e0ef968952fae0a322b118173d14563b25b0f6ff Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Mon, 15 Jun 2026 16:50:06 +1000
Subject: [PATCH] Consolidate Keystatic renderers into a single registry
 factory

Replace the separate getDocumentRenderers/componentBlockRenderers exports
with one createKeystaticRenderers(highlighter) factory, and route the
highlighter through DocumentRenderer as an injectable prop defaulting to
the singleton.
---
 .../src/lib/keystatic/document-renderer.tsx   | 16 ++++--
 .../web/src/lib/keystatic/renderers/index.tsx | 51 +++++++++----------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/lib/keystatic/document-renderer.tsx b/apps/web/src/lib/keystatic/document-renderer.tsx
index 06a46e4..bae40c3 100644
--- a/apps/web/src/lib/keystatic/document-renderer.tsx
+++ b/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;
 
diff --git a/apps/web/src/lib/keystatic/renderers/index.tsx b/apps/web/src/lib/keystatic/renderers/index.tsx
index 4b50ad0..9152303 100644
--- a/apps/web/src/lib/keystatic/renderers/index.tsx
+++ b/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} />;
-	},
-};