Skip to main content

ContentState

ContentState is an Immutable Record that represents the full state of:

  • The entire contents of an editor: text, block and inline styles, and entity ranges.
  • Two selection states of an editor: before and after the rendering of these contents.

The most common use for the ContentState object is via EditorState.getCurrentContent(), which provides the ContentState currently being rendered in the editor.

An EditorState object maintains undo and redo stacks comprised of ContentState objects.

Overview​

Static Methods

Methods

Properties

Use Immutable Map API to set properties.

Example

const editorState = EditorState.createEmpty();
const contentState = editorState.getCurrentContent();
const contentStateWithSelectionBefore = contentState.set(
  'selectionBefore',
  SelectionState.createEmpty(contentState.getBlockForKey('1pu4d')),
);

Static Methods​

createFromText()​

static createFromText(
  text: string,
  delimiter?: string
): ContentState

Generates a ContentState from a string, with a delimiter to split the string into ContentBlock objects. If no delimiter is provided, '\n' is used.

createFromBlockArray()​

static createFromBlockArray(
  blocks: Array<ContentBlock>,
  entityMap: ?OrderedMap
): ContentState

Generates a ContentState from an array of ContentBlock objects. The default selectionBefore and selectionAfter states have the cursor at the start of the content.

Methods​

getEntityMap()​

getEntityMap(): EntityMap

Returns an object store containing all DraftEntity records that have been created. In upcoming v0.11.0 the map returned will be an Immutable ordered map of DraftEntity records.

In most cases, you should be able to use the convenience methods below to target specific DraftEntity records or obtain information about the state of the content.

getBlockMap()​

getBlockMap(): BlockMap

Returns the full ordered map of ContentBlock objects representing the state of an entire document.

In most cases, you should be able to use the convenience methods below to target specific ContentBlock objects or obtain information about the state of the content.

getSelectionBefore()​

getSelectionBefore(): SelectionState

Returns the SelectionState displayed in the editor before rendering blockMap.

When performing an undo action in the editor, the selectionBefore of the current ContentState is used to place the selection range in the appropriate position.

getSelectionAfter()​

getSelectionAfter(): SelectionState

Returns the SelectionState displayed in the editor after rendering blockMap.

When performing any action in the editor that leads to this blockMap being rendered, the selection range will be placed in the selectionAfter position.

getBlockForKey()​

getBlockForKey(key: string): ContentBlock

Returns the ContentBlock corresponding to the given block key.

Example​

var {editorState} = this.state;
var startKey = editorState.getSelection().getStartKey();
var selectedBlockType = editorState
  .getCurrentContent()
  .getBlockForKey(startKey)
  .getType();

getKeyBefore()​

getKeyBefore(key: string): ?string

Returns the key before the specified key in blockMap, or null if this is the first key.

getKeyAfter()​

getKeyAfter(key: string): ?string

Returns the key after the specified key in blockMap, or null if this is the last key.

getBlockBefore()​

getBlockBefore(key: string): ?ContentBlock

Returns the ContentBlock before the specified key in blockMap, or null if this is the first key.

getBlockAfter()​

getBlockAfter(key: string): ?ContentBlock

Returns the ContentBlock after the specified key in blockMap, or null if this is the last key.

getBlocksAsArray()​

getBlocksAsArray(): Array<ContentBlock>

Returns the values of blockMap as an array.

You generally won't need to use this method, since getBlockMap provides an OrderedMap that you should use for iteration.

getFirstBlock()​

getFirstBlock(): ContentBlock

Returns the first ContentBlock.

getLastBlock()​

getLastBlock(): ContentBlock

Returns the last ContentBlock.

getPlainText()​

getPlainText(delimiter?: string): string

Returns the full plaintext value of the contents, joined with a delimiter. If no delimiter is specified, the line feed character (\u000A) is used.

getLastCreatedEntityKey()​

getLastCreatedEntityKey(): string

Returns the string key that can be used to reference the most recently created DraftEntity record. This is because entities are referenced by their string key in ContentState. The string value should be used within CharacterMetadata objects to track the entity for annotated characters.

hasText()​

hasText(): boolean

Returns whether the contents contain any text at all.

createEntity()​

createEntity(
  type: DraftEntityType,
  mutability: DraftEntityMutability,
  data?: Object
): ContentState

Returns ContentState record updated to include the newly created DraftEntity record in it's EntityMap. Call getLastCreatedEntityKey to get the key of the newly created DraftEntity record.

getEntity()​

getEntity(key: string): DraftEntityInstance

Returns the DraftEntityInstance for the specified key. Throws if no instance exists for that key.

mergeEntityData()​

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

Since DraftEntityInstance objects are immutable, you cannot update an entity's metadata through typical mutative means.

The mergeData method allows you to apply updates to the specified entity.

replaceEntityData()​

replaceEntityData(
  key: string,
  newData: {[key: string]: any}
): ContentState

The replaceData method is similar to the mergeData method, except it will totally discard the existing data value for the instance and replace it with the specified newData.

addEntity()​

addEntity(instance: DraftEntityInstance): ContentState

In most cases, you will use contentState.createEntity(). This is a convenience method that you probably will not need in typical Draft usage.

The add function is useful in cases where the instances have already been created, and now need to be added to the Entity store. This may occur in cases where a vanilla JavaScript representation of a ContentState is being revived for editing.

Properties​

Use Immutable Map API to set properties.

blockMap​

See getBlockMap().

selectionBefore​

See getSelectionBefore().

selectionAfter​

See getSelectionAfter().