[MDX] Support remark-rehype options from Astro Markdown config (#5427)

* [MDX] Support remark-rehype options from Astro Markdown config

* [MDX] Add remarkRehype to MdxOptions, extend with default markdown config

* [MDX] Add remarkRehype to README

* [MDX] Fix remarkRehype inheritance, add tests

* [MDX] Update remarkRehype docs in README

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* [MDX] Fix remarkRehype docs

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/nice-jokes-smile.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': minor
+---
+
+Uses remark-rehype options from astro.config.mjs

packages/integrations/mdx/README.md

@@ -518,6 +518,26 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
+### remarkRehype
+
+Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
+
+You can use remark-rehype options in your MDX integration config file like so:
+
+```js
+// astro.config.mjs
+export default {
+  integrations: [mdx({
+    remarkRehype: {
+      footnoteLabel: 'Catatan kaki',
+      footnoteBackLabel: 'Kembali ke konten',
+    },
+  })],
+};
+```
+
+This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
+
 ## Examples
 
 - The [Astro MDX example](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.

packages/integrations/mdx/package.json

@@ -63,6 +63,7 @@
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
     "rehype-pretty-code": "^0.4.0",
+    "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
     "vite": "^3.0.0"

packages/integrations/mdx/src/index.ts

@@ -1,3 +1,4 @@
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import { compile as mdxCompile } from '@mdx-js/mdx';
 import { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
@@ -33,6 +34,7 @@ export type MdxOptions = {
 	 * - false - do not inherit any plugins
 	 */
 	extendPlugins?: 'markdown' | 'astroDefaults' | false;
+	remarkRehype?: RemarkRehypeOptions;
 };
 
 export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
@@ -62,6 +64,15 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					console.info(`See "extendPlugins" option to configure this behavior.`);
 				}
 
+				let remarkRehypeOptions = mdxOptions.remarkRehype;
+
+				if (mdxOptions.extendPlugins === 'markdown') {
+					remarkRehypeOptions = {
+						...config.markdown.remarkRehype,
+						...remarkRehypeOptions,
+					};
+				}
+
 				const mdxPluginOpts: MdxRollupPluginOptions = {
 					remarkPlugins: await getRemarkPlugins(mdxOptions, config),
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -71,6 +82,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
 					format: 'mdx',
 					mdExtensions: [],
+					remarkRehypeOptions,
 				};
 
 				let importMetaEnv: Record<string, any> = {

packages/integrations/mdx/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx

@@ -0,0 +1,5 @@
+# Hello world
+
+This[^1] should be visible.
+
+[^1]: And there would be a footnote.

packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js

@@ -0,0 +1,81 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX with Astro Markdown remark-rehype config', () => {
+	it('Renders footnotes with values from the default configuration', async () => {
+		const fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
+			integrations: [mdx()],
+			markdown: {
+				remarkRehype: {
+					footnoteLabel: 'Catatan kaki',
+					footnoteBackLabel: 'Kembali ke konten',
+				},
+			},
+		});
+
+		await fixture.build();
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
+		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
+			'Kembali ke konten'
+		);
+	});
+
+	it('Renders footnotes with values from custom configuration extending the default', async () => {
+		const fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
+			integrations: [mdx({
+				remarkRehype: {
+					footnoteLabel: 'Catatan kaki',
+					footnoteBackLabel: 'Kembali ke konten',
+				},
+			})],
+			markdown: {
+				remarkRehype: {
+					footnoteBackLabel: 'Replace me',
+				},
+			},
+		});
+
+		await fixture.build();
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
+		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
+			'Kembali ke konten'
+		);
+	});
+
+	it('Renders footnotes with values from custom configuration without extending the default', async () => {
+		const fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
+			integrations: [mdx({
+				extendPlugins: 'astroDefaults',
+				remarkRehype: {
+					footnoteLabel: 'Catatan kaki',
+				},
+			})],
+			markdown: {
+				remarkRehype: {
+					footnoteBackLabel: 'Kembali ke konten',
+				},
+			},
+		});
+
+		await fixture.build();
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
+		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
+			'Back to content'
+		);
+	});
+});