Fix component render in markdoc when `nodes.document.render` is `null` (#12967)

6 files changed, 28 insertions, 5 deletions

diff --git a/.changeset/nasty-pandas-unite.md b/.changeset/nasty-pandas-unite.md
new file mode 100644
index 000000000..d8d73fa34
--- /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 d63ca8c1c..4c1174c3c 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 01082bfac..5db65fddd 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 000000000..942a11945
--- /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 7b7b193cb..f85ebebd1 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 364604405..4c9293288 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 */