roosterjs/dist/rooster-react.d.ts

A simple facade for all roosterjs code

/// <reference path="./rooster" />
/// <reference types="react" />

import * as FluentUIReact from '@fluentui/react/dist/react';

// Type definitions for roosterjs (Version 9.0.2)
// Generated by dts tool from roosterjs
// Project: https://github.com/Microsoft/roosterjs

declare namespace roosterjsReact {
    /**
 * Represents a localized string map from the string key to the localized string or a function returns localized string
 */
type LocalizedStrings<T extends string, V extends string = string> = {
    [key in T]?: V | (() => V);
};

    /**
 * Localized string key for OK button
 */
type OkButtonStringKey = 'buttonNameOK';

    /**
 * Localized string key for Cancel button
 */
type CancelButtonStringKey = 'buttonNameCancel';

    /**
 * Localized string key for Cancel button menu splitter.
 * No need to localize this one as it will be replaced with a horizontal line
 */
type MenuItemSplitterKey0 = '-';

    /**
 * A set of  UI Utilities to help render additional UI element from a plugin
 */
interface UIUtilities {
    /**
     * Render additional react component from a plugin, with correlated theme and window context of Rooster
     * @param element The UI element (JSX object) to render
     * @returns A disposer function to help unmount this element
     */
    renderComponent(element: JSX.Element): () => void;
    /**
     * Check if editor is rendered in Right-to-left mode
     */
    isRightToLeft(): boolean;
}

    /**
 * A sub interface of roosterjs.EditorPlugin to provide additional functionalities for rendering react component from the plugin
 */
interface ReactEditorPlugin extends roosterjs.EditorPlugin  {
    /**
     * Set the UI utilities objects to this plugin to help render additional UI elements
     * @param uiUtilities The UI utilities object to set
     */
    setUIUtilities(uiUtilities: UIUtilities): void;
}

    /**
 * Create the UI Utilities object for plugins to render additional react components
 * @param container Container DIV of editor
 * @param theme Current theme used by editor
 * @returns A UIUtilities object
 */
function createUIUtilities(container: HTMLDivElement, theme: FluentUIReact.PartialTheme): UIUtilities;

    /**
 * Get a localized string
 * @param strings The LocalizedStrings map
 * @param key Key of the string
 * @param defaultString Default unlocalized string, will be used if strings is not specified or the give key doesn't exist in strings
 * @returns A localized string from the string map, or defaultString
 */
function getLocalizedString<T extends string, R extends string | null | undefined>(strings: LocalizedStrings<T> | undefined, key: T, defaultString: R): string | R;

    /**
 * Properties for Rooster react component
 */
interface RoosterProps extends roosterjs.EditorOptions, React.HTMLAttributes<HTMLDivElement> {
    /**
     * Creator function used for creating the instance of roosterjs editor.
     * Use this callback when you have your own sub class of roosterjs Editor or force trigging a reset of editor
     */
    editorCreator?: (div: HTMLDivElement, options: roosterjs.EditorOptions) => roosterjs.IEditor;
    /**
     * Whether editor should get focus once it is created
     * Changing of this value after editor is created will not reset editor
     */
    focusOnInit?: boolean;
}

    /**
 * Main component of react wrapper for roosterjs
 * @param props Properties of this component
 * @returns The react component
 */
function Rooster(props: RoosterProps): JSX.Element;

    /**
 * Represents a plugin to connect format ribbon component and the editor
 */
interface RibbonPlugin extends ReactEditorPlugin  {
    /**
     * Register a callback to be invoked when format state of editor is changed, returns a disposer function.
     */
    registerFormatChangedCallback: (callback: (formatState: roosterjs.ContentModelFormatState) => void) => () => void;
    /**
     * When user clicks on a button, call this method to let the plugin to handle this click event
     * @param button The button that is clicked
     * @param key Key of child menu item that is clicked if any
     * @param strings The localized string map for this button
     */
    onButtonClick: <T extends string>(button: RibbonButton<T>, key: T, strings?: LocalizedStrings<T>) => void;
    /**
     * Enter live preview state (shadow edit) of editor if there is a non-collapsed selection
     * @param button The button that triggered this action
     * @param key Key of the hovered button sub item
     * @param strings The localized string map for this button
     */
    startLivePreview: <T extends string>(button: RibbonButton<T>, key: T, strings?: LocalizedStrings<T>) => void;
    /**
     * Leave live preview state (shadow edit) of editor
     */
    stopLivePreview: () => void;
}

