Fix tabs in list (#578)

* Fix tabs in list

* format

* Fix tests

* Remove unused imports

* Update src/Elastic.Markdown/Myst/Directives/TabSetBlock.cs

Author: reakaleek

src/Elastic.Markdown/Assets/markdown/list.css

@@ -37,10 +37,13 @@
 	ol>li>ol>li>ol>li>ol>li>ol>li>ol { list-style-type: lower-roman; }
 
 	/* Special handling of elements within a list item */
-	li>p:nth-child(2),
-	li>div>.highlight,
-	li>.admonition
+	li>*:first-child,
+	li>p:nth-child(2)
 	{
 		@apply mt-1;
 	}
+	li>p:first-child
+	{
+		@apply mt-4;
+	}
 }

src/Elastic.Markdown/Myst/Directives/TabSetBlock.cs

@@ -18,15 +18,20 @@ public class TabSetBlock(DirectiveBlockParser parser, ParserContext context)
 	public override void FinalizeAndValidate(ParserContext context) => Index = FindIndex();
 
 	private int _index = -1;
+
+	// For simplicity, we use the line number as the index.
+	// It's not ideal, but it's unique.
+	// This is more efficient than finding the root block and then finding the index.
 	public int FindIndex()
 	{
 		if (_index > -1)
 			return _index;
-		var siblings = Parent!.OfType<TabSetBlock>().ToList();
-		_index = siblings.IndexOf(this);
+
+		_index = Line;
 		return _index;
 	}
 }
+
 public class TabItemBlock(DirectiveBlockParser parser, ParserContext context)
 	: DirectiveBlock(parser, context)
 {

src/Elastic.Markdown/Slices/Directives/TabItem.cshtml

@@ -1,6 +1,11 @@
 @inherits RazorSlice<TabItemViewModel>
-<input class="tabs-input" checked="@(Model.Index == 0 ? "checked" : "")" id="[email protected]@Model.Index" name="[email protected]" type="radio" tabindex="0">
-<label class="tabs-label" data-sync-id="@Model.SyncKey" data-sync-group="@Model.TabSetGroupKey" for="[email protected]@Model.Index">@Model.Title</label>
+
+@{
+	var id = $"tabs-item-{Model.TabSetIndex}-{Model.Index}";
+}
+
+<input class="tabs-input" checked="@(Model.Index == 0 ? "checked" : "")" id="@id" name="[email protected]" type="radio" tabindex="0">
+<label class="tabs-label" data-sync-id="@Model.SyncKey" data-sync-group="@Model.TabSetGroupKey" for="@id">@Model.Title</label>
 <div class="tabs-content" tabindex="0">
 	[CONTENT]
 </div>

tests/Elastic.Markdown.Tests/Directives/TabTests.cs

@@ -49,7 +49,6 @@ public void ParsesTabItems()
 		for (var i = 0; i < items.Length; i++)
 		{
 			items[i].Index.Should().Be(i);
-			items[i].TabSetIndex.Should().Be(0);
 		}
 	}
 }
@@ -88,7 +87,7 @@ public void ParsesMultipleTabSets()
 			for (var i = 0; i < items.Length; i++)
 			{
 				items[i].Index.Should().Be(i);
-				items[i].TabSetIndex.Should().Be(s);
+				items[i].TabSetIndex.Should().Be(sets[s].Line);
 			}
 		}
 	}
@@ -148,7 +147,7 @@ public void ParsesMultipleTabSets()
 			for (var i = 0; i < items.Length; i++)
 			{
 				items[i].Index.Should().Be(i);
-				items[i].TabSetIndex.Should().Be(s);
+				items[i].TabSetIndex.Should().Be(sets[s].Line);
 			}
 		}
 	}