CODEWITHSUNDEEP
javascriptreactjsdraftjs
Pavel Poberezhnyi
Pavel Poberezhnyi

Reputation: 773

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

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?

Upvotes: 6

Views: 10576

Answers (6)

tom
tom

Reputation: 620

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

Upvotes: 0

reetesh11
reetesh11

Reputation: 701

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.

Upvotes: 0

fix-me
fix-me

Reputation: 21

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.

Upvotes: 0

Spark.Bao
Spark.Bao

Reputation: 5743

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:

enter image description here

Upvotes: 5

SBimochan
SBimochan

Reputation: 458

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.

Upvotes: 0

Farbod
Farbod

Reputation: 191

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

Upvotes: 13

Related Questions