    /**
 * Represents a button on format ribbon
 */
interface RibbonButton<T extends string> {
    /**
     * key of this button, needs to be unique
     */
    key: T;
    /**
     * Name of button icon. See https://developer.microsoft.com/en-us/fluentui#/styles/web/icons for all icons
     */
    iconName: string;
    /**
     * True if we need to flip the icon when render in Right-to-left page
     */
    flipWhenRtl?: boolean;
    /**
     * Text of the button. This text is not localized. To show a localized text, pass a dictionary to Ribbon component via RibbonProps.strings.
     */
    unlocalizedText: string;
    /**
     * Click handler of this button.
     * @param editor the editor instance
     * @param key key of the button that is clicked
     * @param strings localized strings used by any UI element of this click handler
     * @param uiUtilities a utilities object to help render addition UI elements
     */
    onClick: (editor: roosterjs.IEditor, key: T, strings: LocalizedStrings<T> | undefined, uiUtilities: UIUtilities) => void;
    /**
     * Get if the current button should be checked
     * @param formatState The current formatState of editor
     * @returns True to show the button in a checked state, otherwise false
     * @default False When not specified, it is treated as always returning false
     */
    isChecked?: (formatState: roosterjs.ContentModelFormatState) => boolean;
    /**
     * Get if the current button should be disabled
     * @param formatState The current formatState of editor
     * @returns True to show the button in a disabled state, otherwise false
     * @default False When not specified, it is treated as always returning false
     */
    isDisabled?: (formatState: roosterjs.ContentModelFormatState) => boolean;
    /**
     * A drop down menu of this button. When set this value, the button will has a "v" icon to let user
     * know it will open a drop down menu. And the onClick handler will only be triggered when user click
     * a menu item of the drop down.
     */
    dropDownMenu?: RibbonButtonDropDown;
    /**
     * Use this property to pass in Fluent UI CommandBar property directly. It will overwrite the values of other conflict properties
     *
     * Do not use FluentUIReact.ICommandBarItemProps.subMenuProps here since it will be overwritten.
     * If need, specify its value using RibbonButton.dropDownMenu.commandBarSubMenuProperties.
     */
    commandBarProperties?: Partial<FluentUIReact.ICommandBarItemProps>;
}

    /**
 * Represent a drop down menu of a ribbon button
 */
interface RibbonButtonDropDown {
    /**
     * A key-value map for child items.
     * When click on a child item, onClick handler will be triggered with the key of the clicked child item passed in as the second parameter
     */
    items: Record<string, string>;
    /**
     * CSS class name for drop down menu item
     */
    itemClassName?: string;
    /**
     * Whether live preview feature is enabled for this plugin.
     * When live preview is enabled, hovering on a sub item will show the format result immediately in editor.
     * This option needs dropDownItems to have values
     */
    allowLivePreview?: boolean;
    /**
     * Custom render of drop down item
     * @param item This menu item
     * @param onClick click handler of this menu item
     */
    itemRender?: (item: FluentUIReact.IContextualMenuItem, onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: FluentUIReact.IContextualMenuItem) => void) => React.ReactNode;
    /**
     * Get the key of current selected item
     * @param formatState The current formatState of editor
     * @returns the key of selected item, it needs to be the same with the key in dropDownItems
     */
    getSelectedItemKey?: (formatState: roosterjs.ContentModelFormatState) => string | null;
    /**
     * Use this property to pass in Fluent UI ContextMenu property directly. It will overwrite the values of other conflict properties
     */ commandBarSubMenuProperties?: Partial<FluentUIReact.IContextualMenuProps>;
}

    /**
 * Properties of Ribbon component
 */
