@-mention tooltip


I am trying to build a @-mention plugin, similar to the editor in this forum. This is what I have so far:

function buildTooltip(searchText) {
    // Searches for the relevant users and creates an <ul> for displaying the results

class MentionToolTip {
    constructor(editorView) {
        this.view = editorView;
        this.tooltip = buildTooltip();  // Custom function
        this.tooltip.className = 'tooltip';
        this.update(this.view, null);
   update(view, oldState) {
       // Update results and draw tooltip
   destory() {

const mentions = new Plugin({
    state: {
        init(_, { doc }) {
            // Not sure if necessary
        apply(tr, oldPluginState, viewState) {
            // Not sure if necessary           
    view(editorView) {
        return new MentionToolTip(editorView);

I am stuck on two major points:

  1. Displaying the tooltip when ‘@’ is typed into the editor.
  2. Dynamically updating the tooltip using input from the user.

Is this the correct approach or should I be using a Widget Decoration instead? Is there an example of a similar plugin I can review, or this forum’s editor?

How to create a mention plugin similar to Atlaskit supporting popup?

After a little research I found this library.