[MDX] Support remark and rehype plugins, with defaults (#3977)

* feaet: allow remark and rehype plugin config

* deps: add remark-gfm, remark-smartypants

* feat: add gfm and smartypants by default

* test: add GFM and remark plugin tests

* feat: preserve default plugins with "extends"

* docs: add remarkPlugins

* docs: add rehypePlugins

* chore: changeset

* fix: remove skip from mdx tests

* chore: dup hyperlink flavor text

* chore: authGen -> autoGen

* nit: markdown -> Markdown

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* nit: markdown -> Markdown 1

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* nit: markdown -> Markdown 2

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* nit: markdown -> Markdown 3

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* nit: markdown -> Markdown 4

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 58 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-remark-plugins.test.js b/packages/integrations/mdx/test/mdx-remark-plugins.test.js
new file mode 100644
index 000000000..545df3174
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-remark-plugins.test.js
@@ -0,0 +1,58 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import remarkToc from 'remark-toc';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-remark-plugins/', import.meta.url);
+
+describe('MDX remark plugins', () => {
+	it('supports custom remark plugins - TOC', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx({
+				remarkPlugins: [remarkToc],
+			})],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-toc/index.html');
+		const { document } = parseHTML(html);
+
+		const tocLink1 = document.querySelector('ul a[href="#section-1"]');
+		expect(tocLink1).to.not.be.null;
+	});
+
+	it('applies GitHub-flavored markdown by default', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-gfm/index.html');
+		const { document } = parseHTML(html);
+
+		const autoGenLink = document.querySelector('a[href="https://example.com"]');
+		expect(autoGenLink).to.not.be.null;
+	});
+
+	it('preserves default GitHub-flavored markdown with "extends"', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx({
+				remarkPlugins: { extends: [remarkToc] },
+			})],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-toc/index.html');
+		const { document } = parseHTML(html);
+
+		const tocLink1 = document.querySelector('ul a[href="#section-1"]');
+		expect(tocLink1).to.not.be.null;
+		const autoGenLink = document.querySelector('a[href="https://handle-me-gfm.com"]');
+		expect(autoGenLink).to.not.be.null;
+	});
+});