Function createCollapsibleHeadingsExtension

Creates a marked extension that wraps heading sections in collapsible containers.

This extension transforms headings into clickable toggles that can expand/collapse the content that follows them (until the next heading of equal or higher level).

The key innovation is that child sections are properly NESTED inside parent sections, so collapsing a parent will hide all its children.

NOTE: This extension targets the HTML output path. It produces the nested <div class="collapsible-section"> structure that the web renderer styles and wires up. React Native does not use this extension — it derives collapsible structure from the heading tokens directly.

The generated HTML structure (properly nested):

<div class="collapsible-section" data-level="2">
  <div class="collapsible-heading-wrapper">
    <h2 class="collapsible-heading" id="...">Parent Heading</h2>
  </div>
  <div class="collapsible-content">
    <p>Content under parent...</p>
    <div class="collapsible-section" data-level="3">
      ...
    </div>
  </div>
</div>
Copy

Note: The toggle button is added dynamically by the host (e.g. the Angular component) after rendering to avoid issues with HTML sanitizers.