roosterjs 9.5.0 → 9.6.0

package/dist/rooster-react.d.ts

@@ -0,0 +1,854 @@
+/// <reference path="./rooster" />
+/// <reference types="react" />
+
+import * as FluentUIReact from '@fluentui/react/dist/react';
+
+// Type definitions for roosterjs (Version 9.0.0)
+// 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;
+}
+
+}