Mentions

Type @ and a name, pick a person from the list, and an @name chip goes in. For comments and team boards. Your site supplies the people through a search function.

createEditor('#editor', {
  toolbar: 'bold italic | link',
  mentions: {
    trigger: '@',
    search: (q) => [
      { id: 'minsu', label: 'Minsu Kim' },
      { id: 'jiyoung', label: 'Jiyoung Lee' },
      { id: 'junho', label: 'Junho Park' },
      { id: 'seoyeon', label: 'Seoyeon Choi' },
    ].filter((u) => u.label.toLowerCase().includes(q.toLowerCase())),
  },
});

How it works

• It starts with @ at the start of a line, after a space or after an opening parenthesis. An @ inside a word (a@b) does not.
• Right after @, search('') is called with an empty query; returning frequent contacts works well.
• The query is up to 30 characters with no spaces. With an IME, the letters still being composed are searched too.
• Up to eight results show, with the id as a small hint. ↑ ↓, Enter/Tab and Esc work.
• An inserted mention is one piece: it can't be edited inside and is deleted as a whole. A space follows it.

Searching on your server

search may return an array or a Promise. It runs on every keystroke; a late answer to an older query is dropped.

createEditor('#editor', {
  mentions: {
    search: async (q) => {
      const res = await fetch('/api/members?q=' + encodeURIComponent(q));
      return res.json(); // [{ id: 'minsu', label: 'Minsu Kim' }, …]
    },
  },
});

Saved HTML

<p><span data-mention="minsu">@Minsu Kim</span>, please check.</p>

Your server reads span[data-mention] to know who was mentioned, for example to send notifications.

Options