Capture the removed mention

[code-cvc]

Is there any way to invoke some function when you remove the mention by pressing the backspace?
Basically, whenever I mention someone in quill editor and delete it by pressing backspace, I want to capture the deleted mention and do some operations based on the deleted mention.

[MartinMalinda]

I think you could listen to the keypress event, check for backapace key and then check the last child of the content editable element if it matches the mention element?

[ziaulrehman40]

this is a BIG issue and makes the component non-useable

[hnegi2531]

@code-cvc @MartinMalinda @ziaulrehman40 did you get any solution

[beradrian]

See this #79 even though it's not the cleanest approach. A delete event would be a nice addition.

[beradrian]

This is how I managed to get the deleted mentions: I added a text-change listener on the Quill editor and then check what mentions have been deleted.

quillEditor.on("text-change", (delta: DeltaStatic, oldContents: DeltaStatic, source: Sources) => {
	const deletedMentionIds = delta.ops.filter(op => typeof op.delete !== undefined).map(op => op.delete)
			.map(index => oldContents.ops[index]).filter(op => !!op?.insert?.mention).map(op => op.insert.mention.id);
	// do whatever you want
	// ...
});

Still will be good to have this as an event in the mention module.

[alexandrehborba]

I'm still newbie to quill and quill-mention but I had a similar issue in my project where I had to save the info articles ids when referenced by a FAQ Article.

I've found this issue and codepen at the quill repo. It seems to be a similar problem/implementation, @ziaulrehman40 do you think that's still the case? couldn't this be added in the mention blot?

[jamesalways]

I implemented this solution which I hope is worthy for someone.

In my case, I have all the options as mentionOptions and so every time something changes I search for the mentions in the editor using getContents(), get the mention from mentionsOptions, and call a function to update the mentions.

quillEditor.on('text-change', () => {
  if (mentionOptions.length > 0) {
    const mentions = new Set<MentionOption>()
    quillEditor.getContents().ops.forEach(op => {
      if ((op.insert as { mention: DOMStringMap })?.mention instanceof DOMStringMap && (op.insert as { mention: DOMStringMap })?.mention.denotationChar === '@') {
        const mention = mentionOptions.find(mention => mention.value === (op.insert as { mention: DOMStringMap })?.mention.value)
        if (mention) {
          mentions.add(mention)
        }
      }
    })
    updateMentions([...mentions])
  }
})