Type @ to mention a teammate, or # to tag a topic. A filter-as-you-type picker appears under the caret with async data loading, avatar / subtitle rendering, and atomic insertion — each mention is a non-editable pill that backspace removes as a single unit. One plugin handles every trigger character.
Pass a Promise-returning source(query) function to editor.mentions.register() and the plugin handles debouncing, the loading state, and the atomic pill insert. Use the same API with a different trigger char (#, [[, anything) to add more pickers — they all share one implementation.
editor.mentions.register({
trigger: "@",
source: function (query) {
return fetch("/api/users?q=" + encodeURIComponent(query))
.then(function (r) { return r.json(); })
.then(function (rows) {
return rows.map(function (u) {
return { id: u.id, label: u.name, subtitle: u.title, avatarUrl: u.avatar };
});
});
}
});