Selecting quill-mention item not inserting into editor

[mkuhnwildfiredefense]

I've scoured the web for 2 days have not found a solution to this. It appears when quill-mention calls the editor's insertEmbed method, it is failing to make the connection to the editor to be able to call the method or something else funky is happening. All it inserts is a new empty paragraph below the paragraph where I've typed the @ symbol to trigger quill-mention:

react: 18.3.1
react-dom: 18.3.1
react-quill-new: 3.3.3
quill-mention: 6.0.2

https://github.com/quill-mention/quill-mention/blob/dd5e67c51217106d26f52a2b539fd197041e49f8/docs/quill.mention.js#L364

I've tried:
Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention, "formats/mention": MentionBlot });

Any ideas why everything with quill-mention would work until it comes time to actually insert the html into the quill editor???

This has become a pretty big blocker after a recent release so any help is appreciated. Thanks

[VaguelySerious]

Could you share a minimal reproducible example with me? Preferably a code sandbox link

[anshulsahni]

@mkuhnwildfiredefense Were you able to solve this problem? Any hack, any other module anything?

[anshulsahni]

Hi @VaguelySerious tried setting up a sandbox environment, but ran into some import issues, with quill-mention. Here is some of the snippets from my code, which might help

Package Versions

"react-quill-new": "3.4.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"quill-mention": "6.0.2",

Registering Quill Mention with Quill object imported from react-quill-new

import ReactQuill, { Quill } from "react-quill-new";

if (typeof window !== "undefined") {
  const mention = require("quill-mention");
  Quill.register({
    "blots/mention": mention.MentionBlot,
    "modules/mention": mention.Mention,
    "formats/mention": mention.MentionBlot,
  });
}

<ReactQuill
            onKeyDown={handleKeyPress}
            ref={quillRef}
            modules={modules}
/>

I'm facing the exact same issue, which @mkuhnwildfiredefense is facing, What I'm observing is, when quill-mention calls insertEmbed from quill API, the delta returned is an empty array. We're not sure whether this issue is with quill-mention or react-quill-new

[mkuhnwildfiredefense]

@anshulsahni i had to abandon react-quill-new and go with vanilla Quill to make this work. i also had to utilize useRef and then also store my mention config object in state so the source function worked as expected:

useEffect(() => {
    dispatch(fetchTagUsers({}));
    dispatch(fetchMe());

    // Add quill mention config to state
    setMention({
      allowedChars: /^[A-Za-z0-9_\-\s]*$/,
      mentionDenotationChars: ["@"],
      source: function (searchTerm: any, renderList: any) {
        let values = mentionUsersRef.current.map((u) => ({ id: u.id, value: u.displayName })).filter((u) => u.id != currentUserRef.current?.id);

        if (searchTerm.length > 0) {
          values = values.filter((u) => {
            return u.value.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0;
          });
        }

        renderList(values.length > 10 ? values.slice(0, 11) : values, searchTerm);
      },
      renderItem: (item: any, searchTerm: any) => {
        //Here you can customize the HTML of the items in the list
        const user = mentionUsersRef.current.filter((u) => u.id === item.id)[0];
        if (!user?.id) return;
        const div = document.createElement("div");
        div.innerHTML = `<span class="ql-mention-name">${user.displayName}</span><span class="ql-mention-mail">${user.mail ?? user.userPrincipalName}</span>`;
        return div;
      },
    });
  }, []);

  useEffect(() => {
    if (!document.getElementById("log-quill") || !mention.source) return;
      setQuill(new Quill("#log-quill", {
        theme: "snow",
        modules: {
          mention,
          toolbar,
        },
      }));
  }, [mention]);

  useEffect(() => {
    mentionUsersRef.current = tagUsers;
  }, [tagUsers]);

  useEffect(() => {
    currentUserRef.current = currentUserInfo;
  }, [currentUserInfo]);

[anshulsahni]

Hi @mkuhnwildfiredefense @VaguelySerious I was able to fix this. I was having the issue because quill-mention and react-quill-new were installing their Quill in the node_modules individually inside their folders. I was able to fix it by installing the correct version of Quill as the direct dependency of the application rather than using it as a transitive dependency of quill-mention and react-quill-new separately.

This was a bug because the way quill-mention is structured, since it's a plugin it should consider making Quill as a peer dependency rather than a dependency of itself.