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

You can add quill-mention like this in the React app.

import React from "react";
import ReactDOM from "react-dom";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css"; // ES6
import "./styles.css";
import mention from "quill-mention";
const atValues = [
  { id: 1, value: "Fredrik Sundqvist" },
  { id: 2, value: "Patrik Sjölin" }
];
const hashValues = [
  { id: 3, value: "Fredrik Sundqvist 2" },
  { id: 4, value: "Patrik Sjölin 2" }
];
const handleChange = (value, delta) => {
  console.log(value, delta);
};
function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ReactQuill
        onChange={handleChange}
        modules={{
          mention: {
            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
            mentionDenotationChars: ["@", "#"],
            source: function (searchTerm, renderList, mentionChar) {
              let values;

              if (mentionChar === "@") {
                values = atValues;
              } else {
                values = hashValues;
              }

              if (searchTerm.length === 0) {
                renderList(values, searchTerm);
              } else {
                const matches = [];
                for (i = 0; i < values.length; i++)
                  if (
                    ~values[i].value
                      .toLowerCase()
                      .indexOf(searchTerm.toLowerCase())
                  )
                    matches.push(values[i]);
                renderList(matches, searchTerm);
              }
            }
          }
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

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 :)