Remove extra newlines around Markdown components (#3620)

6 files changed, 23 insertions, 13 deletions

diff --git a/.changeset/wild-phones-work.md b/.changeset/wild-phones-work.md
new file mode 100644
index 000000000..a55eecadf
--- /dev/null
+++ b/.changeset/wild-phones-work.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Remove extra newlines around Markdown components
diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js
index 1ef8a4b9a..dd40bc071 100644
--- a/packages/astro/test/astro-markdown.test.js
+++ b/packages/astro/test/astro-markdown.test.js
@@ -291,12 +291,16 @@ describe('Astro Markdown', () => {
 		expect(slots.find('> .fragmentSlot > div').text()).to.contain('1:');
 		expect(slots.find('> .fragmentSlot > div + p').text()).to.contain('2:');
 		expect(slots.find('> .pSlot > p[title="hello"]').text()).to.contain('3:');
-		expect(slots.find('> .defaultSlot').text().replace(/\s+/g, ' ')).to.equal(
-			`
-			4: Div in default slot
-			5: Paragraph in fragment in default slot
-			6: Regular text in default slot
-		`.replace(/\s+/g, ' ')
+		expect(slots.find('> .defaultSlot').html()).to.match(
+			new RegExp(
+				`<div>4: Div in default slot</div>` +
+					// Optional extra paragraph due to the line breaks between components
+					`(<p></p>)?` +
+					`<p>5: Paragraph in fragment in default slot</p>` +
+					// Optional whitespace due to the line breaks between components
+					`[\s\n]*` +
+					`6: Regular text in default slot`
+			)
 		);
 
 		const nestedSlots = $('article').eq(1);
diff --git a/packages/markdown/remark/src/rehype-collect-headers.ts b/packages/markdown/remark/src/rehype-collect-headers.ts
index 9a64d59c8..76cb5740c 100644
--- a/packages/markdown/remark/src/rehype-collect-headers.ts
+++ b/packages/markdown/remark/src/rehype-collect-headers.ts
@@ -25,7 +25,7 @@ export default function createCollectHeaders() {
 						return;
 					}
 					if (child.type === 'raw') {
-						if (child.value.startsWith('\n<') || child.value.endsWith('>\n')) {
+						if (child.value.match(/^\n?<.*>\n?$/)) {
 							return;
 						}
 					}
diff --git a/packages/markdown/remark/src/rehype-jsx.ts b/packages/markdown/remark/src/rehype-jsx.ts
index a6761124c..7082997e2 100644
--- a/packages/markdown/remark/src/rehype-jsx.ts
+++ b/packages/markdown/remark/src/rehype-jsx.ts
@@ -53,11 +53,11 @@ export default function rehypeJsx(): ReturnType<RehypePlugin> {
 			// wrapped by raw opening and closing tags
 			const openingTag = {
 				type: 'raw',
-				value: `\n<${node.name}${attrs}>`,
+				value: `<${node.name}${attrs}>`,
 			};
 			const closingTag = {
 				type: 'raw',
-				value: `</${node.name}>\n`,
+				value: `</${node.name}>`,
 			};
 			parent.children.splice(index, 1, openingTag, ...node.children, closingTag);
 		});
diff --git a/packages/markdown/remark/test/components.test.js b/packages/markdown/remark/test/components.test.js
index ca0a3fdb4..4e06d7301 100644
--- a/packages/markdown/remark/test/components.test.js
+++ b/packages/markdown/remark/test/components.test.js
@@ -49,7 +49,7 @@ describe('components', () => {
 	it('should normalize children', async () => {
 		const { code } = await renderMarkdown(`<Component bool={true}>Hello world!</Component>`, {});
 
-		chai.expect(code).to.equal(`\n<Component bool={true}>Hello world!</Component>\n`);
+		chai.expect(code).to.equal(`<Component bool={true}>Hello world!</Component>`);
 	});
 
 	it('should be able to nest components', async () => {
@@ -60,7 +60,7 @@ describe('components', () => {
 
 		chai
 			.expect(code)
-			.to.equal(`\n<Component bool={true}>\n<Component>Hello world!</Component>\n</Component>\n`);
+			.to.equal(`<Component bool={true}><Component>Hello world!</Component></Component>`);
 	});
 
 	it('should allow markdown without many spaces', async () => {
@@ -71,6 +71,6 @@ describe('components', () => {
 			{}
 		);
 
-		chai.expect(code).to.equal(`\n<Component><h1 id="hello-world">Hello world!</h1></Component>\n`);
+		chai.expect(code).to.equal(`<Component><h1 id="hello-world">Hello world!</h1></Component>`);
 	});
 });
diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
index ba28d9c8e..2963ff7f1 100644
--- a/packages/markdown/remark/test/expressions.test.js
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -11,7 +11,7 @@ describe('expressions', () => {
 	it('should be able to serialize expression inside component', async () => {
 		const { code } = await renderMarkdown(`<Component>{a}</Component>`, {});
 
-		chai.expect(code).to.equal(`\n<Component>{a}</Component>\n`);
+		chai.expect(code).to.equal(`<Component>{a}</Component>`);
 	});
 
 	it('should be able to serialize expression inside markdown', async () => {