feat(markdoc): Add support for using a custom component for images (#9958)

* feat(markdoc): Add support for using a custom component for images

* chore: changeset

* test: add test

* Update .changeset/shaggy-spies-sit.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

4 files changed, 48 insertions, 0 deletions

diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs
new file mode 100644
index 000000000..04fe75244
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs
@@ -0,0 +1,10 @@
+import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	tags: {
+		image: {
+			attributes: nodes.image.attributes,
+			render: component('./src/components/Image.astro'),
+		},
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro
new file mode 100644
index 000000000..aac129452
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro
@@ -0,0 +1,22 @@
+---
+// src/components/MyImage.astro
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+type Props = {
+	src: string | ImageMetadata;
+	alt: string;
+};
+const { src, alt } = Astro.props;
+---
+{
+	typeof src === 'string' ? (
+		<img class="custom-styles" src={src} alt={alt} />
+	) : (
+		<Image class="custom-styles" {src} {alt} />
+	)
+}
+<style>
+	.custom-styles {
+		border: 1px solid red;
+	}
+</style>
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc
index ae5fced49..f5ba3950f 100644
--- a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc
@@ -5,3 +5,5 @@
 ![Oar](../../assets/relative/oar.jpg) {% #relative %}
 
 ![Gray cityscape arial view](~/assets/alias/cityscape.jpg) {% #alias %}
+
+{% image src="../../assets/relative/oar.jpg" alt="oar" /%} {% #component %}
diff --git a/packages/integrations/markdoc/test/image-assets.test.js b/packages/integrations/markdoc/test/image-assets.test.js
index ae576b5cf..880ee9b26 100644
--- a/packages/integrations/markdoc/test/image-assets.test.js
+++ b/packages/integrations/markdoc/test/image-assets.test.js
@@ -51,6 +51,13 @@ describe('Markdoc - Image assets', () => {
 				/\/_image\?href=.*%2Fsrc%2Fassets%2Falias%2Fcityscape.jpg%3ForigWidth%3D420%26origHeight%3D280%26origFormat%3Djpg&f=webp/
 			);
 		});
+
+		it('passes images inside image tags to configured image component', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#component > img')?.className, 'custom-styles');
+		});
 	});
 
 	describe('build', () => {
@@ -75,5 +82,12 @@ describe('Markdoc - Image assets', () => {
 			const { document } = parseHTML(html);
 			assert.match(document.querySelector('#alias > img')?.src, /^\/_astro\/cityscape.*\.webp$/);
 		});
+
+		it('passes images inside image tags to configured image component', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#component > img')?.className, 'custom-styles');
+			assert.match(document.querySelector('#component > img')?.src, /^\/_astro\/oar.*\.webp$/);
+		});
 	});
 });