Mentions plugin

[icellan]

I implemented a working mentions plugin for the editor, using the prosemirror-mentions plugin. I could not find documentation about how to do this, so it was lots of reading of code. I just wanted to share this in case it could be useful for someone else.

import { Extension } from 'rich-markdown-editor';
import Node from 'rich-markdown-editor/dist/nodes/Node';
import {
  getMentionsPlugin,
  tagNode,
  mentionNode,
} from 'prosemirror-mentions'

export class TagNode extends Node {
  get name() {
    return "tag";
  }
  get schema() {
    return tagNode;
  }

  toMarkdown(state, node) {
    const tag = node.attrs["tag"];
    if (tag) {
      state.write(`[#${tag}](tag://${tag})`);
    }
  }

  parseMarkdown() {
    return {
      node: "tag",
      getAttrs: tok => {
        return { "tag": tok.markup.trim() };
      },
    };
  }
}

export class MentionNode extends Node {
  get name() {
    return "mention";
  }
  get schema() {
    return mentionNode;
  }

  toMarkdown(state, node) {
    const id = node.attrs["id"];
    const name = node.attrs["name"];
    if (name) {
      state.write(`[@${name}](mention://${id})`);
    }
  }

  parseMarkdown() {
    return {
      node: "mention",
      getAttrs: tok => {
        console.log(tok)
        return { "name": tok.markup.trim() };
      },
    };
  }
}

export default class Mentions extends Extension {
  get name() {
    return "mentions";
  }

  get plugins() {
    const options = this.options;
    const mentionPlugin = getMentionsPlugin({
      getSuggestions: (type, text, done) => {
        if (options.getSuggestions) {
          options.getSuggestions(type, text, done);
        } else {
          setTimeout(() => {
            if (type === 'mention') {
              // pass dummy mention suggestions
              done([
                {name: 'John Doe', id: '101', email: 'joe@gmail.com'},
                {name: 'Joe Lewis', id: '102', email: 'lewis@gmail.com'}
              ]);
            } else {
              // pass dummy tag suggestions
              done([
                {tag: 'WikiLeaks'},
                {tag: 'NetNeutrality'}
              ]);
            }
          }, 0);
        }
      },
      getSuggestionsHTML: (items, type) =>  {
        if (options.getSuggestionsHTML) {
          return options.getSuggestionsHTML(items, type);
        } else {
          if (type === 'mention') {
            return '<div class="suggestion-item-list">'+
              items.map(i => '<div class="suggestion-item">'+i.name+'</div>').join('')+
              '</div>';
          } else if (type === 'tag') {
            return '<div class="suggestion-item-list">'+
              items.map(i => '<div class="suggestion-item">'+i.tag+'</div>').join('')+
              '</div>'
          }
        }
      }
    });

    return [mentionPlugin];
  }
}

And implemented like this in my component:

import Editor from "rich-markdown-editor";
import Mentions, { TagNode, MentionNode }  from './Mentions';

export const component = function({}) {
    return (
      <Editor
        extensions={[ new TagNode(), new MentionNode(), new Mentions({
            getSuggestions(type, text, done) {
                // write your own function to get suggestions
                const suggestions = [];
                suggestions.push({
                    id: '102',
                    name: 'Joe Lewis',
                    email: 'lewis@gmail.com',
                });
                done(suggestions);
            },
        })]}
      />
   );
}

Any tips or other comments are welcome.