interface RibbonProps<T extends string> extends Partial<FluentUIReact.ICommandBarProps> {
    /**
     * The ribbon plugin used for connect editor and the ribbon
     */
    plugin: RibbonPlugin;
    /**
     * Buttons in this ribbon
     */
    buttons: RibbonButton<T>[];
    /**
     * A dictionary of localized strings for all buttons.
     * Key of the dictionary is the key of each button, value will be the string or a function to return the string
     */
    strings?: LocalizedStrings<T>;
}

    /**
 * Key of localized strings of Bold button
 */
type BoldButtonStringKey = 'buttonNameBold';

    /**
 * Key of localized strings of Italic button
 */
type ItalicButtonStringKey = 'buttonNameItalic';

    /**
 * Key of localized strings of Underline button
 */
type UnderlineButtonStringKey = 'buttonNameUnderline';

    /**
 * Key of localized strings of Font button
 */
type FontButtonStringKey = 'buttonNameFont';

    /**
 * Key of localized strings of Font size button
 */
type FontSizeButtonStringKey = 'buttonNameFontSize';

    /**
 * Key of localized strings of Increase font size button
 */
type IncreaseFontSizeButtonStringKey = 'buttonNameIncreaseFontSize';

    /**
 * Key of localized strings of Decrease font size button
 */
type DecreaseFontSizeButtonStringKey = 'buttonNameDecreaseFontSize';

    /**
 * Key of localized strings of Text color button
 */
type TextColorButtonStringKey = 'buttonNameTextColor' | TextColorKeys;

    /**
 * Key of localized strings of Background color button
 */
type BackgroundColorButtonStringKey = 'buttonNameBackgroundColor' | BackgroundColorKeys;

    /**
 * Key of localized strings of Bulleted list button
 */
type BulletedListButtonStringKey = 'buttonNameBulletedList';

    /**
 * Key of localized strings of Numbered list button
 */
type NumberedListButtonStringKey = 'buttonNameNumberedList';

    /**
 * Key of localized strings of More commands (overflow) button
 */
type MoreCommandsButtonStringKey = 'buttonNameMoreCommands';

    /**
 * Key of localized strings of Decrease indent size button
 */
type DecreaseIndentButtonStringKey = 'buttonNameDecreaseIndent';

    /**
 * Key of localized strings of Increase indent size button
 */
type IncreaseIndentButtonStringKey = 'buttonNameIncreaseIndent';

    /**
 * Key of localized strings of Quote button
 */
type QuoteButtonStringKey = 'buttonNameQuote';

    /**
 * Key of localized strings of Align left button
 */
type AlignLeftButtonStringKey = 'buttonNameAlignLeft';

    /**
 * Key of localized strings of Align center button
 */
type AlignCenterButtonStringKey = 'buttonNameAlignCenter';

    /**
 * Key of localized strings of Align right button
 */
type AlignRightButtonStringKey = 'buttonNameAlignRight';

    /**
 * Key of localized strings of Align justify button
 */
type AlignJustifyButtonStringKey = 'buttonNameAlignJustify';

    /**
 * Key of localized strings of Insert link button
 */
type InsertLinkButtonStringKey = 'buttonNameInsertLink' | 'insertLinkTitle' | 'insertLinkDialogUrl' | 'insertLinkDialogDisplayAs' | OkButtonStringKey | CancelButtonStringKey;

    /**
 * Key of localized strings of Remove link button
 */
type RemoveLinkButtonStringKey = 'buttonNameRemoveLink';

    /**
 * Key of localized strings of Insert table button
 */
type InsertTableButtonStringKey = 'buttonNameInsertTable' | 'insertTablePane';

    /**
 * Key of localized strings of Insert image button
 */
type InsertImageButtonStringKey = 'buttonNameInsertImage';

    /**
 * Key of localized strings of Superscript button
 */
type SuperscriptButtonStringKey = 'buttonNameSuperscript';

    /**
 * Key of localized strings of Subscript button
 */
type SubscriptButtonStringKey = 'buttonNameSubscript';

    /**
 * Key of localized strings of Strikethrough button
 */
type StrikethroughButtonStringKey = 'buttonNameStrikethrough';

    /**
 * Key of localized strings of Heading button
 */
