import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,  useActiveFormats,  useBlockType,  useTypixEditor,} from "@typix-editor/react";import {  ContextMenuExtension,  type TypixContextMenuItem,} from "@typix-editor/extension-context-menu";import {  Bold, Italic, Underline, Code,  Heading1, Heading2, Quote, Undo, Redo,} from "lucide-react";import { Toolbar } from "./Toolbar";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme: defaultTheme,});// Options live inside the component so `disabled` reflects current state.function EditorWithContextMenu() {  const editor = useTypixEditor();  const { isActive } = useActiveFormats({    formats: ["bold", "italic", "underline", "code"],  });  const blockType = useBlockType();  const options: TypixContextMenuItem[] = [    {      type: "item",      label: "Bold",      icon: <Bold size={14} />,      disabled: isActive("bold"),      onSelect: (ed) => ed.toggleBold(),    },    {      type: "item",      label: "Italic",      icon: <Italic size={14} />,      disabled: isActive("italic"),      onSelect: (ed) => ed.toggleItalic(),    },    {      type: "item",      label: "Inline Code",      icon: <Code size={14} />,      disabled: isActive("code"),      onSelect: (ed) => ed.toggleCode(),    },    { type: "separator" },    {      type: "item",      label: "Heading 1",      icon: <Heading1 size={14} />,      disabled: blockType === "h1",      onSelect: (ed) => ed.toggleHeading({ level: 1 }),    },    {      type: "item",      label: "Quote",      icon: <Quote size={14} />,      disabled: blockType === "quote",      onSelect: (ed) => ed.toggleQuote(),    },    { type: "separator" },    {      type: "item",      label: "Undo",      icon: <Undo size={14} />,      onSelect: (ed) => ed.undo(),    },    {      type: "item",      label: "Redo",      icon: <Redo size={14} />,      onSelect: (ed) => ed.redo(),    },  ];  return <ContextMenuExtension options={options} />;}export default function ContextMenuExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder="Right-click to see the context menu..." />      </div>      <EditorWithContextMenu />    </EditorRoot>  );}