Show popup in markdown after '@' sign to search for users

Question

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.

Answer 1

so the logic should be the following:

1. user types input, and we use v-model to attach it to a data object. and we want to initiate a data variable isTag to false
2. we want to listen to every word until we hear '@', so basically, we want to listen to the first click when input data is empty
3. if we hear '@', we set isTag to true
4. now, using v-if, we can open our modal conditionally and listen using the v-model to the typing data as it changes.

I don't know tui-editor, so I can only help you with vue code; it would be something like that (jsfiddle)