type HeadingButtonStringKey = 'buttonNameHeading' | 'buttonNameHeading1' | 'buttonNameHeading2' | 'buttonNameHeading3' | 'buttonNameHeading4' | 'buttonNameHeading5' | 'buttonNameHeading6' | 'buttonNameNoHeading' | MenuItemSplitterKey0;

    /**
 * @deprecated Use HeadingButtonStringKey instead
 */
type HeaderButtonStringKey = 'buttonNameHeader' | 'buttonNameHeader1' | 'buttonNameHeader2' | 'buttonNameHeader3' | 'buttonNameHeader4' | 'buttonNameHeader5' | 'buttonNameHeader6' | 'buttonNameNoHeader' | HeadingButtonStringKey;

    /**
 * Key of localized strings of Code button
 */
type CodeButtonStringKey = 'buttonNameCode';

    /**
 * Key of localized strings of Left to right button
 */
type LtrButtonStringKey = 'buttonNameLtr';

    /**
 * Key of localized strings of Right to left button
 */
type RtlButtonStringKey = 'buttonNameRtl';

    /**
 * Key of localized strings of Undo button
 */
type UndoButtonStringKey = 'buttonNameUndo';

    /**
 * Key of localized strings of Redo button
 */
type RedoButtonStringKey = 'buttonNameRedo';

    /**
 * Key of localized strings of Clear format button
 */
type ClearFormatButtonStringKey = 'buttonNameClearFormat';

    /**
 * A public type for localized string keys of all buttons
 */
type AllButtonStringKeys = AlignLeftButtonStringKey | AlignCenterButtonStringKey | AlignRightButtonStringKey | AlignJustifyButtonStringKey | BackgroundColorButtonStringKey | BoldButtonStringKey | BulletedListButtonStringKey | ClearFormatButtonStringKey | CodeButtonStringKey | DecreaseFontSizeButtonStringKey | DecreaseIndentButtonStringKey | FontButtonStringKey | FontSizeButtonStringKey | HeaderButtonStringKey | HeadingButtonStringKey | IncreaseFontSizeButtonStringKey | IncreaseIndentButtonStringKey | InsertImageButtonStringKey | InsertLinkButtonStringKey | InsertTableButtonStringKey | ItalicButtonStringKey | LtrButtonStringKey | MoreCommandsButtonStringKey | NumberedListButtonStringKey | QuoteButtonStringKey | RedoButtonStringKey | RemoveLinkButtonStringKey | RtlButtonStringKey | StrikethroughButtonStringKey | SubscriptButtonStringKey | SuperscriptButtonStringKey | TextColorButtonStringKey | UnderlineButtonStringKey | UndoButtonStringKey | CellShadeButtonStringKey;

    /**
 * @deprecated
 * Key of localized strings of Cell shade button
 */
type CellShadeButtonStringKey = 'buttonNameCellShade' | BackgroundColorKeys;

    /**
 * The format ribbon component of roosterjs-react
 * @param props Properties of format ribbon component
 * @returns The format ribbon component
 */
function Ribbon<T extends string>(props: RibbonProps<T>): JSX.Element;

    /**
 * Create a new instance of RibbonPlugin object
 * @param delayUpdateTime The time to wait before refresh the button when user do some editing operation in editor
 */
function createRibbonPlugin(delayUpdateTime?: number): RibbonPlugin;

    /**
 * "Undo" button on the format ribbon
 */
const redoButton: RibbonButton<RedoButtonStringKey>;

    /**
 * "Undo" button on the format ribbon
 */
const undoButton: RibbonButton<UndoButtonStringKey>;

    /**
 * "Align center" button on the format ribbon
 */
const alignCenterButton: RibbonButton<AlignCenterButtonStringKey>;

    /**
 * "Align justify" button on the format ribbon
 */
const alignJustifyButton: RibbonButton<'buttonNameAlignJustify'>;

    /**
 * "Align left" button on the format ribbon
 */
const alignLeftButton: RibbonButton<AlignLeftButtonStringKey>;

    /**
 * "Align right" button on the format ribbon
 */
const alignRightButton: RibbonButton<AlignRightButtonStringKey>;

    /**
 * "Background color" button on the format ribbon
 */
const backgroundColorButton: RibbonButton<BackgroundColorButtonStringKey>;

    /**
 * "Block quote" button on the format ribbon
 */
