Fix tabs in list

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

@@ -2,14 +2,19 @@
 // Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
 // See the LICENSE file in the project root for more information
 
+using System.Reflection.Metadata;
 using Elastic.Markdown.Diagnostics;
 using Elastic.Markdown.Helpers;
+using Markdig.Syntax;
+using System.Linq;
 
 namespace Elastic.Markdown.Myst.Directives;
 
 public class TabSetBlock(DirectiveBlockParser parser, ParserContext context)
 	: DirectiveBlock(parser, context)
 {
+	public string Id { get; private set; } = Guid.NewGuid().ToString();
+
 	public override string Directive => "tab-set";
 
 	public int Index { get; set; }
@@ -18,15 +23,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>