Merging HTML Fragments in React ArticleBody
A tiny ArticleBody bug made paragraphs split and spacing drift. The fix was not a parser rewrite, just merging consecutive HTML fragments.
The weird spacing only showed up around inline code
The bug looked tiny. In articles with inline <code>, a paragraph suddenly felt split in half. No crash, just broken layout: an empty gap appeared in the middle of a sentence. It looked like CSS at first. It wasn't.
The annoying part was that parseContent split the content around literal tokens and inline code, then each HTML fragment rendered as its own node inside a space-y-6 wrapper. React wasn't wrong, CSS wasn't wrong. I had accidentally turned one paragraph into two bodies.
What I didn't do: rewrite the parser
The obvious option was to rewrite the parser from scratch. That was too much. What the UI actually needed was one more merge step in ArticleBody before render. Consecutive HTML fragments get merged into one block, while embeds stay as separate islands. Spacing between embeds still works, but normal prose connects again.
This is one of those bugs that makes me trust small UI diffs less. A tiny change in string splitting can look like a layout problem, when the real issue is how the component tree gets assembled. Once the HTML runs were merged back together, the headings that used to feel jumped went back to normal.