Parse link reference definitions surrounded by angle brackets (quanti…

…zor#476)

I created issue quantizor#475, and it seemed like a simple enough change,
I wanted to take a stab at solving it. I've adjusted the regex,
and added some tests to allow angle brackets to surround link
reference definitions, like this one:

```markdown
This is [an example][id] reference-style link.

[id]: <http://example.com/>  "Optional Title Here"
```

All tests are passing.

Signed-off-by: Elliot Voris <elliot@voris.me>
Signed-off-by: Innei <i@innei.in>

index.compiler.spec.tsx

@@ -771,6 +771,76 @@ describe('links', () => {
     `)
   })
 
+  it('should handle a link reference with angle brackets', () => {
+    render(compiler(['[foo][1]', '[1]: </xyz.png>'].join('\n')))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <p>
+        <a href="/xyz.png">
+          foo
+        </a>
+      </p>
+    `)
+  })
+
+  it('should handle a link reference with angle brackets and a space', () => {
+    render(compiler(['[foo] [1]', '[1]: </xyz.png>'].join('\n')))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <p>
+        <a href="/xyz.png">
+          foo
+        </a>
+      </p>
+    `)
+  })
+
+  it('should handle a link reference with angle brackets and a title', () => {
+    render(compiler(['[foo][1]', '[1]: </xyz.png> "bar"'].join('\n')))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <p>
+        <a href="/xyz.png"
+           title="bar"
+        >
+          foo
+        </a>
+      </p>
+    `)
+  })
+
+  it('list item should break paragraph', () => {
+    render(compiler('foo\n- item'))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <div>
+        <p>
+          foo
+        </p>
+        <ul>
+          <li>
+            item
+          </li>
+        </ul>
+      </div>
+    `)
+  })
+
+  it('header should break paragraph', () => {
+    render(compiler('foo\n# header'))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <div>
+        <p>
+          foo
+        </p>
+        <h1 id="header">
+          header
+        </h1>
+      </div>
+    `)
+  })
+
   it('should handle autolink style', () => {
     render(compiler('<https://google.com>'))
 

index.tsx

@@ -407,8 +407,8 @@ const LINK_AUTOLINK_MAILTO_R = /^<([^ >]+@[^ >]+)>/
 const LINK_AUTOLINK_R = /^<([^ >]+:\/[^ >]+)>/
 const CAPTURE_LETTER_AFTER_HYPHEN = /-([a-z])?/gi
 const NP_TABLE_R = /^(.*\|?.*)\n *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*)\n?/
-const PARAGRAPH_R = /^((?:[^\n]|\n(?! *\n))+)(?:\n *)+\n/
-const REFERENCE_IMAGE_OR_LINK = /^\[([^\]]*)\]:\s*(\S+)\s*("([^"]*)")?/
+const PARAGRAPH_R = /^[^\n]+(?:  \n|\n{2,})/
+const REFERENCE_IMAGE_OR_LINK = /^\[([^\]]*)\]:\s+<?([^\s>]+)>?\s*("([^"]*)")?/
 const REFERENCE_IMAGE_R = /^!\[([^\]]*)\] ?\[([^\]]*)\]/
 const REFERENCE_LINK_R = /^\[([^\]]*)\] ?\[([^\]]*)\]/
 const SQUARE_BRACKETS_R = /(\[|\])/g