fix: handle newlines inside HTML tag brackets (quantizor#557)

* refactor: trim style keys

* fix: handle newlines inside HTML tag brackets

Closes quantizor#540

Signed-off-by: Innei <[email protected]>

Author: quantizor

.changeset/fast-months-play.md

@@ -0,0 +1,5 @@
+---
+"markdown-to-jsx": patch
+---
+
+Handle newlines inside of HTML tags themselves (not just nested children.)

index.compiler.spec.tsx

@@ -2981,6 +2981,7 @@ comment -->`)
       </span>
     `)
   })
+
   it('should not fail with lots of \\n in the middle of the text', () => {
     render(
       compiler(
@@ -3069,6 +3070,97 @@ print("hello world")
       </div>
     `)
   })
+
+  it('#444 switching list formats regression test', () => {
+    render(
+      compiler(
+        `
+1.  One
+2.  Two
+3.  Three
+
+*   Red
+*   Green
+*   Blue
+        `
+      )
+    )
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <div>
+        <ol start="1">
+          <li>
+            One
+          </li>
+          <li>
+            Two
+          </li>
+          <li>
+            Three
+          </li>
+        </ol>
+        <ul>
+          <li>
+            Red
+          </li>
+          <li>
+            Green
+          </li>
+          <li>
+            Blue
+          </li>
+        </ul>
+      </div>
+    `)
+  })
+
+  it('#466 list-like syntax inside link regression test', () => {
+    render(
+      compiler(
+        'Hello, I think that [6. Markdown](http://daringfireball.net/projects/markdown/) lets you write content in a really natural way.'
+      )
+    )
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <span>
+        Hello, I think that
+        <a href="http://daringfireball.net/projects/markdown/">
+          6. Markdown
+        </a>
+        lets you write content in a really natural way.
+      </span>
+    `)
+  })
+
+  it('#540 multiline attributes are supported', () => {
+    render(
+      compiler(
+        `<p>
+Item detail
+<span
+  style="
+    color: #fddb67;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    text-decoration-line: underline;
+  "
+  >debug item 1</span
+>
+</p>`
+      )
+    )
+
+    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>
+    `)
+  })
 })
 
 describe('horizontal rules', () => {

index.tsx

@@ -416,7 +416,7 @@ const HEADING_SETEXT_R = /^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/
  *    ([^ >/]+)
  *
  * 3. Ignore a space after the starting tag and capture the attribute portion of the tag (capture 2)
- *     ?([^>]*)\/{0}>
+ *     ?([^>]*)>
  *
  * 4. Ensure a matching closing tag is present in the rest of the input string
  *    (?=[\s\S]*<\/\1>)
@@ -429,7 +429,7 @@ const HEADING_SETEXT_R = /^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/
  *    \n*
  */
 const HTML_BLOCK_ELEMENT_R =
-  /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)\/{0}>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i
+  /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i
 
 const HTML_CHAR_CODE_R = /&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi
 
@@ -865,9 +865,9 @@ function attributeValueToJSXPropValue(key: string, value: string): any {
 
       // snake-case to camelCase
       // also handles PascalCasing vendor prefixes
-      const camelCasedKey = key.replace(/(-[a-z])/g, substr =>
-        substr[1].toUpperCase()
-      )
+      const camelCasedKey = key
+        .trim()
+        .replace(/(-[a-z])/g, substr => substr[1].toUpperCase())
 
       // key.length + 1 to skip over the colon
       styles[camelCasedKey] = kvPair.slice(key.length + 1).trim()