const blockQuoteButton: RibbonButton<QuoteButtonStringKey>;

    /**
 * "Bold" button on the format ribbon
 */
const boldButton: RibbonButton<BoldButtonStringKey>;

    /**
 * "Bulleted list" button on the format ribbon
 */
const bulletedListButton: RibbonButton<BulletedListButtonStringKey>;

    /**
 * "Clear format" button on the format ribbon
 */
const clearFormatButton: RibbonButton<ClearFormatButtonStringKey>;

    /**
 * "Code" button on the format ribbon
 */
const codeButton: RibbonButton<CodeButtonStringKey>;

    /**
 * "Decrease font size" button on the format ribbon
 */
const decreaseFontSizeButton: RibbonButton<DecreaseFontSizeButtonStringKey>;

    /**
 * "Decrease indent" button on the format ribbon
 */
const decreaseIndentButton: RibbonButton<DecreaseIndentButtonStringKey>;

    /**
 * "Font" button on the format ribbon
 */
const fontButton: RibbonButton<FontButtonStringKey>;

    /**
 * "Font Size" button on the format ribbon
 */
const fontSizeButton: RibbonButton<FontSizeButtonStringKey>;

    /**
 * "Increase font size" button on the format ribbon
 */
const increaseFontSizeButton: RibbonButton<IncreaseFontSizeButtonStringKey>;

    /**
 * "Increase indent" button on the format ribbon
 */
const increaseIndentButton: RibbonButton<IncreaseIndentButtonStringKey>;

    /**
 * "Insert image" button on the format ribbon
 */
const insertImageButton: RibbonButton<InsertImageButtonStringKey>;

    /**
 * "Insert link" button on the format ribbon
 */
const insertLinkButton: RibbonButton<InsertLinkButtonStringKey>;

    /**
 * "Insert table" button on the format ribbon
 */
const insertTableButton: RibbonButton<InsertTableButtonStringKey>;

    /**
 * "Italic" button on the format ribbon
 */
const italicButton: RibbonButton<ItalicButtonStringKey>;

    /**
 * "Left to right" button on the format ribbon
 */
const ltrButton: RibbonButton<LtrButtonStringKey>;

    /**
 * "Numbering list" button on the format ribbon
 */
const numberedListButton: RibbonButton<NumberedListButtonStringKey>;

    /**
 * "Remove link" button on the format ribbon
 */
const removeLinkButton: RibbonButton<RemoveLinkButtonStringKey>;

    /**
 * "Right to left" button on the format ribbon
 */
const rtlButton: RibbonButton<RtlButtonStringKey>;

    /**
 * "Set header level" button on the format ribbon
 */
const setHeadingLevelButton: RibbonButton<HeadingButtonStringKey>;

    /**
 * "Strikethrough" button on the format ribbon
 */
const strikethroughButton: RibbonButton<StrikethroughButtonStringKey>;

    /**
 * "Subscript" button on the format ribbon
 */
const subscriptButton: RibbonButton<SubscriptButtonStringKey>;

    /**
 * "Superscript" button on the format ribbon
 */
const superscriptButton: RibbonButton<SuperscriptButtonStringKey>;

    /**
 * "Text color" button on the format ribbon
 */
const textColorButton: RibbonButton<TextColorButtonStringKey>;

    /**
 * "Underline" button on the format ribbon
 */
const underlineButton: RibbonButton<UnderlineButtonStringKey>;

    /**
 * Create a new instance of ContextMenu plugin with context menu implementation based on FluentUI.
 */
function createContextMenuPlugin(): roosterjs.ContextMenuPluginBase<FluentUIReact.IContextualMenuItem>;

    /**
 * Create a new instance of ContextMenuProviderImpl class
 * @param menuName Name of this group of menus
 * @param items Menu items that will be show
 * @param strings Localized strings of these menu items
 * @param shouldAddMenuItems A general checker to decide if we should add this group of menu items
 */
function createContextMenuProvider<TString extends string, TContext>(menuName: string, items: ContextMenuItem<TString, TContext>[], strings?: LocalizedStrings<TString>, shouldAddMenuItems?: (editor: roosterjs.IEditor, node: Node) => boolean, context?: TContext): roosterjs.EditorPlugin;

    /**
 * Create a new instance of ContextMenuProvider to support list number editing functionalities in context menu
 * @returns A new ContextMenuProvider
 */
