import React from 'react';
/**
 * Rich Text Editor component props
 * @property {RichTextEditorSize} size - The size of the editor
 * @property {RichTextEditorState} state - The state of the editor (default, disabled, invalid)
 * @property {string} label - Optional label text for the editor
 * @property {string} helperText - Optional helper text displayed below the editor
 * @property {string} value - The HTML content value
 * @property {function} onChange - Callback when content changes
 * @property {string} placeholder - Placeholder text when editor is empty
 * @property {boolean} required - Whether the editor is required
 * @property {number} minHeight - Minimum height of the editor in pixels
 * @property {number} maxHeight - Maximum height of the editor in pixels
 * @property {ToolbarConfig} toolbar - Toolbar configuration
 */
export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> {
    /** The size of the editor */
    size?: RichTextEditorSize;
    /** The state of the editor (default, disabled, invalid) */
    state?: RichTextEditorState;
    /** Optional label text for the editor */
    label?: string;
    /** Optional helper text displayed below the editor */
    helperText?: string;
    /** The HTML content value */
    value?: string;
    /** Callback when content changes */
    onChange?: (value: string) => void;
    /** Placeholder text when editor is empty */
    placeholder?: string;
    /** Additional class name for the editor */
    className?: string;
    /** Additional class name for the label */
    labelClassName?: string;
    /** Additional class name for the helper text */
    helperTextClassName?: string;
    /** Additional class name for the wrapper */
    wrapperClassName?: string;
    /** Additional class name for the editor container */
    editorClassName?: string;
    /** Whether the editor is required */
    required?: boolean;
    /** Minimum height of the editor in pixels */
    minHeight?: number;
    /** Maximum height of the editor in pixels */
    maxHeight?: number;
    /** Toolbar configuration */
    toolbar?: ToolbarConfig;
    /** Component-level theme overrides */
    theme?: RichTextEditorThemeOverrides;
    /**
     * Optional HTML sanitizer function applied before setting innerHTML.
     * Receives raw HTML string, must return sanitized HTML string.
     * Recommended: pass DOMPurify.sanitize for robust XSS protection.
     * If not provided, a basic built-in sanitizer strips script tags and on* event handlers.
     *
     * @example
     * import DOMPurify from 'dompurify';
     * <RichTextEditor sanitize={DOMPurify.sanitize} />
     */
    sanitize?: (html: string) => string;
}
export type RichTextEditorSize = 'sm' | 'md' | 'lg';
export type RichTextEditorState = 'default' | 'disabled' | 'invalid';
/**
 * Toolbar configuration
 */
export interface ToolbarConfig {
    /** Whether to show the toolbar */
    show?: boolean;
    /** Position of the toolbar */
    position?: 'top' | 'floating';
    /** Which tools to show in the toolbar */
    tools?: ToolbarTool[];
    /** Custom toolbar className */
    className?: string;
}
/**
 * Available toolbar tools
 */
export type ToolbarTool = 'bold' | 'italic' | 'underline' | 'fontSize' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
export type RichTextFontSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
/**
 * Text formatting state
 */
export interface FormattingState {
    bold: boolean;
    italic: boolean;
    underline: boolean;
    textAlign: 'left' | 'center' | 'right' | 'justify';
    fontSize: RichTextFontSizeKey;
    textColor: string;
}
/**
 * Color palette for text color picker
 */
export interface ColorOption {
    label: string;
    value: string;
    className: string;
}
/**
 * Theme overrides for the RichTextEditor component
 */
export interface RichTextEditorThemeOverrides {
    /** Base wrapper style */
    wrapperStyle?: string;
    /** Editor container style */
    containerStyle?: string;
    /** ContentEditable element style */
    editorStyle?: string;
    /** Toolbar container style */
    toolbarStyle?: string;
    /** Toolbar button style */
    toolbarButtonStyle?: string;
    /** Size variants */
    sizes?: Partial<Record<RichTextEditorSize, string>>;
    /** State variants */
    states?: {
        default?: string;
        disabled?: string;
        invalid?: string;
    };
    /** Helper text style */
    helperText?: string;
}
/**
 * Complete theme structure for RichTextEditor component
 */
export interface RichTextEditorTheme {
    wrapperStyle: string;
    containerStyle: string;
    editorStyle: string;
    toolbarStyle: string;
    toolbarButtonStyle: string;
    dropdownStyle: string;
    dropdownItemStyle: string;
    separatorStyle: string;
    colorPickerStyle: string;
    colorSwatchStyle: string;
    sizes: Record<RichTextEditorSize, string>;
    states: {
        default: string;
        disabled: string;
        invalid: string;
    };
    helperText: string;
}
