diff --git a/.changeset/purple-rules-film.md b/.changeset/purple-rules-film.md new file mode 100644 index 00000000000..02e2e303fd8 --- /dev/null +++ b/.changeset/purple-rules-film.md @@ -0,0 +1,5 @@ +--- +'@keystone-next/document-renderer': patch +--- + +Fixed renderer prop to allow providing some of the renderers and exported `DocumentRendererProps` and `defaultRenderers` diff --git a/packages-next/document-renderer/src/index.tsx b/packages-next/document-renderer/src/index.tsx index ddc0c39da07..afe0e655a2d 100644 --- a/packages-next/document-renderer/src/index.tsx +++ b/packages-next/document-renderer/src/index.tsx @@ -51,7 +51,7 @@ interface Renderers { }; } -const defaultRenderers: Renderers = { +export const defaultRenderers: Renderers = { inline: { bold: 'strong', code: 'code', @@ -221,16 +221,21 @@ function createComponentBlockProps(node: Element, children: ReactElement[]) { return formProps; } -type Props = { +export type DocumentRendererProps< + ComponentBlocks extends Record> = Record> +> = { document: Element[]; - renderers?: Partial; + renderers?: { inline?: Partial; block?: Partial }; componentBlocks?: ComponentBlocks; }; export function DocumentRenderer>>( - props: Props + props: DocumentRendererProps ) { - const renderers = { ...defaultRenderers, ...props.renderers }; + const renderers = { + inline: { ...props.renderers?.inline, ...defaultRenderers.inline }, + block: { ...props.renderers?.block, ...defaultRenderers.block }, + }; const componentBlocks = props.componentBlocks || {}; return (