Provide more documentation about DocumentRenderer

[airtonix]

DocumentRenderer outlined https://docsmill.dev/npm/@keystatic/[email protected]#/renderer.DocumentRendererProps shows that there are three props:

• document an array of Element
• renderers.inline inline
• renderers.block block
  };
• componentBlocks ComponentBlocks (since this isn't linked, i imagine it's this https://docsmill.dev/npm/@keystatic/[email protected]#/.ComponentBlock ?)

document i know, but what are these extra props for, how i can use them, are there any existing examples?

fyi, this docmill site regularly crashes firefox on linux saying something on the page is taking too long.

[simonswiss]

Hey!

Reluctant to write documentation about the DocumentRender right now as there is a new, more capable editor coming to Keystatic, alongside new Markdoc and MDX fields (currently experimental).

Those will not use the DocumentRenderer, but rather use default Markdoc and MDX rendering tools, respectively.

The current document field will always exist, and therefore documentation is needed — but we don't necessarily want to encourage folks to learn that API right now.

renderers.inline

This is to override the output of each inline default HTML tag, such as span, code, a etc. For each element, you can configure the markup output to what you need.

renderers.block

This is the same but for block-level HTML elements like p, li etc.

componentBlocks

This is for custom component you create in your document field's componentBlocks in the config file.

You can provide a custom component/markup for each of those blocks, which will be rendered whenever that componentBlock is used.

Hope it helps!

[digitalfreelanceruk]

Hey, could someone give me an example of how I'd use DocumentRender please? I think it's what I'm looking for (regardless of what's coming soon). I want to be able to add tailwind classes to elements like <p> and <em> etc within the document field.
Thanks!