Why does react quill mentions not showing?

Question

I have created a component for RichText with ReactQuill and i am implementing mentions but when i type @ in textbox mentions not working i tried puting dependency in useMemo but the textbox disapears

How can i make this code work so when i type @ it shows the list of people?

Below please find the code which i made

const RichText = (props) => {
  const [people, setPeople] = useState([]);

  const reactQuillRef = React.useRef(null);

  useEffect(() => {
setPeople(props.getPeople)

  }, []);

  const modules = useMemo(
    () => ({
      toolbar: [
        [{ font: [] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ align: [] }],
        [{ color: [] }, { background: [] }],
        ["image"],
        ["clean"],
      ],
      mention: {
        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
        mentionDenotationChars: ["@"],
        spaceAfterInsert: true,
        source: (searchTerm, renderList, mentionChar) => {
          let values;

          if (mentionChar === "@") {
            values = people;
          }
          if (searchTerm.length === 0) {
            renderList(values, searchTerm);
          } else {
            const matches = [];
            for (let i = 0; i < values.length; i++)
              if (
                ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
              )
                matches.push(values[i]);
            renderList(matches, searchTerm);
          }
        },
      },
    }),
    []
  );
    
  return (
      <ReactQuill
        defaultValue={props.defaultValue || ""}
        value={props.value || ""}
        theme="snow"
        ref={reactQuillRef}
        placeholder={props.placeholder}
        className={`note_input`}
        formats={formats}
        modules={modules}
        onChange={(content, delta, source, editor) => {
          props.setValue(content, delta, source, editor);
        }}
      />
  );
};

export default RichText;

score 0 · Answer 1 · answered Dec 13 '22 at 12:16

Solved by these actions:

Moved people state to parent
Removed useMemo from mentions
Added useCallback to source
Added memo to RichText export

Now everything working as it should. Below code how it is solved.

const RichText = (props) => {
  const reactQuillRef = React.useRef(null);

const modules = {
    toolbar: [
      [{ font: [] }],
      [{ size: ["small", false, "large", "huge"] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ align: [] }],
      [{ color: [] }, { background: [] }],
      ["image"],
      ["clean"],
    ],
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@"],
      spaceAfterInsert: true,
      source: useCallback((searchTerm, renderList, mentionChar) => {
        let values;
        if (mentionChar === "@") {
          values = props.people;
        }
        if (searchTerm.length === 0) {
          renderList(values, searchTerm);
        } else {
          const matches = [];
          console.log("val", values);
          for (let i = 0; i < values.length; i++)
            if (
              ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
            )
              matches.push(values[i]);
          renderList(matches, searchTerm);
        }
      }, []),
    },
  };
    
  return (
      <ReactQuill
        defaultValue={props.defaultValue || ""}
        value={props.value || ""}
        theme="snow"
        ref={reactQuillRef}
        placeholder={props.placeholder}
        className={`note_input`}
        formats={formats}
        modules={modules}
        onChange={(content, delta, source, editor) => {
          props.setValue(content, delta, source, editor);
        }}
      />
  );
};

export default React.memo(RichText);

Why does react quill mentions not showing?

1 Answers1