From 0ef1613ea36439a76965290053ccc3f8afb9f400 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Mon, 13 Jan 2025 23:59:56 +0800
Subject: [PATCH] Fix component render in markdoc when `nodes.document.render`
 is `null` (#12967)

---
 .changeset/nasty-pandas-unite.md                    |  5 +++++
 .../integrations/markdoc/components/TreeNode.ts     |  6 +++++-
 .../test/fixtures/render-null/markdoc.config.mjs    | 13 +++++++++----
 .../render-null/src/components/DivWrapper.astro     |  1 +
 .../render-null/src/content/blog/render-null.mdoc   |  6 ++++++
 packages/integrations/markdoc/test/render.test.js   |  2 ++
 6 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/nasty-pandas-unite.md
 create mode 100644 packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro

diff --git a/.changeset/nasty-pandas-unite.md b/.changeset/nasty-pandas-unite.md
new file mode 100644
index 0000000000..d8d73fa349
--- /dev/null
+++ b/.changeset/nasty-pandas-unite.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fixes rendering components when the `nodes.document.render` Markdoc config is set to `null`
diff --git a/packages/integrations/markdoc/components/TreeNode.ts b/packages/integrations/markdoc/components/TreeNode.ts
index d63ca8c1c3..4c1174c3c5 100644
--- a/packages/integrations/markdoc/components/TreeNode.ts
+++ b/packages/integrations/markdoc/components/TreeNode.ts
@@ -40,7 +40,11 @@ export type TreeNode =
 
 function renderTreeNodeToFactoryResult(result: SSRResult, treeNode: TreeNode) {
 	if (Array.isArray(treeNode)) {
-		return Promise.all(treeNode.map((node) => renderTreeNodeToFactoryResult(result, node)));
+		return Promise.all(
+			treeNode.map((node) =>
+				renderComponent(result, 'ComponentNode', ComponentNode, { treeNode: node }),
+			),
+		);
 	}
 
 	if (treeNode.type === 'text') return render`${treeNode.content}`;
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs
index 01082bfacd..5db65fddd5 100644
--- a/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs
+++ b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs
@@ -1,10 +1,15 @@
-import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
 	nodes: {
 		document: {
 			...nodes.document,
 			render: null,
-		}
-	}
-})
+		},
+	},
+	tags: {
+		'div-wrapper': {
+			render: component('./src/components/DivWrapper.astro'),
+		},
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro
new file mode 100644
index 0000000000..942a11945f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro
@@ -0,0 +1 @@
+<div class="div-wrapper"><slot /></div>
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc
index 7b7b193cb1..f85ebebd13 100644
--- a/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc
@@ -5,3 +5,9 @@ title: Post with render null
 ## Post with render null
 
 This should render the contents inside a fragment!
+
+{% div-wrapper %}
+
+I'm inside a div wrapper
+
+{% /div-wrapper %}
diff --git a/packages/integrations/markdoc/test/render.test.js b/packages/integrations/markdoc/test/render.test.js
index 364604405d..4c9293288b 100644
--- a/packages/integrations/markdoc/test/render.test.js
+++ b/packages/integrations/markdoc/test/render.test.js
@@ -137,6 +137,8 @@ function renderNullChecks(html) {
 	const h2 = document.querySelector('h2');
 	assert.equal(h2.textContent, 'Post with render null');
 	assert.equal(h2.parentElement?.tagName, 'BODY');
+	const divWrapper = document.querySelector('.div-wrapper');
+	assert.equal(divWrapper.textContent, "I'm inside a div wrapper");
 }
 
 /** @param {string} html */