Name: Typix
Author: Diyorbek Juraev

The Collapsible extension adds expandable/collapsible blocks (like <details>) to the editor.

Demo

Loading preview...

import {  EditorContent,  EditorRoot,  createEditorConfig,  defaultExtensionNodes,  useTypixEditor,} from "@typix-editor/react";import {  CollapsibleContainerNode,  CollapsibleContentNode,  CollapsiblePlugin,  CollapsibleTitleNode,  INSERT_COLLAPSIBLE_COMMAND,} from "@typix-editor/extension-collapsible";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({  extensionNodes: [    ...defaultExtensionNodes,    CollapsibleContainerNode,    CollapsibleContentNode,    CollapsibleTitleNode,  ],  theme,});function InsertCollapsibleButton() {  const editor = useTypixEditor();  return (    <button      onClick={() =>        editor.lexical.dispatchCommand(          INSERT_COLLAPSIBLE_COMMAND,          undefined,        )      }    >      Insert Collapsible    </button>  );}export default function CollapsibleExample() {  return (    <EditorRoot config={config}>      <InsertCollapsibleButton />      <EditorContent placeholder="Start typing..." />      <CollapsiblePlugin />    </EditorRoot>  );}

Installation

pnpm add @typix-editor/extension-collapsible

npm install @typix-editor/extension-collapsible

yarn add @typix-editor/extension-collapsible

Setup

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.

Collapsible

Demo

Installation

Setup

Inserting a collapsible block

Exports

Nodes

On this page