@contember/react-richtext-renderer 1.3.0-alpha.10

package/src/internal/components/RenderElementFallback.tsx

@@ -0,0 +1,153 @@
+import { createElement, ReactElement } from 'react'
+import type { BuiltinElements, RichTextReferenceElement, RichTextTableRowElement } from '../../types/builtin/BuiltinElements'
+import { renderChildren } from '../renderChildren'
+import { useReferenceMetadata } from '../useReferenceMetadata'
+import type { RichTextElement } from '../../types/structure/RichTextElement'
+import type { RichTextLeaf } from '../../types/structure/RichTextLeaf'
+import { RichTextRendererError } from '../../RichTextRendererError'
+import { RichTextBlock } from '../../types/RichTextBlock'
+import { RichTextRenderingOptions } from '../../types/RichTextRenderingOptions'
+
+export interface RenderElementFallbackProps<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> {
+	element: BuiltinElements<CustomElements, CustomLeaves>
+	children: ReactElement
+	options: RichTextRenderingOptions<CustomElements, CustomLeaves>
+	block: RichTextBlock<CustomElements, CustomLeaves>
+}
+
+const getElementDataAttributes = <
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+>(
+	element: RichTextElement<CustomElements, CustomLeaves>,
+	attributeNamePrefix: string = 'contember-',
+): {
+	[dataAttribute: string]: string | number | boolean
+} => {
+	const { children, referenceId, ...extendedSpecifics } = element
+
+	return Object.fromEntries(
+		Object.entries(extendedSpecifics)
+			.filter(([, value]) => {
+				const t = typeof value
+				return t === 'string' || t === 'number' || t === 'boolean'
+			})
+			.map(([attribute, value]) => [`data-${attributeNamePrefix}${attribute.toLowerCase()}`, value]),
+	)
+}
+
+export function RenderElementFallback<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+>({ element, children, options, block }: RenderElementFallbackProps<CustomElements, CustomLeaves>) {
+	const attributes = getElementDataAttributes(element, options.attributeNamePrefix)
+
+	switch (element.type) {
+		case 'anchor':
+			return (
+				<a {...attributes} href={element.href}>
+					{children}
+				</a>
+			)
+		case 'heading':
+			return createElement(`h${element.level}`, attributes, children) // TODO numbered
+		case 'horizontalRule':
+			return <hr {...attributes} />
+		case 'listItem':
+			return <li {...attributes}>{children}</li>
+		case 'orderedList':
+			return <ol {...attributes}>{children}</ol>
+		case 'paragraph':
+			return <p {...attributes}>{children}</p>
+		case 'reference': {
+			return <ReferenceElementFallback element={element} children={children} options={options} block={block} />
+		}
+		case 'scrollTarget':
+			return (
+				<span {...attributes} id={element.identifier}>
+					{children}
+				</span>
+			)
+		case 'table': {
+			const firstRow = element.children[0] as RichTextTableRowElement<CustomElements, CustomLeaves> | undefined
+			if (!firstRow || firstRow.headerScope !== 'table') {
+				return (
+					<table {...attributes}>
+						<tbody>{children}</tbody>
+					</table>
+				)
+			}
+			return (
+				<table {...attributes}>
+					<thead>{renderChildren<CustomElements, CustomLeaves>([firstRow], options, block)}</thead>
+					<tbody>{renderChildren<CustomElements, CustomLeaves>(element.children.slice(1) as any, options, block)}</tbody>
+				</table>
+			)
+		}
+		case 'tableRow':
+			return <tr {...attributes}>{children}</tr>
+		case 'tableCell': {
+			if (element.headerScope) {
+				return (
+					<th {...attributes} scope={element.headerScope}>
+						{children}
+					</th>
+				)
+			}
+			return <td {...attributes}>{children}</td>
+		}
+		case 'unorderedList':
+			return <ul {...attributes}>{children}</ul>
+		default: {
+			if (import.meta.env.DEV) {
+				throw new RichTextRendererError(
+					`RichTextRenderer: unknown element of type '${(element as { type: string }).type}'.`,
+				)
+			} else {
+				return children // At least render the text contents
+			}
+		}
+	}
+}
+
+type ReferenceElementFallbackProps<CustomElements extends RichTextElement = never, CustomLeaves extends RichTextLeaf = RichTextLeaf> = {
+	element: RichTextReferenceElement<CustomElements, CustomLeaves>;
+	children: ReactElement
+	options: RichTextRenderingOptions<CustomElements, CustomLeaves>
+	block: RichTextBlock<CustomElements, CustomLeaves>
+}
+
+function ReferenceElementFallback<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+>({ element, children, options, block }: ReferenceElementFallbackProps<CustomElements, CustomLeaves>) {
+	const elementMetadata = useReferenceMetadata<CustomElements, CustomLeaves>(element, options, block, true)
+
+	if (
+		elementMetadata.referenceRenderer === undefined ||
+		elementMetadata.referenceType === undefined ||
+		elementMetadata.reference === undefined
+	) {
+		return children // At least render the text contents
+	}
+
+	let Renderer = elementMetadata.referenceRenderer
+	return (
+		<>
+			<Renderer
+				referenceType={elementMetadata.referenceType}
+				referenceRenderer={elementMetadata.referenceRenderer}
+				reference={elementMetadata.reference}
+				formatVersion={block.content.formatVersion}
+				block={block}
+				options={options}
+				element={element}
+			>
+				{children}
+			</Renderer>
+		</>
+	)
+}

package/src/internal/components/RenderLeafFallback.tsx

@@ -0,0 +1,43 @@
+import { Fragment, ReactNode } from 'react'
+import type { BuiltinLeaves } from '../../types/builtin/BuiltinLeaves'
+
+export interface RenderLeafFallbackProps {
+	leaf: BuiltinLeaves
+}
+
+function jsxN2br(text: string): ReactNode {
+	const lines = text.split('\n')
+	if (lines.length <= 1) {
+		return text
+	}
+	return lines.map((line, i) => (
+		<Fragment key={i}>
+			{!!i && <br />}
+			{line}
+		</Fragment>
+	))
+}
+
+export function RenderLeafFallback({ leaf }: RenderLeafFallbackProps) {
+	let element = jsxN2br(leaf.text)
+
+	if ('isCode' in leaf && leaf.isCode === true) {
+		element = <code>{element}</code>
+	}
+	if ('isStruckThrough' in leaf && leaf.isStruckThrough === true) {
+		element = <s>{element}</s>
+	}
+	if ('isHighlighted' in leaf && leaf.isHighlighted === true) {
+		element = <em>{element}</em>
+	}
+	if ('isUnderlined' in leaf && leaf.isUnderlined === true) {
+		element = <u>{element}</u>
+	}
+	if ('isItalic' in leaf && leaf.isItalic === true) {
+		element = <i>{element}</i>
+	}
+	if ('isBold' in leaf && leaf.isBold === true) {
+		element = <b>{element}</b>
+	}
+	return <>{element}</>
+}

package/src/internal/defaultDeserialize.ts

@@ -0,0 +1,19 @@
+import type { RichTextElement } from '../types/structure/RichTextElement'
+import type { RichTextLeaf } from '../types/structure/RichTextLeaf'
+import type { RootEditorNode } from '../types/structure/RootEditorNode'
+
+export const defaultDeserialize = <
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+>(
+	source: string,
+): RootEditorNode<CustomElements, CustomLeaves> => {
+	try {
+		return JSON.parse(source)
+	} catch (e) {
+		return {
+			formatVersion: 0,
+			children: [],
+		}
+	}
+}

package/src/internal/renderChildren.tsx

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react'
+import { ElementRenderer } from './components/ElementRenderer'
+import { LeafRenderer } from './components/LeafRenderer'
+import type { RichTextElement } from '../types/structure/RichTextElement'
+import type { RichTextLeaf } from '../types/structure/RichTextLeaf'
+import { RichTextRenderingOptions } from '../types/RichTextRenderingOptions'
+import { RichTextBlock } from '../types/RichTextBlock'
+import { RichTextChild } from '../types/structure/RichTextChild'
+
+export const renderChildren = <
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+>(
+	children:
+		| RichTextChild<CustomElements, CustomLeaves>
+		| readonly RichTextChild<CustomElements, CustomLeaves>[],
+	options: RichTextRenderingOptions<CustomElements, CustomLeaves>,
+	block: RichTextBlock<CustomElements, CustomLeaves>,
+): ReactElement => {
+	return (
+		<>
+			{(Array.isArray(children) ? children : [children]).map((child, i) => {
+				if ('text' in child) {
+					return <LeafRenderer<CustomElements, CustomLeaves> key={i} leaf={child} options={options} block={block} />
+				}
+				if ('children' in child) {
+					return (
+						<ElementRenderer<CustomElements, CustomLeaves> key={i} element={child} options={options} block={block}>
+							{renderChildren<CustomElements, CustomLeaves>(child.children as typeof children, options, block)}
+						</ElementRenderer>
+					)
+				}
+				return null // Throw?
+			})}
+		</>
+	)
+}

