Add support for screenshot class (#665)

* it actually works

Signed-off-by: bmorelli25 <[email protected]>

* Add newline

Signed-off-by: bmorelli25 <[email protected]>

* support :screenshot: instead

* add docs

* more realistic example

---------

Signed-off-by: bmorelli25 <[email protected]>

Author: bmorelli25

docs/syntax/images.md

@@ -6,14 +6,6 @@ Images include screenshots, inline images, icons, and more. Syntax for images is
 
 Images can be referenced from the top-level `_static` dir or a local image dir.
 
-## Screenshots
-
-Screenshots are images displayed with a box-shadow.
-
-:::{warning}
-This feature is not currently supported in Elastic Docs V3.
-:::
-
 ## Block-level images
 
 ```markdown
@@ -36,6 +28,20 @@ Or, use the `image` directive.
 :width: 250px
 :::
 
+## Screenshots
+
+Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive.
+
+```markdown
+:::{image} img/apm.png
+:screenshot:
+:::
+```
+
+:::{image} img/apm.png
+:screenshot:
+:::
+
 ## Inline images
 
 ```markdown

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

@@ -14,5 +14,8 @@
 			display: initial;
 			vertical-align: initial;
 		}
+        .screenshot {
+            @apply border-1 border-grey-20 p-4 bg-grey-10 shadow-md;
+        }
 	}
 }

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

@@ -107,6 +107,7 @@ private static void WriteImage(HtmlRenderer renderer, ImageBlock block)
 			Scale = block.Scale,
 			Target = block.Target,
 			Width = block.Width,
+			Screenshot = block.Screenshot,
 			ImageUrl = imageUrl,
 		});
 		RenderRazorSlice(slice, renderer, block);
@@ -127,6 +128,7 @@ private static void WriteFigure(HtmlRenderer renderer, ImageBlock block)
 			Scale = block.Scale,
 			Target = block.Target,
 			Width = block.Width,
+			Screenshot = block.Screenshot,
 			ImageUrl = imageUrl,
 		});
 		RenderRazorSlice(slice, renderer, block);

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

@@ -32,6 +32,11 @@ public class ImageBlock(DirectiveBlockParser parser, ParserContext context)
 	/// </summary>
 	public string? Width { get; set; }
 
+	/// <summary>
+	/// When set, adds a custom screenshot class to the image.
+	/// </summary>
+	public string? Screenshot { get; set; }
+
 	/// <summary>
 	/// The uniform scaling factor of the image. The default is “100 %”, i.e. no scaling.
 	/// </summary>
@@ -67,8 +72,10 @@ public override void FinalizeAndValidate(ParserContext context)
 		Scale = Prop("scale");
 		Target = Prop("target");
 
-		ExtractImageUrl(context);
+		// Set Screenshot to "screenshot" if the :screenshot: option is present
+		Screenshot = Prop("screenshot") != null ? "screenshot" : null;
 
+		ExtractImageUrl(context);
 	}
 
 	private void ExtractImageUrl(ParserContext context)

src/Elastic.Markdown/Slices/Directives/Image.cshtml

@@ -1,5 +1,5 @@
 @inherits RazorSlice<ImageViewModel>
 <a class="reference internal image-reference" href="@Model.ImageUrl">
-	<img alt="@Model.Alt" src="@Model.ImageUrl" style="@Model.Style" />
+	<img alt="@Model.Alt" src="@Model.ImageUrl" style="@Model.Style" class="@Model.Screenshot" />
 	[CONTENT]
 </a>

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

@@ -56,6 +56,8 @@ public class ImageViewModel
 	public required string? Width { get; init; }
 	public required string? ImageUrl { get; init; }
 
+	public required string? Screenshot { get; init; }
+
 	public string Style
 	{
 		get

tests/Elastic.Markdown.Tests/Directives/ImageTests.cs

@@ -14,6 +14,7 @@ public class ImageBlockTests(ITestOutputHelper output) : DirectiveTest<ImageBloc
 :::{image} img/observability.png
 :alt: Elasticsearch
 :width: 250px
+:screenshot:
 :::
 """
 )
@@ -30,6 +31,7 @@ public void ParsesBreakPoint()
 		Block!.Alt.Should().Be("Elasticsearch");
 		Block!.Width.Should().Be("250px");
 		Block!.ImageUrl.Should().Be("img/observability.png");
+		Block!.Screenshot.Should().Be("screenshot");
 	}
 
 	[Fact]