function createListEditMenuProvider(strings?: LocalizedStrings<ListNumberMenuItemStringKey>): roosterjs.EditorPlugin;

    /**
 * Create a new instance of ContextMenuProvider to support image editing functionalities in context menu
 * @returns A new ContextMenuProvider
 */
function createImageEditMenuProvider(imageEditor?: roosterjs.ImageEditor, strings?: LocalizedStrings<ImageEditMenuItemStringKey>): roosterjs.EditorPlugin;

    /**
 * Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
 * @returns A new ContextMenuProvider
 */
function createTableEditMenuProvider(strings?: LocalizedStrings<TableEditMenuItemStringKey>): roosterjs.EditorPlugin;

    /**
 * Represent a context menu item
 */
interface ContextMenuItem<TString extends string, TContext = never> {
    /**
     * key of this button, needs to be unique
     */
    key: TString;
    /**
     * Text of the button. This text is not localized. To show a localized text, pass a dictionary to Ribbon component via RibbonProps.strings.
     */
    unlocalizedText: string;
    /**
     * Click event handler
     * @param key Key of the menu item that is clicked
     * @param editor The editor object that triggers this event
     * @param targetNode The node that user is clicking onto
     * @param strings The strings object used by getLocalizedString() function
     * @param uiUtilities UI Utilities to help render additional react component from this click event
     * @param context A context object that passed in from context menu provider, can be anything
     */
    onClick: (key: TString, editor: roosterjs.IEditor, targetNode: Node, strings: LocalizedStrings<TString> | undefined, uiUtilities: UIUtilities, context?: TContext) => void;
    /**
     * A callback function to check whether this menu item should show now
     * @param editor The editor object that triggers this event
     * @param targetNode The node that user is clicking onto
     * @param context A context object that passed in from context menu provider, can be anything
     */
    shouldShow?: (editor: roosterjs.IEditor, targetNode: Node, context?: TContext) => boolean;
    /**
     * A callback function to verify which subitem ID should have a checkmark
     * @param editor The editor object that triggers this event
     * @param targetNode The node that user is clicking onto
     * @returns ID to be shown as selected, null for none
     */
    getSelectedId?: (editor: roosterjs.IEditor, targetNode: Node) => TString | null;
    /**
     * A key-value map for sub menu items, key is the key of menu item, value is unlocalized string
     * When click on a child item, onClick handler will be triggered with the key of the clicked child item passed in as the second parameter
     */
    subItems?: {
        [key in TString]?: string;
    };
    /**
     * Custom render of drop down item
     * @param item This menu item
     * @param onClick click handler of this menu item
     */
    itemRender?: (item: FluentUIReact.IContextualMenuItem, onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: FluentUIReact.IContextualMenuItem) => void) => React.ReactNode;
    /**
     * CSS class name for drop down menu item
     */
    itemClassName?: string;
    /**
     * Icon props for the context menu item
     */
    iconProps?: FluentUIReact.IIconProps;
    /**
     * Use this property to pass in Fluent UI ContextMenu property directly. It will overwrite the values of other conflict properties
     */
    commandBarSubMenuProperties?: Partial<FluentUIReact.IContextualMenuProps>;
}

    /**
 * Key of localized strings of List Number menu items and its dialog.
 * Including:
 * - Menu item "Set numbering value"
 * - Menu item "Restart at 1"
 * - Dialog text "Set value to"
 * - Ok button
 * - Cancel button
 */
type ListNumberMenuItemStringKey = 'menuNameListNumberEdit' | 'menuNameListNumberReset' | 'dialogTextSetListNumber' | OkButtonStringKey | CancelButtonStringKey;

    /**
 * Key of localized strings of Image Alt Text menu item.
 * Including:
 * - Menu item "Add alternate text"
 * - Menu item "Size" and sub menus"
 * - Menu item "Crop image"
 * - Menu item "Remove image"
 * - Ok button
 * - Cancel button
 */
