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

Lazy list/blockquote breaks container w/ remark-gfm #3

Closed
blattersturm opened this issue Dec 5, 2020 · 10 comments
Closed

Lazy list/blockquote breaks container w/ remark-gfm #3

blattersturm opened this issue Dec 5, 2020 · 10 comments
Labels
👀 no/external This makes more sense somewhere else

Comments

@blattersturm
Copy link

blattersturm commented Dec 5, 2020

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)

@blattersturm blattersturm added 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Dec 5, 2020
@blattersturm blattersturm changed the title Inconsistently indented break split up lists with GFM plugin on Inconsistently indented break splits up lists with GFM plugin on Dec 5, 2020
@blattersturm blattersturm changed the title Inconsistently indented break splits up lists with GFM plugin on Inconsistently indented break splits lists with GFM plugin on Dec 5, 2020
@wooorm
Copy link
Member

wooorm commented Dec 5, 2020

It doesn’t seem related to the tag:

1.  Hello
2.  World
   c
3.  Ouch.

Does the same

@wooorm
Copy link
Member

wooorm commented Dec 5, 2020

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
Copy link
Author

It appears to be tables, indeed.

@gilisho
Copy link

gilisho commented Mar 2, 2021

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:
image

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
Copy link
Member

wooorm commented Mar 3, 2021

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.

@wooorm wooorm changed the title Inconsistently indented break splits lists with GFM plugin on Lazy list/blockquote breaks container w/ remark-gfm May 18, 2021
@wooorm wooorm added 🐛 type/bug This is a problem 👀 no/external This makes more sense somewhere else 🙆 yes/confirmed This is confirmed and ready to be worked on and removed 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels May 18, 2021
@wooorm wooorm removed 🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on labels Jun 16, 2021
@talentedandrew
Copy link

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

@wooorm
Copy link
Member

wooorm commented Mar 22, 2022

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

@talentedandrew
Copy link

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
Copy link
Member

wooorm commented Mar 23, 2022

There is no alternative.

@paul-mcnamee
Copy link

paul-mcnamee commented May 31, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👀 no/external This makes more sense somewhere else
Development

No branches or pull requests

5 participants