Draft-JS Mention Plugin - Change Mentions Object K/V

Question

Switched our Rich Text Editor over to Draft-JS but am having an issue with the mentions plugin.

The mentions plugin expects an array of objects such as below.

const mentions = [
  {
    name: 'Matthew Russell',
    link: 'https://twitter.com/mrussell247',
    avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
  }
]

My issue is that I'd like to to search on name, but insert the value when selected

const mentions = [
  {
    name: 'Matthew Russell',
    link: 'https://twitter.com/mrussell247',
    avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
    value: "mr5058"
  }
]

For example, when the user searches and selects "Matthew Russel", "mr5058" gets inserted into the text field. Does anyone know of a work around or solution to this?

score 1 · Answer 1 · answered May 28 '20 at 19:19

You can achieve this thing by using mentionComponent property of createMentionPlugin. Sample Code below:

 const mentionPlugin = createMentionPlugin({
  mentionTrigger: "@",
  mentionComponent: FileMentionComponent
});

Where my FileMentionComponent is:

export default function FileMentionComponent
({  mention: { name,link,value},
  children
}) {
  return (
    <>
       <span>{value}</span> 
       <span style={{ display: "none" }}>{children}</span>
    </>

  );
}

See the official Docs of this plugin: https://www.draft-js-plugins.com/plugin/mention and search for "Custom Mention Component Example"

Cheers

Draft-JS Mention Plugin - Change Mentions Object K/V

1 Answers1