show invalid table markdown (#276)

Co-authored-by: mihails.kuzmins <mihails.kuzmins@daytongroup.lv>

Author: MihailsKuzmins

src/MudBlazor.Markdown/Extensions/SourceSpanEx.cs

@@ -0,0 +1,15 @@
+using Markdig.Syntax;
+
+namespace MudBlazor;
+
+internal static class SourceSpanEx
+{
+	public static string TryGetText(this SourceSpan @this, in string originalText)
+	{
+		if (@this.Start >= originalText.Length)
+			return string.Empty;
+
+		var length = Math.Min(@this.Length, originalText.Length - @this.Start);
+		return originalText.Substring(@this.Start, length);
+	}
+}

src/MudBlazor.Markdown/MudMarkdown.razor.cs

@@ -324,6 +324,14 @@ protected virtual void RenderInlines(ContainerInline inlines, RenderTreeBuilder
 					builder.CloseComponent();
 					break;
 				}
+				case PipeTableDelimiterInline x:
+				{
+					// It usually indicates that there are some issues with table markdown
+					var markdownValue = x.Parent?.ParentBlock?.Span.TryGetText(Value);
+					TryRenderMarkdownError(markdownValue, builder);
+
+					break;
+				}
 				default:
 				{
 					OnRenderInlinesDefault(inline, builder);
@@ -333,6 +341,17 @@ protected virtual void RenderInlines(ContainerInline inlines, RenderTreeBuilder
 		}
 	}
 
+	protected virtual void TryRenderMarkdownError(string? text, RenderTreeBuilder builder)
+	{
+		if (string.IsNullOrEmpty(text))
+			return;
+
+		builder.OpenElement(ElementIndex++, "div");
+		builder.AddAttribute(ElementIndex++, "class", "markdown-error");
+		builder.AddContent(ElementIndex++, text);
+		builder.CloseElement();
+	}
+
 	/// <summary>
 	/// Renders inline block which is not covered by the switch-case block in <see cref="RenderInlines"/> 
 	/// </summary>

src/MudBlazor.Markdown/Resources/MudBlazor.Markdown.css

@@ -17,16 +17,16 @@ pre code.hljs {
 	position: relative !important;
 }
 
-	.mud-markdown-body .snippet-clipboard-content:hover > .snippet-clipboard-copy-icon {
-		display: block !important;
-	}
+.mud-markdown-body .snippet-clipboard-content:hover > .snippet-clipboard-copy-icon {
+	display: block !important;
+}
 
-	.mud-markdown-body .snippet-clipboard-content .snippet-clipboard-copy-icon {
-		position: absolute;
-		display: none;
-		top: 0;
-		right: 0;
-	}
+.mud-markdown-body .snippet-clipboard-content .snippet-clipboard-copy-icon {
+	position: absolute;
+	display: none;
+	top: 0;
+	right: 0;
+}
 
 /* Quote */
 .mud-markdown-body blockquote {
@@ -37,9 +37,9 @@ pre code.hljs {
 	margin: 0.5em 0 1.25em;
 }
 
-	.mud-markdown-body blockquote p {
-		margin-bottom: 0 !important;
-	}
+.mud-markdown-body blockquote p {
+	margin-bottom: 0 !important;
+}
 
 /* Table */
 .mud-markdown-body table {
@@ -61,15 +61,15 @@ pre code.hljs {
 	margin-bottom: 1.25em !important;
 }
 
-	.mud-markdown-body ul ul {
-		list-style-type: circle;
-		margin-bottom: 0 !important;
-	}
+.mud-markdown-body ul ul {
+	list-style-type: circle;
+	margin-bottom: 0 !important;
+}
 
-		.mud-markdown-body ul ul ul {
-			list-style-type: square;
-			margin-bottom: 0 !important;
-		}
+.mud-markdown-body ul ul ul {
+	list-style-type: square;
+	margin-bottom: 0 !important;
+}
 
 .mud-markdown-body li {
 	display: list-item !important;
@@ -104,6 +104,10 @@ pre code.hljs {
 	margin-bottom: 0 !important;
 }
 
+.mud-markdown-body p .markdown-error {
+	white-space: pre;
+}
+
 /* Images */
 .mud-markdown-body img {
 	max-width: 100%;

tests/MudBlazor.Markdown.Tests/Extensions/SourceSpanEx/TryGetTextShould.cs

@@ -0,0 +1,69 @@
+namespace MudBlazor.Markdown.Tests.Extensions.SourceSpanEx;
+
+public sealed class TryGetTextShould
+{
+	[Fact]
+	public void ReturnEmptyIfStartGreaterThanString()
+	{
+		const string value = nameof(value);
+		var fixture = new SourceSpan(value.Length, value.Length);
+
+		var result = fixture.TryGetText(value);
+
+		result
+			.Should()
+			.BeEmpty();
+	}
+
+	[Fact]
+	public void ReturnSubstringIfLengthTooGreat()
+	{
+		const string value = nameof(value), expected = "e";
+		var fixture = new SourceSpan(value.Length - 1, value.Length);
+
+		var result = fixture.TryGetText(value);
+
+		result
+			.Should()
+			.Be(expected);
+	}
+
+	[Fact]
+	public void ReturnStringWithin()
+	{
+		const string value = nameof(value), expected = "alu";
+		var fixture = new SourceSpan(1, 3);
+
+		var result = fixture.TryGetText(value);
+
+		result
+			.Should()
+			.Be(expected);
+	}
+
+	[Fact]
+	public void ReturnStringStartsWith()
+	{
+		const string value = nameof(value), expected = "valu";
+		var fixture = new SourceSpan(0, 3);
+
+		var result = fixture.TryGetText(value);
+
+		result
+			.Should()
+			.Be(expected);
+	}
+
+	[Fact]
+	public void ReturnStringEndsWith()
+	{
+		const string value = nameof(value), expected = "alue";
+		var fixture = new SourceSpan(1, value.Length - 1);
+
+		var result = fixture.TryGetText(value);
+
+		result
+			.Should()
+			.Be(expected);
+	}
+}

tests/MudBlazor.Markdown.Tests/MarkdownComponentTests/MarkdownComponentCasesShould.cs

@@ -549,4 +549,45 @@ public void RenderListWithWithCompositeListItems()
 	}
 
 	#endregion
+
+	#region https://github.com/MyNihongo/MudBlazor.Markdown/issues/274
+
+	[Fact]
+	public void RenderTableWithWeirdFormat()
+	{
+		const string value = 
+"### My Table: \n\n" +
+"| **Column 1** | **Column 2**   | **Column 3**                |\n" + 
+"|--------------|----------------|-----------------------------|\n" +
+"| Row 1, Col 1 | Row 1, Col 2   |                             |\n" + 
+"|              | Row 2, Col 2   | Row 2, Col 3                |\n" + 
+"| Row 3, Col 1 |                | \u0060\u0060\u0060python    |\n" +
+"|              | Row 4, Col 2   | def greet(name):            |\n" + 
+"| Row 5, Col 1 |                |     return name             |\n" +
+"|              |                | \u0060\u0060\u0060          |";
+
+		const string expected =
+"""
+<article class='mud-markdown-body'>
+	<h3 id='my-table' class='mud-typography mud-typography-h3'>My Table:</h3>
+	<p class='mud-typography mud-typography-body1'>
+		<div class='markdown-error'>
+			| **Column 1** | **Column 2**   | **Column 3**                |
+			|--------------|----------------|-----------------------------|
+			| Row 1, Col 1 | Row 1, Col 2   |                             |
+			|              | Row 2, Col 2   | Row 2, Col 3                |
+			| Row 3, Col 1 |                | ```python    |
+			|              | Row 4, Col 2   | def greet(name):            |
+			| Row 5, Col 1 |                |     return name             |
+			|              |                | ```          |
+		</div>
+	</p>
+</article>
+""";
+
+		using var fixture = CreateFixture(value);
+		fixture.MarkupMatches(expected);
+	}
+
+	#endregion
 }

tests/MudBlazor.Markdown.Tests/MudBlazor.Markdown.Tests.csproj

@@ -9,8 +9,8 @@
 
 	<ItemGroup>
 		<PackageReference Include="bunit" Version="1.31.3" />
-		<PackageReference Include="FluentAssertions" Version="6.12.0" />
-		<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.11.0" />
+		<PackageReference Include="FluentAssertions" Version="6.12.1" />
+		<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.11.1" />
 		<PackageReference Include="MoqMicrosoftConfiguration" Version="1.0.5" />
 		<PackageReference Include="MyNihongo.Option" Version="2.2.0" />
 		<PackageReference Include="xunit" Version="2.9.0" />