From official docs I know about 2 methods: get entity by its key and get last created entity. In my case, I also need a method to access all entities from current ContentState. Is there any method that could perform this? If not, is there a one that can provide all entities keys?

From official docs I know about 2 methods: get entity by its key and get last created entity. In my case, I also need a method to access all entities from current ContentState. Is there any method that could perform this? If not, is there a one that can provide all entities keys?

• javascript
• reactjs
• draftjs

• why not keep a set of entities you created? – Jiang YD Commented Sep 28, 2017 at 9:50
• Thanks for ur answer. I'll try this too. The problem is to setup automatically removing an entity from this set when user removes range with entity – Pavel Poberezhnyi Commented Oct 2, 2017 at 11:10
• 2 editorState should fully represent the state of the editor. Maintaining a separate set of entities goes against the "single source of truth" principle. – Adam Libuša Commented Nov 12, 2018 at 16:13

6 Answers 6

const getEntities = (editorState, entityType = null) => {
    const content = editorState.getCurrentContent();
    const entities = [];
    content.getBlocksAsArray().forEach((block) => {
        let selectedEntity = null;
        block.findEntityRanges(
            (character) => {
                if (character.getEntity() !== null) {
                    const entity = content.getEntity(character.getEntity());
                    if (!entityType || (entityType && entity.getType() === entityType)) {
                        selectedEntity = {
                            entityKey: character.getEntity(),
                            blockKey: block.getKey(),
                            entity: content.getEntity(character.getEntity()),
                        };
                        return true;
                    }
                }
                return false;
            },
            (start, end) => {
                entities.push({...selectedEntity, start, end});
            });
    });
    return entities;
};

How I get the all entities keys:

const contentState = editorState.getCurrentContent()
const entityKeys = Object.keys(convertToRaw(contentState).entityMap)

result:

[0, 1]

then you can call the getEntity(key) method to get the responding entity.

this is how convertToRaw(contentState) looks:

Bao, You will find it inside key called 'blocks'.

convertToRaw(contentState).blocks.map(el=>el.text)

Unfortunatelly your suggested way using convertToRaw doesnt work because it reindexes all keys to ["0", .., "n"], but the real keys differ when you act with the editor. New ones > n will be added and unused will be omitted.

const rawState = convertToRaw(contentState) const { entityMap } = rawState;

This entityMap will have list of all entities. But this is an expensive conversion. Because, it will convert whole thing to raw. A better way is loop through blocks and check for entity.

You'll have to look at every character:

    const { editorState } = this.state; // assumes you store `editorState` on `state`
    const contentState = editorState.getCurrentContent();

    let entities = [];
    contentState.getBlockMap().forEach(block => { // could also use .map() instead
      block.findEntityRanges(character => {
        const charEntity = character.getEntity();
        if (charEntity) { // could be `null`
          const contentEntity = contentState.getEntity(charEntity);
          entities.push(contentEntity);
        }
      });
    });

Then you could access it via:

    entities.forEach((entity, i) => {
      if (entity.get('type') === 'ANNOTATION') {
        const data = entity.get('data');
        // do something
      }
    })