use substitution values in image alt and title text

Author: colleenmcginnis

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

@@ -107,6 +107,7 @@ private static void WriteImage(HtmlRenderer renderer, ImageBlock block)
 			Label = block.Label,
 			Align = block.Align,
 			Alt = block.Alt,
+			Title = block.Title,
 			Height = block.Height,
 			Scale = block.Scale,
 			Target = block.Target,
@@ -144,6 +145,7 @@ private static void WriteFigure(HtmlRenderer renderer, ImageBlock block)
 			Label = block.Label,
 			Align = block.Align,
 			Alt = block.Alt,
+			Title = block.Title,
 			Height = block.Height,
 			Scale = block.Scale,
 			Target = block.Target,

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

@@ -2,6 +2,7 @@
 // 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.Helpers;
 using Elastic.Markdown.Diagnostics;
 using Elastic.Markdown.IO;
 
@@ -20,6 +21,11 @@ public class ImageBlock(DirectiveBlockParser parser, ParserContext context)
 	/// </summary>
 	public string? Alt { get; set; }
 
+	/// <summary>
+	/// Title text: a short description of the image
+	/// </summary>
+	public string? Title { get; set; }
+
 	/// <summary>
 	/// The desired height of the image. Used to reserve space or scale the image vertically. When the “scale” option
 	/// is also specified, they are combined. For example, a height of 200px and a scale of 50 is equivalent to
@@ -64,9 +70,10 @@ public class ImageBlock(DirectiveBlockParser parser, ParserContext context)
 	public override void FinalizeAndValidate(ParserContext context)
 	{
 		Label = Prop("label", "name");
-		Alt = Prop("alt");
-		Align = Prop("align");
+		Alt = (Prop("alt") ?? "{undefined}").ReplaceSubstitutions(context);
+		Title = (Prop("title") ?? "{undefined}").ReplaceSubstitutions(context);
 
+		Align = Prop("align");
 		Height = Prop("height", "h");
 		Width = Prop("width", "w");
 

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

@@ -63,19 +63,21 @@ public override bool Match(InlineProcessor processor, ref StringSlice slice)
 
 		ValidateAndProcessLink(link, processor, context);
 
-		ParseStylingInstructions(link);
+		ParseStylingInstructions(link, context);
 
 		return match;
 	}
 
 
-	private static void ParseStylingInstructions(LinkInline link)
+	private static void ParseStylingInstructions(LinkInline link, ParserContext context)
 	{
 		if (!link.IsImage)
 			return;
 
+		var attributes = link.GetAttributes();
+
 		if (string.IsNullOrWhiteSpace(link.Title) || link.Title.IndexOf('=') < 0)
-			return;
+			link.Title = (link.Title ?? "{undefined}").ReplaceSubstitutions(context);
 
 		var matches = LinkRegexExtensions.MatchTitleStylingInstructions().Match(link.Title);
 		if (!matches.Success)
@@ -89,10 +91,7 @@ private static void ParseStylingInstructions(LinkInline link)
 			height = width;
 		else if (!height.EndsWith('%'))
 			height += "px";
-		var title = link.Title[..matches.Index];
 
-		link.Title = title;
-		var attributes = link.GetAttributes();
 		attributes.AddProperty("width", width);
 		attributes.AddProperty("height", height);
 	}

src/Elastic.Markdown/Slices/Directives/_ViewModels.cs

@@ -50,6 +50,7 @@ public class ImageViewModel
 	public required string? Label { get; init; }
 	public required string? Align { get; init; }
 	public required string? Alt { get; init; }
+	public required string? Title { get; init; }
 	public required string? Height { get; init; }
 	public required string? Scale { get; init; }
 	public required string? Target { get; init; }