Fix nested <details> tag (#403)

* Fix nested <details> tag

* Add changeset for nested details fix

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

.changeset/nested-details-fix.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+fix nested same-tag HTML block parsing in parseMarkdownIntoBlocks

packages/streamdown/__tests__/nested-details-tables.test.tsx

@@ -0,0 +1,167 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Streamdown } from "../index";
+import { parseMarkdownIntoBlocks } from "../lib/parse-blocks";
+
+describe("Nested details elements", () => {
+  describe("parseMarkdownIntoBlocks", () => {
+    it("should keep nested same-tag HTML blocks as a single balanced block", () => {
+      const markdown = `Text before
+
+<details>
+<summary>Outer</summary>
+
+<details>
+<summary>Inner</summary>
+
+Inner content
+
+</details>
+
+Outer content after inner closes
+
+</details>
+
+Text after`;
+
+      const blocks = parseMarkdownIntoBlocks(markdown);
+      const detailsBlock = blocks.find((b) => b.includes("<details>"));
+
+      const openCount = (detailsBlock?.match(/<details>/g) ?? []).length;
+      const closeCount = (detailsBlock?.match(/<\/details>/g) ?? []).length;
+      expect(openCount).toBe(2);
+      expect(closeCount).toBe(2);
+      expect(detailsBlock).toContain("Outer content after inner closes");
+      expect(detailsBlock).not.toContain("Text after");
+    });
+
+    it("should handle triple-nested same-tag HTML blocks", () => {
+      const markdown = `<details>
+<summary>L1</summary>
+
+<details>
+<summary>L2</summary>
+
+<details>
+<summary>L3</summary>
+
+Deep content
+
+</details>
+
+</details>
+
+</details>`;
+
+      const blocks = parseMarkdownIntoBlocks(markdown);
+      const detailsBlock = blocks.find((b) => b.includes("<details>"));
+
+      const openCount = (detailsBlock?.match(/<details>/g) ?? []).length;
+      const closeCount = (detailsBlock?.match(/<\/details>/g) ?? []).length;
+      expect(openCount).toBe(3);
+      expect(closeCount).toBe(3);
+    });
+  });
+
+  describe("rendered DOM structure", () => {
+    it("should nest inner details inside outer details", () => {
+      const markdown = `<details>
+<summary>Outer</summary>
+
+<details>
+<summary>Inner</summary>
+
+Inner content
+
+</details>
+
+Outer content
+
+</details>`;
+
+      const { container } = render(
+        <Streamdown>{markdown}</Streamdown>
+      );
+
+      const outer = container.querySelector("details");
+      expect(outer).toBeTruthy();
+      expect(
+        outer?.querySelector(":scope > summary")?.textContent
+      ).toBe("Outer");
+
+      const inner = outer?.querySelector("details");
+      expect(inner).toBeTruthy();
+      expect(
+        inner?.querySelector(":scope > summary")?.textContent
+      ).toBe("Inner");
+
+      expect(outer?.textContent).toContain("Outer content");
+      expect(outer?.textContent).toContain("Inner content");
+    });
+
+    it("should keep sibling content inside outer details after inner closes", () => {
+      const markdown = `<details>
+<summary>Outer</summary>
+
+<details>
+<summary>Inner</summary>
+
+Inner content
+
+</details>
+
+### Heading after inner
+
+| A | B |
+|---|---|
+| 1 | 2 |
+
+</details>`;
+
+      const { container } = render(
+        <Streamdown>{markdown}</Streamdown>
+      );
+
+      const outer = container.querySelector("details");
+      expect(outer).toBeTruthy();
+
+      // Heading and table should be inside the outer details, not leaked out
+      const heading = outer?.querySelector("h3");
+      expect(heading?.textContent).toContain("Heading after inner");
+
+      const table = outer?.querySelector("table");
+      expect(table).toBeTruthy();
+    });
+
+    it("should produce only one top-level details for a fully nested structure", () => {
+      const markdown = `Before
+
+<details>
+<summary>Top</summary>
+
+<details>
+<summary>Nested</summary>
+
+Nested content
+
+</details>
+
+</details>
+
+After`;
+
+      const { container } = render(
+        <Streamdown>{markdown}</Streamdown>
+      );
+
+      const allDetails = container.querySelectorAll("details");
+      const topLevel = [...allDetails].filter(
+        (d) => !d.parentElement?.closest("details")
+      );
+      expect(topLevel.length).toBe(1);
+      expect(
+        topLevel[0].querySelector(":scope > summary")?.textContent
+      ).toBe("Top");
+    });
+  });
+});

packages/streamdown/lib/parse-blocks.tsx

@@ -120,14 +120,17 @@ export const parseMarkdownIntoBlocks = (markdown: string): string[] => {
       // We're inside an HTML block, merge with the previous block
       mergedBlocks[mergedBlocksLen - 1] += currentBlock;
 
-      // Check if this token closes an HTML tag
-      // Note: Marked's Lexer splits HTML blocks at blank lines, so the closing tag
-      // may end up in a non-html token (e.g. paragraph). We must check all token types.
-      const closingTagMatch = currentBlock.match(closingTagPattern);
-      if (closingTagMatch) {
-        const closingTag = closingTagMatch[1];
-        // Check if this closes the most recent opening tag
-        if (htmlStack.at(-1) === closingTag) {
+      // Track nested opening and closing tags of the same type
+      // so that inner closing tags don't prematurely close the outer block
+      const trackedTag = htmlStack.at(-1) as string;
+      const newOpenTags = countNonSelfClosingOpenTags(currentBlock, trackedTag);
+      const newCloseTags = countClosingTags(currentBlock, trackedTag);
+
+      for (let i = 0; i < newOpenTags; i += 1) {
+        htmlStack.push(trackedTag);
+      }
+      for (let i = 0; i < newCloseTags; i += 1) {
+        if (htmlStack.length > 0 && htmlStack.at(-1) === trackedTag) {
           htmlStack.pop();
         }
       }