[draft-js-import-markdown] Fix issue with complex image sources (#102)

* [draft-js-import-markdown] replicate issue with complex image sources

* [draft-js-import-markdown] fix links with complex sources

Makes `href` matching of links and images non-greedy.

This fix is copied from markedjs/marked#600, and
fixes the failing tests submitted in the previous commit.

* Fix linting

* make the tooling happy

Author: mxstbr

packages/draft-js-import-element/src/__tests__/stateFromElement-test.js

@@ -171,6 +171,38 @@ describe('stateFromElement', () => {
       ],
     });
   });
+
+  it('should support images', () => {
+    let imageNode = new ElementNode('img', [{name: 'src', value: 'imgur.com/asdf.jpg'}]);
+    let wrapperElement = new ElementNode('div', [], [imageNode]);
+    let contentState = stateFromElement(wrapperElement);
+    let rawContentState = removeBlockKeys(convertToRaw(contentState));
+    expect(rawContentState).toEqual({
+      blocks: [{
+        data: {},
+        depth: 0,
+        entityRanges: [{
+          key: 0,
+          length: 1,
+          offset: 0,
+        }],
+        inlineStyleRanges: [],
+        text: ' ',
+        type: 'unstyled',
+      }],
+      entityMap: {
+        // This is necessary due to flow not supporting non-string literal property keys
+        // eslint-disable-next-line quote-props
+        '0': {
+          data: {
+            src: 'imgur.com/asdf.jpg',
+          },
+          mutability: 'MUTABLE',
+          type: 'IMAGE',
+        },
+      },
+    });
+  });
 });
 
 describe('stateFromHTML', () => {

packages/draft-js-import-element/test/test-cases.txt

@@ -54,6 +54,10 @@
 {"entityMap":{"0":{"type":"IMAGE","mutability":"MUTABLE","data":{"src":"a.jpg", "alt": "a"}}},"blocks":[{"key":"8r91a","text":"\u00A0","type":"unstyled","data":{},"depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":0}]}]}
 <p><img src="a.jpg" alt="a"/></p>
 
+# Image Entity with complex src
+{"entityMap":{"0":{"type":"IMAGE","mutability":"MUTABLE","data":{"src":"https://spectrum.imgix.net/threads/c678032e-68a4-4e14-956d-abfa444a707d/Captura%20de%20pantalla%202017-08-19%20a%20la(s)%2000.14.09.png.0.29802431313299893", "alt": "a"}}},"blocks":[{"key":"8r91a","text":"\u00A0","type":"unstyled","data":{},"depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":0}]}]}
+<p><img src="https://spectrum.imgix.net/threads/c678032e-68a4-4e14-956d-abfa444a707d/Captura%20de%20pantalla%202017-08-19%20a%20la(s)%2000.14.09.png.0.29802431313299893" alt="a"/></p>
+
 # Entity
 {"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"url":"/"}}},"blocks":[{"key":"8r91j","text":"a","type":"unstyled","data":{},"depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":0}]}]}
 <p><a href="/">a</a></p>

packages/draft-js-import-markdown/src/MarkdownParser.js

@@ -384,7 +384,7 @@ var inline = {
 };
 
 inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
-inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
+inline._href = /\s*<?([\s\S]*)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
 
 inline.link = replace(inline.link)('inside', inline._inside)(
   'href',

packages/draft-js-import-markdown/src/__tests__/stateFromMarkdown-test.js

@@ -43,6 +43,41 @@ describe('stateFromMarkdown', () => {
       },
     ]);
   });
+  it('should correctly move images with complex srcs', () => {
+    const src = 'https://spectrum.imgix.net/threads/c678032e-68a4-4e14-956d-abfa444a707d/Captura%20de%20pantalla%202017-08-19%20a%20la(s)%2000.14.09.png.0.29802431313299893';
+    let input = `![](${src})`;
+    let contentState = stateFromMarkdown(input);
+    let rawContentState = convertToRaw(contentState);
+    let blocks = removeKeys(rawContentState.blocks);
+    expect({
+      ...rawContentState,
+      blocks,
+    }).toEqual({
+      entityMap: {
+        // This is necessary due to flow not supporting non-string literal property keys
+        // eslint-disable-next-line quote-props
+        '0': {
+          type: 'IMAGE',
+          mutability: 'MUTABLE',
+          data: {
+            src: src,
+          },
+        },
+      },
+      blocks: [{
+        text: ' ',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [{
+          offset: 0,
+          length: 1,
+          key: 0,
+        }],
+        data: {},
+      }],
+    });
+  });
 });
 
 function removeKeys(blocks) {