feat(mdx): Add support for turning ![]() into <Image> (#6824)

6 files changed, 68 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts b/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts
new file mode 100644
index 000000000..fe92bd37f
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts
@@ -0,0 +1,8 @@
+import mdx from '@astrojs/mdx';
+
+export default {
+	integrations: [mdx()],
+	experimental: {
+		assets: true
+	}
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/package.json b/packages/integrations/mdx/test/fixtures/mdx-images/package.json
new file mode 100644
index 000000000..7ff215df1
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-images/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/mdx-page",
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston in space.webp b/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston in space.webp
new file mode 100644
index 000000000..3727bc508
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston in space.webp
diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston.webp b/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston.webp
new file mode 100644
index 000000000..3727bc508
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/assets/houston.webp
diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx
new file mode 100644
index 000000000..b34d50b7c
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx
@@ -0,0 +1,11 @@
+Image using a relative path:
+![Houston](../assets/houston.webp)
+
+Image using an aliased path:
+![Houston](~/assets/houston.webp)
+
+Image with a title:
+![Houston](~/assets/houston.webp "Houston title")
+
+Image with spaces in the path:
+![Houston](<~/assets/houston in space.webp>)
diff --git a/packages/integrations/mdx/test/mdx-images.test.js b/packages/integrations/mdx/test/mdx-images.test.js
new file mode 100644
index 000000000..c9c8e1f7c
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-images.test.js
@@ -0,0 +1,40 @@
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX Page', () => {
+	let devServer;
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-images/', import.meta.url),
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	describe('Optimized images in MDX', () => {
+		it('works', async () => {
+			const res = await fixture.fetch('/');
+			expect(res.status).to.equal(200);
+
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			const imgs = document.getElementsByTagName('img');
+			expect(imgs.length).to.equal(4);
+			// Image using a relative path
+			expect(imgs.item(0).src.startsWith('/_image')).to.be.true;
+			// Image using an aliased path
+			expect(imgs.item(1).src.startsWith('/_image')).to.be.true;
+			// Image with title
+			expect(imgs.item(2).title).to.equal('Houston title');
+			// Image with spaces in the path
+			expect(imgs.item(3).src.startsWith('/_image')).to.be.true;
+		});
+	});
+});