Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected line breaks with nested lists #241

Open
eddivalen opened this issue Oct 12, 2023 · 0 comments
Open

Unexpected line breaks with nested lists #241

eddivalen opened this issue Oct 12, 2023 · 0 comments

Comments

@eddivalen
Copy link

eddivalen commented Oct 12, 2023

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant