Fix inline image resize parameter to require space before = when title present (#2017)

* Initial plan

* Update regex to make space before = optional in image sizing

Co-authored-by: reakaleek <[email protected]>

* Update tests and documentation for flexible image sizing syntax

Co-authored-by: reakaleek <[email protected]>

* Require space before = when title is present, optional when no title

Co-authored-by: reakaleek <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: reakaleek <[email protected]>
Co-authored-by: Jan Calanog <[email protected]>

Author: Copilot

docs/syntax/images.md

@@ -96,6 +96,13 @@ If `H` is omitted `W` is used as the height as well.
 ![alt](img.png "=50%")
 ```
 
+When specifying just the size without a title, no space is required before the `=` sign. When combining a title with sizing, a space is required before the `=`:
+
+```markdown
+![alt](img.png "=50%")              <!-- Just size, no space needed -->
+![alt](img.png "My Title =50%")    <!-- With title, space required -->
+```
+
 
 
 ### SVG 

src/Elastic.Markdown/Myst/InlineParsers/DiagnosticLinkInlineParser.cs

@@ -40,7 +40,7 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer) { }
 
 internal sealed partial class LinkRegexExtensions
 {
-	[GeneratedRegex(@"\s\=(?<width>\d+%?)(?:x(?<height>\d+%?))?$", RegexOptions.IgnoreCase, "en-US")]
+	[GeneratedRegex(@"(?:^|\s)\=(?<width>\d+%?)(?:x(?<height>\d+%?))?$", RegexOptions.IgnoreCase, "en-US")]
 	public static partial Regex MatchTitleStylingInstructions();
 }
 
@@ -92,7 +92,7 @@ private static void ParseStylingInstructions(LinkInline link, ParserContext cont
 			attributes.AddProperty("width", width);
 			attributes.AddProperty("height", height);
 
-			title = title[..matches.Index];
+			title = title[..matches.Index].TrimEnd();
 		}
 		link.Title = title.ReplaceSubstitutions(context);
 	}

tests/Elastic.Markdown.Tests/Inline/InlineImageTest.cs

@@ -39,3 +39,93 @@ public void GeneratesAttributesInHtml() =>
 			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" /></p>"""
 		);
 }
+
+// Test image sizing with space before =
+public class InlineImageWithSizingSpaceBeforeTest(ITestOutputHelper output) : InlineTest<LinkInline>(output,
+"""
+![Elasticsearch](/_static/img/observability.png " =50%")
+"""
+)
+{
+	[Fact]
+	public void ParsesBlock() => Block.Should().NotBeNull();
+
+	[Fact]
+	public void GeneratesAttributesInHtml() =>
+		// language=html
+		Html.ShouldContainHtml(
+			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="50%" height="50%" /></p>"""
+		);
+}
+
+// Test image sizing without space before =
+public class InlineImageWithSizingNoSpaceBeforeTest(ITestOutputHelper output) : InlineTest<LinkInline>(output,
+"""
+![Elasticsearch](/_static/img/observability.png "=50%")
+"""
+)
+{
+	[Fact]
+	public void ParsesBlock() => Block.Should().NotBeNull();
+
+	[Fact]
+	public void GeneratesAttributesInHtml() =>
+		// language=html
+		Html.ShouldContainHtml(
+			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="50%" height="50%" /></p>"""
+		);
+}
+
+// Test image sizing with pixels
+public class InlineImageWithPixelSizingTest(ITestOutputHelper output) : InlineTest<LinkInline>(output,
+"""
+![Elasticsearch](/_static/img/observability.png "=250x330")
+"""
+)
+{
+	[Fact]
+	public void ParsesBlock() => Block.Should().NotBeNull();
+
+	[Fact]
+	public void GeneratesAttributesInHtml() =>
+		// language=html
+		Html.ShouldContainHtml(
+			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="250px" height="330px" /></p>"""
+		);
+}
+
+// Test image sizing with title and sizing
+public class InlineImageWithTitleAndSizingTest(ITestOutputHelper output) : InlineTest<LinkInline>(output,
+"""
+![Elasticsearch](/_static/img/observability.png "My Title =50%")
+"""
+)
+{
+	[Fact]
+	public void ParsesBlock() => Block.Should().NotBeNull();
+
+	[Fact]
+	public void GeneratesAttributesInHtml() =>
+		// language=html
+		Html.ShouldContainHtml(
+			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" title="My Title" width="50%" height="50%" /></p>"""
+		);
+}
+
+// Test image sizing with width only
+public class InlineImageWithWidthOnlyTest(ITestOutputHelper output) : InlineTest<LinkInline>(output,
+"""
+![Elasticsearch](/_static/img/observability.png "=250")
+"""
+)
+{
+	[Fact]
+	public void ParsesBlock() => Block.Should().NotBeNull();
+
+	[Fact]
+	public void GeneratesAttributesInHtml() =>
+		// language=html
+		Html.ShouldContainHtml(
+			"""<p><img src="/docs/_static/img/observability.png" alt="Elasticsearch" width="250px" height="250px" /></p>"""
+		);
+}