Problem/Motivation
I have been quite involved in the back-and-forth with the recent development of this module and I have now been working with beta2 for several weeks.
However, I have just noticed something very odd and I will take you through it now...
Firstly, I generally want to use ToC.js to build a ToC of Paragraphs so many of my pages are built with Paragraphs. Probably no surprise there.
I am interested in <h1> and <h2> so one the configuration page for ToC.js, my Selectors are lik this...
For a typical page, I have several 'top-level' Paragraphs with children and a typical page looks like this with ToC.js performing nicely at the top left...
NOTE that the node itself has a body field at the top of the page before the paragraphs start but that body has no heading styles in it.
The underlying markup in the ToC Block, is as I would expect, a <nav> containing a list...
<div class="toc-js toc-js-container sticky is-visible" id="toc-js-block" data-selectors="h1, h2"
data-selectors-minimum="0" data-container=".node" data-prefix="toc" data-list-type="ul" data-li-classes=""
data-skip-invisible-headings="0" data-use-heading-html="0" data-collapsible-items="0" data-collapsible-expanded="1"
data-back-to-top="1" data-back-to-top-label="BACK TO TOP" data-back-to-top-selector="" data-heading-focus="0"
data-back-to-toc="0" data-back-to-toc-label="Back to table of contents"
data-back-to-toc-classes="visually-hidden-focusable" data-smooth-scrolling="1" data-highlight-on-scroll="1"
data-highlight-offset="0" data-sticky="1" data-sticky-offset="0" data-toc-container="" data-ajax-page-updates="0"
data-observable-selector="" data-once="toc_js" style="top: 0px;">
<nav>
<ul>
<li class="toc-h1 toc-active"><a href="#toc-learn">LEARN</a>
<ul>
<li class="toc-h2"><a href="#toc-what-is-a-database">What is a database?</a></li>
<li class="toc-h2"><a href="#toc-basic-database-terminology">Basic database terminology</a></li>
<li class="toc-h2"><a href="#toc-kitting-up-with-mysql">Kitting up with MySQL</a></li>
<li class="toc-h2"><a href="#toc-are-you-set-up">Are you set up?</a></li>
<li class="toc-h2"><a href="#toc-the-language-of-databases">The language of databases</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#toc-check">CHECK</a>
<ul>
<li class="toc-h2"><a href="#toc-using-the-right-lingo">Using the right lingo</a></li>
<li class="toc-h2"><a href="#toc-servers-and-clients">Servers and clients</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#toc-examine">EXAMINE</a>
<ul>
<li class="toc-h2"><a href="#toc-animal-fields">Animal fields</a></li>
</ul>
</li>
</ul>
</nav>
</div>
ALL GOOD.
HOWEVER, if I happen to edit the body field and add in a heading style line using the CKEditor as normal...
What I get is this...
And the underlying markup of the ToC Block is...
<div class="toc-js toc-js-container sticky is-visible" id="toc-js-block" data-selectors="h1, h2"
data-selectors-minimum="0" data-container=".node" data-prefix="toc" data-list-type="ul" data-li-classes=""
data-skip-invisible-headings="0" data-use-heading-html="0" data-collapsible-items="0" data-collapsible-expanded="1"
data-back-to-top="1" data-back-to-top-label="BACK TO TOP" data-back-to-top-selector="" data-heading-focus="0"
data-back-to-toc="0" data-back-to-toc-label="Back to table of contents"
data-back-to-toc-classes="visually-hidden-focusable" data-smooth-scrolling="1" data-highlight-on-scroll="1"
data-highlight-offset="0" data-sticky="1" data-sticky-offset="0" data-toc-container="" data-ajax-page-updates="0"
data-observable-selector="" data-once="toc_js" style="top: 0px;">
<nav>
<ul>
<li class="toc-h2 toc-active"><a href="#toc-a-dummy-heading-2-style-heading">A dummy Heading 2 style heading</a>
</li>
</ul>
</nav>
<li class="toc-h1"><a href="#toc-learn">LEARN</a>
<ul>
<li class="toc-h2"><a href="#toc-what-is-a-database">What is a database?</a></li>
<li class="toc-h2"><a href="#toc-basic-database-terminology">Basic database terminology</a></li>
<li class="toc-h2"><a href="#toc-kitting-up-with-mysql">Kitting up with MySQL</a></li>
<li class="toc-h2"><a href="#toc-are-you-set-up">Are you set up?</a></li>
<li class="toc-h2"><a href="#toc-the-language-of-databases">The language of databases</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#toc-check">CHECK</a>
<ul>
<li class="toc-h2"><a href="#toc-using-the-right-lingo">Using the right lingo</a></li>
<li class="toc-h2"><a href="#toc-servers-and-clients">Servers and clients</a></li>
</ul>
</li>
<li class="toc-h1"><a href="#toc-examine">EXAMINE</a>
<ul>
<li class="toc-h2"><a href="#toc-animal-fields">Animal fields</a></li>
</ul>
</li>
</div>
The first heading in the body seems to be being used to form the <nav> then the other <li> elements (LEARN, CHECK, APPLY) are left outside of any <ul> ?