@types/draft-js

Version 0.11.18
Published 8 months ago
59.3 kB
2 dependencies
MIT license

Install

npm i @types/draft-js

yarn add @types/draft-js

pnpm add @types/draft-js

Overview

TypeScript definitions for draft-js

Index

Namespaces

Draft
Draft.Component
Draft.Component.Base
Draft.Component.Components
- DraftEditorBlock
Draft.Component.Selection
- FakeClientRect
- getVisibleSelectionRect()
Draft.Component.Utils
- getDefaultKeyBinding()
- KeyBindingUtil
Draft.Model
Draft.Model.Constants
Draft.Model.Decorators
Draft.Model.Encoding
Draft.Model.Entity
- DraftEntity
- DraftEntityInstance
Draft.Model.ImmutableData
Draft.Model.Keys
- generateRandomKey()
Draft.Model.Modifier

Namespaces

namespace Draft

namespace Draft {}

namespace Draft.Component

namespace Draft.Component {}

namespace Draft.Component.Base

namespace Draft.Component.Base {}

class DraftEditor

class DraftEditor extends React.Component<DraftEditorProps, {}> {}

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.

property editor

editor: HTMLElement;

property editorContainer

editorContainer: HTMLElement;

method blur

blur: () => void;

Remove focus from the editor node.

method focus

focus: () => void;

Force focus back onto the editor node.

method getEditorKey

getEditorKey: () => string;

interface DraftEditorProps

interface DraftEditorProps {}

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.

property ariaActiveDescendantID

ariaActiveDescendantID?: string | undefined;

property ariaAutoComplete

ariaAutoComplete?: string | undefined;

property ariaControls

ariaControls?: string | undefined;

property ariaDescribedBy

ariaDescribedBy?: string | undefined;

property ariaExpanded

ariaExpanded?: boolean | undefined;

property ariaLabel

ariaLabel?: string | undefined;

property ariaLabelledBy

ariaLabelledBy?: string | undefined;

property ariaMultiline

ariaMultiline?: boolean | undefined;

property ariaOwneeID

ariaOwneeID?: string | undefined;

property autoCapitalize

autoCapitalize?: string | undefined;

property autoComplete

autoComplete?: string | undefined;

property autoCorrect

autoCorrect?: string | undefined;

property blockRenderMap

blockRenderMap?: DraftBlockRenderMap | undefined;

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.

property customStyleFn

customStyleFn?:
    | ((style: DraftInlineStyle, block: ContentBlock) => React.CSSProperties)
    | undefined;

Define a function to transform inline styles to CSS objects that are applied to spans of text.

property customStyleMap

customStyleMap?: DraftStyleMap | undefined;

Provide a map of inline style names corresponding to CSS style objects that will be rendered for matching ranges.

property editorKey

editorKey?: string | undefined;

If using server-side rendering, this prop is required to be set to avoid client/server mismatches.

property editorState

editorState: EditorState;

property formatPastedText

formatPastedText?:
    | ((
          text: string,
          html?: string
      ) => { text: string; html: string | undefined })
    | undefined;

property placeholder

placeholder?: string | undefined;

property preserveSelectionOnBlur

preserveSelectionOnBlur?: boolean | undefined;

When the Editor loses focus (blurs) text selections are cleared by default to mimic behaviour, however in some situations users may wish to preserve native behaviour.

property readOnly

readOnly?: boolean | undefined;

Set whether the DraftEditor component should be editable. Useful for temporarily disabling edit behavior or allowing DraftEditor rendering to be used for consumption purposes.

property role

role?: string | undefined;

property spellCheck

spellCheck?: boolean | undefined;

Note: spellcheck is always disabled for IE. If enabled in Safari, OSX autocorrect is enabled as well.

property stripPastedStyles

stripPastedStyles?: boolean | undefined;

Set whether to remove all style information from pasted content. If your use case should not have any block or inline styles, it is recommended that you set this to true.

property tabIndex

tabIndex?: number | undefined;

property textAlignment

textAlignment?: DraftTextAlignment | undefined;

Specify whether text alignment should be forced in a direction regardless of input characters.

property textDirectionality

textDirectionality?: DraftTextDirectionality | undefined;

Specify whether text directionality should be forced in a direction regardless of input characters.

property webDriverTestID

webDriverTestID?: string | undefined;

method blockRendererFn

blockRendererFn: (block: ContentBlock) => any;

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.

method blockStyleFn

blockStyleFn: (block: ContentBlock) => string;

Function that allows to define class names to apply to the given block when it is rendered.

method handleBeforeInput

handleBeforeInput: (
    chars: string,
    editorState: EditorState,
    eventTimeStamp: number
) => DraftHandleValue;

