draftail/dist/draftail.d.ts

📝🍸 A configurable rich text editor built with Draft.js

import React$1, { CSSProperties, Component, PureComponent } from 'react';
import { EditorState, EntityInstance, ContentState, ContentBlock, RawDraftContentState, DraftDecorator, DraftEditorCommand, SelectionState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import { registerCopySource } from 'draftjs-conductor';
export { createEditorStateFromRaw, serialiseEditorStateToRaw } from 'draftjs-conductor';
import * as _popperjs_core from '@popperjs/core';
import { UseComboboxStateChange } from 'downshift';
import { TippyProps } from '@tippyjs/react';

type IconProp = string | string[] | JSX.Element;
type TextDirectionality = "LTR" | "RTL" | null;
interface Control {
    type?: string;
    label?: string | null;
    description?: string | null;
    icon?: IconProp;
}
type BoolControl = boolean | Control;
interface BlockTypeControl extends Control {
    /** Unique type shared between block instances. */
    type: string;
    /** DOM element used to display the block within the editor area. */
    element?: string;
}
interface InlineStyleControl extends Control {
    /** Unique type shared between inline style instances. */
    type: string;
    /** CSS properties (in JS format) to apply for styling within the editor area. */
    style?: CSSProperties;
}
interface EntityTypeControl extends Control {
    /** Unique type shared between entity instances. */
    type: string;
    /** React component providing the UI to manage entities of this type. */
    source: React$1.ComponentType<EntitySourceProps>;
    /** React component to display inline entities. */
    decorator?: React$1.ComponentType<EntityDecoratorProps>;
    /** React component to display block-level entities. */
    block?: React$1.ComponentType<EntityBlockProps>;
    /** Custom copy-paste processing checker. */
    onPaste?: (text: string, html: string | null | undefined, editorState: EditorState, helpers: {
        setEditorState: (state: EditorState) => void;
        getEditorState: () => EditorState;
    }, entityType: EntityTypeControl) => "handled" | "not-handled";
    /** Array of attributes the entity uses, to preserve when filtering entities on paste.
     * If undefined, all entity data is preserved.
     */
    attributes?: ReadonlyArray<string>;
    /** Attribute - regex mapping, to preserve entities based on their data on paste.
     * For example, { url: '^https:' } will only preserve links that point to HTTPS URLs.
     */
    allowlist?: {
        [attr: string]: string;
    };
    /** Attribute - regex mapping, to preserve entities based on their data on paste.
     * For example, { url: '^https:' } will only preserve links that point to HTTPS URLs.
     */
    whitelist?: {
        [attr: string]: string;
    };
}
interface EntitySourceProps {
    /** The editorState is available for arbitrary content manipulation. */
    editorState: EditorState;
    /** Takes the updated editorState, or null if there are no changes, and focuses the editor. */
    onComplete: (nextState: EditorState) => void;
    /** Closes the source, without focusing the editor again. */
    onClose: () => void;
    /** Current entity to edit, if any. */
    entityType: EntityTypeControl;
    /** Current entityKey to edit, if any. */
    entityKey?: string | null;
    /** Whole entityType configuration, as provided to the editor. */
    entity?: EntityInstance | null;
    /** Optionally set the overriding text directionality for this editor. */
    textDirectionality: TextDirectionality;
}
interface EntityDecoratorProps {
    /** The key of the decorated entity. */
    entityKey: string;
    /** The editor’s content. */
    contentState: ContentState;
    /** Rich text to be displayed inside the decorator. */
    children: React$1.ReactNode;
    /** Shorthand to edit entity data. */
    onEdit: (entityKey: string) => void;
    /** Shorthand to remove an entity, and the related block. */
    onRemove: (entityKey: string, blockKey?: string) => void;
    /** Optionally set the overriding text directionality for this editor. */
    textDirectionality: TextDirectionality;
}
interface EntityBlockProps {
    block: ContentBlock;
    blockProps: {
        /** The editorState is available for arbitrary content manipulation. */
        editorState: EditorState;
        /** Current entity to manage. */
        entity: EntityInstance;
        /** Current entityKey to manage. */
        entityKey: string;
        /** Whole entityType configuration, as provided to the editor. */
        entityType: EntityTypeControl;
        /** Make the whole editor read-only, except for the block. */
        lockEditor: () => void;
        /** Make the editor editable again. */
        unlockEditor: () => void;
        /** Shorthand to edit entity data. */
        onEditEntity: () => void;
        /** Shorthand to remove an entity, and the related block. */
        onRemoveEntity: () => void;
        /** Update the editorState with arbitrary changes. */
        onChange: (nextState: EditorState) => void;
        /** Optionally set the overriding text directionality for this editor. */
        textDirectionality: TextDirectionality;
    };
}
interface ControlComponentProps {
    getEditorState: () => EditorState;
    onChange: (state: EditorState) => void;
}
interface ControlControl extends Control {
    inline?: React$1.ComponentType<ControlComponentProps>;
    block?: React$1.ComponentType<ControlComponentProps>;
    meta?: React$1.ComponentType<ControlComponentProps>;
}
type LegacyControlControl = React$1.ComponentClass<ControlComponentProps> & {
    inline: never;
    block: never;
    meta: never;
};
interface CommandControl extends Control {
    onSelect?: ({ editorState, prompt, }: {
        editorState: EditorState;
        prompt?: string;
    }) => EditorState;
    category?: string;
    render?: (props: {
        option: CommandControl;
    }) => JSX.Element;
}
interface CommandCategory {
    type: "blockTypes" | "entityTypes" | string;
    label: string | null;
    items?: CommandControl[];
}

interface ToolbarDefaultProps {
    currentStyles: {
        has: (style: string) => boolean;
    };
    currentBlock: string;
    currentBlockKey: string;
    enableHorizontalRule: BoolControl;
    enableLineBreak: BoolControl;
    showUndoControl: BoolControl;
    showRedoControl: BoolControl;
    entityTypes: ReadonlyArray<EntityTypeControl>;
    blockTypes: ReadonlyArray<BlockTypeControl>;
    inlineStyles: ReadonlyArray<InlineStyleControl>;
    commands: boolean | ReadonlyArray<CommandCategory>;
    toggleBlockType: (blockType: string) => void;
    toggleInlineStyle: (inlineStyle: string) => void;
    addHR: () => void;
    addBR: () => void;
    onUndoRedo: (type: string) => void;
    onRequestSource: (entityType: string) => void;
    onCompleteSource: (nextState: EditorState) => void;
    focus: () => void;
}

interface ToolbarProps extends ToolbarDefaultProps {
    controls: ReadonlyArray<ControlControl | LegacyControlControl>;
    getEditorState: () => EditorState;
    onChange: (state: EditorState) => void;
    className?: string;
}
declare const Toolbar: ({ controls, getEditorState, onChange, className, ...otherProps }: ToolbarProps) => JSX.Element;

interface IconProps {
    icon?: IconProp;
    title?: string | null;
    className?: string | null;
}

/**
 * Icon as SVG element. Can optionally render a React element instead.
 */
declare const Icon: ({ icon, title, className }: IconProps) => JSX.Element;

interface ComboBoxCategory<ItemType> {
    type: string;
    label: string | null;
    items?: ItemType[];
}
interface ComboBoxItem {
    type?: string;
    label?: string | null;
    description?: string | null;
    icon?: IconProp;
    category?: string;
    render?: (props: {
        option: ComboBoxItem;
    }) => JSX.Element;
}

interface ComboBoxProps<ComboBoxOption> {
    label?: string;
    placeholder?: string;
    inputValue?: string;
    items: ComboBoxCategory<ComboBoxOption>[];
    getItemLabel: (type: string | undefined, item: ComboBoxOption) => string | null;
    getItemDescription: (item: ComboBoxOption) => string | null | undefined;
    getSearchFields: (item: ComboBoxOption) => string[];
    onSelect: (change: UseComboboxStateChange<ComboBoxOption>) => void;
    noResultsText?: string;
}
/**
 * A generic ComboBox component, intended to be reusable outside of Draftail.
 */
declare function ComboBox<ComboBoxOption extends ComboBoxItem>({ label, placeholder, inputValue, items, getItemLabel, getItemDescription, getSearchFields, onSelect, noResultsText, }: ComboBoxProps<ComboBoxOption>): JSX.Element;

type TooltipPlacement = TippyProps["placement"];
type PopperInstance = Parameters<NonNullable<TippyProps["onMount"]>>[0];
interface TooltipPosition {
    top: number;
    left: number | string;
}
interface TooltipProps {
    shouldOpen: boolean;
    getTargetPosition?: (editorRect: DOMRect) => TooltipPosition | null;
    content: React$1.ReactNode;
    children?: React$1.ReactElement;
    showBackdrop?: boolean;
    zIndex?: number;
    placement?: TooltipPlacement;
    onHide?: () => void;
    onClickOutside?: () => void;
    onMount?: (instance: PopperInstance) => void;
}
declare const Tooltip: ({ content, children, shouldOpen, getTargetPosition, showBackdrop, zIndex, placement, onHide, onClickOutside, onMount, }: TooltipProps) => JSX.Element;

interface CommandPaletteProps extends ToolbarProps {
    comboPlacement?: TooltipPlacement;
    noResultsText?: string;
    tooltipZIndex?: number;
    showBackdrop?: boolean;
    ComboBoxComponent?: typeof ComboBox;
}
declare const CommandPalette: {
    ({ blockTypes, entityTypes, enableHorizontalRule, comboPlacement, noResultsText, tooltipZIndex, showBackdrop, commands, getEditorState, onCompleteSource, onRequestSource, ComboBoxComponent, }: CommandPaletteProps): JSX.Element | null;
    defaultProps: {
        comboPlacement: _popperjs_core.Placement | undefined;
        noResultsText: string;
        tooltipZIndex: number;
        showBackdrop: boolean;
    };
};

interface MetaToolbarProps extends ToolbarProps {
    showBlockEntities?: boolean;
}
declare const MetaToolbar: ({ showBlockEntities, entityTypes, controls, getEditorState, onChange, onRequestSource, }: MetaToolbarProps) => JSX.Element;

interface DraftailEditorProps {
    /** Initial content of the editor. Use this to edit pre-existing content. */
    rawContentState?: RawDraftContentState | null;
    /** Called when changes occurred. Use this to persist editor content. */
    onSave?: ((content: null | RawDraftContentState) => void) | null;
    /** Content of the editor, when using the editor as a controlled component. Incompatible with `rawContentState` and `onSave`. */
    editorState?: EditorState | null;
    /** Called whenever the editor state is updated. Use this to manage the content of a controlled editor. Incompatible with `rawContentState` and `onSave`. */
    onChange?: ((editorState: EditorState) => void) | null;
    /** Called when the editor receives focus. */
    onFocus?: (() => void) | null;
    /** Called when the editor loses focus. */
    onBlur?: (() => void) | null;
    /** Displayed when the editor is empty. Hidden if the user changes styling. */
    placeholder?: string | null;
    /** Enable the use of horizontal rules in the editor. */
    enableHorizontalRule: BoolControl;
    /** Enable the use of line breaks in the editor. */
    enableLineBreak: BoolControl;
    /** Show undo control in the toolbar. */
    showUndoControl: BoolControl;
    /** Show redo control in the toolbar. */
    showRedoControl: BoolControl;
    /** Disable copy/paste of rich text in the editor. */
    stripPastedStyles: boolean;
    /** Set if the editor supports multiple lines / blocks of text, or only a single line. */
    multiline: boolean;
    /** Set whether spellcheck is turned on for your editor.
     * See https://draftjs.org/docs/api-reference-editor.html#spellcheck.
     */
    spellCheck: boolean;
    /** Set whether the editor should be rendered in readOnly mode.
     * See https://draftjs.org/docs/api-reference-editor.html#readonly
     */
    readOnly: boolean;
    /** Optionally set the overriding text alignment for this editor.
     * See https://draftjs.org/docs/api-reference-editor.html#textalignment.
     */
    textAlignment?: string | null;
    /** Optionally set the overriding text directionality for this editor.
     * See https://draftjs.org/docs/api-reference-editor.html#textdirectionality.
     */
    textDirectionality: TextDirectionality;
    /** Set if auto capitalization is turned on and how it behaves.
     * See https://draftjs.org/docs/api-reference-editor.html#autocapitalize-string.
     */
    autoCapitalize?: string | null;
    /** Set if auto complete is turned on and how it behaves.
     * See https://draftjs.org/docs/api-reference-editor.html#autocomplete-string.
     */
    autoComplete?: string | null;
    /** Set if auto correct is turned on and how it behaves.
     * See https://draftjs.org/docs/api-reference-editor.html#autocorrect-string.
     */
    autoCorrect?: string | null;
    /** See https://draftjs.org/docs/api-reference-editor.html#aria-props. */
    ariaDescribedBy?: string | null;
    ariaExpanded?: boolean | null;
    ariaLabel?: string | null;
    ariaLabelledBy?: string | null;
    ariaOwneeID?: string | null;
    ariaRequired?: string | null;
    /** List of the available block types. */
    blockTypes: ReadonlyArray<BlockTypeControl>;
    /** List of the available inline styles. */
    inlineStyles: ReadonlyArray<InlineStyleControl>;
    /** List of the available entity types. */
    entityTypes: ReadonlyArray<EntityTypeControl>;
    /** List of active decorators. */
    decorators: ReadonlyArray<DraftDecorator>;
    /** List of extra toolbar controls. */
    controls: ReadonlyArray<ControlControl | LegacyControlControl>;
    /** Optionally enable the command palette UI. */
    commands: boolean | ReadonlyArray<CommandCategory>;
    /** List of plugins of the draft-js-plugins architecture. */
    plugins: ReadonlyArray<any>;
    /** Optionally override the default Draftail toolbar, removing or replacing it. */
    topToolbar?: React$1.ComponentType<ToolbarProps> | null;
    /** Optionally add a custom toolbar underneath the editor, e.g. for metrics. */
    bottomToolbar?: React$1.ComponentType<MetaToolbarProps> | null;
    /** Optionally override the default command toolbar, removing or replacing it. */
    commandToolbar?: React$1.ComponentType<CommandPaletteProps> | null;
    /** Max level of nesting for list items. 0 = no nesting. Maximum = 10. */
    maxListNesting: number;
    /** Frequency at which to call the onSave callback (ms). */
    stateSaveInterval: number;
}
interface DraftailEditorState {
    editorState?: EditorState;
    hasFocus: boolean;
    readOnlyState: boolean;
    sourceOptions: {
        entity?: EntityInstance | null;
        entityKey?: string | null;
        entityType?: EntityTypeControl;
    } | null;
    lastShortcutKey: string | null;
}
type DraftEditorRef = React$1.Ref<Editor> & {
    focus: () => void;
};
/**
 * Main component of the Draftail editor.
 * Contains the Draft.js editor instance, and ties together UI and behavior.
 */
declare class DraftailEditor extends Component<DraftailEditorProps, DraftailEditorState> {
    static defaultProps: DraftailEditorProps;
    updateTimeout?: number;
    editorRef?: DraftEditorRef;
    tooltipParentRef: React$1.Ref<HTMLDivElement>;
    copySource?: ReturnType<typeof registerCopySource>;
    lockEditor: () => void;
    unlockEditor: () => void;
    getEditorState: () => EditorState;
    constructor(props: DraftailEditorProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    onFocus(): void;
    onBlur(): void;
    onTab(event: React$1.KeyboardEvent): boolean;
    onUpArrow(event: React$1.KeyboardEvent<HTMLDivElement>): void;
    onDownArrow(event: React$1.KeyboardEvent<HTMLDivElement>): void;
    onChange(nextState: EditorState): void;
    onEditEntity(entityKey: string): void;
    onRemoveEntity(entityKey: string, blockKey?: string): void;
    onUndoRedo(type: string): void;
    onRequestSource(entityType: string): void;
    onCompleteSource(nextState: EditorState): void;
    onCloseSource(): void;
    getEditorStateProp(): EditorState;
    getEditorStateState(): EditorState;
    saveState(): void;
    toggleEditor(readOnlyState: boolean): void;
    toggleSource(type: string, entityKey?: string | null, entity?: EntityInstance | null): void;
    handleReturn(e: React$1.KeyboardEvent<HTMLDivElement>): "handled" | "not-handled";
    handleKeyCommand(command: DraftEditorCommand): "handled" | "not-handled";
    handleBeforeInput(char: string): "handled" | "not-handled";
    handlePastedText(text: string, html: string | undefined, editorState: EditorState): "handled" | "not-handled";
    toggleBlockType(blockType: string): void;
    toggleInlineStyle(inlineStyle: string): void;
    addHR(): void;
    addBR(): void;
    blockRenderer(block: ContentBlock): {
        editable: boolean;
        component?: undefined;
        props?: undefined;
    } | {
        component: () => JSX.Element;
        editable: boolean;
        props?: undefined;
    } | {
        component: React$1.ComponentType<EntityBlockProps> | undefined;
        editable: boolean;
        props: {
            editorState: EditorState;
            entity: EntityInstance;
            entityKey: string;
            entityType: EntityTypeControl;
            lockEditor: () => void;
            unlockEditor: () => void;
            onEditEntity: () => void;
            onRemoveEntity: () => void;
            onChange: (nextState: EditorState) => void;
            textDirectionality: TextDirectionality;
        };
    } | null;
    /**
     * Imperative focus API similar to that of Draft.js.
     * See https://draftjs.org/docs/advanced-topics-managing-focus.html#content.
     */
    focus(): void;
    renderSource(): JSX.Element | null;
    render(): JSX.Element;
}

interface ToolbarButtonProps {
    name?: string;
    active?: boolean;
    label?: string | null;
    title?: string | null;
    icon?: IconProp | null;
    className?: string | null;
    tooltipDirection?: "up" | "down";
    onClick?: ((name: string) => void) | null;
}
interface ToolbarButtonState {
    showTooltipOnHover: boolean;
}
/**
 * Displays a basic button, with optional active variant,
 * enriched with a tooltip. The tooltip stops showing on click.
 */
declare class ToolbarButton extends PureComponent<ToolbarButtonProps, ToolbarButtonState> {
    constructor(props: ToolbarButtonProps);
    onMouseDown(e: React$1.MouseEvent<HTMLButtonElement>): void;
    onMouseLeave(): void;
    render(): JSX.Element;
}

type ToolbarType = "floating" | "sticky";
interface PinButton extends Control {
    floatingLabel?: Control["label"];
    stickyLabel?: Control["label"];
    floatingDescription?: Control["description"];
    stickyDescription?: Control["description"];
    floatingIcon?: Control["icon"];
    stickyIcon?: Control["icon"];
}
interface InlineToolbarProps extends ToolbarProps {
    pinButton?: PinButton;
    defaultToolbar?: ToolbarType;
    onSetToolbar?: (toolbar: ToolbarType, callback: () => void) => void;
}
declare const InlineToolbar: ({ pinButton, defaultToolbar, onSetToolbar, controls, ...otherProps }: InlineToolbarProps) => JSX.Element;

interface FloatingToolbarProps extends ToolbarProps {
    tooltipPlacement?: TooltipPlacement;
    tooltipZIndex?: number;
    className?: string;
}
declare const FloatingToolbar: ({ controls, getEditorState, onChange, tooltipZIndex, tooltipPlacement, className, ...otherProps }: FloatingToolbarProps) => JSX.Element;

interface BlockToolbarProps extends ToolbarProps {
    triggerLabel?: string;
    triggerIcon?: React$1.ReactNode;
    comboLabel?: string;
    comboPlaceholder?: string;
    comboPlacement?: TooltipPlacement;
    noResultsText?: string;
    tooltipZIndex?: number;
    showBackdrop?: boolean;
    ComboBoxComponent?: typeof ComboBox;
}
declare const BlockToolbar: ({ commands, getEditorState, blockTypes, currentBlock, currentBlockKey, onRequestSource, onCompleteSource, entityTypes, addHR, enableHorizontalRule, triggerLabel, triggerIcon, comboLabel, comboPlaceholder, comboPlacement, noResultsText, tooltipZIndex, showBackdrop, ComboBoxComponent, }: BlockToolbarProps) => JSX.Element;

/**
 * Inspired by draftjs-utils, with our custom functions.
 *
 * DraftUtils functions are utility helpers useful in isolation, specific to the Draft.js API,
 * without ties to Draftail's specific behavior or other APIs.
 */
declare const _default: {
    /**
     * Returns the first selected block.
     */
    getSelectedBlock(editorState: EditorState): ContentBlock;
    /**
     * Returns the entity applicable to whole of current selection.
     * An entity can not span multiple blocks.
     * https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/inline.js#L75
     */
    getSelectionEntity(editorState: EditorState): string | undefined;
    /**
     * Creates a selection on a given entity in the currently selected block.
     * Returns the current selection if no entity key is provided, or if the entity could not be found.
     */
    getEntitySelection(editorState: EditorState, entityKey?: string): SelectionState;
    /**
     * Updates a given atomic block's entity, merging new data with the old one.
     */
    updateBlockEntity(editorState: EditorState, block: ContentBlock, data: {
        [key: string]: unknown;
    }): EditorState;
    /**
     * Inserts a horizontal rule in the place of the current selection.
     * Returns updated EditorState.
     * Inspired by DraftUtils.addLineBreakRemovingSelection.
     */
    addHorizontalRuleRemovingSelection(editorState: EditorState): EditorState;
    /**
     * Changes a block type to be `newType`, setting its new text.
     * Also removes the required characters from the characterList,
     * and resets block data.
     */
    resetBlockWithType(editorState: EditorState, newType?: string, newText?: string, newData?: {
        [key: string]: unknown;
    }): EditorState;
    /**
     * Applies an inline style on a given range, based on a Markdown shortcut,
     * removing the Markdown markers.
     * Supports adding styles on existing styles, and entities.
     */
    applyMarkdownStyle(editorState: EditorState, range: {
        pattern: string;
        start: number;
        end: number;
        type: string;
    }, char: string): EditorState;
    /**
     * Removes the block at the given key.
     */
    removeBlock(editorState: EditorState, key: string): EditorState;
    /**
     * Removes a block-level entity, turning the block into an empty paragraph,
     * and placing the selection on it.
     */
    removeBlockEntity(editorState: EditorState, entityKey: string, blockKey: string): EditorState;
    /**
     * Handles pressing delete within an atomic block. This can happen when selection is placed on an image.
     * Ideally this should be handled by the built-in RichUtils, but it's not.
     * See https://github.com/wagtail/wagtail/issues/4370.
     */
    handleDeleteAtomic(editorState: EditorState): false | EditorState;
    /**
     * Get an entity decorator strategy based on the given entity type.
     * This strategy will find all entities of the given type.
     */
    getEntityTypeStrategy(entityType: string): (block: ContentBlock, callback: (start: number, end: number) => void, contentState: ContentState) => void;
    /**
     * Inserts new unstyled block.
     * Initially inspired from https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/block.js#L153,
     * but changed so that the split + block type reset amounts to
     * only one change in the undo stack.
     */
    insertNewUnstyledBlock(editorState: EditorState): EditorState;
    /**
     * Handles Shift + Enter keypress removing selection and inserting a line break.
     * https://github.com/jpuri/draftjs-utils/blob/112bbe449cc9156522fcf2b40f2910a071b795c2/js/block.js#L133
     */
    addLineBreak(editorState: EditorState): EditorState;
    /**
     * Handles hard newlines.
     * https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/keyPress.js#L17
     */
    handleHardNewline(editorState: EditorState): false | EditorState;
    /**
     * Handles three scenarios:
     * - Soft newlines.
     * - Hard newlines in the "defer breaking out of the block" case.
     * - Other hard newlines.
     * See https://github.com/springload/draftail/issues/104,
     * https://github.com/jpuri/draftjs-utils/issues/10.
     */
    handleNewLine(editorState: EditorState, event: React.KeyboardEvent): false | EditorState;
    getCommandPalettePrompt(editorState: EditorState): {
        text: string;
        block: ContentBlock;
        position: number;
    } | null;
    removeCommandPalettePrompt(editorState: EditorState): EditorState;
};

declare const BLOCK_TYPE: {
    readonly UNSTYLED: "unstyled";
    readonly HEADER_ONE: "header-one";
    readonly HEADER_TWO: "header-two";
    readonly HEADER_THREE: "header-three";
    readonly HEADER_FOUR: "header-four";
    readonly HEADER_FIVE: "header-five";
    readonly HEADER_SIX: "header-six";
    readonly UNORDERED_LIST_ITEM: "unordered-list-item";
    readonly ORDERED_LIST_ITEM: "ordered-list-item";
    readonly BLOCKQUOTE: "blockquote";
    readonly CODE: "code-block";
    readonly ATOMIC: "atomic";
};
type BlockType = (typeof BLOCK_TYPE)[keyof typeof BLOCK_TYPE];
declare const ENTITY_TYPE: {
    readonly LINK: "LINK";
    readonly IMAGE: "IMAGE";
    readonly HORIZONTAL_RULE: "HORIZONTAL_RULE";
};
type EntityType = (typeof ENTITY_TYPE)[keyof typeof ENTITY_TYPE];
declare const INLINE_STYLE: {
    readonly BOLD: "BOLD";
    readonly ITALIC: "ITALIC";
    readonly CODE: "CODE";
    readonly UNDERLINE: "UNDERLINE";
    readonly STRIKETHROUGH: "STRIKETHROUGH";
    readonly MARK: "MARK";
    readonly QUOTATION: "QUOTATION";
    readonly SMALL: "SMALL";
    readonly SAMPLE: "SAMPLE";
    readonly INSERT: "INSERT";
    readonly DELETE: "DELETE";
    readonly KEYBOARD: "KEYBOARD";
    readonly SUPERSCRIPT: "SUPERSCRIPT";
    readonly SUBSCRIPT: "SUBSCRIPT";
};
type InlineStyle = (typeof INLINE_STYLE)[keyof typeof INLINE_STYLE];
declare const LABELS: {
    readonly unstyled: "P";
    readonly "header-one": "H1";
    readonly "header-two": "H2";
    readonly "header-three": "H3";
    readonly "header-four": "H4";
    readonly "header-five": "H5";
    readonly "header-six": "H6";
    readonly "unordered-list-item": "UL";
    readonly "ordered-list-item": "OL";
    readonly "code-block": "{ }";
    readonly blockquote: "❝";
    readonly BOLD: "𝐁";
    readonly ITALIC: "𝘐";
    readonly CODE: "{ }";
    readonly UNDERLINE: "U";
    readonly STRIKETHROUGH: "S";
    readonly MARK: "☆";
    readonly QUOTATION: "❛";
    readonly SMALL: "Small";
    readonly SAMPLE: "Data";
    readonly INSERT: "Ins";
    readonly DELETE: "Del";
    readonly SUPERSCRIPT: "Sup";
    readonly SUBSCRIPT: "Sub";
    readonly KEYBOARD: "⌘";
    readonly LINK: "🔗";
    readonly IMAGE: "🖼";
    readonly HORIZONTAL_RULE: "―";
    readonly BR: "↵";
    readonly undo: "↺";
    readonly redo: "↻";
};
type KnownFormatType = keyof typeof LABELS;
declare const KEYBOARD_SHORTCUTS: {
    readonly unstyled: "⌫";
    readonly "header-one": "#";
    readonly "header-two": "##";
    readonly "header-three": "###";
    readonly "header-four": "####";
    readonly "header-five": "#####";
    readonly "header-six": "######";
    readonly "unordered-list-item": "-";
    readonly "ordered-list-item": "1.";
    readonly blockquote: ">";
    readonly "code-block": "```";
    readonly BOLD: {
        readonly other: "Ctrl + B";
        readonly macOS: "⌘ + B";
    };
    readonly ITALIC: {
        readonly other: "Ctrl + I";
        readonly macOS: "⌘ + I";
    };
    readonly UNDERLINE: {
        readonly other: "Ctrl + U";
        readonly macOS: "⌘ + U";
    };
    readonly STRIKETHROUGH: {
        readonly other: "Ctrl + ⇧ + X";
        readonly macOS: "⌘ + ⇧ + X";
    };
    readonly SUPERSCRIPT: {
        readonly other: "Ctrl + .";
        readonly macOS: "⌘ + .";
    };
    readonly SUBSCRIPT: {
        readonly other: "Ctrl + ,";
        readonly macOS: "⌘ + ,";
    };
    readonly LINK: {
        readonly other: "Ctrl + K";
        readonly macOS: "⌘ + K";
    };
    readonly BR: "⇧ + ↵";
    readonly HORIZONTAL_RULE: "- - -";
    readonly undo: {
        readonly other: "Ctrl + Z";
        readonly macOS: "⌘ + Z";
    };
    readonly redo: {
        readonly other: "Ctrl + ⇧ + Z";
        readonly macOS: "⌘ + ⇧ + Z";
    };
};
type KeyboardShortcutType = keyof typeof KEYBOARD_SHORTCUTS;

export { BLOCK_TYPE, BlockToolbar, BlockToolbarProps, BlockType, BlockTypeControl, BoolControl, CommandCategory, CommandControl, CommandPalette, CommandPaletteProps, Control, ControlComponentProps, ControlControl, _default as DraftUtils, DraftailEditor, DraftailEditorProps, DraftailEditorState, ENTITY_TYPE, EntityBlockProps, EntityDecoratorProps, EntitySourceProps, EntityType, EntityTypeControl, FloatingToolbar, FloatingToolbarProps, INLINE_STYLE, Icon, IconProp, IconProps, InlineStyle, InlineStyleControl, InlineToolbar, InlineToolbarProps, KeyboardShortcutType, KnownFormatType, LegacyControlControl, MetaToolbar, MetaToolbarProps, TextDirectionality, Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarProps, Tooltip, TooltipPlacement, TooltipPosition, TooltipProps };