How to remove mentions from an editorstate in draft js?

1.1k views Asked by At

Been at this one for a LONG time and can't quite figure it out.

I have two components, controlled by a parent component. There is a property called "selected". So, when a user clicks on a list, it will update the parent component's selected property which is passed to the TagInput, which uses a MentionPlugin from draft-js.

In order to handle this, I implement a componentWillReceiveProps that looks as follows.

componentWillReceiveProps(nextProps) {
  const { initialTags: newTags } = nextProps;
  const previousTags = this.getTags(this.state.editorState);

  if (previousTags.length !== newTags.length) {
    const added = newTags.filter(tag => !previousTags.includes(tag));
    const removed = previousTags.filter(tag => !newTags.includes(tag));

    this.addMentions(added);
    this.removeMentions(removed);
  }
}

While it's easy to add entities in addMentions by creating a new entity and inserting it, for the life of me, I cannot figure out how to get a Mention by text and then delete it from the editor.

removeMentions(tags) {
  const { editorState } = this.state;
  for (const tag of tags) {
    // find tag in editor
    // select it and remove it
  }
}

How would this be done?

0

There are 0 answers