Not Inserting text

I’m having a problem with quill-mention and react-quill.

The lists of options populate fine, and I’m able to search and select options, but when I select an option the tag is not inserted into quill. Quill will only show that a new paragraph has been added, but no other content is added.

`mention: { allowedChars: /^[A-Za-z0-9_\sÅÄÖåäö]*$/, mentionDenotationChars: [“@”, “#”], isolateCharacter: true, source: function (searchTerm, renderList, mentionChar) { let values;

			if (mentionChar === "@") {
				values = mentionList;
			} else {
				values = tagList;
			}

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

[crazypenguinguy]

It looks like my problem was due to using the Formats Whitelist with react-quill, I added mention to this list. The solution was given in issue #78

Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'video', 'mention'
]

[just-Bri]

I’m now having this issue, nad have added mention to the formats list:

<ReactQuill
  theme="snow"
  value={quillValue.text}
  onChange={(e) => setQuillValue({ text: e })}
  modules={{ mention: mentionModule }}
  formats={[
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
    'video',
    'mention',
  ]}
/>

And here is my current mentionModule:

  const mentionModule = {
    allowedChars: /^[A-Za-z\s]*$/,
    mentionDenotationChars: ['@'],
    source: (searchTerm: string, renderList: (data: any, searchText: string) => void) => {
      const mentionsToList = atValues.filter(
        (av) => av.value.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
      );
      if (mentionsToList.length > 0) {
        renderList(mentionsToList, searchTerm);
      }
    },
  };

Was kind of a pain getting it to work typescript but I got there. Anyone have any suggestions?