import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot, useTypixEditor,} from "@typix-editor/react";import { CollapsibleContainerNode, CollapsibleContentNode, CollapsiblePlugin, CollapsibleTitleNode, INSERT_COLLAPSIBLE_COMMAND,} from "@typix-editor/extension-collapsible";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: [ ...defaultExtensionNodes, CollapsibleContainerNode, CollapsibleContentNode, CollapsibleTitleNode, ], theme: defaultTheme,});function InsertCollapsibleButton() { const editor = useTypixEditor(); return ( <button className="toolbar-btn" style={{ width: "auto", padding: "0 8px", fontSize: 12 }} onClick={() => editor.lexical.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined) } > + Collapsible </button> );}export default function CollapsibleExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar extra={<InsertCollapsibleButton />} /> <EditorContent placeholder="Start typing or insert a collapsible block..." /> </div> <CollapsiblePlugin /> </EditorRoot> );}