Sections/List with Title

Hi,

I am trying to use headers as a section delimeter, and ideally I’d like to render let’s say markdown of:

# Header 1
1. item h1l1
2. item h1l2
3. item h1l3

# Header 2
1. item h2l1
2. item h2l2
3. item h2l3

Rendered as something like:

<div class=section>
<h1>Header 1</h1>
<ol data-tight="true">
<li><p>item h1l1</p></li>
<li><p>item h1l2</p></li>
<li><p>item h1l3</p></li>
</ol>
</div>

<div class=section>
<h1>Header 2</h1>
<ol data-tight="true">
<li><p>item h2l1</p></li>
<li><p>item h2l2</p></li>
<li><p>item h2l3</p></li>
</ol>
</div>

I can get it to work just for the heading using this in the heading schema:

toDOM(node) { return ["div", {class:"section"},["h" + node.attrs.level, 0]]}

but I can’t seem to figure out how to “wrap” the list as it seems it would need two holes? I also tried content: "(text | image| ordered_list)*", however I get an error Mixing inline and block content (in content expression ‘(text | image | ordered_list)*’)

In other words I think I need a ordered_list with a title?

Any ideas or pointers on how I could implement this?

Many thanks!

It sounds like you want the content expression of your sections to be "header ordered_list"? They’d go into the same content DOM element, no need to have two holes.

2 Likes

Thanks much for this answer!