Extra `<p>` in collection list

[jcubic]

Operating system

Fedora 41

Eleventy

3.0.0

Describe the bug

When you have a for loop and list of at least 2 elements from collection and render content of that collection, you end up with <p> inside <p> and when you add IdAttributePlugin in config you end up with empty <p></p> at the end of each list item.

NOTE: When there is only one element in the list, the <p> tags are correct. But when there are at least two elements in the list, the text before {{ post.content }} have its own <p> tag that makes the issue visible.

Reproduction steps

1. clone repo https://github.com/jcubic/eleventy-p-tag
2. npm install
3. npx @11ty/eleventy --serve
4. empty <p></p> in every list item

Expected behavior

No extra <p></p> tag at the end.
No <p> inside <p>.

Reproduction URL

https://github.com/jcubic/eleventy-p-tag

Screenshots

Additional Notes

The project use Liquid templates. You can comment out the adding of IdAttributePlugin to observer nested <p> tag. I'm not sure if they are valid HTML.

[zachleat]

Here’s the JavaScript string you’re trying to render in Markdown (newlines included) on this template:

'\n' +
'\n' +
'\n' +
'\n' +
'* [Eleventy is Cool](https://www.11ty.dev/) <p>This is official <strong>Eleventy</strong> Website</p>\n' +
'\n' +
'\n' +
'* [GitHub](https://github.com/) <p>GitHub Repro</p>\n' +
'\n' +
'\n'

If we swap to use whitespace trimming, like so:

{%- for post in posts %}
* [{{ post.data.title }}]({{ post.data.url }}) {{ post.content }}
{%- endfor %}

You’ll still see this (the new lines between the * are the problem!):

'\n' +
'\n' +
'* [Eleventy is Cool](https://www.11ty.dev/) <p>This is official <strong>Eleventy</strong> Website</p>\n' +
'\n' +
'* [GitHub](https://github.com/) <p>GitHub Repro</p>\n' +
'\n'

If you add a trim filter, this will work for more complex post.content values (but may not solve all of your issues if you mix extra newlines in the middle of the content? not sure how far you can take this):

eleventyConfig.addFilter("trim", (str) => {
    return str.trim();
})

{%- for post in posts %}
* [{{ post.data.title }}]({{ post.data.url }}) {{ post.content | trim }}
{%- endfor %}

[jcubic]

Ok, but why it works if you delete one post? It doesn't require any trimming.

[zachleat]

Just a markdown quirk when there are newlines between list items, unfortunately.