import { useState, useEffect, FC } from "react"; // remirror imports import { cx } from "@remirror/core"; import { useMentionAtom, MentionAtomNodeAttributes, FloatingWrapper, } from "@remirror/react"; // export const; export interface IMentionAutoComplete { mentions?: any[]; tags?: any[]; } export const MentionAutoComplete: FC = (props) => { const { mentions = [], tags = [] } = props; // states const [options, setOptions] = useState([]); const { state, getMenuProps, getItemProps, indexIsHovered, indexIsSelected } = useMentionAtom({ items: options, }); useEffect(() => { if (!state) { return; } const searchTerm = state.query.full.toLowerCase(); let filteredOptions: MentionAtomNodeAttributes[] = []; if (state.name === "tag") { filteredOptions = tags.filter((tag) => tag?.label.toLowerCase().includes(searchTerm) ); } else if (state.name === "at") { filteredOptions = mentions.filter((user) => user?.label.toLowerCase().includes(searchTerm) ); } filteredOptions = filteredOptions.sort().slice(0, 5); setOptions(filteredOptions); }, [state]); const enabled = Boolean(state); return (
{enabled && options.map((user, index) => { const isHighlighted = indexIsSelected(index); const isHovered = indexIsHovered(index); return (
{user.label}
); })}
); };