@-mention tooltip


#1

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.view.dom.parentNode.appendChild(this.tooltip);
        this.update(this.view, null);
    }
   update(view, oldState) {
       // Update results and draw tooltip
   }
   destory() {
       this.tooltip.remove();
   }
}

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?
#2

After a little research I found this library.