import * as Immutable from "immutable"; import * as React from "react"; type SyntheticClipboardEvent = React.ClipboardEvent<{}>; type SyntheticKeyboardEvent = React.KeyboardEvent<{}>; type SyntheticEvent = React.SyntheticEvent<{}>; export as namespace Draft; declare namespace Draft { namespace Component { namespace Base { import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand; import DraftBlockType = Draft.Model.Constants.DraftBlockType; import DraftDragType = Draft.Model.Constants.DraftDragType; import DraftHandleValue = Draft.Model.Constants.DraftHandleValue; import EditorState = Draft.Model.ImmutableData.EditorState; import ContentBlock = Draft.Model.ImmutableData.ContentBlock; import SelectionState = Draft.Model.ImmutableData.SelectionState; import DraftInlineStyle = Draft.Model.ImmutableData.DraftInlineStyle; import DraftBlockRenderConfig = Draft.Model.ImmutableData.DraftBlockRenderConfig; type DraftBlockRenderMap = Immutable.Map; type DraftStyleMap = { [styleName: string]: React.CSSProperties; }; type EditorCommand = DraftEditorCommand | string; /** * `DraftEditor` is the root editor component. It composes a `contentEditable` * div, and provides a wide variety of useful function props for managing the * state of the editor. See `DraftEditorProps` for details. */ class DraftEditor extends React.Component { editor: HTMLElement | null | undefined; editorContainer: HTMLElement | null | undefined; getEditorKey(): string; /** Force focus back onto the editor node. */ focus(): void; /** Remove focus from the editor node. */ blur(): void; } /** * The two most critical props are `editorState` and `onChange`. * * The `editorState` prop defines the entire state of the editor, while the * `onChange` prop is the method in which all state changes are propagated * upward to higher-level components. * * These props are analagous to `value` and `onChange` in controlled React * text inputs. */ export interface DraftEditorProps { editorState: EditorState; onChange(editorState: EditorState): void; placeholder?: string | undefined; /** * Specify whether text alignment should be forced in a direction * regardless of input characters. */ textAlignment?: DraftTextAlignment | undefined; /** * Specify whether text directionality should be forced in a direction * regardless of input characters. */ textDirectionality?: DraftTextDirectionality | undefined; /** * For a given `ContentBlock` object, return an object that specifies * a custom block component and/or props. If no object is returned, * the default `TextEditorBlock` is used. */ blockRendererFn?(block: ContentBlock): any; /** * Provide a map of block rendering configurations. Each block type maps to * an element tag and an optional react element wrapper. This configuration * is used for both rendering and paste processing. */ blockRenderMap?: DraftBlockRenderMap | undefined; /** * Function that allows to define class names to apply to the given block when it is rendered. */ blockStyleFn?(block: ContentBlock): string; /** * Provide a map of inline style names corresponding to CSS style objects * that will be rendered for matching ranges. */ customStyleMap?: DraftStyleMap | undefined; /** * Define a function to transform inline styles to CSS objects * that are applied to spans of text. */ customStyleFn?: ((style: DraftInlineStyle, block: ContentBlock) => React.CSSProperties) | undefined; /** * A function that accepts a synthetic key event and returns * the matching DraftEditorCommand constant, or null if no command should * be invoked. */ keyBindingFn?(e: SyntheticKeyboardEvent): EditorCommand | null; /** * Set whether the `DraftEditor` component should be editable. Useful for * temporarily disabling edit behavior or allowing `DraftEditor` rendering * to be used for consumption purposes. */ readOnly?: boolean | undefined; /** * Note: spellcheck is always disabled for IE. If enabled in Safari, OSX * autocorrect is enabled as well. */ spellCheck?: boolean | undefined; /** * When the Editor loses focus (blurs) text selections are cleared * by default to mimic