Embed Tags Block Elements Invalid when Nested Under <p>

[grivkees]

Embed tags are currently being put into articles as such:

<p>{{Image:12343}}<span>Motley’s paintings

Which resolves after the tag is expanded to

<p><span with image><span with text> </p>

Except if I try to change the span with the image to be a figure, in that case it does

<figure>
<span with text>
<p></p>

If I change the html for the content tag to just output:

content_tag(
            :span,
            image_html
          )

it works, but if I do

content_tag(
            :figure,
            image_html
          )

it doesn't.

https://github.com/dukechronicle/chronline/blob/master/app/models/post/embedded_media/image_tag.rb

@jimpo @themichaellai @akyker20 thoughts? Ideally I think it should be

<p>text</p>
<figure>
<p>text<p/>

The figure should not be within the

<p>
<figure>
</p>

[grivkees]

sorry, problems with markdown, makes sense now (hopefully)

[grivkees]

Investigated this more... the issue here is that it is invalid HTML to have a block element, such as a blockquote or figure, nested under<p>.

The embed tags need to be moved up in the dom and be at the same level as the <p> in order for it to be valid. Right now the browser is freaking out since there is a block element under a <p> and making up its own HTML which pushes the block element out, does weird stuff with the spans and i's that might have been there, and ends up wrapping the remaining text in a span and not a p, which messes up the text display.

The embed tag thing needs to be adjusted to not put the rendered html where the tag was, but rather before or after the containing paragraph.