Input Area disappers on source

[Zonalds]

I have multiple instances of the react quill, everything works fine except when I add quill-mention, the input area disappears.

I found that the 'source' function seems to be responsible for this. Any help with this?

[JoaoMagnago]

Hi.
I happened to run into the same problem.

What did it for me was:

1. Removing the source function from inside the modules objects like it's shown here.
2. Wrapping the function in a useCallback hook, like it's shown here.

If after those steps it still doesn't work, try adding 'mentions' to your formats whitelist array, if you have one. Also I added an import of quill-mention in my Quill component file (import 'quill-mention';).

By the way, the comment quoted in the 2nd step includes typescript implementation of Quill Mention, which may help as well.

[KostyaZgara]

Just in case, for me wrapping up with useCallback did work like it described in the provided link. Thanks!

[ghost]

Has anyone tried to use it by adding a dependency to the useCallback? I need the list of mentions to change. I try using a useCallback or useMemo but as soon as the dependency state changes the editor disappears.

[smitbarmase]

Adding a dependency to theuseCallback, seems to break it. I found the workaround that is, using useRef.

const RichText = ({
	id,
	mentions,
	...props
}: RichTextProps) => {
	const mentionsRef = useRef<Mention[]>([]);

	useEffect(() => {
		mentionsRef.current = mentions;
	}, [mentions]);

	return (
			<ReactQuill
				modules={{
					mention: {
						allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
						mentionDenotationChars: ["@"],
						source: useCallback(
							(
								searchTerm: string,
								renderList: (arg0: Mention[] | undefined, arg1: string) => void,
								mentionChar: string
							) => {
								let values;
								if (mentionChar === "@") {
									values = mentionsRef.current;
								}
								if (searchTerm.length === 0) {
									renderList(values, searchTerm);
								} else if (values) {
									const matches = mentionsRef.current?.filter((item) =>
										item.value.toLowerCase().includes(searchTerm.toLowerCase())
									);
									renderList(matches, searchTerm);
								}
							},
							[]
						),
					},
				}}
				onChange={(content) => {
				     // do something here
				}}
				{...props}
			/>
	);
};