Extensions
Collapsible
Collapsible/accordion blocks for toggling content visibility
The Collapsible extension adds expandable/collapsible blocks (like <details>) to the editor.
Demo
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> );}Installation
pnpm add @typix-editor/extension-collapsiblenpm install @typix-editor/extension-collapsibleyarn add @typix-editor/extension-collapsibleSetup
Register the collapsible nodes and add the plugin:
import { createEditorConfig, defaultExtensionNodes } from '@typix-editor/react';
import {
CollapsiblePlugin,
CollapsibleContainerNode,
CollapsibleContentNode,
CollapsibleTitleNode,
} from '@typix-editor/extension-collapsible';
const config = createEditorConfig({
extensionNodes: [
...defaultExtensionNodes,
CollapsibleContainerNode,
CollapsibleContentNode,
CollapsibleTitleNode,
],
});
function MyEditor() {
return (
<EditorRoot config={config}>
<EditorContent />
<CollapsiblePlugin />
</EditorRoot>
);
}Inserting a collapsible block
Use the INSERT_COLLAPSIBLE_COMMAND:
import { INSERT_COLLAPSIBLE_COMMAND } from '@typix-editor/extension-collapsible';
function InsertCollapsibleButton() {
const editor = useTypixEditor();
return (
<button onClick={() => editor.lexical.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined)}>
Insert Collapsible
</button>
);
}Exports
| Export | Type | Description |
|---|---|---|
CollapsiblePlugin | Component | The collapsible behavior plugin |
INSERT_COLLAPSIBLE_COMMAND | Lexical Command | Command to insert a new collapsible |
CollapsibleContainerNode | Lexical Node | Outer container node |
CollapsibleContentNode | Lexical Node | Content area node |
CollapsibleTitleNode | Lexical Node | Title/summary node |
$createCollapsibleContainerNode | Function | Create a container node |
$createCollapsibleContentNode | Function | Create a content node |
$createCollapsibleTitleNode | Function | Create a title node |
$isCollapsibleContainerNode | Function | Type guard for container |
$isCollapsibleContentNode | Function | Type guard for content |
$isCollapsibleTitleNode | Function | Type guard for title |
Nodes
| Node | Description |
|---|---|
CollapsibleContainerNode | Wraps the title and content. Tracks open/closed state. |
CollapsibleTitleNode | The clickable title/summary that toggles visibility. |
CollapsibleContentNode | The content area that shows/hides. |