From 60eefb4b27227cc8922b72b4f107d16e555aff88 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 3 Dec 2025 02:52:07 +0000
Subject: [PATCH] refactor: Implement recursive rendering to detect and convert
 code blocks

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/Article.js | 62 ++++++++++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 18 deletions(-)

diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index 8eea2f5..78c3a06 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -58,10 +58,52 @@ function Article({ cache }) {
 	};
 
 	const isCodeBlock = (v) => {
-		console.log(v);
 		return v.localName === 'pre' || v.localName === 'code' || (v.firstElementChild && v.firstElementChild.localName === 'code');
 	};
 
+	const renderNodes = (nodes, keyPrefix = '') => {
+		return Array.from(nodes).map((v, k) => {
+			const key = `${keyPrefix}${k}`;
+			if (pConv.includes(key)) {
+				return (
+					<React.Fragment key={key}>
+						{v.innerHTML.split('\n\n').map((x, i) =>
+							<p key={i} dangerouslySetInnerHTML={{ __html: x }} />
+						)}
+					</React.Fragment>
+				);
+			}
+
+			if (v.nodeName === '#text') {
+				// Only wrap top-level text nodes in <p>
+				if (keyPrefix === '' && v.data.trim() !== '') {
+					return <p key={key}>{v.data}</p>;
+				}
+				return v.data;
+			}
+
+			if (v.nodeType !== Node.ELEMENT_NODE) {
+				return null;
+			}
+
+			const Tag = v.localName;
+			if (isCodeBlock(v)) {
+				return (
+					<React.Fragment key={key}>
+						<Tag dangerouslySetInnerHTML={{ __html: v.innerHTML }} />
+						<button onClick={() => pConvert(key)}>Convert Code to Paragraph</button>
+					</React.Fragment>
+				);
+			}
+
+			return (
+				<Tag key={key}>
+					{renderNodes(v.childNodes, `${key}-`)}
+				</Tag>
+			);
+		});
+	};
+
 	const nodes = (s) => {
 		if (s && s.text) {
 			let div = document.createElement('div');
@@ -101,23 +143,7 @@ function Article({ cache }) {
 
 					{nodes(story) ?
 						<div className='story-text'>
-							{Object.entries(nodes(story)).map(([k, v]) =>
-								pConv.includes(k) ?
-									<React.Fragment key={k}>
-										{v.innerHTML.split('\n\n').map((x, i) =>
-											<p key={i} dangerouslySetInnerHTML={{ __html: x }} />
-										)}
-									</React.Fragment>
-								:
-									(v.nodeName === '#text' ?
-										<p key={k}>{v.data}</p>
-									:
-										<React.Fragment key={k}>
-											<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
-											{isCodeBlock(v) && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
-										</React.Fragment>
-									)
-							)}
+							{renderNodes(nodes(story))}
 						</div>
 					:
 						<p>Problem getting article :(</p>