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:
- Displaying the tooltip when ‘@’ is typed into the editor.
- 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?
