import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,} from "@typix-editor/react";import {  MentionExtension,  MentionNode,} from "@typix-editor/extension-mention";import { Toolbar } from "./Toolbar";const config = createEditorConfig({  extensionNodes: [...defaultExtensionNodes, MentionNode],  theme: defaultTheme,});const users = [  {    id: "1",    name: "Alice Johnson",    data: { avatar: "https://i.pravatar.cc/32?img=1", subtitle: "@alice" },  },  {    id: "2",    name: "Bob Smith",    data: { avatar: "https://i.pravatar.cc/32?img=2", subtitle: "@bob" },  },  {    id: "3",    name: "Charlie Brown",    // no avatar — initials fallback is shown automatically    data: { subtitle: "@charlie" },  },];export default function MentionExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder='Type "@" to mention someone...' />      </div>      <MentionExtension        onSearch={(query) =>          users.filter((u) =>            u.name.toLowerCase().includes(query.toLowerCase()),          )        }        maxSuggestions={5}      />    </EditorRoot>  );}