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?

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, Oct 02 '17 at 11:10
`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, Nov 12 '18 at 16:13

score 13 · Answer 1 · answered Oct 05 '17 at 22:37

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

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... — Adam Libuša, Nov 12 '18 at 16:09

Spark.Bao · Answer 2 · 2018-11-29T03:07:48.087

5

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:

edited Nov 29 '18 at 03:07

answered Aug 23 '18 at 07:28

Spark.Bao

5,573
2
31
36

Hey check my above comment. – SBimochan Nov 28 '18 at 08:30

SBimochan · Answer 3 · 2018-11-28T08:25:05.157

0

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.

edited Nov 28 '18 at 08:25

answered Nov 27 '18 at 13:53

SBimochan

474
4
13

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. – Spark.Bao Nov 29 '18 at 03:01

score 0 · Answer 4 · answered Aug 30 '19 at 13:37

0

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.

answered Aug 30 '19 at 13:37

fix-me

21
3

and how we'd obtain that? the real key I mean? – Ahmed Mohamedeen Jun 23 '20 at 12:25

reetesh11 · Answer 5 · 2019-10-15T05:25:20.250

0

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.

edited Oct 15 '19 at 05:25

answered Oct 15 '19 at 05:17

reetesh11

661
1
9
16

score 0 · Answer 6 · answered Oct 18 '19 at 01:54

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

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

6 Answers6