Unexpected line breaks with nested lists

[eddivalen]

Version(s) affected

5.1

Description

I've found an issue where the HTML generated by the WP Gutenberg editor is resulting in incorrect markdown.

As you can see in the output, there are multiple line breaks both before and after the text 'Aliquam erat volutpat. In id malesuada augue. Pellentesque in ipsum id orci porta dapibus.' This is causing the markdown renderer to treat the content as a code block or a pre-formatted text block.

Upon debugging, I found that removing the <p> tags and leaving the content resolves the problem. This might be particularly relevant for others dealing with nested lists.

To fix it, you can use the following code:

$paragraphsRemoved = preg_replace('/<p[^>]*>|<\/p>/', '', $html);
$markdown = $converter->convert($paragraphsRemoved); 

How to reproduce

HTML:

<ol>
  <li dir="ltr">
    <p dir="ltr">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit,
      vulputate eu pharetra nec, mattis ac neque.
    </p>
  </li>
  <li dir="ltr">
    <p dir="ltr">
      Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet
      egestas eros.
      <img src="https://placehold.co/300x300" width="300" height="300" />
    </p>
  </li>
  <li dir="ltr">
    <p dir="ltr">
      In faucibus massa sed neque ultrices tempus. Mauris euismod facilisis
      iaculis.
      <img src="https://placehold.co/300x300" width="300" height="300" />
    </p>
  </li>
  <li dir="ltr">
    <p dir="ltr">
      Cras consectetur fermentum nibh nec blandit. Curabitur a turpis sit amet
      lacus bibendum posuere sed vitae augue.
    </p>

    <ol>
      <li dir="ltr">
        <p dir="ltr">
          Aliquam erat volutpat. In id malesuada augue. Pellentesque in ipsum id
          orci porta dapibus.
        </p>

        <ol>
          <li dir="ltr">
            <p dir="ltr">
              Nulla at risus vel ante lobortis ullamcorper eu vel purus. Donec
              venenatis ex eu ultricies bibendum.
            </p>
          </li>
        </ol>
      </li>
      <li dir="ltr">
        <p dir="ltr">
          Morbi maximus posuere placerat. Suspendisse potenti. Phasellus
          imperdiet convallis dui.
          <img src="https://placehold.co/300x300" width="300" height="300" />
        </p>
      </li>
    </ol>
  </li>
</ol>

Output:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.
2. Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros. ![](https://placehold.co/300x300)
3. In faucibus massa sed neque ultrices tempus. Mauris euismod facilisis iaculis. ![](https://placehold.co/300x300)
4. Cras consectetur fermentum nibh nec blandit. Curabitur a turpis sit amet lacus bibendum posuere sed vitae augue.

    1. Aliquam erat volutpat. In id malesuada augue. Pellentesque in ipsum id orci porta dapibus.

        1. Nulla at risus vel ante lobortis ullamcorper eu vel purus. Donec venenatis ex eu ultricies bibendum.
    2. Morbi maximus posuere placerat. Suspendisse potenti. Phasellus imperdiet convallis dui. ![](https://placehold.co/300x300)

Expected output:

1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

2.  Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros. ![](https://placehold.co/300x300)

3.  In faucibus massa sed neque ultrices tempus. Mauris euismod facilisis iaculis. ![](https://placehold.co/300x300)

4.  Cras consectetur fermentum nibh nec blandit. Curabitur a turpis sit amet lacus bibendum posuere sed vitae augue.

    1.  Aliquam erat volutpat. In id malesuada augue. Pellentesque in ipsum id orci porta dapibus.

        1.  Nulla at risus vel ante lobortis ullamcorper eu vel purus. Donec venenatis ex eu ultricies bibendum.

    2.  Morbi maximus posuere placerat. Suspendisse potenti. Phasellus imperdiet convallis dui. ![](https://placehold.co/300x300)