Quill - Mention not inserting mention value in Quill JS editor content (Using React Quill)

Question

I'm implementing Quill-Mention in Quill JS , using React Quill but I can't manage to update editor content when clicking an item from the list.

I can properly render the list when clicking the right symbol and it shows data accordingly. But, when I click it, it disappears and the item value is not added to editor content.

Here is how I'm testing it:

const suggestPeople = searchTerm => {
  const allPeople = [
    {

      id: 1,
      value: "Fredrik Sundqvist"
    },
    {
      id: 2,
      value: "Patrik Sjölin"
    }
  ];
  return allPeople.filter(person => person.value.includes(searchTerm));
};

  /* Mention module config
  ====================== */

  const mentionModule = {
    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
    mentionDenotationChars: ["·"],
    source: async function(searchTerm, renderList) {
      const matchedPeople = await suggestPeople(searchTerm);
      renderList(matchedPeople);
    }
  };

  Quill.register("modules/mentions", QuillMention);

 const modules = {
    syntax: true,
    clipboard: {
      matchVisual: false
    },
    toolbar: {
      container: "#toolbar",
    },
    mention: mentionModule
  };

Screenshot showing Quill Mention dropdown list working

Thank you!

Answer 1

I solved it.

I needed to add the onSelect method in the config object plus add "mention" as an element of the formats array.

Thank you either way :)