Wrap inline images in figure too

[rathod-sahaab]

Thanks for the awesome plugin! I have run into a snag
Current behavior:

text with ![](img.png) --> <p>text with <img src="img.png" alt=""></p>

Also:

![](a) ![](b) ![](c) -> <p><img src="a" /> <img src="b" /> <img src="c" /></p>

What I need:

text with ![](img.png) --> <p>text with <figure><img src="img.png" alt=""></figure></p>

and:

![](a) ![](b) ![](c) ->
<p>
   <figure><img src="a" /></figure>
   <figure><img src="b" /></figure>
   <figure><img src="c" /></figure>
</p>

[ferdnyc]

@rathod-sahaab

What I need:

text with ![](img.png) --> <p>text with <figure><img src="img.png" alt=""></figure></p>

and:

![](a) ![](b) ![](c) ->
<p>
   <figure><img src="a" /></figure>
   <figure><img src="b" /></figure>
   <figure><img src="c" /></figure>
</p>

You can't do that, it's invalid HTML.

The <p> tag is a block-level element that is only permitted to contain phrasing content — "inline" tags like <b>, <button>, <code> (but not <pre>), etc. The tag will automatically close if it encounters another block-level element like <figure>. Your last code block would actually be interpreted like this, in the browser (you can use the inspector to confirm):

<p></p>
<figure><img src="a" /></figure>
<figure><img src="b" /></figure>
<figure><img src="c" /></figure>
<p></p>

Your previous code block would be:

<p>text with</p>
<figure><img src="img.png" alt=""></figure>
<p></p>

And if the figure is inline to some text content, it gets even worse.

<!-- This: -->
Some figure ![illustrated](foo.png) text with words after.

<!-- would become this: -->
<p>Some figure <figure><figcaption>illustrated</figcaption><img src="foo.png"></figure> text with words after.</p>

<!-- Which the browser would then parse as THIS: -->
<p>Some figure</p>
<figure>
<figcaption>illustrated</figcaption>
<img src="foo.png">
</figure>
text with words after.
<p></p>

The text content after the figure would end up completely outside the paragraph tags.

You can wrap a container element like <div> around <figure>, but you can't put it inside of a <p>.