import { type TextEditorToolbarOption } from "../src/components/TextEditor/TextEditorToolbar";
declare const _default: {
    title: string;
    component: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
        onValueChange: (html: string, content: Record<string, unknown>, source: string) => void;
        formats?: ("bold" | "link" | "strike" | "blockquote" | "code" | "header" | "list" | "italic" | "underline")[];
        toolbar?: TextEditorToolbarOption[][];
        defaultValue?: string;
        placeholder?: string;
        tags?: import("../src").TextEditorTag[];
        popupContainer?: HTMLElement | null;
    }>;
};
export default _default;
export declare const Example: {
    args: {
        defaultValue: string;
        onValueChange: import("storybook/actions").HandlerFunction;
    };
};
export declare const CustomToolbar: {
    args: {
        defaultValue: string;
        onValueChange: import("storybook/actions").HandlerFunction;
        toolbar: string[][];
        formats: string[];
    };
};
/**
 * Passing `tags` enables mentions: type `@` to open a suggestion list and
 * insert a variable as a tag (a styled, atomic pill).
 */
export declare const WithTags: {
    args: {
        placeholder: string;
        onValueChange: import("storybook/actions").HandlerFunction;
        toolbar: TextEditorToolbarOption[][];
        tags: {
            id: string;
            label: string;
        }[];
    };
};
/**
 * The TextEditor rendered inside a `side-modal` variant `ModalDialog` (a
 * right-hand drawer). Use this to verify the tag suggestion popup, inserted
 * pills, and hover tooltip behave correctly inside a modal, which renders in
 * the browser's top layer via `<dialog>`.
 */
export declare const InSideModal: {
    render: () => import("react").JSX.Element;
};
/**
 * The editor sanitises its own output on seed, on paste and on every change, so
 * every tag the enabled `formats` can produce has to survive that pass.
 *
 * Two things to check. The editor above shows what survived the **seed**: a
 * heading, two lines split by a Shift+Enter break, a quote and a code block. A
 * stripped tag is visible there, a dropped `<br>` collapses the two lines into
 * one. The panel below shows what the component **emits**, and stays empty
 * until the first edit, since `onValueChange` only fires on change. Type one
 * character to fill it, then check the seeded markup came back out intact, and
 * press Shift+Enter to confirm a new break is emitted as `<br>`.
 */
export declare const PreservesBreaksAndBlocks: {
    render: () => import("react").JSX.Element;
};