Draft JS, mention plugin renders as plain text

Question

I am implementing React's "draft js" with mention plugin. https://www.draft-js-plugins.com/ So far i am able to create the editor and creating the mention tags. I can save the mentions in my database using rest API. Here is what i do on saving content to db:

 const contentState = this.state.MyInput.getCurrentContent();
 const raw = convertToRaw(contentState);
 const data =  JSON.stringify(raw, null, 2);

After this, I am passing data to API. Till here it works well, now when I try to retrieve the data back from database. I use the below steps

  handlePostDisplay = (post) => {
  const savedData = JSON.parse(post.body)
  if (savedData !== null) {
    const contentState = convertFromRaw(savedData);
    const newEditorState = EditorState.createWithContent(contentState);
    return newEditorState;
  }
}

Then in my posts listing module I am passing newEditorState as prop.

<PostCard key={post.id} {...post} 
   postContent = {this.handlePostDisplay(post)}
/>

Finally here is my editor to display:

  <Editor 
      editorState={props.postContent} 
      readOnly={true} 
  />

The above code renders text but mention and hastags are not appearing properly they appear as plain text. I am sure i am missing any step while rendering, from the documentation i can see we need to use decorators but not sure how we i can use. I will highly appreciate any help!

Answer 1

Make sure to add mention plugin css file .

import 'draft-js-mention-plugin/lib/plugin.css';