Implementing Mentions in Kendo Vue Editor

Environment

Product	Kendo UI for Vue Editor
Version	Current

Description

I am using the Kendo Editor for Vue to post comments and need to add a mention feature. Is it possible to implement mentions in the Kendo Vue Editor? If so, how can I achieve this?

This KB article also answers the following questions:

• How can I add mentions in the Kendo Vue Editor?
• Is there a plugin to add mentions in Kendo Vue Editor?
• How to use prosemirror-mentions with Kendo Editor for Vue?

Solution

To implement the mention functionality within the Kendo Vue Editor, follow the steps below:

1. Install the prosemirror-mentions plugin:

sh

npm install prosemirror-mentions

2. Reference the plugin in your Vue component:

jsx

  import {
    addMentionNodes,
    addTagNodes,
    getMentionsPlugin,
  } from "prosemirror-mentions";

3. Define the mentions data and pass it to the mentions plugin:

jsx

const mentionsData = [
  { name: "Anna Brown", id: "103", email: "[e-mail]" },
  { name: "John Doe", id: "101", email: "[e-mail]" },
  { name: "Joe Lewis", id: "102", email: "[e-mail]" },
];

const tagsData = [
  { tag: "WikiLeaks" },
  { tag: "NetNeutrality" },
  { tag: "Kendo UI for Vue" },
];

const getMentionSuggestionsHTML = (items) => {
  return (
    '<div class="suggestion-item-list">' +
    items
      .map((i) => '<div class="suggestion-item">' + i.name + "</div>")
      .join("") +
    "</div>"
  );
};

const getTagSuggestionsHTML = (items) => {
  return (
    '<div class="suggestion-item-list">' +
    items
      .map((i) => '<div class="suggestion-item">' + i.tag + "</div>")
      .join("") +
    "</div>"
  );
};

const mentionPlugin = getMentionsPlugin({
  getSuggestions: (type, text, done) => {
    setTimeout(() => {
      if (type === "mention") {
        done(mentionsData);
      } else {
        done(tagsData);
      }
    }, 0);
  },
  getSuggestionsHTML: (items, type) => {
    if (type === "mention") {
      return getMentionSuggestionsHTML(items);
    } else if (type === "tag") {
      return getTagSuggestionsHTML(items);
    }
  },
});

Refer to the example project on CodeSandbox for a complete implementation: Example Project.

See Also

• Kendo Editor for Vue Documentation
• prosemirror-mentions Plugin Documentation