reactjsdraftjsdraft-js-plugins

How to programatically add mentions using draft-js-mention-plugin?


The problem:

I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an array of objects. Now I need to recreate the editorState with that data.


Example:

I have a plain text like this:

const content = '@marcello we need to add spell check'

And a mentions array with objects like this:

const mentions = [{
  length: 8,
  offset: 0,
  user: 'user:59441f5c37b1e209c300547d',
}]

To create the editorState with the plain text I'm using these lines:

const contentState = ContentState.createFromText(content)
EditorState.createWithContent(contentState)

That works well. The plain text is set as initial state, but without mentions.

Now I need a way to add mentions based on mentions objects.

I'm trying to read the library code to figure it out, but without success so far.


Solution

  • With "draft-js": "^0.11.6" and "draft-js-mention-plugin": "^3.1.5" you can do

    const stateWithEntity = editorState.getCurrentContent().createEntity(
      'mention',
      'IMMUTABLE',
      {
        mention: {id: 'foobar', name: 'foobar', link: 'https://www.facebook.com/foobar'},
      },
    )
    const entityKey = stateWithEntity.getLastCreatedEntityKey()
    const stateWithText = Modifier.insertText(stateWithEntity, editorState.getSelection(), 'foobar', null, entityKey)
    EditorState.push(editorState, stateWithText)
    

    You may find this https://github.com/draft-js-plugins/draft-js-plugins/issues/915#issuecomment-386579249 and https://github.com/draft-js-plugins/draft-js-plugins/issues/983#issuecomment-382150332 helpful