ContentBlock

ContentBlock is an Immutable Record that represents the full state of a single block of editor content, including:

  • Plain text contents of the block
  • Type, e.g. paragraph, header, list item
  • Entity, inline style, and depth information

A ContentState object contains an OrderedMap of these ContentBlock objects, which together comprise the full contents of the editor.

ContentBlock objects are largely analogous to block-level HTML elements like paragraphs and list items. The available types are:

  • unstyled
  • paragraph
  • header-one
  • header-two
  • header-three
  • header-four
  • header-five
  • header-six
  • unordered-list-item
  • ordered-list-item
  • blockquote
  • code-block
  • atomic

New ContentBlock objects may be created directly using the constructor. Expected Record values are detailed below.

Representing styles and entities

The characterList field is an immutable List containing a CharacterMetadata object for every character in the block. This is how we encode styles and entities for a given block.

By making heavy use of immutability and data persistence for these lists and CharacterMetadata objects, edits to the content generally have little impact on the memory footprint of the editor.

By encoding inline styles and entities together in this way, a function that performs edits on a ContentBlock can perform slices, concats, and other List methods on a single List object.

When creating a new ContentBlock containing text and without characterList it then will default to a characterList with empty CharacterMetadata for the supplied text.

Overview

Methods

Properties

Note

Use Immutable Map API for the ContentBlock constructor or to set properties.

Methods

getKey()

getKey(): string

Returns the string key for this ContentBlock. Block keys are alphanumeric string. It is recommended to use generateRandomKey to generate block keys.

getType()

getType(): DraftBlockType

Returns the type for this ContentBlock. Type values are largely analogous to block-level HTML elements.

getText()

getText(): string

Returns the full plaintext for this ContentBlock. This value does not contain any styling, decoration, or HTML information.

getCharacterList()

getCharacterList(): List<CharacterMetadata>

Returns an immutable List of CharacterMetadata objects, one for each character in the ContentBlock. (See CharacterMetadata for details.)

This List contains all styling and entity information for the block.

getLength()

getLength(): number

Returns the length of the plaintext for the ContentBlock.

This value uses the standard JavaScript length property for the string, and is therefore not Unicode-aware -- surrogate pairs will be counted as two characters.

getDepth()

getDepth(): number

Returns the depth value for this block, if any. This is currently used only for list items.

getInlineStyleAt()

getInlineStyleAt(offset: number): DraftInlineStyle

Returns the DraftInlineStyle value (an OrderedSet<string>) at a given offset within this ContentBlock.

getEntityAt()

getEntityAt(offset: number): ?string

Returns the entity key value (or null if none) at a given offset within this ContentBlock.

getData()

getData(): Map<any, any>

Returns block-level metadata.

findStyleRanges()

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

Executes a callback for each contiguous range of styles within this ContentBlock.

findEntityRanges()

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

Executes a callback for each contiguous range of entities within this ContentBlock.

Properties

Note

Use Immutable Map API for the ContentBlock constructor or to set properties.

key

See getKey().

text

See getText().

type

See getType().

characterList

See getCharacterList().

depth

See getDepth().

data

See getData().

Edit this page
Last updated on by Rounak Agarwal