Fix TOC ID Recursion

[ronalfy]

Relates to #58

Continues #75

This PR fixes nested heading items, particularly if they are inside other blocks, such as container blocks.

I discovered during further testing that this ID recursion doesn't work within nested blocks (i.e., it breaks and restarts).

This PR introduces a wrapper class, which acts as a global of sorts. When a loop is started, the same class is used, so it'll use the same set of variables, regardless of depth.

Apologies about the branch name. I fixed a different bug and attempted to rename. PR has passed the test below.

<!-- wp:simpletoc/toc /-->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test 2</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Example 2</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 2</h2>
<!-- /wp:heading -->

<!-- wp:generateblocks/element {"uniqueId":"8a266c96","tagName":"div"} -->
<div><!-- wp:heading -->
<h2 class="wp-block-heading">Example 3</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Example</h3>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading --></div>
<!-- /wp:generateblocks/element -->

<!-- wp:spacer {"height":"1018px"} -->
<div style="height:1018px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<div class="entry-content is-layout-constrained">
	<h2 class="simpletoc-title">Table of Contents</h2>
	<ul class="simpletoc-list">
		<li><a href="#test">Test</a>

		</li>
		<li><a href="#test-2">Test</a>

		</li>
		<li><a href="#test-2-2">Test 2</a>

		</li>
		<li><a href="#example">Example</a>

		</li>
		<li><a href="#example-2">Example 2</a>


			<ul>
				<li>
					<a href="#example-2-2">Example 2</a>

				</li>
			</ul>
		</li>
		<li><a href="#example-2-3">Example 2</a>

		</li>
		<li><a href="#example-3">Example 3</a>

		</li>
		<li><a href="#example-2-4">Example</a>


			<ul>
				<li>
					<a href="#example-3-2">Example</a>

				</li>
			</ul>
		</li>
		<li><a href="#example-4">Example</a>
		</li>
	</ul>

	<h2 class="wp-block-heading" id="test">Test</h2>

	<h2 class="wp-block-heading" id="test-2">Test</h2>

	<h2 class="wp-block-heading" id="test-2-2">Test 2</h2>


	<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
		<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
			<h2 class="wp-block-heading" id="example">Example</h2>
		</div>


		<h2 class="wp-block-heading" id="example-2">Example 2</h2>

		<h3 class="wp-block-heading" id="example-2-2">Example 2</h3>
	</div>


	<h2 class="wp-block-heading" id="example-2-3">Example 2</h2>


	<div>
		<h2 class="wp-block-heading" id="example-3">Example 3</h2>

		<h2 class="wp-block-heading" id="example-2-4">Example</h2>

		<h3 class="wp-block-heading" id="example-3-2">Example</h3>

		<h2 class="wp-block-heading" id="example-4">Example</h2>
	</div>



	<div style="height:1018px" aria-hidden="true" class="wp-block-spacer"></div>
</div>

[ronalfy]

@mtoensing PR is still a WIP. This works on simple nesting, but fails in sub-sub nesting. For example:

<!-- wp:simpletoc/toc /-->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test 2</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 2</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 2</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 3</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Example</h3>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading -->

[mtoensing]

Thanks. The whole nesting process is really complicated. I can’t wrap my head around why there is not a simple solution to this problem. :/ Great that you accept the challenge.