type ImageEditMenuItemStringKey = 'menuNameImageAltText' | 'menuNameImageResize' | 'menuNameImageCrop' | 'menuNameImageRotate' | 'menuNameImageRemove' | 'menuNameImageFlip' | 'menuNameImageSizeBestFit' | 'menuNameImageSizeSmall' | 'menuNameImageSizeMedium' | 'menuNameImageSizeOriginal' | 'menuNameImageRotateLeft' | 'menuNameImageRotateRight' | 'menuNameImageRotateFlipHorizontally' | 'menuNameImageRotateFlipVertically' | 'menuNameImageCopy' | 'menuNameImageCut' | OkButtonStringKey | CancelButtonStringKey;

    /**
 * Key of localized strings of Table Edit Insert menu item.
 */
type TableEditInsertMenuItemStringKey = 'menuNameTableInsert' | 'menuNameTableInsertAbove' | 'menuNameTableInsertBelow' | 'menuNameTableInsertLeft' | 'menuNameTableInsertRight';

    /**
 * Key of localized strings of Table Edit Delete menu item.
 */
type TableEditDeleteMenuItemStringKey = 'menuNameTableDelete' | 'menuNameTableDeleteTable' | 'menuNameTableDeleteColumn' | 'menuNameTableDeleteRow';

    /**
 * Key of localized strings of Table Edit Merge menu item.
 */
type TableEditMergeMenuItemStringKey = 'menuNameTableMerge' | 'menuNameTableMergeAbove' | 'menuNameTableMergeBelow' | 'menuNameTableMergeLeft' | 'menuNameTableMergeRight' | 'menuNameTableMergeCells' | MenuItemSplitterKey0;

    /**
 * Key of localized strings of Table Edit Split menu item.
 */
type TableEditSplitMenuItemStringKey = 'menuNameTableSplit' | 'menuNameTableSplitHorizontally' | 'menuNameTableSplitVertically';

    /**
 * Key of localized strings of Table Edit Align menu item.
 */
type TableEditAlignMenuItemStringKey = 'menuNameTableAlign' | 'menuNameTableAlignLeft' | 'menuNameTableAlignCenter' | 'menuNameTableAlignRight' | 'menuNameTableAlignTop' | 'menuNameTableAlignMiddle' | 'menuNameTableAlignBottom' | MenuItemSplitterKey0;

    /**
 * Key of localized strings of Table Edit Cell Shade menu item.
 */
type TableEditShadeMenuItemStringKey = 'menuNameTableCellShade' | BackgroundColorKeys;

    /**
 * Key of localized strings of Table Edit menu item.
 * Including:
 * - Menu item "Insert"
 * - Menu item "Delete"
 * - Menu item "Merge"
 * - Menu item "Split"
 * - Menu item "Align cell"
 */
type TableEditMenuItemStringKey = TableEditInsertMenuItemStringKey | TableEditDeleteMenuItemStringKey | TableEditMergeMenuItemStringKey | TableEditSplitMenuItemStringKey | TableEditAlignMenuItemStringKey | TableEditShadeMenuItemStringKey | TableEditAlignTableMenuItemStringKey;

    /**
 * Key of localized strings of Table Edit Align table menu item.
 */
type TableEditAlignTableMenuItemStringKey = 'menuNameTableAlignTable' | 'menuNameTableAlignTableLeft' | 'menuNameTableAlignTableCenter' | 'menuNameTableAlignTableRight';

    /**
 * keys for Paste Option buttons
 */
type PasteOptionButtonKeys = 'pasteOptionPasteAsIs' | 'pasteOptionPasteText' | 'pasteOptionMergeFormat' | 'pasteOptionPasteAsImage';

    /**
 * Localized string keys for Paste Option buttons and its UI component
 */
type PasteOptionStringKeys = PasteOptionButtonKeys | 'pasteOptionPaneText';

    /**
 * Create a new instance of PasteOption plugin to show an option pane when paste, so that user can choose
 * an option to change the paste result, including:
 * - Paste as is
 * - Paste as text
 * - Paste and merge format
 * @param strings Localized string for this plugin
 * @returns A paste option plugin
 */
function createPasteOptionPlugin(strings?: LocalizedStrings<PasteOptionStringKeys>): ReactEditorPlugin;

    /**
 * Localized string keys for background colors
 */
