Typix
Loading preview…
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>  );}