Transform adds figure to paragraph

[thomasmassmann]

The transformation of article images to figures replaces the image with a figure and figcaption. Now figures are not allowed in p tags, which by default is the parent of the image. Some browsers will render empty p tags above and below the figure, which leads to additional unwanted space.

I fixed this locally by changing the transformation to this:

image.parentElement.replaceWith(figure)

Is the assumption ok that every image (from markdown content) will have a surrounding p tag? Or would it be better to test for the parent and its content?

[equivalentideas]

I've had this issue as well. Thanks for investigating @thomasmassmann :bouquet:

[thomasmassmann]

I'm getting closer to what I want. If you have images with text before/after it, the text in my first patch is gone. Now the image is removed from the parent (p tag) and then added right after the parent if there is still some text in it.

figure.appendChild(image.cloneNode(true));
figure.appendChild(figCaption);
const parent = image.parentElement;
parent.removeChild(image);
if (parent.innerHTML.length) {
    parent.parentNode.insertBefore(figure, parent.nextSibling);
} else {
    parent.replaceWith(figure);
}

Now when you have more than one inline image it would be great to split the parent and have the new figure sit in between. Any hints?

Origanal behavior

![The top of a grey concrete building with a blue sky in the background](/images/demo-image-1.jpg "Brutalism at its finest. Photo by Artificial Photography on Unsplash.")

becomes

<p>
  <figure>...</figure>
</p>

which browsers will render as

<p></p>
<figure>...</figure>
<p></p>

With current patch

Image only

![The top of a grey concrete building with a blue sky in the background](/images/demo-image-1.jpg "Brutalism at its finest. Photo by Artificial Photography on Unsplash.")

becomes

<figure>...</figure>

Image inline with text

Some text before.
![The top of a grey concrete building with a blue sky in the background](/images/demo-image-1.jpg "Brutalism at its finest. Photo by Artificial Photography on Unsplash.")
Some text after.

becomes

<p>Some text before. Some text after.</p>
<figure>...</figure>

Multiple image inline with text

Some text before.
![The top of a grey concrete building with a blue sky in the background](/images/demo-image-1.jpg "Brutalism at its finest. Photo by Artificial Photography on Unsplash.")
Some text after.
![The top of a grey concrete building with a blue sky in the background](/images/demo-image-1.jpg "Brutalism at its finest. Photo by Artificial Photography on Unsplash.")
End of text.

becomes

<p>Some text before. Some text after. End of text.</p>
<figure>...</figure>
<figure>...</figure>

But it should be

<p>Some text before.</p>
<figure>...</figure>
<p>Some text after.</p>
<figure>...</figure>
<p>End of text.</p>

[Andy-set-studio]

I appreciate the work going into this. I'm a bit stacked to be thinking about it right now, but it's certainly one to keep an eye on.

[thomasmassmann]

Sure, that's nothing super critical to worry about right now. I want to discuss things first and see what possible problems and side effects are possible before creating a PR. And also get some feedback from others who use hylia for their projects.

[Andy-set-studio]

Thank you, Thomas. I'm really glad you spotted this because I certainly don't want to be shipping bad HTML :)