Lazy list/blockquote breaks container w/ `remark-gfm`

[blattersturm]

Subject of the issue

With the remark-gfm plugin enabled, in a list indented with 4 characters, a HTML tag with a 3-character indent will split up the list.

Your environment

Happens on astexplorer.net too.

Steps to reproduce

1.  Hello
2.  World
   <br>Manual break!
3.  Ouch.

Expected behavior

No paragraph is generated, the list is entirely complete (as happens with the GFM plugin disabled).

Actual behavior

The <br> and onwards signal the end of the list, and entry 3. will be a plain text in a paragraph.

(edited by wooorm to fix markdown)

[wooorm]

It doesn’t seem related to the tag:

1.  Hello
2.  World
   c
3.  Ouch.

Does the same

[wooorm]

thanks for reporting, @blattersturm. Might have to do with checkboxes because that’s a GFM feature relating to lists... 🤔 Or maybe it’s tables being annoying again

[blattersturm]

It appears to be tables, indeed.

[gilisho]

I have another example rather than #9, which might be related to this issue as well.

Take this markdown for instance:

> **Note:**
>
> Hello
text supposed to be on the component but isn't in remark-gfm
>
> oh no
>
> the end

Github renders this as:

Note:

Hello text supposed to be on the component but isn't in remark-gfm

oh no

the end

but the output in remark-gfm is:

https://codesandbox.io/s/react-markdown-forked-9q50f?file=/src/App.js

Anything we can do to help in order to get the fix as soon as possible? This is happening in a lot of markdowns since it relates to almost every component which is sort of "indented", so I think this should be in highest priority.

[wooorm]

Anything we can do to help in order to get the fix as soon as possible?

It is not currently my priority. It is incredibly complex. Standard markdown is line based, so micromark is line based and set up as streaming for its parsing. GFM breaks that, so it means flipping the architecture, loosing features

Anything we can do to help in order to get the fix as soon as possible? I think this should be in highest priority.

PR == welcome! So is sponsoring us.

[talentedandrew]

Is this issue fixed? I'm having the same issue with react-markdown@6.0.3 and react-gfm@1.0.0.

[wooorm]

Yes, see the commit that closes this. You are having problems because you’re on old packages. You should update.

[talentedandrew]

Yes, I did see the commit and it fixes the problem, but I have an old package. But I just can't update it since its a monorepo(both frontend and backend in the same repo) and a legacy project. Can you suggest any other alternative to fix this while using the react-markdown@6.0.3 and react-gfm@1.0.0 ?

[wooorm]

There is no alternative.

[paul-mcnamee]

There is no alternative.

I solved it with css:

  ol {
    list-style: none;
    counter-reset: orderedListCounter;
  }
  ol li {
    counter-increment: orderedListCounter;
  }
  ol li::before {
    content: counter(orderedListCounter) '. ';
    font-weight: bold;
  }

I was observing this issue with "react-markdown": "^8.0.7", "remark-gfm": "^3.0.1", not sure what was actually causing the issue but it was easier to just fix it with css for my small project.