import type { Element } from 'html-react-parser'; import React, { ReactElement, ReactNode } from 'react'; import type { IWhiteList } from 'xss'; import { HeadlessConfig } from '../../types'; import { IBlockAttributes } from '../blocks/types'; import { IDataWPBlock, ParsedBlock } from '../../dom/parseBlockAttributes'; export type BlockContext = { settings?: HeadlessConfig; [key: string]: unknown; }; /** * The interface any children of {@link BlocksRenderer} must implement. */ export interface BlockProps { /** * A test function receives a domNode and returns a boolean value indicating * whether that domNode should be replaced with the React component */ test?: (domNode: Element, site?: HeadlessConfig) => boolean; /** * An optional exclude function that also receives a domNode and is executed against every child * of the node being replaced with a react component. * * This is useful to selectively disregard certain children of a node when replacing with a react component. */ exclude?: (childNode: Element, site?: HeadlessConfig) => boolean; /** * The tag name of the domNode that should be replaced with the react component * * If a test function is not supplied, then passing tagName is mandatory */ tagName?: string; /** * The class name of the domNode that should be replaced with the react component * * If tagName is specified, then classList is mandatory */ classList?: string[] | string; /** * The actual domNode that was replaced with the react component */ domNode?: Element; /** * The block's attribute */ block?: ParsedBlock; /** * The children of the domNode that was replaced with the react component * * Note: the children of the domNode are recursively parsed. */ children?: ReactNode; /** * The style tag of the domNode as an object. */ style?: Record; /** * An optional context that is passed to all children components */ blockContext?: Context; } export type BlockFC = React.FC & { test?: BlockProps['test']; }; /** * The common interface for a block transform component */ export interface IBlock extends Omit { domNode?: Element; className?: string; component: (props: T) => ReactElement | null; } /** * The type definition for the {@link BlocksRenderer} component. */ export interface BlockRendererProps { /** * The HTML string to be parsed. * * ```jsx * , * ``` */ html: string; /** * The allow list for the parser, must extend the core allowed list * * ```jsx * , * ``` */ ksesAllowList?: IWhiteList; /** * A custom implementation of the sanitize function. * * If none is provided it's going to default to {@link wpKsesPost} */ sanitizeFn?: (html: string, ksesAllowList?: IWhiteList) => string; /** * The children components that must implements {@link BlockProps}. Failing to implement {@link BlockProps} * will issue a warning at runtime. * * Passing children are not mandatory, if you do not pass them `BlocksRenderer` will simply sanitize the html markup. */ children?: ReactNode; /** * The headless config */ settings?: HeadlessConfig; /** * Whether to forward the block attributes to the children components. */ forwardBlockAttributes?: boolean; /** * An optional context that is passed to all children components */ blockContext?: Record; /** * The block styles to be applied to the blocks. */ blockStyles?: string; } interface BaseBlockRendererProps extends BlockRendererProps { settings?: HeadlessConfig; } export declare function BaseBlocksRenderer({ html, ksesAllowList, sanitizeFn, children, settings, forwardBlockAttributes, blockContext, blockStyles, }: BaseBlockRendererProps): import("react/jsx-runtime").JSX.Element; export {};