import type { FC, HTMLAttributes } from "react";
import { type TextEditorToolbarOption } from "./TextEditorToolbar";
import { type TextEditorTag } from "./MentionList";
import "./TextEditor.scss";
export { type TextEditorTag };
type Props = HTMLAttributes<HTMLDivElement> & {
    /**
     * Called when the value of the editor changes.
     *
     * @param html string of html
     * @param content Tiptap JSON content object
     * @param source source of the change (user or api)
     */
    onValueChange: (html: string, content: Record<string, unknown>, source: string) => void;
    /**
     * Which formats to allow in the editor, like "bold" and "italic".
     *
     * This is different from the buttons that are shown in the toolbar,
     * because a user could paste in text that has bold formatting without
     * having a bold button in the toolbar. This prop determines if that is
     * allowed or not.
     *
     * @default
     *
     * ["bold", "italic", "underline", "strike", "list", "link"]
     *
     * @example
     *
     * ["bold", "italic", "code"]
     */
    formats?: TextEditorFormat[];
    /**
     * Which buttons to show in the toolbar, like "bold" and "italic".
     *
     * @default
     * [
     *   ["bold", "italic", "underline", "strike"],
     *   [{ list: "ordered" }, { list: "bullet" }],
     *   ["link"],
     * ]
     *
     * @example
     *
     * [
     *   ["bold", "italic", "underline", "strike"],
     *   ["link", "video"],
     * ]
     */
    toolbar?: TextEditorToolbarOption[][];
    /**
     * A string of html.
     */
    defaultValue?: string;
    /**
     * Placeholder text to show in the editor when it is empty.
     */
    placeholder?: string;
    /**
     * Mentionable variables. When provided, typing `@` opens a suggestion list,
     * and selecting an entry inserts it as a tag (a styled, atomic pill) rather
     * than plain text.
     *
     * The `id` is what gets stored in the editor output (as a `data-id`
     * attribute); the `label` is what the user sees.
     *
     * Add `"tag"` to the `toolbar` to render a button that opens the suggestion
     * list at the cursor. The button only appears while `tags` is provided.
     *
     * @example
     *
     * [
     *   { id: "greetingvariable", label: "Greeting" },
     *   { id: "locationvariable", label: "Location" },
     * ]
     */
    tags?: TextEditorTag[];
    /**
     * The container the tag suggestion popup is mounted into.
     *
     * By default the popup mounts into the nearest native `<dialog>` ancestor
     * (so it works out of the box inside a `ModalDialog`), falling back to
     * `document.body`. Pass a container explicitly when the editor lives inside
     * an overlay that is **not** a native `<dialog>` (e.g. the deprecated
     * `Modal`, a custom drawer, or a portalled popover) and the popup would
     * otherwise render behind it.
     *
     * @example
     *
     * const { $dialog } = ModalDialog.useModalDialog();
     * <TextEditor tags={tags} popupContainer={$dialog} … />
     */
    popupContainer?: HTMLElement | null;
};
type TextEditorFormat = "bold" | "code" | "italic" | "link" | "strike" | "underline" | "blockquote" | "header" | "list";
export declare const TextEditor: FC<Props>;
export default TextEditor;