Toggle heading

A collapsible heading — same title/children split as a toggle list item: the heading text lives in props.titleRunIds, and contentIds holds the nested section, rendered only while collapsed is false.

{
  "id": "tg1",
  "type": "toggleHeading",
  "contentIds": ["p1"],
  "props": { "level": 2, "collapsed": false, "titleRunIds": ["r1"] }
}

A fresh toggle heading is seeded with one empty paragraph child — pressing Enter on the title only ever inserts a first child once the toggle already has children, so without a seeded one there'd be no way to get content under a brand-new toggle at all.

Slash command

Toggle heading — keywords: toggle, heading, collapse, dropdown, accordion.

Styling

.be-toggle-heading, .be-toggle-heading-row (marker + title), .be-toggle-heading-marker (the disclosure triangle), .be-toggle-heading-children (nested indent block).

Using it in your editor

useEditor() registers every built-in block by default, toggle heading included. To register only the blocks you use instead:

import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, toggleHeadingBlockType } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, toggleHeading: toggleHeadingBlockType }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining this with other types.