import * as react_jsx_runtime from 'react/jsx-runtime';
import { BaseMetadata, ThreadData } from '@liveblocks/client';
import { DTM, DCM, HistoryVersion } from '@liveblocks/core';
import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
import * as react from 'react';
import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactNode, ComponentProps } from 'react';
import * as lexical from 'lexical';
import { LexicalCommand, LexicalEditor, LexicalNode, TextFormatType } from 'lexical';
import { InitialConfigType } from '@lexical/react/LexicalComposer';

type AnchoredThreadsComponents = {
    Thread: ComponentType<ThreadProps>;
};
interface AnchoredThreadsProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
    /**
     * The threads to display.
     */
    threads: ThreadData<TM, CM>[];
    /**
     * Override the component's components.
     */
    components?: Partial<AnchoredThreadsComponents>;
}
declare function AnchoredThreads({ threads, components, className, style, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;

/**
 * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.
 * @param threadId The id of the thread to check if the associated annotation is selected or not.
 * @returns true if the associated annotation for the thread is selected, false otherwise.
 */
declare function useIsThreadActive(threadId: string): boolean;

type ExcludeProps<T, K extends Record<string, unknown>> = Omit<Exclude<T, T & K>, keyof K>;
type ComposerPropsCreateThread<TM extends BaseMetadata, CM extends BaseMetadata> = ExcludeProps<ComposerProps<TM, CM>, {
    threadId: string;
    commentId: string;
}>;
type FloatingComposerComponents = {
    Composer: ComponentType<ComposerPropsCreateThread<DTM, DCM>>;
};
/**
 * Dispatching OPEN_FLOATING_COMPOSER_COMMAND will display the FloatingComposer
 *
 * @example
 * import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 * import { OPEN_FLOATING_COMPOSER_COMMAND } from "@liveblocks/react-lexical";
 *
 * function Toolbar() {
 *   const [editor] = useLexicalComposerContext();
 *
 *   return (
 *     <button
 *       onClick={() => {
 *         editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND);
 *       }}
 *     >
 *       💬 New comment
 *     </button>
 *   );
 * }
 */
declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
/**
 * Dispatching ATTACH_THREAD_COMMAND will attach a comment to the current selection.
 */
declare const ATTACH_THREAD_COMMAND: LexicalCommand<string>;
type FloatingComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> = ComposerPropsCreateThread<TM, CM> & {
    /**
     * Override the component's components.
     */
    components?: Partial<FloatingComposerComponents>;
};
/**
 * Displays a `Composer` near the current lexical selection.
 *
 * To open it, dispatch `OPEN_FLOATING_COMPOSER_COMMAND`.
 *
 * Submitting a comment will attach an annotation thread at the current selection.
 * Should be nested inside `LiveblocksPlugin`.
 */
declare const FloatingComposer: react.ForwardRefExoticComponent<ComposerPropsCreateThread<BaseMetadata, BaseMetadata> & {
    /**
     * Override the component's components.
     */
    components?: Partial<FloatingComposerComponents>;
} & react.RefAttributes<HTMLFormElement>>;

type FloatingThreadsComponents = {
    Thread: ComponentType<ThreadProps>;
};
interface FloatingThreadsProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
    /**
     * The threads to display.
     */
    threads: ThreadData<TM, CM>[];
    /**
     * Override the component's components.
     */
    components?: Partial<FloatingThreadsComponents>;
}
declare function FloatingThreads({ threads, components, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;

/**
 * Checks if a block node is active in the current selection.
 * If the selection contains multiple block nodes, it will return
 * `true` only if all of them are of the same type.
 */
declare function isBlockNodeActive(editor: LexicalEditor, isActive: (node: LexicalNode) => boolean): boolean;

/**
 * Checks if a text format (e.g. bold, italic, …) is active in
 * the current selection.
 */
declare function isTextFormatActive(editor: LexicalEditor, format: TextFormatType): boolean;

/**
 * Function that takes a Lexical editor config and modifies it to add the necessary
 * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.
 *
 * @example
 * import { LexicalComposer } from "@lexical/react/LexicalComposer";
 * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
 *
 * const initialConfig = liveblocksConfig({
 *   namespace: "MyEditor",
 *   theme: {},
 *   nodes: [],
 *   onError: (err) => console.error(err),
 * });
 *
 * function Editor() {
 *   return (
 *     <LexicalComposer initialConfig={initialConfig}>
 *       <LiveblocksPlugin />
 *       <RichTextPlugin
 *         contentEditable={<ContentEditable />}
 *         placeholder={<div>Enter some text...</div>}
 *         ErrorBoundary={LexicalErrorBoundary}
 *       />
 *     </LexicalComposer>
 *   );
 * }
 */
declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorState">): {
    nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
    editorState: null;
    html?: lexical.HTMLConfig;
    onError: (error: Error, editor: lexical.LexicalEditor) => void;
    namespace: string;
    editable?: boolean;
    theme?: lexical.EditorThemeClasses;
};

/**
 * Returns whether the editor has loaded the initial text contents from the
 * server and is ready to be used.
 */
declare function useIsEditorReady(): boolean;
type LiveblocksPluginProps = {
    children?: ReactNode;
};
/**
 * Liveblocks plugin for Lexical that adds collaboration to your editor.
 *
 * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.
 *
 * @example
 *
 * import { LexicalComposer } from "@lexical/react/LexicalComposer";
 * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
 *
 * const initialConfig = liveblocksConfig({
 *   namespace: "MyEditor",
 *   theme: {},
 *   nodes: [],
 *   onError: (err) => console.error(err),
 * });
 *
 * function Editor() {
 *   return (
 *     <LexicalComposer initialConfig={initialConfig}>
 *       <LiveblocksPlugin />
 *       <RichTextPlugin
 *         contentEditable={<ContentEditable />}
 *         placeholder={<div>Enter some text...</div>}
 *         ErrorBoundary={LexicalErrorBoundary}
 *       />
 *     </LexicalComposer>
 *   );
 * }
 */
declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;

type FloatingPosition = "top" | "bottom";

interface ToolbarSlotProps {
    editor: LexicalEditor;
}
type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
    /**
     * The content of the toolbar, overriding the default content.
     * Use the `before` and `after` props if you want to keep and extend the default content.
     */
    children?: ToolbarSlot;
    /**
     * The content to display at the start of the toolbar.
     */
    before?: ToolbarSlot;
    /**
     * The content to display at the end of the toolbar.
     */
    after?: ToolbarSlot;
}
interface ToolbarButtonProps extends ComponentProps<"button"> {
    /**
     * The name of this button displayed in its tooltip.
     */
    name: string;
    /**
     * An optional icon displayed in this button.
     */
    icon?: ReactNode;
    /**
     * An optional keyboard shortcut displayed in this button's tooltip.
     *
     * @example
     * "Mod-Alt-B" → "⌘⌥B" in Apple environments, "⌃⌥B" otherwise
     * "Ctrl-Shift-Escape" → "⌃⇧⎋"
     * "Space" → "␣"
     */
    shortcut?: string;
}
interface ToolbarToggleProps extends ToolbarButtonProps {
    /**
     * Whether the button is toggled.
     */
    active: boolean;
}
type ToolbarSeparatorProps = ComponentProps<"div">;
interface ToolbarBlockSelectorItem {
    /**
     * The name of this block element, displayed as the label of this item.
     */
    name: string;
    /**
     * Optionally replace the name used as the label of this item by any content.
     */
    label?: ReactNode;
    /**
     * An optional icon displayed in this item.
     */
    icon?: ReactNode;
    /**
     * Whether this block element is currently active.
     * Set to `"default"` to display this item when no other item is active.
     */
    isActive: ((editor: LexicalEditor) => boolean) | "default";
    /**
     * A callback invoked when this item is selected.
     */
    setActive: (editor: LexicalEditor) => void;
}
interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
    /**
     * The items displayed in this block selector.
     * When provided as an array, the default items are overridden. To avoid this,
     * a function can be provided instead and it will receive the default items.
     *
     * @example
     * <Toolbar.BlockSelector
     *   items={[
     *     {
     *       name: "Text",
     *       isActive: "default",
     *       setActive: () => { ... },
     *     },
     *     {
     *       name: "Heading 1",
     *       isActive: () => { ... },
     *       setActive: () => { ... },
     *     },
     *   ]}
     * />
     *
     * @example
     * <Toolbar.BlockSelector
     *   items={(defaultItems) => [
     *     ...defaultItems,
     *     {
     *       name: "Custom block",
     *       isActive: () => { ... },
     *       setActive: () => { ... },
     *     },
     *   ]}
     * />
     */
    items?: ToolbarBlockSelectorItem[] | ((defaultItems: ToolbarBlockSelectorItem[]) => ToolbarBlockSelectorItem[]);
}
declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element | null;
declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
/**
 * A static toolbar containing actions and values related to the editor.
 *
 * @example
 * <Toolbar  />
 *
 * @example
 * <Toolbar >
 *   <Toolbar.BlockSelector />
 *   <Toolbar.Separator />
 *   <Toolbar.SectionInline />
 *   <Toolbar.Separator />
 *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
 * </Toolbar>
 */
declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
    /**
     * A button for triggering actions.
     *
     * @example
     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }} />
     *
     * @example
     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
     */
    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
    /**
     * A toggle button for values that can be active or inactive.
     *
     * @example
     * <Toolbar.Toggle name="Bold" active={isBold} />
     *
     * @example
     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
     */
    Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
    /**
     * A dropdown selector to switch between different block types.
     *
     * @example
     * <Toolbar.BlockSelector />
     */
    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
    /**
     * A visual (and accessible) separator to separate sections in a toolbar.
     */
    Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
    /**
     * A section containing history actions. (e.g. undo, redo)
     */
    SectionHistory: typeof ToolbarSectionHistory;
    /**
     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
     */
    SectionInline: typeof ToolbarSectionInline;
    /**
     * A section containing collaborative actions. (e.g. adding a comment)
     */
    SectionCollaboration: typeof ToolbarSectionCollaboration;
};

interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
    /**
     * The vertical position of the floating toolbar.
     */
    position?: FloatingPosition;
    /**
     * The vertical offset of the floating toolbar from the selection.
     */
    offset?: number;
    /**
     * The content of the floating toolbar, overriding the default content.
     * Use the `before` and `after` props if you want to keep and extend the default content.
     */
    children?: ToolbarSlot;
    /**
     * The content to display at the start of the floating toolbar.
     */
    before?: ToolbarSlot;
    /**
     * The content to display at the end of the floating toolbar.
     */
    after?: ToolbarSlot;
}
/**
 * A floating toolbar attached to the selection and containing actions and values related to the editor.
 *
 * @example
 * <FloatingToolbar />
 *
 * @example
 * <FloatingToolbar>
 *   <Toolbar.BlockSelector />
 *   <Toolbar.Separator />
 *   <Toolbar.SectionInline />
 *   <Toolbar.Separator />
 *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
 * </FloatingToolbar>
 */
declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
    /**
     * A component that can be wrapped around elements which are rendered outside of the floating
     * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.
     *
     * @example
     * <FloatingToolbar>
     *   <Popover.Root>
     *     <Popover.Trigger asChild>
     *       <Toolbar.Button>Open popover</Toolbar.Button>
     *     </Popover.Trigger>
     *     <Popover.Portal>
     *       <FloatingToolbar.External>
     *         <Popover.Content>
     *           This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.
     *         </Popover.Content>
     *       </FloatingToolbar.External>
     *     </Popover.Portal>
     *   </Popover.Root>
     * </FloatingToolbar>
     */
    External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
};

interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
    version: HistoryVersion;
    onVersionRestore?: (version: HistoryVersion) => void;
}
/**
 * Displays a specific version of the current Lexical document.
 *
 * @example
 * <HistoryVersionPreview version={version} />
 */
declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVersionPreviewProps & react.RefAttributes<HTMLDivElement>>;

export { ATTACH_THREAD_COMMAND, AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, isBlockNodeActive, isTextFormatActive, liveblocksConfig, useIsEditorReady, useIsThreadActive };