package/src/internal/useReferenceMetadata.ts

@@ -0,0 +1,62 @@
+import type { BuiltinElements } from '../types/builtin/BuiltinElements'
+import type { RichTextElement } from '../types/structure/RichTextElement'
+import type { RichTextReferenceMetadata } from '../types/RichTextReferenceMetadata'
+import { RichTextReferenceEmptyMetadata } from '../types/RichTextReferenceMetadata'
+import type { RichTextLeaf } from '../types/structure/RichTextLeaf'
+import type { RichTextReference } from '../types/RichTextReference'
+import { RichTextRendererError } from '../RichTextRendererError'
+import { RichTextBlock } from '../types/RichTextBlock'
+import { RichTextRenderingOptions } from '../types/RichTextRenderingOptions'
+import { useMemo } from 'react'
+
+const emptyReference: RichTextReferenceEmptyMetadata = {
+	reference: undefined,
+	referenceType: undefined,
+	referenceRenderer: undefined,
+}
+export const useReferenceMetadata = <
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+>(
+	element: CustomElements | BuiltinElements<CustomElements, CustomLeaves>,
+	options: RichTextRenderingOptions<CustomElements, CustomLeaves, Reference>,
+	block: RichTextBlock<CustomElements, CustomLeaves>,
+	expectReference: boolean = false,
+): RichTextReferenceMetadata<CustomElements, CustomLeaves, Reference> => {
+	const undefinedReferenceHandler = options.undefinedReferenceHandler
+	const referenceRenderers = options.referenceRenderers
+
+	return useMemo(() => {
+		const id = element['referenceId']
+
+		if (typeof id !== 'string') {
+			if (import.meta.env.DEV && expectReference) {
+				throw new RichTextRendererError(
+					`RichTextRenderer: Expected element to have a referenceId.`,
+				)
+			}
+			return emptyReference
+		}
+
+		const reference: Reference | undefined = block.references?.[id] as Reference | undefined
+
+		if (reference === undefined) {
+			if (undefinedReferenceHandler) {
+				return undefinedReferenceHandler(id) ?? emptyReference
+			} else {
+				throw new RichTextRendererError(
+					`RichTextRenderer: Cannot find reference id '${id}'`,
+				)
+			}
+		}
+
+		const referenceRenderer = referenceRenderers?.[reference.type]
+
+		return {
+			reference,
+			referenceType: reference.type,
+			referenceRenderer,
+		}
+	}, [block.references, element, expectReference, referenceRenderers, undefinedReferenceHandler])
+}

package/src/tsconfig.json

@@ -0,0 +1,6 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"outDir": "../dist/types"
+	}
+}

package/src/types/RenderChildren.ts

@@ -0,0 +1,16 @@
+import { RichTextChild, RichTextElement, RichTextLeaf } from './structure'
+import { RichTextRenderingOptions } from './RichTextRenderingOptions'
+import { ReactElement } from 'react'
+
+export type RenderChildren<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> = (
+	children:
+		| RichTextChild<CustomElements, CustomLeaves>
+		| readonly RichTextChild<CustomElements, CustomLeaves>[],
+	/**
+	 * @deprecated No need to pass this anymore.
+	 */
+	options?: RichTextRenderingOptions<CustomElements, CustomLeaves>,
+) => ReactElement

package/src/types/RichTextBlock.ts

@@ -0,0 +1,11 @@
+import type { RichTextElement, RichTextLeaf, RootEditorNode } from './structure'
+import type { RichTextReference } from './RichTextReference'
+
+export interface RichTextBlock<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> {
+	content: RootEditorNode<CustomElements, CustomLeaves>
+	references: Record<string, RichTextReference> | undefined
+	id: string | undefined
+}

package/src/types/RichTextBlockSource.ts

@@ -0,0 +1,10 @@
+import { RichTextElement, RichTextLeaf, RootEditorNode } from './structure'
+
+export type RichTextBlockSource<CustomElements extends RichTextElement = never, CustomLeaves extends RichTextLeaf = RichTextLeaf> = {
+	blocks: readonly Readonly<Record<string, unknown>>[]
+	sourceField?: string
+	referencesField?: string
+	referenceDiscriminationField?: string
+
+	deserialize?: (source: string) => RootEditorNode<CustomElements, CustomLeaves>
+}

package/src/types/RichTextFieldSource.ts

@@ -0,0 +1,6 @@
+import { RichTextElement, RichTextLeaf, RootEditorNode } from './structure'
+
+export interface RichTextFieldSource<CustomElements extends RichTextElement, CustomLeaves extends RichTextLeaf> {
+	source: RootEditorNode<CustomElements, CustomLeaves> | string | null
+	deserialize?: (source: string) => RootEditorNode<CustomElements, CustomLeaves>
+}

