Draft.js. How to get all entities data from the ContentState

Question

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?

Nubbin

why not keep a set of entities you created? – Agog

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 – Nubbin

editorState should fully represent the state of the editor. Maintaining a separate set of entities goes against the "single source of truth" principle. – Zingale

Answer 1

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;
};

Deuteragonist

That let selectedEntity is not the nicest piece of JS code ever, but it's as if the creators of Draft.js API wanted people to write horrible code... – Zingale

Answer 2

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:

Sigismond

Hey check my above comment. – Assuasive

Answer 3

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

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

It will give you an array of raw text.

Assuasive

hey SBimochan, in fact, blocks are different with entities, you may have 5 blocks but only 2 entities. the asker wants to get keys of entities, not blocks, even blocks have no key because blocks are array while entities are map. – Sigismond

Answer 4

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.

Surgy

and how we'd obtain that? the real key I mean? – Shadowy

Answer 5

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.

Benjie

Answer 6

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
      }
    })

Whosoever