Customising the mention list using custom functions in `tiptap`

App.tsx

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";

import Mention from "@tiptap/extension-mention";
import "./mention/styles.css";
import suggestion from "./mention/suggestion";

const getSuggestions = ({ id, query }: { id: string; query: string }) => {
  // do something with id and query

  return [
    "Lea Thompson",
    "Cyndi Lauper",
    "Tom Cruise",
    "Madonna",
    "Jerry Hall",
    "Joan Collins",
    "Winona Ryder",
    "Christina Applegate",
    "Alyssa Milano",
    "Molly Ringwald",
    "Ally Sheedy",
    "Debbie Harry",
    "Olivia Newton-John",
    "Elton John",
    "Michael J. Fox",
    "Axl Rose",
    "Emilio Estevez",
    "Ralph Macchio",
    "Rob Lowe",
    "Jennifer Grey",
    "Mickey Rourke",
    "John Cusack",
    "Matthew Broderick",
    "Justine Bateman",
    "Lisa Bonet",
  ]
    .filter((item) => item.toLowerCase().startsWith(query.toLowerCase()))
    .slice(0, id.length);
};

function App() {
  const id = "lalabla";

  const editor = useEditor({
    extensions: [
      StarterKit,
      Mention.configure({
        HTMLAttributes: {
          class: "p-1 rounded-sm",
        },
        suggestion: {
          ...suggestion,
          items: ({ query }) => getSuggestions({ id, query }),
        },
      }),
    ],
    content: "<p>Hello World!</p>",
  });

  return <EditorContent editor={editor} />;
}

export default App;