Add support for mentions to your Slate editor.

Installation

install --save slate-mentions

Usage

TL;DR:

rt { Editor } from 'slate';
rt MentionsPlugin from 'slate-mentions';

t mentions = MentionsPlugin({
ntion: (props) => <span {...props.attributes}>{props.children}</span>,
ggestions: (props) => (
<div>
  {props.suggestions.map((suggestion, index) => (
    <span
      style={{
        background: index === props.selected ? 'red' : 'grey',
      }}
    >
      {suggestion}
    </span>
  ))}
</div>



t suggestions = ['max', 'brian', 'bryn'];

teSuggestions = (text) => {
is.setState({
suggestions: suggestions.filter(suggestion => suggestion.indexOf(text) > -1),
;


tor
ugins={[mentions]}
ggestions={suggestions}
MentionSearch={this.updateSuggestions}

The plugin has two required options:

• Mention: The component to render a mention mark in the editor. This gets two props (attributes and children), and props.attributes must be attached to the DOM node. (just like any other Slate mark)
• Suggestions: The component to render the suggestions as a list. This is already in a portal that's positioned next to the mention. This component gets three props: suggestions (the list of suggestions), selected (the index of the currently selected mention via keyboard shortcuts) and mention. (the search text)

After passing these two options to the plugin and adding it to the plugins array you have to pass two special props to the Slate Editor component:

• suggestions: A list of suggestions to show in the Suggestions. Has to be an array.
• onMentionSearch: A function that filters/gets the suggestions based on the input from the user.

onMentionSearch can be asynchronous if you need to fetch data from a server. To add a loading state set suggestions to null temporarily:

teSuggestions = (text) => {
 Tell slate-mentions you're currently loading suggestions
is.setState({
suggestions: null
;
 Fetch the suggestions
tch(`api.com/v1/people?filter=${text}`)
.then(possibleMentions => {
  // Set the state
  this.setState({
    suggestions: possibleMentions,
  })
})