Handle intended text insertion before the insertion occurs. This may be useful in cases where the user has entered characters that you would like to trigger some special behavior. E.g. immediately converting :) to an emoji Unicode character, or replacing ASCII quote characters with smart quotes.

method handleDrop

handleDrop: (
    selection: SelectionState,
    dataTransfer: Object,
    isInternal: DraftDragType
) => DraftHandleValue;

Handle other drops to prevent default text movement/insertion behaviour

method handleDroppedFiles

handleDroppedFiles: (
    selection: SelectionState,
    files: Blob[]
) => DraftHandleValue;

Handle dropped files

method handleKeyCommand

handleKeyCommand: (
    command: EditorCommand,
    editorState: EditorState,
    eventTimeStamp: number
) => DraftHandleValue;

Map a key command string provided by your key binding function to a specified behavior.

method handlePastedFiles

handlePastedFiles: (files: Blob[]) => DraftHandleValue;

method handlePastedText

handlePastedText: (
    text: string,
    html: string | undefined,
    editorState: EditorState
) => DraftHandleValue;

method handleReturn

handleReturn: (
    e: React.KeyboardEvent<{}>,
    editorState: EditorState
) => DraftHandleValue;

Useful for managing special behavior for pressing the Return key. E.g. removing the style from an empty list item.

method keyBindingFn

keyBindingFn: (e: React.KeyboardEvent<{}>) => EditorCommand | null;

A function that accepts a synthetic key event and returns the matching DraftEditorCommand constant, or null if no command should be invoked.

method onBlur

onBlur: (e: React.SyntheticEvent<{}>) => void;

method onChange

onChange: (editorState: EditorState) => void;

method onCopy

onCopy: (editor: Editor, e: React.ClipboardEvent<{}>) => void;

method onCut

onCut: (editor: Editor, e: React.ClipboardEvent<{}>) => void;

method onDownArrow

onDownArrow: (e: React.KeyboardEvent<{}>) => void;

method onEscape

onEscape: (e: React.KeyboardEvent<{}>) => void;

method onFocus

onFocus: (e: React.SyntheticEvent<{}>) => void;

method onLeftArrow

onLeftArrow: (e: React.KeyboardEvent<{}>) => void;

method onRightArrow

onRightArrow: (e: React.KeyboardEvent<{}>) => void;

method onTab

onTab: (e: React.KeyboardEvent<{}>) => void;

method onUpArrow

onUpArrow: (e: React.KeyboardEvent<{}>) => void;

type DraftBlockRenderMap

type DraftBlockRenderMap = Immutable.Map<DraftBlockType, DraftBlockRenderConfig>;

type DraftStyleMap

type DraftStyleMap = {
    [styleName: string]: React.CSSProperties;
};

type DraftTextAlignment

type DraftTextAlignment = 'left' | 'center' | 'right';

type DraftTextDirectionality

type DraftTextDirectionality = 'LTR' | 'RTL' | 'NEUTRAL';

type EditorCommand

type EditorCommand = DraftEditorCommand | string;

namespace Draft.Component.Components

namespace Draft.Component.Components {}

class DraftEditorBlock

class DraftEditorBlock extends React.Component<any, {}> {}

namespace Draft.Component.Selection

namespace Draft.Component.Selection {}

function getVisibleSelectionRect

getVisibleSelectionRect: (global: any) => FakeClientRect;

Return the bounding ClientRect for the visible DOM selection, if any. In cases where there are no selected ranges or the bounding rect is temporarily invalid, return null.

interface FakeClientRect

interface FakeClientRect {}

property bottom

bottom: number;

property height

height: number;

property left

left: number;

property right

right: number;

property top

top: number;

property width

width: number;

namespace Draft.Component.Utils

namespace Draft.Component.Utils {}

function getDefaultKeyBinding

getDefaultKeyBinding: (e: React.KeyboardEvent<{}>) => DraftEditorCommand;

Retrieve a bound key command for the given event.

class KeyBindingUtil

class KeyBindingUtil {}

method hasCommandModifier

static hasCommandModifier: (e: React.KeyboardEvent<{}>) => boolean;

method isCtrlKeyCommand

static isCtrlKeyCommand: (e: React.KeyboardEvent<{}>) => boolean;

Check whether the ctrlKey modifier is *not* being used in conjunction with the altKey modifier. If they are combined, the result is an altGraph key modifier, which should not be handled by this set of key bindings.

method isOptionKeyCommand

static isOptionKeyCommand: (e: React.KeyboardEvent<{}>) => boolean;

method isSoftNewlineEvent

static isSoftNewlineEvent: (e: React.KeyboardEvent<{}>) => boolean;

method usesMacOSHeuristics

static usesMacOSHeuristics: () => boolean;