package/src/types/RichTextReference.ts

@@ -0,0 +1,6 @@
+export type RichTextReference =
+	& {
+		id: string
+		type: string
+	}
+	& Record<string, unknown>

package/src/types/RichTextReferenceMetadata.ts

@@ -0,0 +1,27 @@
+import type { RichTextElement, RichTextLeaf } from './structure'
+import type { RichTextReference } from './RichTextReference'
+import { ReferenceRenderer } from './custom'
+
+export type RichTextReferenceMetadata<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+> =
+	| RichTextReferenceFilledMetadata<CustomElements, CustomLeaves, Reference>
+	| RichTextReferenceEmptyMetadata
+
+export interface RichTextReferenceFilledMetadata<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+> {
+	reference: Reference
+	referenceType: string
+	referenceRenderer?: ReferenceRenderer<Reference, CustomElements, CustomLeaves>
+}
+
+export interface RichTextReferenceEmptyMetadata {
+	reference: undefined
+	referenceType: undefined
+	referenceRenderer: undefined
+}

package/src/types/RichTextRenderingOptions.ts

@@ -0,0 +1,23 @@
+import { RichTextElement, RichTextLeaf } from './structure'
+import { ReferenceRendererMap, RenderBlock, RenderElement, RenderLeaf } from './custom'
+import { RichTextReference } from './RichTextReference'
+import { RichTextReferenceMetadata } from './RichTextReferenceMetadata'
+
+export type UndefinedReferenceHandler<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference
+> = (referenceId: string) => void | RichTextReferenceMetadata<CustomElements, CustomLeaves, Reference>
+
+export type RichTextRenderingOptions<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+> = {
+	renderElement?: RenderElement<CustomElements, CustomLeaves>
+	renderLeaf?: RenderLeaf<CustomLeaves>
+	renderBlock?: RenderBlock
+	referenceRenderers?: ReferenceRendererMap<any, CustomElements, CustomLeaves>
+	undefinedReferenceHandler?: UndefinedReferenceHandler<CustomElements, CustomLeaves, Reference>
+	attributeNamePrefix?: string
+}

package/src/types/builtin/BuiltinElements.ts

@@ -0,0 +1,111 @@
+import type { RichTextElement, RichTextLeaf } from '../structure'
+
+export type BuiltinElements<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> =
+	| RichTextAnchorElement<CustomElements, CustomLeaves>
+	| RichTextHeadingElement<CustomElements, CustomLeaves>
+	| RichTextHorizontalRuleElement<CustomElements, CustomLeaves>
+	| RichTextListItemElement<CustomElements, CustomLeaves>
+	| RichTextOrderedListElement<CustomElements, CustomLeaves>
+	| RichTextParagraphElement<CustomElements, CustomLeaves>
+	| RichTextReferenceElement<CustomElements, CustomLeaves>
+	| RichTextScrollTargetElement<CustomElements, CustomLeaves>
+	| RichTextTableCellElement<CustomElements, CustomLeaves>
+	| RichTextTableElement<CustomElements, CustomLeaves>
+	| RichTextTableRowElement<CustomElements, CustomLeaves>
+	| RichTextUnorderedListElement<CustomElements, CustomLeaves>
+
+export interface RichTextAnchorElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'anchor'
+	href: string
+}
+
+export interface RichTextHeadingElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'heading'
+	level: 1 | 2 | 3 | 4 | 5 | 6
+	isNumbered?: boolean
+}
+
+export interface RichTextOrderedListElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'orderedList'
+}
+
+export interface RichTextUnorderedListElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'unorderedList'
+}
+
+export interface RichTextListItemElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'listItem'
+}
+
+export interface RichTextHorizontalRuleElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'horizontalRule'
+}
+
+export interface RichTextParagraphElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'paragraph'
+	isNumbered?: boolean
+}
+
+export interface RichTextReferenceElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'reference'
+	referenceId: string
+}
+
+export interface RichTextScrollTargetElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'scrollTarget'
+	identifier: string
+}
+
+export interface RichTextTableElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'table'
+}
+
+export interface RichTextTableCellElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'tableCell'
+	headerScope?: 'row'
+	justify?: 'start' | 'center' | 'end'
+}
+
+export interface RichTextTableRowElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'tableRow'
+	headerScope?: 'table'
+}

package/src/types/builtin/BuiltinLeaves.ts

