fix: Block-level Markdown escapes <details> containers when paragraphs/blank lines are present (#168)

* fix block-level markdown escaping details container

* Create new-pants-leave.md

Author: haydenbleasel

.changeset/new-pants-leave.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+fix: Block-level Markdown escapes <details> containers when paragraphs/blank lines are present

packages/streamdown/__tests__/html-block-multiline.test.tsx

@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Streamdown } from "../index";
+
+// Mock the dependencies
+vi.mock("harden-react-markdown", () => ({
+  default: (Component: any) => Component,
+}));
+
+describe("HTML Block Elements with Multiline Content - #164", () => {
+  it("should render multiline content inside details element", () => {
+    const content = `<details>
+<summary>Summary</summary>
+
+Paragraph inside details.
+</details>`;
+
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    const details = container.querySelector("details");
+    const paragraph = container.querySelector("p");
+
+    expect(details).toBeTruthy();
+    expect(paragraph).toBeTruthy();
+    // The paragraph should be inside the details element
+    expect(details?.contains(paragraph as Node)).toBe(true);
+  });
+
+  it("should render multiline content inside div element", () => {
+    const content = `<div>
+
+Paragraph inside div.
+</div>`;
+
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    const div = container.querySelectorAll("div");
+    const paragraph = container.querySelector("p");
+
+    expect(div.length).toBeGreaterThan(0);
+    expect(paragraph).toBeTruthy();
+    // The paragraph should be inside a div element
+    const containingDiv = paragraph?.closest("div");
+    expect(containingDiv).toBeTruthy();
+  });
+
+  it("should handle multiple paragraphs inside details", () => {
+    const content = `<details>
+<summary>Summary</summary>
+
+First paragraph.
+
+Second paragraph.
+</details>`;
+
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    const details = container.querySelector("details");
+    const paragraphs = container.querySelectorAll("p");
+
+    expect(details).toBeTruthy();
+    expect(paragraphs.length).toBeGreaterThan(0);
+    // All paragraphs should be inside the details element
+    for (const p of paragraphs) {
+      expect(details?.contains(p)).toBe(true);
+    }
+  });
+
+  it("should preserve nested structure in complex HTML blocks", () => {
+    const content = `<div>
+<details>
+<summary>Nested Summary</summary>
+
+Content in nested structure.
+</details>
+</div>`;
+
+    const { container } = render(<Streamdown>{content}</Streamdown>);
+    const details = container.querySelector("details");
+    const paragraph = container.querySelector("p");
+
+    expect(details).toBeTruthy();
+    expect(paragraph).toBeTruthy();
+    // The paragraph should be inside the details element
+    expect(details?.contains(paragraph as Node)).toBe(true);
+  });
+});

packages/streamdown/lib/parse-blocks.tsx

@@ -1,18 +1,57 @@
 import { Lexer } from "marked";
+import type { Token } from "marked";
 
 export const parseMarkdownIntoBlocks = (markdown: string): string[] => {
   const tokens = Lexer.lex(markdown, { gfm: true });
-  const blocks = tokens.map((token) => token.raw);
 
-  // Post-process to merge consecutive blocks that are part of the same math block
+  // Post-process to merge consecutive blocks that belong together
   const mergedBlocks: string[] = [];
+  const htmlStack: string[] = []; // Track opening HTML tags
 
-  for (const currentBlock of blocks) {
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    const currentBlock = token.raw;
+
+    // Check if we're inside an HTML block
+    if (htmlStack.length > 0) {
+      // We're inside an HTML block, merge with the previous block
+      mergedBlocks[mergedBlocks.length - 1] += currentBlock;
+
+      // Check if this token closes an HTML tag
+      if (token.type === "html") {
+        const closingTagMatch = currentBlock.match(/<\/(\w+)>/);
+        if (closingTagMatch) {
+          const closingTag = closingTagMatch[1];
+          // Check if this closes the most recent opening tag
+          if (htmlStack[htmlStack.length - 1] === closingTag) {
+            htmlStack.pop();
+          }
+        }
+      }
+      continue;
+    }
+
+    // Check if this is an opening HTML block tag
+    if (token.type === "html" && token.block) {
+      const openingTagMatch = currentBlock.match(/<(\w+)[\s>]/);
+      if (openingTagMatch) {
+        const tagName = openingTagMatch[1];
+        // Check if this is a self-closing tag or if there's a closing tag in the same block
+        const hasClosingTag = currentBlock.includes(`</${tagName}>`);
+        if (!hasClosingTag) {
+          // This is an opening tag without a closing tag in the same block
+          htmlStack.push(tagName);
+        }
+      }
+    }
+
+    // Math block merging logic (existing)
     // Check if this is a standalone $$ that might be a closing delimiter
     if (currentBlock.trim() === "$$" && mergedBlocks.length > 0) {
       const previousBlock = mergedBlocks.at(-1);
 
       if (!previousBlock) {
+        mergedBlocks.push(currentBlock);
         continue;
       }
 
@@ -32,6 +71,7 @@ export const parseMarkdownIntoBlocks = (markdown: string): string[] => {
       const previousBlock = mergedBlocks.at(-1);
 
       if (!previousBlock) {
+        mergedBlocks.push(currentBlock);
         continue;
       }