Add prosemirror-mentions plugin

[fredmabire]

This is related to Comment.

In order to enable prosemirror-mentions, you have to do somme stuff (this example is based from NgxEditor stackblitz demo).

This is just an example. It can probably be optimized.

1. In schema.ts
   Import dependencies:

import { nodes as basicNodes, marks as basicMarks } from 'ngx-editor';
import {mentionNode, tagNode} from 'prosemirror-mentions'

Declare nodes and marks const like this:

const nodes = {
  ...basicNodes,
  tag: tagNode,
  mention: mentionNode,
  code_mirror: codeMirror,
};

const marks = {
  ...basicMarks,
  marks: basicSchema.spec.marks,
};

2. In plugins/index.ts:

Import dependencies:

import { getMentionsPlugin } from 'prosemirror-mentions';

update const getPlugins() like this :

const getPlugins = (): Plugin[] => {
  /**
   * IMPORTANT: outer div's "suggestion-item-list" class is mandatory. The plugin uses this class for querying.
   * IMPORTANT: inner div's "suggestion-item" class is mandatory too for the same reasons
   */
  var getMentionSuggestionsHTML = (items) =>
    '<div class="suggestion-item-list">' +
    items.map((i) => '<div class="suggestion-item">' + i.name + '</div>').join('') +
    '</div>';

  /**
   * IMPORTANT: outer div's "suggestion-item-list" class is mandatory. The plugin uses this class for querying.
   * IMPORTANT: inner div's "suggestion-item" class is mandatory too for the same reasons
   */
  const getTagSuggestionsHTML = (items) =>
    '<div class="suggestion-item-list">' +
    items.map((i) => '<div class="suggestion-item">' + i.tag + '</div>').join('') +
    '</div>';

  const users = [
    {
      name: 'John Doe',
      id: '101',
      email: '[email protected]',
    },
    {
      name: 'Joe Lewis',
      id: '102',
      email: '[email protected]',
    },
  ];
  const plugins = [
    /// See available options here https://github.com/joelewis/prosemirror-mentions#complete-list-of-options
    getMentionsPlugin({
      getSuggestions: (type, text, done) => {
        setTimeout(() => {
          if (type === 'mention') {
            done(users.filter((x) => x.name.toLowerCase().includes(text.toLowerCase())).splice(0, 5));
          } else {
            // pass dummy tag suggestions
            done([
              {
                tag: 'WikiLeaks',
              },
              {
                tag: 'NetNeutrality',
              },
            ]);
          }
        }, 0);
      },
      getSuggestionsHTML: (items, type) => {
        if (type === 'mention') {
          return getMentionSuggestionsHTML(items);
        } else if (type === 'tag') {
          return getTagSuggestionsHTML(items);
        } else {
          return null;
        }
      },
    }),
  ];
};

3. Add style for list and mentions :

.suggestion-item-list {
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.suggestion-item {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.suggestion-item:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

// This are in styles.scss
.prosemirror-mention-node {
  color: blue !important;
  text-decoration: underline !important;
}
.prosemirror-tag-node {
  color: gray !important;
  font-style: italic;
}

You are now done !

[sibiraj-s]

Thanks @fredmabire This looks great. Would you like to add this to the docs under examples? Feel free to make a PR.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related items and link to relevant comments in the thread.