window.addEventListener("mention-clicked"... not triggering

[Jibeji]

Hi,
I have tried both examples, and even tested the source code of https://quill-mention.com/ on my own server, this is not triggered.

window.addEventListener("mention-clicked", function(event) {
    console.log(event);
})

Nothing in the console.

Could this be related to this warning message?

[Deprecation]Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

[Jibeji]

It works when I click on a user inside the Div editor, I wanted it to work while clicking on the dropdown list, is this possible?

[csculley]

Unfortunately, the "mention-clicked" event is only triggered when clicking on the mention blot that is shown within the editor. For the menu, you should be able to use the renderItem callback to customize how you want the item to appear in the dropdown list. and onSelect should be triggered once an item is selected, which you can override with your custom function.

I'll convert this issue to a discussion post since it's more about implementation assistance than a deficiency in the library. Thank you!

[Jibeji]

Thanks for your answer.
I would like to send a notification to a user as soon as he is cited, therefore inserted in the editor. So I wanted to retrieve its ID when we click in the list. Maybe there is another way?
Unfortunately I am not good enough in programming to manage that you propose.

[Jibeji]

Found a way to do that:

   quill.on('text-change', function(delta, oldDelta, source) {
      if (source === 'user') {
         const editorContent = quill.root.innerHTML;
         const matches = editorContent.match(/data-id="(\d+)"/g);
         if (matches) {
              <....>
         }
      }
   })