Links with image content not rendering correctly

[jtiala]

If a link has an image as the content, they render as plain text. It doesn't matter if the link has text content together with the image, if the link has a title or if the image url is used as a reference. All the variants fail rendering as they should.

When either the link, the image or both are written as HTML, it renders correctly.

Reproduce:

1. Go to https://probablyup.com/markdown-to-jsx/

2. Copy and paste this to the text area:

   [![Basic](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://example.com)
   
   [![With link title](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://example.com "Title")
   
   [sb-badge]: https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg
   
   [![As reference][sb-badge]](https://example.com)
   
   [![As reference with title][sb-badge]](https://example.com "Title")
   
   [![Image and text](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg) + Text](https://example.com)
   
   [Text + ![Text and image](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://example.com)
   
   [<img alt="Image as html" src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" />](https://example.com)
   
   <a href="https://example.com">![Link as html](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)</a>
   
   <a href="https://example.com"><img alt="Plain html" src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" /></a>
   

3. All these should render correctly, but only the last three seem to work.

Related: #230

[laem]

I can confirm this problem.

Here is another example that can run on https://npm.runkit.com/markdown-to-jsx

require("react/package.json"); // react is a peer dependency. 
const  compiler  = require('markdown-to-jsx').compiler;
const renderToString = require('react-dom/server').renderToString
renderToString(compiler(`[![Glacier d'Aletsch](https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Aletschgletscher-Eggishorn.jpg/800px-Aletschgletscher-Eggishorn.jpg)](https://fr.wikipedia.org/wiki/Glacier_d%27Aletsch)\r\n\r\n>`))

[gbiryukov]

it become broken in v7.2.0, these cases works just fine in v7.1.9

[drjonnicholson]

Has there been any progress on this?

Can confirm downgrading to 7.1.9 solved this for me

[renamartins]

Will there be a fix?

Update: looks like it will be fixed in the next release as #551 was completed

Update: now using new version 7.4.5 and no longer an issue

[jtiala]

Seems like all the other examples in my original post render now correctly, but the ones using references.