@@ -0,0 +1,33 @@
+import type { RichTextLeaf } from '../structure'
+
+export type BuiltinLeaves =
+	& RichTextBoldLeaf
+	& RichTextCodeLeaf
+	& RichTextHighlightLeaf
+	& RichTextItalicLeaf
+	& RichTextStrikeThroughLeaf
+	& RichTextUnderlineLeaf
+
+export interface RichTextBoldLeaf extends RichTextLeaf {
+	isBold?: boolean
+}
+
+export interface RichTextCodeLeaf extends RichTextLeaf {
+	isCode?: boolean
+}
+
+export interface RichTextHighlightLeaf extends RichTextLeaf {
+	isHighlighted?: boolean
+}
+
+export interface RichTextItalicLeaf extends RichTextLeaf {
+	isItalic?: boolean
+}
+
+export interface RichTextStrikeThroughLeaf extends RichTextLeaf {
+	isStruckThrough?: boolean
+}
+
+export interface RichTextUnderlineLeaf extends RichTextLeaf {
+	isUnderlined?: boolean
+}

package/src/types/builtin/index.ts

@@ -0,0 +1,2 @@
+export * from './BuiltinLeaves'
+export * from './BuiltinElements'

package/src/types/custom/ReferenceRenderer.ts

@@ -0,0 +1,33 @@
+import type { ComponentType, ReactElement } from 'react'
+import type { BuiltinElements } from '../builtin'
+import type { RichTextElement, RichTextLeaf } from '../structure'
+import { RichTextReferenceFilledMetadata } from '../RichTextReferenceMetadata'
+import type { RichTextReference } from '../RichTextReference'
+import { RichTextBlock } from '../RichTextBlock'
+import { RichTextRenderingOptions } from '../RichTextRenderingOptions'
+
+export type ReferenceRendererProps<
+	Reference extends RichTextReference = RichTextReference,
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> =
+	& {
+		element: CustomElements | BuiltinElements<CustomElements, CustomLeaves>
+		children: ReactElement
+		formatVersion: number
+		block: RichTextBlock<CustomElements, CustomLeaves>
+		options: RichTextRenderingOptions<CustomElements, CustomLeaves>
+	}
+	& RichTextReferenceFilledMetadata<CustomElements, CustomLeaves, Reference>
+
+export type ReferenceRenderer<
+	Reference extends RichTextReference = RichTextReference,
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> = ComponentType<ReferenceRendererProps<Reference, CustomElements, CustomLeaves>>
+
+export type ReferenceRendererMap<
+	Reference extends RichTextReference = RichTextReference,
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+> = Record<string, ReferenceRenderer<Reference, CustomElements, CustomLeaves>>

package/src/types/custom/RenderBlock.ts

@@ -0,0 +1,8 @@
+import { ComponentType, ReactNode } from 'react'
+
+export type RenderBlockProps = {
+	block: unknown,
+	children?: ReactNode
+}
+
+export type RenderBlock = ComponentType<RenderBlockProps>

package/src/types/custom/RenderElement.ts

@@ -0,0 +1,37 @@
+import { RichTextElement } from '../structure/RichTextElement'
+import { RichTextLeaf } from '../structure/RichTextLeaf'
+import { RichTextReference } from '../RichTextReference'
+import { BuiltinElements } from '../builtin/BuiltinElements'
+import { ComponentType, ReactElement } from 'react'
+import { RichTextReferenceMetadata } from '../RichTextReferenceMetadata'
+import { RichTextRenderingOptions } from '../RichTextRenderingOptions'
+import { RichTextBlock } from '../RichTextBlock'
+import { RenderChildren } from '../RenderChildren'
+
+export type RenderElementProps<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+> =
+	& {
+		formatVersion: number
+		block: RichTextBlock<CustomElements, CustomLeaves>
+		element: CustomElements | BuiltinElements<CustomElements, CustomLeaves>
+		children: ReactElement
+		options: RichTextRenderingOptions<CustomElements, CustomLeaves>
+		fallback: ReactElement
+
+		renderChildren: RenderChildren<CustomElements, CustomLeaves>,
+
+		/**
+		 * @deprecated To access the rendering options, use options. No need to pass it to renderChildren function.
+		 */
+		renderChildrenOptions: RichTextRenderingOptions<CustomElements, CustomLeaves>
+	}
+	& RichTextReferenceMetadata<CustomElements, CustomLeaves, Reference>
+
+export type RenderElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = RichTextLeaf,
+	Reference extends RichTextReference = RichTextReference,
+> = ComponentType<RenderElementProps<CustomElements, CustomLeaves, Reference>>