ensure we reapply mermaid on htmx navigation too

Author: Mpdreamz

docs/syntax/diagrams.md

@@ -8,7 +8,7 @@ You can embedd diagrams using [mermaid.js](https://mermaid.js.org)
 
 ::::{tab-item} Output
 
-:::{mermaid} 
+```mermaid
 flowchart LR
 A[Jupyter Notebook] --> C
 B[MyST Markdown] --> C
@@ -19,13 +19,13 @@ D --> G[Word]
 D --> H[React]
 D --> I[HTML]
 D <--> J[JATS]
-:::
+```
 
 ::::
 
 ::::{tab-item} Markdown
-```markdown
-:::{mermaid} 
+````markdown
+```mermaid 
 flowchart LR
 A[Jupyter Notebook] --> C
 B[MyST Markdown] --> C
@@ -36,8 +36,8 @@ D --> G[Word]
 D --> H[React]
 D --> I[HTML]
 D <--> J[JATS]
-:::
 ```
+````
 ::::
 
 :::::

src/Elastic.Markdown/Assets/main.ts

@@ -15,17 +15,9 @@ import mermaid from 'mermaid/dist/mermaid.esm.min.mjs'
 
 const {getOS} = new UAParser()
 
-document.addEventListener('htmx:load', function () {
-    initTocNav()
-    initHighlight()
-    initCopyButton()
-    initTabs()
-    initNav()
-    initSmoothScroll()
-    openDetailsWithAnchor()
-    initDismissibleBanner()
+var mermaidInitialize = function () {
     mermaid.initialize({
-        startOnLoad: true, theme: 'base',
+        startOnLoad: false, theme: 'base',
         themeVariables: {
             fontFamily: 'inherit',
             altFontFamily: 'inherit',
@@ -40,7 +32,22 @@ document.addEventListener('htmx:load', function () {
         "journey": {
             "taskFontFamily": "inherit"
         }
-    })
+    });
+    mermaid.run({
+        nodes: document.querySelectorAll('.mermaid'),
+    });
+}
+
+document.addEventListener('htmx:load', function () {
+    initTocNav()
+    initHighlight()
+    initCopyButton()
+    initTabs()
+    initNav()
+    initSmoothScroll()
+    openDetailsWithAnchor()
+    initDismissibleBanner()
+    mermaidInitialize()
 })
 
 // Don't remove style tags because they are used by the elastic global nav.
@@ -70,9 +77,9 @@ document.addEventListener('htmx:beforeRequest', function (event) {
         }
     }
 })
-
 document.body.addEventListener('htmx:oobBeforeSwap', function (event) {
     // This is needed to scroll to the top of the page when the content is swapped
+
     if (
         event.target.id === 'main-container' ||
         event.target.id === 'markdown-content' ||

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

@@ -1,5 +1,5 @@
 .mermaid {
-	@apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono;
+	@apply border-grey-10 rounded-md border-2 font-sans mt-4;
 
 	font-size: 0.875em !important;
 
@@ -84,4 +84,8 @@
 		stroke: var(--color-yellow-50) !important;
 		font-size: 1em !important;
 	}
+
+	rect.background {
+		display: none;
+	}
 }

src/Elastic.Markdown/Myst/Directives/AppliesToDirective.cs renamed to src/Elastic.Markdown/Myst/CodeBlocks/AppliesToCodeBlock.cs

@@ -2,14 +2,12 @@
 // 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 Elastic.Markdown.Myst.CodeBlocks;
 using Elastic.Markdown.Myst.FrontMatter;
 using Markdig.Parsers;
 
-namespace Elastic.Markdown.Myst.Directives;
+namespace Elastic.Markdown.Myst.CodeBlocks;
 
-
-public class AppliesToDirective(BlockParser parser, ParserContext context)
+public class AppliesToCodeBlock(BlockParser parser, ParserContext context)
 	: EnhancedCodeBlock(parser, context), IApplicableToElement
 {
 	public ApplicableTo? AppliesTo { get; set; }

src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockHtmlRenderer.cs

@@ -115,7 +115,7 @@ private static int CountIndentation(StringSlice slice)
 
 	protected override void Write(HtmlRenderer renderer, EnhancedCodeBlock block)
 	{
-		if (block is AppliesToDirective appliesToDirective)
+		if (block is AppliesToCodeBlock appliesToDirective)
 		{
 			RenderAppliesToHtml(renderer, appliesToDirective);
 			return;
@@ -229,9 +229,9 @@ protected override void Write(HtmlRenderer renderer, EnhancedCodeBlock block)
 	}
 
 	[SuppressMessage("Reliability", "CA2012:Use ValueTasks correctly")]
-	private static void RenderAppliesToHtml(HtmlRenderer renderer, AppliesToDirective appliesToDirective)
+	private static void RenderAppliesToHtml(HtmlRenderer renderer, AppliesToCodeBlock appliesToCodeBlock)
 	{
-		var appliesTo = appliesToDirective.AppliesTo;
+		var appliesTo = appliesToCodeBlock.AppliesTo;
 		var slice = ApplicableToDirective.Create(appliesTo);
 		if (appliesTo is null || appliesTo == FrontMatter.ApplicableTo.All)
 			return;

src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockParser.cs

@@ -34,7 +34,7 @@ protected override EnhancedCodeBlock CreateFencedBlock(BlockProcessor processor)
 
 		var lineSpan = processor.Line.AsSpan();
 		var codeBlock = lineSpan.IndexOf("{applies_to}") > -1
-			? new AppliesToDirective(this, context)
+			? new AppliesToCodeBlock(this, context)
 			{
 				IndentCount = processor.Indent
 			}
@@ -110,31 +110,31 @@ public override bool Close(BlockProcessor processor, Block block)
 		if (lines.Lines is null)
 			return base.Close(processor, block);
 
-		if (codeBlock is not AppliesToDirective appliesToDirective)
+		if (codeBlock is not AppliesToCodeBlock appliesToDirective)
 			ProcessCodeBlock(lines, language, codeBlock, context);
 		else
 			ProcessAppliesToDirective(appliesToDirective, lines);
 
 		return base.Close(processor, block);
 	}
 
-	private static void ProcessAppliesToDirective(AppliesToDirective appliesToDirective, StringLineGroup lines)
+	private static void ProcessAppliesToDirective(AppliesToCodeBlock appliesToCodeBlock, StringLineGroup lines)
 	{
 		var yaml = lines.ToSlice().AsSpan().ToString();
 
 		try
 		{
 			var applicableTo = YamlSerialization.Deserialize<ApplicableTo>(yaml);
-			appliesToDirective.AppliesTo = applicableTo;
-			if (appliesToDirective.AppliesTo.Warnings is null)
+			appliesToCodeBlock.AppliesTo = applicableTo;
+			if (appliesToCodeBlock.AppliesTo.Warnings is null)
 				return;
-			foreach (var warning in appliesToDirective.AppliesTo.Warnings)
-				appliesToDirective.EmitWarning(warning);
+			foreach (var warning in appliesToCodeBlock.AppliesTo.Warnings)
+				appliesToCodeBlock.EmitWarning(warning);
 			applicableTo.Warnings = null;
 		}
 		catch (Exception e)
 		{
-			appliesToDirective.EmitError($"Unable to parse applies_to directive: {yaml}", e);
+			appliesToCodeBlock.EmitError($"Unable to parse applies_to directive: {yaml}", e);
 		}
 	}
 

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

@@ -91,12 +91,6 @@ protected override DirectiveBlock CreateFencedBlock(BlockProcessor processor)
 		if (info.IndexOf("{figure-md}") > 0)
 			return new FigureBlock(this, context);
 
-		// this is currently listed as unsupported
-		// leaving the parsing in until we are confident we don't want this
-		// for dev-docs
-		if (info.IndexOf("{mermaid}") > 0)
-			return new MermaidBlock(this, context);
-
 		if (info.IndexOf("{include}") > 0)
 			return new IncludeBlock(this, context);
 

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

@@ -29,9 +29,6 @@ protected override void Write(HtmlRenderer renderer, DirectiveBlock directiveBlo
 
 		switch (directiveBlock)
 		{
-			case MermaidBlock mermaidBlock:
-				WriteMermaid(renderer, mermaidBlock);
-				return;
 			case FigureBlock imageBlock:
 				WriteFigure(renderer, imageBlock);
 				return;
@@ -206,12 +203,6 @@ private static void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
 		RenderRazorSlice(slice, renderer);
 	}
 
-	private static void WriteMermaid(HtmlRenderer renderer, MermaidBlock block)
-	{
-		var slice = Mermaid.Create(new MermaidViewModel { DirectiveBlock = block });
-		RenderRazorSliceRawContent(slice, renderer, block);
-	}
-
 	private static void WriteLiteralIncludeBlock(HtmlRenderer renderer, IncludeBlock block)
 	{
 		if (!block.Found || block.IncludePath is null)
@@ -289,71 +280,7 @@ private static void WriteSettingsBlock(HtmlRenderer renderer, SettingsBlock bloc
 	}
 
 	[SuppressMessage("Reliability", "CA2012:Use ValueTasks correctly")]
-	private static void RenderRazorSlice<T>(RazorSlice<T> slice, HtmlRenderer renderer) => slice.RenderAsync(renderer.Writer).GetAwaiter().GetResult();
-
-	[SuppressMessage("Reliability", "CA2012:Use ValueTasks correctly")]
-	private static void RenderRazorSliceRawContent<T>(RazorSlice<T> slice, HtmlRenderer renderer, DirectiveBlock obj)
-		where T : DirectiveViewModel
-	{
-		var html = slice.RenderAsync().GetAwaiter().GetResult();
-		var blocks = html.Split("[CONTENT]", 2, StringSplitOptions.RemoveEmptyEntries);
-		_ = renderer.Write(blocks[0]);
-		foreach (var o in obj)
-			Render(o);
-
-		_ = renderer.Write(blocks[1]);
-
-		void RenderLeaf(LeafBlock p)
-		{
-			_ = renderer.WriteLeafRawLines(p, true, false, false);
-			renderer.EnableHtmlForInline = false;
-			foreach (var oo in p.Inline ?? [])
-			{
-				if (oo is SubstitutionLeaf sl)
-					_ = renderer.Write(sl.Replacement);
-				else if (oo is LiteralInline li)
-					renderer.Write(li);
-				else if (oo is LineBreakInline)
-					_ = renderer.WriteLine();
-				else if (oo is Role r)
-				{
-					_ = renderer.Write(new string(r.DelimiterChar, r.DelimiterCount));
-					renderer.WriteChildren(r);
-				}
-
-				else
-					_ = renderer.Write($"(LeafBlock: {oo.GetType().Name}");
-			}
-
-			renderer.EnableHtmlForInline = true;
-		}
+	private static void RenderRazorSlice<T>(RazorSlice<T> slice, HtmlRenderer renderer) =>
+		slice.RenderAsync(renderer.Writer).GetAwaiter().GetResult();
 
-		void RenderListBlock(ListBlock l)
-		{
-			foreach (var bb in l)
-			{
-				if (bb is LeafBlock lbi)
-					RenderLeaf(lbi);
-				else if (bb is ListItemBlock ll)
-				{
-					_ = renderer.Write(ll.TriviaBefore);
-					_ = renderer.Write("-");
-					foreach (var lll in ll)
-						Render(lll);
-				}
-				else
-					_ = renderer.Write($"(ListBlock: {l.GetType().Name}");
-			}
-		}
-
-		void Render(Block o)
-		{
-			if (o is LeafBlock p)
-				RenderLeaf(p);
-			else if (o is ListBlock l)
-				RenderListBlock(l);
-			else
-				_ = renderer.Write($"(Block: {o.GetType().Name}");
-		}
-	}
 }

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

@@ -2,7 +2,8 @@
 @if (Model.Language == "mermaid")
 {
 	<pre class="mermaid">
-		[CONTENT]
+%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '1em'}}}%%
+		@(Model.RenderBlock())
 	</pre>
 }
 else {