Skip to main content

​
Overview

The Accordion plugin creates collapsible content sections. Each item has a heading (click to expand/collapse) and content area. It uses native <details> / <summary> in the default render and supports HTML serialization from those elements.

​
Installation

npm install @yoopta/accordion

​
Basic Usage

Pass the plugin to createYooptaEditor; do not pass plugins to <YooptaEditor>. 
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Accordion from '@yoopta/accordion';

const plugins = [Accordion];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
  return <YooptaEditor editor={editor} onChange={() => {}} />;
}

​
Features

  • Expand/Collapse: Each item can be expanded or collapsed via isExpanded prop
  • Keyboard: Enter toggles expansion when in heading, or inserts a new item; Backspace removes empty items or the block
  • HTML: Deserializes from <details> / <summary> / <p>; serializes to the same
  • Email: Serializes to table-based layout for email clients
  • Shortcuts: Type accordion to insert

​
Structure

The Accordion block consists of nested elements: 
accordion-list
└── accordion-list-item (multiple)
    ├── accordion-list-item-heading
    └── accordion-list-item-content

​
Configuration

import Accordion from '@yoopta/accordion';

const plugins = [Accordion];

​
Options

​
display
object
​
shortcuts
string[]
default:"['accordion']"
Keyboard shortcuts to trigger the plugin in slash menu

​
Element props

​
accordion-list-item.props
object

​
Commands

Accordion commands are available via the plugin’s commands and through the editor. Use editor.blocks for block-level operations and the Accordion commands for structure.

​
insertAccordion

Insert a new Accordion block. 
import Accordion, { AccordionCommands } from '@yoopta/accordion';

AccordionCommands.insertAccordion(editor, {
  items: 2,
  props: { isExpanded: false },
  at: 0,
  focus: true,
});
​
items
number
default:"1"
Number of accordion items to create initially
​
props.isExpanded
boolean
default:"false"
Initial expanded state for each item
​
at
YooptaPathIndex
Index or path where to insert the block
​
focus
boolean
Whether to focus the new block after insert

​
buildAccordionElements

Build the accordion element structure (used internally by insertAccordion). 
import { AccordionCommands } from '@yoopta/accordion';

const accordionList = AccordionCommands.buildAccordionElements(editor, {
  items: 3,
  props: { isExpanded: true },
});

​
deleteAccordion

Remove an Accordion block by id. 
import { AccordionCommands } from '@yoopta/accordion';

AccordionCommands.deleteAccordion(editor, blockId);

​
Block operations

You can also use the generic Blocks API: 
import { Blocks } from '@yoopta/editor';

// Insert (use AccordionCommands.insertAccordion for correct initial structure)
Blocks.insertBlock(editor, 'Accordion', { blockData: { ... } });

// Delete
Blocks.deleteBlock(editor, { blockId });

// Update block meta (e.g. align, depth)
Blocks.updateBlock(editor, { blockId, meta: { align: 'center' } });

​
Element operations

To toggle an item’s expanded state or add/remove items, use the Elements API: 
import { Elements } from '@yoopta/editor';

// Toggle expanded state of an accordion item
Elements.updateElement(editor, {
  blockId,
  type: 'accordion-list-item',
  props: { isExpanded: !currentExpanded },
  path: listItemPath,
});

// Insert new accordion item
Elements.insertElement(editor, {
  blockId,
  type: 'accordion-list-item',
  props: { isExpanded: true },
  at: 'next',
  focus: true,
});

// Delete accordion item
Elements.deleteElement(editor, {
  blockId,
  type: 'accordion-list-item',
  path: listItemPath,
});

​
Keyboard behavior

  • Enter in heading: toggles the item’s expanded state
  • Enter in content: inserts a new accordion item after the current one
  • Backspace in empty heading: removes the item (or deletes the block if it’s the only item)
  • Backspace in empty content (when focus is in content): prevented so structure is preserved

​
Theme (Shadcn)

The @yoopta/themes-shadcn package provides styled accordion elements. Apply the theme so the Accordion block uses Shadcn UI: 
import { applyTheme } from '@yoopta/themes-shadcn';
import Accordion from '@yoopta/accordion';

const plugins = applyTheme([Accordion]);
The Shadcn accordion theme maps:
  • accordion-list → AccordionList
  • accordion-list-item → AccordionListItem (uses element.props.isExpanded for data-state)
  • accordion-list-item-heading → AccordionItemHeading
  • accordion-list-item-content → AccordionItemContent

​
Parsers

​
HTML

  • Deserialize: <details> with <summary> and <p> children
  • Serialize: Accordion block → <div> containing <details> / <summary> / <p>; block meta align and depth are stored in data-meta-align and data-meta-depth on each <details>

​
Email

  • Serialize: Table-based layout for compatibility with email clients; headings and content in table rows with inline styles.