import { PropsWithChildren, type ReactNode } from 'react';
import { GenericContext, PropsWithContext } from '../../context/types.js';
import type { ElementType, GenericContextProps, ElementProps } from '../type-utils.js';
import { type ContentLink } from '@remkoj/optimizely-graph-client';
export type CmsEditableProps<FT extends ElementType> = PropsWithChildren<{
    /**
     * Override the component used to render, instead of wrapping the children. It allows
     * any valid JSX identifier (e.g. HTML Element, Component or ExoticComponent)
     */
    as?: FT;
    /**
     * The identifier of the component wrapped in this CmsEditable component. This will
     * add the 'data-epi-block-id' property to the component.
     */
    cmsId?: string | null;
    /**
     * The name of the component field wrapped by this CmsEditable component. This will
     * add the 'data-epi-property-name' property to the component.
     */
    cmsFieldName?: string | null;
    /**
     * The Context to be used when determining if the page rendering happens in edit mode
     * or not.
     */
    ctx?: GenericContext;
    /**
     * The default CTX paramteer is caught by this component, set this to true to pass the
     * `ctx` property to the 'as' Component, or set to a valid property name to pass into
     * that property.
     */
    forwardCtx?: boolean | GenericContextProps<FT>;
    /**
     * If set, the `data-epi-block-id` attribute will always be included when the `cmsId`
     * parameter is being set.
     */
    forceBlockId?: boolean;
    /**
     * If set `CmsEditable` will output both `cmsId` and `cmsFieldName` (if both are provided)
     * otherwise it will prioritize `cmsFieldName`.
     */
    forceId?: boolean;
    /**
     * If set, this will be used to test if the content item being rendered is actually
     * the one being edited. This allows conditional output of the edit properties. This will
     * only affect `cmsFieldName`, not `cmsId`.
     */
    currentContent?: ContentLink;
    /**
     * Override the value for the `data-epi-property-edittype` property
     */
    editType?: 'floating' | 'inline' | null;
} & Omit<ElementProps<FT>, 'as' | 'cmsId' | 'cmsFieldName' | 'ctx' | 'forwardCtx' | 'forceBlockId' | 'forceId' | 'currentContent' | 'editType'>>;
export type CmsEditableComponent = <CT extends ElementType>(props: CmsEditableProps<CT>) => ReactNode;
export type CmsEditableBaseComponent = <CT extends ElementType>(props: PropsWithContext<CmsEditableProps<CT>>) => ReactNode;
/**
 * Server side wrapper to create HTML elements that include the needed
 * data-epi- properties to render the edit mode markers. If the `cmsId`
 * is a 32 character long string, it is assumed to be a GUID and rendered
 * as `data-epi-content-id`, otherwise it is rendered as `data-epi-block-id`.
 *
 * @param   param0      The HTML element with the simple properties
 * @returns
 */
export declare const CmsEditable: CmsEditableBaseComponent;
export default CmsEditable;