Details

The Details extension adds collapsible sections. Clicking the toolbar button wraps the current block in a details box with a summary line. Click the button again while inside a details box to remove it.

Import

import { Details } from 'ritext/extension/details';

Usage

const extensions = [Details];

DetailsSummary and DetailsContent are included automatically. Don't add them separately.

Configuration

Details.configure({
  persist: true,
  openClassName: 'is-open',
  HTMLAttributes: {
    class: 'my-details',
  },
  renderToggleButton: ({ element, isOpen, node }) => {
    element.setAttribute('aria-label', `${isOpen ? 'Collapse' : 'Expand'} ${node.textContent || 'details'}`);
  },
})

Commands

editor.commands.setDetails()
editor.commands.unsetDetails()

Output

Saved HTML uses the native <details> element, so it opens and closes in the Renderer without JavaScript.

<details>
  <summary>Summary</summary>
  <div data-type="detailsContent"><p>Hidden content</p></div>
</details>

Options

Prop

Type