Mention - Not possible initialize mention from plain text

After saving the text with the mention, I have something like this:

My first mention to Marta Stewart

After render my Mention Component with data server, it’s not markable the mention people. It is like normal text:

My first mention to Marta Stewart

In my constructor i use:

  constructor(props) {
    super(props)

    const { mentions, value } = props

    this.state = {
      editorState: createEditorStateWithText(value),
      suggestions: mentions
    }

    this.mentionPlugin = createMentionPlugin()
  }

Can not generate mentions from plain text?

[tumetus]

Hello all!

I’m not sure if I understood the question correctly, but in the @marlonmleite 's constructor example above, I assume the editor is initialising the suggestion (=popup that appears when you type @) with mentions variable and the editor itself with plain text variable value. There is no information about existing mentions and their positions (?).

If you save the editor content with mentions as plain text, there is no way to know where the mention is supposed to be. But if you save the editor content as json using convertToRaw function and then initialise the editor with that json, it is possible because entityMap is saved.

What happens when you add a mention is, there is an object with type = “mention” created to the entityMap. This object will have information about the mention and then in the blocks.entityRanges will have information on what part of the text that entity belongs to. (More about storing draft js editor content here).

I created a codesandbox which has draft-js-plugins-editor with mentions plugin. When you type something into the editor you can see the editors ContentState as json below the editor. This way you can test out how the ContentState evolves when you type and add mentions to the editor. Here is the link https://codesandbox.io/s/mqvp7mkkrx .

Hopefully this answered what you were looking for or at least cleared things a bit.

#1097

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.