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

react-markdown crushes if <li > element has spaces before it #535

Closed
gilisho opened this issue Jan 21, 2021 · 4 comments
Closed

react-markdown crushes if <li > element has spaces before it #535

gilisho opened this issue Jan 21, 2021 · 4 comments
Labels

Comments

@gilisho
Copy link
Contributor

gilisho commented Jan 21, 2021

Subject of the issue

Issues with <li > element with a space at the beginning.
This is the problematic snippet:

  <li>hey
  
  </li>

Your environment

  • Packages: react-markdown version 5 is affected. See in the live demo as well.

Steps to reproduce

remark: https://astexplorer.net/#/gist/19a843b97e350aaa80733876c81c1bed/60c88087318ea19410d99d798883b24a7733c520
react-markdown: https://codesandbox.io/s/react-markdown-debug-forked-o5rjw?file=/src/App.js

Expected behavior

What should happen?
This text:

  <li>hey
  
  </li>

Should be rendered like in Github:

  • hey
  • Actual behavior

    App crushes when putting this text in react-markdown, as can be seen from the link.
    Even when adding the gfm plugin, it does not parse like Github:
    https://codesandbox.io/s/react-markdown-debug-forked-o5rjw?file=/src/App.js

    @ChristianMurphy
    Copy link
    Member

    remark appears to be parsing as expected in https://astexplorer.net/#/gist/19a843b97e350aaa80733876c81c1bed/60c88087318ea19410d99d798883b24a7733c520
    moving this to react-markdown.
    In addition the issue appears to be a duplicate of #385 and #302

    @ChristianMurphy ChristianMurphy transferred this issue from remarkjs/remark Jan 21, 2021
    @ChristianMurphy
    Copy link
    Member

    This should be resolved by #427, in the meantime this is rendered as expected by react-remark https://github.com/remarkjs/react-remark (live demo: https://remarkjs.github.io/react-remark/?path=/story/remark-component--mixed-html-sanitized) which could be used as an alternative.
    Closing as a duplicate, to follow along with progress, watch issues #385 and #302.

    @gilisho
    Copy link
    Contributor Author

    gilisho commented Jan 21, 2021

    Are you sure this is expected?
    image

    From the image above I thought remark parses it as two elements, which I think is an incorrect parsing.
    and thanks!

    @ChristianMurphy
    Copy link
    Member

    ChristianMurphy commented Jan 21, 2021

    yes it is correct, from the CommonMark reference implementation https://spec.commonmark.org/dingus/?text=%20%20%3Cli%3Ehey%0A%20%20%0A%20%20%3C%2Fli%3E%0A

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE document SYSTEM "CommonMark.dtd">
    <document xmlns="http://commonmark.org/xml/1.0">
      <html_block>  &lt;li&gt;hey</html_block>
      <html_block>  &lt;/li&gt;</html_block>
    </document>

    there are two HTML blocks, which matches the described spec as well https://spec.commonmark.org/0.29/#html-blocks

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    Development

    No branches or pull requests

    2 participants