type BackgroundColorKeys = 'backgroundColorCyan' | 'backgroundColorGreen' | 'backgroundColorYellow' | 'backgroundColorOrange' | 'backgroundColorRed' | 'backgroundColorMagenta' | 'backgroundColorLightCyan' | 'backgroundColorLightGreen' | 'backgroundColorLightYellow' | 'backgroundColorLightOrange' | 'backgroundColorLightRed' | 'backgroundColorLightMagenta' | 'backgroundColorWhite' | 'backgroundColorLightGray' | 'backgroundColorGray' | 'backgroundColorDarkGray' | 'backgroundColorDarkerGray' | 'backgroundColorBlack';

    /**
 * Localized string keys for text colors
 */
type TextColorKeys = 'textColorLightBlue' | 'textColorLightGreen' | 'textColorLightYellow' | 'textColorLightOrange' | 'textColorLightRed' | 'textColorLightPurple' | 'textColorBlue' | 'textColorGreen' | 'textColorYellow' | 'textColorOrange' | 'textColorRed' | 'textColorPurple' | 'textColorDarkBlue' | 'textColorDarkGreen' | 'textColorDarkYellow' | 'textColorDarkOrange' | 'textColorDarkRed' | 'textColorDarkPurple' | 'textColorDarkerBlue' | 'textColorDarkerGreen' | 'textColorDarkerYellow' | 'textColorDarkerOrange' | 'textColorDarkerRed' | 'textColorDarkerPurple' | 'textColorWhite' | 'textColorLightGray' | 'textColorGray' | 'textColorDarkGray' | 'textColorDarkerGray' | 'textColorBlack';

    /**
 * Get mode independent color value of background color from the given color key
 * @param key The key to get color from
 * @returns A model independent color value of the given key
 */
function getBackgroundColorValue(key: BackgroundColorKeys): roosterjs.Colors;

    /**
 * Get mode independent color value of text color from the given color key
 * @param key The key to get color from
 * @returns A model independent color value of the given key
 */
function getTextColorValue(key: TextColorKeys): roosterjs.Colors;

    /**
 * Get a drop down data object of color picker used by drop down button
 * @param colorSet The set of color, text or background
 * @returns The color picker drop down for ribbon button
 */
function getColorPickerDropDown(colorSet: 'text' | 'background'): RibbonButtonDropDown;

    /**
 * Create a new instance of Emoji plugin with FluentUI components.
 */
function createEmojiPlugin(searchBoxStrings?: LocalizedStrings<EmojiStringKeys>): ReactEditorPlugin;

    /**
 * Localized string keys for Emoji UI component
 */
type EmojiStringKeys = 'emojiSearchPlaceholder' | 'emojiSearchInputAriaLabel';

    /**
 * Show a dialog with input items
 * @param uiUtilities UI utilities to help render the dialog
 * @param dialogTitleKey Localized string key for title of this dialog
 * @param unlocalizedTitle Unlocalized title string of this dialog. It will be used if a valid localized string is not found using dialogTitleKey
 * @param items Input items in this dialog
 * @param strings Localized strings
 * @param onChange An optional callback that will be invoked when input item value is changed
 */
function showInputDialog<Strings extends string, ItemNames extends string>(uiUtilities: UIUtilities, dialogTitleKey: Strings, unlocalizedTitle: string, items: Record<ItemNames, DialogItem<Strings>>, strings?: LocalizedStrings<Strings | OkButtonStringKey | CancelButtonStringKey>, onChange?: (changedItemName: ItemNames, newValue: string, currentValues: Record<ItemNames, string>) => Record<ItemNames, string> | null, rows?: number): Promise<Record<ItemNames, string> | null>;

    /**
 * Item of input dialog
 */
interface DialogItem<Strings extends string> {
    /**
     * Localized string key of the input item name
     */
    labelKey: Strings | null;
    /**
     * Unlocalized string for the label text. This will be used when a valid localized string is not found using the given string key
     */
    unlocalizedLabel: string | null;
    /**
     * Initial value of this item
     */
    initValue: string;
    /**
     * Whether focus should be put into this item automatically
     */
    autoFocus?: boolean;
}

}