I'm trying to recreate functionality from Gitlab to show users list after writing '@' sign.

Currently I'm trying to add it to Tui Editor (using Vue).

I know how to listen for key up and add it as Widget, but it has a few drawbacks.

editor.on('keyup', (editorType, ev) => {

 if (ev.key === '@') {
   const userMenu = this.$refs.userMenu;
   refEditor.addWidget(userMenu.$el, 'top');
 }
});

1. After writing anything after '@' popup disappears.
2. When I write something like '@an' and delete 'an' it's not showing popup again.
3. When I lose focus from markdown and then focus it again and the caret is right after @ sign it isn't showing popup.

At this point I'm not sure where I should start.

So it should work this way: writing '@' should show me popup and when I write letters it should filter users according to those letters. It should make popup window visible whenever @ is at the start of a word, so '@@' or 'f@' shouldn't work.

Using: ES6+, Vue 2, Tui Editor, Vuetify.