Set SelectionState for entity when clicked

Question

I have a case where I can click on an entity, and then select new content to replace the entire entity. For example:

Here is some text [special entity] and some more text
                       ^ click anywhere inside the brackets

After choosing new content, it replaces the old entity text and becomes:

Here is some text [my new entity] and some more text

Basically, I'm trying to do:

const newSelectionState = SelectionState.createEmpty(key).merge({
  anchorOffset: entityStart,
  focusOffset: entityEnd
});

I've tried using currentContentState.getSelectionBefore(key).getStartOffset() and currentContentState.getSelectionAfter(key).getStartOffset() but the values seem unreliable.

How should I get the proper start and end offsets for the entity? Or, is there a better way to approach this problem?

Answer 1

I found a library called draftjs-utils that has a method called getEntityRange and this is able to give me the start and end offsets I need.