From 4f752c8713cb6fb5d0bec2592a8e670a46e8df48 Mon Sep 17 00:00:00 2001
From: Evan Jacobs <probablyup@gmail.com>
Date: Wed, 20 Mar 2024 23:59:33 -0400
Subject: [PATCH] fix: deep html nesting

Closes #520
---
 .changeset/fuzzy-deers-argue.md |  5 ++++
 index.compiler.spec.tsx         | 41 ++++++++++++++++++++++-----------
 index.tsx                       |  2 +-
 3 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/fuzzy-deers-argue.md

diff --git a/.changeset/fuzzy-deers-argue.md b/.changeset/fuzzy-deers-argue.md
new file mode 100644
index 00000000..4b69c186
--- /dev/null
+++ b/.changeset/fuzzy-deers-argue.md
@@ -0,0 +1,5 @@
+---
+"markdown-to-jsx": patch
+---
+
+Fix handling of deeply-nested HTML in some scenarios.
diff --git a/index.compiler.spec.tsx b/index.compiler.spec.tsx
index 102be7ef..99b593e1 100644
--- a/index.compiler.spec.tsx
+++ b/index.compiler.spec.tsx
@@ -248,13 +248,13 @@ describe('inline textual elements', () => {
     render(compiler('**Hello\nWorld.**\n'))
 
     expect(root.innerHTML).toMatchInlineSnapshot(`
-    <p>
-      <strong>
-        Hello
-    World.
-      </strong>
-    </p>
-    `)
+          <p>
+            <strong>
+              Hello
+          World.
+            </strong>
+          </p>
+        `)
   })
 
   it('should handle triple-emphasized text', () => {
@@ -3401,13 +3401,13 @@ Item detail
     )
 
     expect(root.innerHTML).toMatchInlineSnapshot(`
-    <p>
-      Item detail
-      <span style="color: rgb(253, 219, 103); font-size: 11px; font-style: normal; font-weight: 500; line-height: 18px; text-decoration-line: underline;">
-        debug item 1
-      </span>
-    </p>
-    `)
+          <p>
+            Item detail
+            <span style="color: rgb(253, 219, 103); font-size: 11px; font-style: normal; font-weight: 500; line-height: 18px; text-decoration-line: underline;">
+              debug item 1
+            </span>
+          </p>
+        `)
   })
 })
 
@@ -4342,6 +4342,19 @@ describe('overrides', () => {
 
     expect(root.innerHTML).toMatchInlineSnapshot(`"test"`)
   })
+
+  it('#520 handle deep nesting', () => {
+    render(compiler('<div><div><div></div></div></div>'))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <div>
+          </div>
+        </div>
+      </div>
+    `)
+  })
 })
 
 it('should remove YAML front matter', () => {
diff --git a/index.tsx b/index.tsx
index 09ed18a4..80fb5f32 100644
--- a/index.tsx
+++ b/index.tsx
@@ -254,7 +254,7 @@ const HEADING_SETEXT_R = /^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/
  *    \n*
  */
 const HTML_BLOCK_ELEMENT_R =
-  /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1\b)[\s\S])*?)<\/\1>\n*/i
+  /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1\b)[\s\S])*?)<\/\1>(?!<\/\1>)\n*/i
 
 const HTML_CHAR_CODE_R = /&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi