import { ReactNode, CSSProperties, ComponentType } from 'react'; import { b as TNode, a as BlockDescriptor } from '../../ast-types-U4BC1m-E.cjs'; import { B as BaseRenderer } from '../../base-renderer-D31pNh76.cjs'; /** * Props passed to custom block components provided via the `components` map. * * Custom components receive the computed props the default element would get, * plus the raw AST `node` for advanced use cases. */ interface BlockComponentProps { /** The raw AST node being rendered. */ node: TNode; /** Pre-rendered children content. */ children?: ReactNode; /** Computed CSS class name. */ className?: string; /** Computed inline styles. */ style?: CSSProperties; /** Any additional computed props. */ [key: string]: unknown; } /** * Configuration options for the {@link ReactRenderer}. * * All options are optional and have sensible defaults that produce * output structurally equivalent to the SemanticHtmlRenderer. */ interface ReactRendererConfig { /** * CSS class prefix for generated class names. * @default 'ql' */ classPrefix?: string; /** * Target attribute for links. * @default '_blank' * Set to `''` to omit. */ linkTarget?: string; /** * Rel attribute for links. * @default undefined */ linkRel?: string; /** * Map of block types to custom React components. * * When a component override exists for a block type, the renderer * uses the custom component instead of the default HTML element. * * @example * ```tsx * const renderer = new ReactRenderer({ * components: { * paragraph: ({ children, className }) =>
{children}
, * image: ({ node }) => , * }, * }); * ``` */ components?: Record>; /** * Provide a custom HTML tag name for a given format. * Return `undefined` to use the default tag. */ customTag?: (format: string, node: TNode) => string | undefined; /** * Custom URL sanitizer. Return a sanitized URL string to allow it, * or `undefined` to suppress the link entirely. * * When set, all URLs in links and image link wrappers are passed through * this function before being rendered. This is the recommended way to * prevent `javascript:` and other dangerous URL schemes. * * @example * ```tsx * import { createUrlSanitizer } from 'quill-delta-renderer/common'; * * const renderer = new ReactRenderer({ * urlSanitizer: createUrlSanitizer(), * }); * ``` */ urlSanitizer?: (url: string) => string | undefined; } /** * React-specific collected attributes. * * Used by the inline attributor system (marks that contribute styles/classes * to the parent element) and block attribute resolvers in React renderers. * * Analogous to {@link ResolvedAttrs} in the HTML renderers, but uses * React conventions (`className`, camelCase `CSSProperties`). */ interface ReactProps { /** React inline styles (camelCase keys). */ style?: CSSProperties; /** CSS class names (space-separated string). */ className?: string; /** Arbitrary props for extensibility (`data-*`, `aria-*`, etc.). */ [key: string]: unknown; } /** * Renders an AST into React elements (no `dangerouslySetInnerHTML`). * * Produces elements structurally equivalent to the SemanticHtmlRenderer * output, using standard HTML tag names and React conventions * (`className`, camelCase styles). * * Requires `react` as a peer dependency. * * @example * ```tsx * import { ReactRenderer } from 'quill-delta-renderer/react'; * * const renderer = new ReactRenderer(); * const element = renderer.render(ast); * return
{element}
; * ``` * * @example * ```tsx * // With custom components * const renderer = new ReactRenderer({ * components: { * paragraph: ({ children }) =>
{children}
, * image: ({ node }) => , * }, * }); * ``` * * @example * ```tsx * // Extend with custom embed * const renderer = new ReactRenderer().withBlock('user_mention', (node) => { * const data = node.data as Record; * return createElement('a', { href: `#user_mention#${data.id}` }, `@${data.name}`); * }); * ``` */ declare class ReactRenderer extends BaseRenderer { constructor(config?: ReactRendererConfig); protected joinChildren(children: ReactNode[]): ReactNode; protected renderText(text: string): ReactNode; protected emptyAttrs(): ReactProps; protected mergeAttrs(target: ReactProps, source: ReactProps): ReactProps; protected hasAttrs(attrs: ReactProps): boolean; protected wrapWithAttrs(content: ReactNode, attrs: ReactProps): ReactNode; protected renderSimpleTag(tag: string, content: ReactNode, collectedAttrs?: ReactProps): ReactNode; protected renderBlockFromDescriptor(descriptor: BlockDescriptor, node: TNode, childrenOutput: ReactNode, resolvedAttrs: ReactProps): ReactNode; } export { type BlockComponentProps, type ReactProps, ReactRenderer, type ReactRendererConfig };