Check whether heuristics that only apply to macOS are used internally, for example when determining the key combination used as command modifier.

namespace Draft.Model

namespace Draft.Model {}

namespace Draft.Model.Constants

namespace Draft.Model.Constants {}

type CoreDraftBlockType

type CoreDraftBlockType =
    | 'header-one'
    | 'header-two'
    | 'header-three'
    | 'header-four'
    | 'header-five'
    | 'header-six'
    | 'section'
    | 'article'
    | 'unordered-list-item'
    | 'ordered-list-item'
    | 'blockquote'
    | 'atomic'
    | 'code-block'
    | 'unstyled';

The list of [default valid block types](https://draftjs.org/docs/advanced-topics-custom-block-render-map#draft-default-block-render-map), according to the [DefaultDraftBlockRenderMap](https://github.com/facebook/draft-js/blob/main/src/model/immutable/DefaultDraftBlockRenderMap.js)

type CustomBlockType

type CustomBlockType = string;

type DraftBlockType

type DraftBlockType = CoreDraftBlockType | CustomBlockType;

type DraftDragType

type DraftDragType = 'internal' | 'external';

A type that allows us to avoid passing boolean arguments around to indicate whether a drag type is internal or external.

type DraftEditorCommand

type DraftEditorCommand =
    /**
     * Self-explanatory.
     */
    | 'undo'
    | 'redo'
    /**
     * Perform a forward deletion.
     */
    | 'delete'
    /**
     * Perform a forward deletion to the next word boundary after the selection.
     */
    | 'delete-word'
    /**
     * Perform a backward deletion.
     */
    | 'backspace'
    /**
     * Perform a backward deletion to the previous word boundary before the
     * selection.
     */
    | 'backspace-word'
    /**
     * Perform a backward deletion to the beginning of the current line.
     */
    | 'backspace-to-start-of-line'
    /**
     * Toggle styles. Commands may be intepreted to modify inline text ranges
     * or block types.
     */
    | 'bold'
    | 'code'
    | 'italic'
    | 'strikethrough'
    | 'underline'
    /**
     * Split a block in two.
     */
    | 'split-block'
    /**
     * Self-explanatory.
     */
    | 'transpose-characters'
    | 'move-selection-to-start-of-block'
    | 'move-selection-to-end-of-block'
    /**
     * Commands to support the "secondary" clipboard provided by certain
     * browsers and operating systems.
     */
    | 'secondary-cut'
    | 'secondary-paste';

A set of editor commands that may be invoked by keyboard commands or UI controls. These commands should map to operations that modify content or selection state and update the editor state accordingly.

type DraftEntityMutability

type DraftEntityMutability = 'MUTABLE' | 'IMMUTABLE' | 'SEGMENTED';

Possible "mutability" options for an entity. This refers to the behavior that should occur when inserting or removing characters in a text range with an entity applied to it.
MUTABLE: The text range can be modified freely. Generally used in cases where the text content and the entity do not necessarily have a direct relationship. For instance, the text and URI for a link may be completely different. The user is allowed to edit the text as needed, and the entity is preserved and applied to any characters added within the range.
IMMUTABLE: Not to be confused with immutable data structures used to represent the state of the editor. Immutable entity ranges cannot be modified in any way. Adding characters within the range will remove the entity from the entire range. Deleting characters will delete the entire range. Example: Facebook Page mentions.
SEGMENTED: Segmented entities allow the removal of partial ranges of text, as separated by a delimiter. Adding characters wihin the range will remove the entity from the entire range. Deleting characters within a segmented entity will delete only the segments affected by the deletion. Example: Facebook User mentions.

type DraftEntityType

type DraftEntityType = string;

Possible entity types, like 'LINK', 'IMAGE', or custom ones.

type DraftHandleValue

type DraftHandleValue = 'handled' | 'not-handled';

A type that allows us to avoid returning boolean values to indicate whether an event was handled or not.

type DraftInlineStyleType

type DraftInlineStyleType =
    | 'BOLD'
    | 'CODE'
    | 'ITALIC'
    | 'STRIKETHROUGH'
    | 'UNDERLINE';

Valid inline styles.

type DraftInsertionType

type DraftInsertionType = 'replace' | 'before' | 'after';

A type that defines if an fragment shall be inserted before or after another fragment or if the selected fragment shall be replaced

type DraftRemovalDirection

type DraftRemovalDirection = 'backward' | 'forward';

A type that allows us to avoid passing boolean arguments around to indicate whether a deletion is forward or backward.

namespace Draft.Model.Decorators

namespace Draft.Model.Decorators {}

class CompositeDraftDecorator

class CompositeDraftDecorator {}

A CompositeDraftDecorator traverses through a list of DraftDecorator instances to identify sections of a ContentBlock that should be rendered in a "decorated" manner. For example, hashtags, mentions, and links may be intended to stand out visually, be rendered as anchors, etc.
The list of decorators supplied to the constructor will be used in the order they are provided. This allows the caller to specify a priority for string matching, in case of match collisions among decorators.
For instance, I may have a link with a # in its text. Though this section of text may match our hashtag decorator, it should not be treated as a hashtag. I should therefore list my link DraftDecorator before my hashtag DraftDecorator when constructing this composite decorator instance.
Thus, when a collision like this is encountered, the earlier match is preserved and the new match is discarded.

constructor

constructor(decorators: DraftDecorator<any>[]);

method getComponentForKey

getComponentForKey: (key: string) => Function;

method getDecorations

getDecorations: (
    block: ContentBlock,
    contentState: ContentState
) => Immutable.List<string>;

method getPropsForKey

getPropsForKey: (key: string) => Object;

interface DraftDecorator

interface DraftDecorator<P = any> {}

A DraftDecorator is a strategy-component pair intended for use when rendering content.
- A "strategy": A function that accepts a ContentBlock object and continuously executes a callback with start/end values corresponding to relevant matches in the document text. For example, getHashtagMatches uses a hashtag regex to find hashtag strings in the block, and for each hashtag match, executes the callback with start/end pairs.
- A "component": A React component that will be used to render the "decorated" section of text.
- "props": Props to be passed into the React component that will be used merged with DraftDecoratorComponentProps

property component

component:
    | React.Component
    | React.ComponentClass<any>
    | ((props: DraftDecoratorComponentProps & P) => React.ReactNode);

property props

props?: P | undefined;

property strategy

strategy: (
    block: ContentBlock,
    callback: (start: number, end: number) => void,
    contentState: ContentState
) => void;

interface DraftDecoratorComponentProps

interface DraftDecoratorComponentProps {}

DraftDecoratorComponentProps are the core set of props that will be passed to all DraftDecoratorComponents if a Custom Block Component is not used. Note that a component may also accept additional props outside of this list.

property blockKey

blockKey: string;

property children

children?: React.ReactNode[];

property contentState

contentState: ContentState;

property decoratedText

decoratedText: string;

property dir

dir: 'ltr' | 'rtl' | undefined;

property end

end: number;

property entityKey

entityKey: string | undefined;

property offsetKey

offsetKey: string;

property start

start: number;

interface DraftDecoratorType

interface DraftDecoratorType {}

An interface for document decorator classes, allowing the creation of custom decorator classes.
See CompositeDraftDecorator for the most common use case.

method getComponentForKey

getComponentForKey: (key: string) => Function;

Given a decorator key, return the component to use when rendering this decorated range.

method getDecorations

getDecorations: (
    block: ContentBlock,
    contentState: ContentState
) => Immutable.List<string>;

Given a ContentBlock, return an immutable List of decorator keys.

method getPropsForKey

getPropsForKey: (key: string) => any;

Given a decorator key, optionally return the props to use when rendering this decorated range.

namespace Draft.Model.Encoding

namespace Draft.Model.Encoding {}

function convertFromDraftStateToRaw

convertFromDraftStateToRaw: (contentState: ContentState) => RawDraftContentState;

function convertFromHTMLtoContentBlocks

convertFromHTMLtoContentBlocks: (
    html: string,
    DOMBuilder?: Function,
    blockRenderMap?: Immutable.Map<string, DraftBlockRenderConfig>
) => { contentBlocks: ContentBlock[]; entityMap: any };

function convertFromRawToDraftState

convertFromRawToDraftState: (rawState: RawDraftContentState) => ContentState;

interface RawDraftContentBlock

interface RawDraftContentBlock {}

A plain object representation of a ContentBlock, with all style and entity attribution repackaged as range objects.

property data

data?: { [key: string]: any } | undefined;

property depth

depth: number;

property entityRanges

entityRanges: RawDraftEntityRange[];

property inlineStyleRanges

inlineStyleRanges: RawDraftInlineStyleRange[];

property key

key: string;

property text

text: string;

property type

type: DraftBlockType;

interface RawDraftContentState

interface RawDraftContentState {}

A type that represents a composed document as vanilla JavaScript objects, with all styles and entities represented as ranges. Corresponding entity objects are packaged as objects as well.
This object is especially useful when sending the document state to the server for storage, as its representation is more concise than our immutable objects.

property blocks

blocks: RawDraftContentBlock[];

property entityMap

entityMap: { [key: string]: RawDraftEntity };

interface RawDraftEntity

interface RawDraftEntity<T = { [key: string]: any }> {}

A plain object representation of an EntityInstance.

property data

data: T;

property mutability

mutability: DraftEntityMutability;

property type

type: DraftEntityType;

interface RawDraftEntityRange

interface RawDraftEntityRange {}

A plain object representation of an entity attribution.
The key value corresponds to the key of the entity in the entityMap of a ComposedText object, not for use with DraftEntity.get().

property key

key: number;

property length

length: number;

property offset

offset: number;

interface RawDraftInlineStyleRange

interface RawDraftInlineStyleRange {}

A plain object representation of an inline style range.

property length

length: number;

property offset

offset: number;

property style

style: DraftInlineStyleType;

namespace Draft.Model.Entity

namespace Draft.Model.Entity {}

class DraftEntity

class DraftEntity {}

A "document entity" is an object containing metadata associated with a piece of text in a ContentBlock.
For example, a link entity might include a uri property. When a ContentBlock is rendered in the browser, text that refers to that link entity may be rendered as an anchor, with the uri as the href value.
In a ContentBlock, every position in the text may correspond to zero or one entities. This correspondence is tracked using a key string, generated via DraftEntity.create() and used to obtain entity metadata via DraftEntity.get().

method add

static add: (instance: DraftEntityInstance) => string;

Add an existing DraftEntityInstance to the DraftEntity map. This is useful when restoring instances from the server.

method create

static create: (
    type: string,
    mutability: DraftEntityMutability,
    data?: Object
) => string;

Create a DraftEntityInstance and store it for later retrieval.
A random key string will be generated and returned. This key may be used to track the entity's usage in a ContentBlock, and for retrieving data about the entity at render time.

method get

static get: (key: string) => DraftEntityInstance;

Retrieve the entity corresponding to the supplied key string.

method mergeData

static mergeData: (
    key: string,
    toMerge: { [key: string]: any }
) => DraftEntityInstance;

Entity instances are immutable. If you need to update the data for an instance, this method will merge your data updates and return a new instance.

method replaceData

static replaceData: (
    key: string,
    newData: { [key: string]: any }
) => DraftEntityInstance;

Completely replace the data for a given instance.

interface DraftEntityInstance

interface DraftEntityInstance {}

An instance of a document entity, consisting of a type and relevant data, metadata about the entity.
For instance, a "link" entity might provide a URI, and a "mention" entity might provide the mentioned user's ID. These pieces of data may be used when rendering the entity as part of a ContentBlock DOM representation. For a link, the data would be used as an href for the rendered anchor. For a mention, the ID could be used to retrieve a hovercard.

method getData

getData: () => any;

method getMutability

getMutability: () => DraftEntityMutability;

method getType

getType: () => string;

namespace Draft.Model.ImmutableData

namespace Draft.Model.ImmutableData {}

variable DefaultDraftBlockRenderMap

const DefaultDraftBlockRenderMap: Immutable.Map<any, any>;

variable DefaultDraftInlineStyle

const DefaultDraftInlineStyle: Immutable.Map<any, any>;

variable Record

var Record: Immutable.Record.Class;

class BlockMapBuilder

class BlockMapBuilder {}

method createFromArray

static createFromArray: (
    blocks: ContentBlock[]
) => Immutable.OrderedMap<string, ContentBlock>;

class CharacterMetadata

class CharacterMetadata {}

method applyEntity

static applyEntity: {
    (record: CharacterMetadata, entityKey: string | null): CharacterMetadata;
    (record: CharacterMetadata): CharacterMetadata;
};

method applyStyle

static applyStyle: (
    record: CharacterMetadata,
    style: string
) => CharacterMetadata;

method create

static create: {
    (config?: CharacterMetadataConfig): CharacterMetadata;
    (): CharacterMetadata;
};

Use this function instead of the CharacterMetadata constructor. Since most content generally uses only a very small number of style/entity permutations, we can reuse these objects as often as possible.

method getEntity

getEntity: () => string;

method getStyle

getStyle: () => Immutable.OrderedSet<string>;

method hasStyle

hasStyle: (style: string) => boolean;

method removeStyle

static removeStyle: (
    record: CharacterMetadata,
    style: string
) => CharacterMetadata;

class ContentBlock

class ContentBlock extends Record {}

method findEntityRanges

findEntityRanges: (
    filterFn: (value: CharacterMetadata) => boolean,
    callback: (start: number, end: number) => void
) => void;

Execute a callback for every contiguous range of entities within the block.

method findStyleRanges

findStyleRanges: (
    filterFn: (value: CharacterMetadata) => boolean,
    callback: (start: number, end: number) => void
) => void;

Execute a callback for every contiguous range of styles within the block.

method getCharacterList

getCharacterList: () => Immutable.List<CharacterMetadata>;

method getData

getData: () => Immutable.Map<any, any>;

method getDepth

getDepth: () => number;

method getEntityAt

getEntityAt: (offset: number) => string;

method getInlineStyleAt

getInlineStyleAt: (offset: number) => Immutable.OrderedSet<string>;

method getKey

getKey: () => string;

method getLength

getLength: () => number;

method getText

getText: () => string;

method getType

getType: () => string;

class ContentState

class ContentState extends Record {}

method addEntity

addEntity: (instance: DraftEntityInstance) => ContentState;

method createEntity

createEntity: (
    type: string,
    mutability: DraftEntityMutability,
    data?: Object
) => ContentState;

method createFromBlockArray

static createFromBlockArray: (
    blocks: ContentBlock[],
    entityMap?: any
) => ContentState;

method createFromText

static createFromText: (text: string, delimiter?: string) => ContentState;

method getAllEntities

getAllEntities: () => Immutable.OrderedMap<string, DraftEntityInstance>;

method getBlockAfter

getBlockAfter: (key: string) => ContentBlock;

method getBlockBefore

getBlockBefore: (key: string) => ContentBlock;

method getBlockForKey

getBlockForKey: (key: string) => ContentBlock;

method getBlockMap

getBlockMap: () => Immutable.OrderedMap<string, ContentBlock>;

method getBlocksAsArray

getBlocksAsArray: () => ContentBlock[];

method getEntity

getEntity: (key: string) => EntityInstance;

method getEntityMap

getEntityMap: () => any;

method getFirstBlock

getFirstBlock: () => ContentBlock;

method getKeyAfter

getKeyAfter: (key: string) => string;

method getKeyBefore

getKeyBefore: (key: string) => string;

method getLastBlock

getLastBlock: () => ContentBlock;

method getLastCreatedEntityKey

getLastCreatedEntityKey: () => string;

method getPlainText

getPlainText: (delimiter?: string) => string;

method getSelectionAfter

getSelectionAfter: () => SelectionState;

method getSelectionBefore

getSelectionBefore: () => SelectionState;

method hasText

hasText: () => boolean;

method mergeEntityData

mergeEntityData: (key: string, toMerge: { [key: string]: any }) => ContentState;

method replaceEntityData

replaceEntityData: (
    key: string,
    toMerge: { [key: string]: any }
) => ContentState;

class EditorState

class EditorState extends Record {}

method acceptSelection

static acceptSelection: (
    editorState: EditorState,
    selection: SelectionState
) => EditorState;

Incorporate native DOM selection changes into the EditorState. This method can be used when we simply want to accept whatever the DOM has given us to represent selection, and we do not need to re-render the editor.
To forcibly move the DOM selection, see EditorState.forceSelection.

method create

static create: (config: Object) => EditorState;

method createEmpty

static createEmpty: (decorator?: DraftDecoratorType) => EditorState;

method createWithContent

static createWithContent: (
    contentState: ContentState,
    decorator?: DraftDecoratorType
) => EditorState;

method forceSelection

static forceSelection: (
    editorState: EditorState,
    selection: SelectionState
) => EditorState;

At times, we need to force the DOM selection to be where we need it to be. This can occur when the anchor or focus nodes are non-text nodes, for instance. In this case, we want to trigger a re-render of the editor, which in turn forces selection into the correct place in the DOM. The forceSelection method accomplishes this.
This method should be used in cases where you need to explicitly move the DOM selection from one place to another without a change in ContentState.

method getAllowUndo

getAllowUndo: () => boolean;

method getBlockTree

getBlockTree: (blockKey: string) => Immutable.List<any>;

method getCurrentContent

getCurrentContent: () => ContentState;

method getCurrentInlineStyle

getCurrentInlineStyle: () => Immutable.OrderedSet<string>;

Get the appropriate inline style for the editor state. If an override is in place, use it. Otherwise, the current style is based on the location of the selection state.

method getDecorator

getDecorator: () => DraftDecoratorType;

method getDirectionMap

getDirectionMap: () => Immutable.OrderedMap<any, any>;

method getInlineStyleOverride

getInlineStyleOverride: () => Immutable.OrderedSet<string>;

While editing, the user may apply inline style commands with a collapsed cursor, intending to type text that adopts the specified style. In this case, we track the specified style as an "override" that takes precedence over the inline style of the text adjacent to the cursor.
If null, there is no override in place.

method getLastChangeType

getLastChangeType: () => EditorChangeType;

method getNativelyRenderedContent

getNativelyRenderedContent: () => ContentState;

method getRedoStack

getRedoStack: () => Immutable.Stack<ContentState>;

method getSelection

getSelection: () => SelectionState;

method getUndoStack

getUndoStack: () => Immutable.Stack<ContentState>;

method isInCompositionMode

isInCompositionMode: () => boolean;

method isSelectionAtEndOfContent

isSelectionAtEndOfContent: () => boolean;

method isSelectionAtStartOfContent

isSelectionAtStartOfContent: () => boolean;

method moveFocusToEnd

static moveFocusToEnd: (editorState: EditorState) => EditorState;

Force focus to the end of the editor. This is useful in scenarios where we want to programmatically focus the input and it makes sense to allow the user to continue working seamlessly.

method moveSelectionToEnd

static moveSelectionToEnd: (editorState: EditorState) => EditorState;

Move selection to the end of the editor without forcing focus.

method mustForceSelection

mustForceSelection: () => boolean;

method push

static push: (
    editorState: EditorState,
    contentState: ContentState,
    changeType: EditorChangeType
) => EditorState;

Push the current ContentState onto the undo stack if it should be considered a boundary state, and set the provided ContentState as the new current content.

method redo

static redo: (editorState: EditorState) => EditorState;

Make the top ContentState in the redo stack the new current content and push the current content onto the undo stack.

method set

static set: (editorState: EditorState, put: Object) => EditorState;

method setInlineStyleOverride

static setInlineStyleOverride: (
    editorState: EditorState,
    inlineStyleOverride: Immutable.OrderedSet<string>
) => EditorState;

method toJS

toJS: () => Object;

method undo

static undo: (editorState: EditorState) => EditorState;

Make the top ContentState in the undo stack the new current content and push the current content onto the redo stack.

class SelectionState

class SelectionState extends Record {}

method createEmpty

static createEmpty: (key: string) => SelectionState;

method getAnchorKey

getAnchorKey: () => string;

method getAnchorOffset

getAnchorOffset: () => number;

method getEndKey

getEndKey: () => string;

method getEndOffset

getEndOffset: () => number;

method getFocusKey

getFocusKey: () => string;

method getFocusOffset

getFocusOffset: () => number;

method getHasFocus

getHasFocus: () => boolean;

method getIsBackward

getIsBackward: () => boolean;

method getStartKey

getStartKey: () => string;

method getStartOffset

getStartOffset: () => number;

method hasEdgeWithin

hasEdgeWithin: (blockKey: string, start: number, end: number) => boolean;

Return whether the specified range overlaps with an edge of the SelectionState.

method isCollapsed

isCollapsed: () => boolean;

method merge

merge: {
    (
        ...iterables: Array<
            Immutable.Iterable<
                keyof SelectionStateProperties,
                SelectionStateProperties[keyof SelectionStateProperties]
            >
        >
    ): SelectionState;
    (...iterables: Partial<SelectionStateProperties>[]): SelectionState;
};

method serialize

serialize: () => string;

interface CharacterMetadataConfig

interface CharacterMetadataConfig {}

property entity

entity?: string | undefined;

property style

style?: DraftInlineStyle | undefined;

interface DraftBlockRenderConfig

interface DraftBlockRenderConfig {}

property element

element: string;

property wrapper

wrapper?: React.ReactNode | undefined;

interface SelectionStateProperties

interface SelectionStateProperties {}

property anchorKey

anchorKey: string;

property anchorOffset

anchorOffset: number;

property focusKey

focusKey: string;

property focusOffset

focusOffset: number;

property hasFocus

hasFocus: boolean;

property isBackward

isBackward: boolean;

type BlockMap

type BlockMap = Immutable.OrderedMap<string, Draft.Model.ImmutableData.ContentBlock>;

type DraftInlineStyle

type DraftInlineStyle = Immutable.OrderedSet<string>;

type EditorChangeType

type EditorChangeType =
    | 'adjust-depth'
    | 'apply-entity'
    | 'backspace-character'
    | 'change-block-data'
    | 'change-block-type'
    | 'change-inline-style'
    | 'move-block'
    | 'delete-character'
    | 'insert-characters'
    | 'insert-fragment'
    | 'redo'
    | 'remove-range'
    | 'spellcheck-change'
    | 'split-block'
    | 'undo';

namespace Draft.Model.Keys

namespace Draft.Model.Keys {}

function generateRandomKey

generateRandomKey: () => string;

namespace Draft.Model.Modifier

namespace Draft.Model.Modifier {}

class AtomicBlockUtils

class AtomicBlockUtils {}

method insertAtomicBlock

static insertAtomicBlock: (
    editorState: EditorState,
    entityKey: string,
    character: string
) => EditorState;

method moveAtomicBlock

static moveAtomicBlock: (
    editorState: EditorState,
    atomicBlock: ContentBlock,
    targetRange: SelectionState,
    insertionMode?: DraftInsertionType
) => EditorState;

class DraftModifier

class DraftModifier {}

DraftModifier provides a set of convenience methods that apply modifications to a ContentState object based on a target SelectionState.
Any change to a ContentState should be decomposable into a series of transaction functions that apply the required changes and return output ContentState objects.
These functions encapsulate some of the most common transaction sequences.

method applyEntity

static applyEntity: (
    contentState: ContentState,
    selectionState: SelectionState,
    entityKey: string | null
) => ContentState;

method applyInlineStyle

static applyInlineStyle: (
    contentState: ContentState,
    selectionState: SelectionState,
    inlineStyle: string
) => ContentState;

method insertText

static insertText: (
    contentState: ContentState,
    targetRange: SelectionState,
    text: string,
    inlineStyle?: Immutable.OrderedSet<string>,
    entityKey?: string
) => ContentState;

method mergeBlockData

static mergeBlockData: (
    contentState: ContentState,
    selectionState: SelectionState,
    blockData: Immutable.Map<any, any>
) => ContentState;

method moveText

static moveText: (
    contentState: ContentState,
    removalRange: SelectionState,
    targetRange: SelectionState
) => ContentState;

method removeInlineStyle

static removeInlineStyle: (
    contentState: ContentState,
    selectionState: SelectionState,
    inlineStyle: string
) => ContentState;

method removeRange

static removeRange: (
    contentState: ContentState,
    rangeToRemove: SelectionState,
    removalDirection: DraftRemovalDirection
) => ContentState;

method replaceText

static replaceText: (
    contentState: ContentState,
    rangeToReplace: SelectionState,
    text: string,
    inlineStyle?: Immutable.OrderedSet<string>,
    entityKey?: string
) => ContentState;

method replaceWithFragment

static replaceWithFragment: (
    contentState: ContentState,
    targetRange: SelectionState,
    fragment: Immutable.OrderedMap<string, ContentBlock>
) => ContentState;

method setBlockData

static setBlockData: (
    contentState: ContentState,
    selectionState: SelectionState,
    blockData: Immutable.Map<any, any>
) => ContentState;

method setBlockType

static setBlockType: {
    (
        contentState: ContentState,
        selectionState: SelectionState,
        blockType: string
    ): ContentState;
    (
        contentState: ContentState,
        selectionState: SelectionState,
        blockType: string
    ): ContentState;
};

method splitBlock

static splitBlock: (
    contentState: ContentState,
    selectionState: SelectionState
) => ContentState;

class RichTextEditorUtil

class RichTextEditorUtil {}

method currentBlockContainsLink

static currentBlockContainsLink: (editorState: EditorState) => boolean;

method getCurrentBlockType

static getCurrentBlockType: {
    (editorState: EditorState): string;
    (editorState: EditorState): string;
};

method getDataObjectForLinkURL

static getDataObjectForLinkURL: (uri: URI) => Object;

method handleKeyCommand

static handleKeyCommand: {
    (editorState: EditorState, command: DraftEditorCommand): EditorState;
    (editorState: EditorState, command: string): null;
};

method insertSoftNewline

static insertSoftNewline: (editorState: EditorState) => EditorState;

method onBackspace

static onBackspace: (editorState: EditorState) => EditorState;

For collapsed selections at the start of styled blocks, backspace should just remove the existing style.

method onDelete

static onDelete: (editorState: EditorState) => EditorState;

method onTab

static onTab: (
    event: React.KeyboardEvent<{}>,
    editorState: EditorState,
    maxDepth: number
) => EditorState;

method toggleBlockType

static toggleBlockType: {
    (editorState: EditorState, blockType: string): EditorState;
    (editorState: EditorState, blockType: string): EditorState;
};

method toggleCode

static toggleCode: (editorState: EditorState) => EditorState;

method toggleInlineStyle

static toggleInlineStyle: (
    editorState: EditorState,
    inlineStyle: string
) => EditorState;

Toggle the specified inline style for the selection. If the user's selection is collapsed, apply or remove the style for the internal state. If it is not collapsed, apply the change directly to the document state.

method toggleLink

static toggleLink: (
    editorState: EditorState,
    targetSelection: SelectionState,
    entityKey: string | null
) => EditorState;

method tryToRemoveBlockStyle

static tryToRemoveBlockStyle: (editorState: EditorState) => ContentState;

When a collapsed cursor is at the start of an empty styled block, allow certain key commands (newline, backspace) to simply change the style of the block instead of the default behavior.

type URI

type URI = any;

Package Files (1)

index.d.ts

Dependencies (2)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/draft-js.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/draft-js)

HTML

<a href="https://www.jsdocs.io/package/@types/draft-js"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 7 months ago.
Package analyzed in 7600 ms.
Missing or incorrect documentation? Open an issue for this package.