search

javiercf / react-markdown-loader

This loader parses markdown files and converts them to a React Stateless Component. It will also parse FrontMatter to import dependencies and render components along with it’s source code. We developed this loader in order to make the process of creating styleguides for React components easier
145 stars 33 forks source link

invalid jsx generated when using tables with left/right/center alignments #19

Open darrencruse opened 7 years ago

darrencruse commented 7 years ago

Hi we have run into an error when using tables in markdown with alignments controlled using the colon syntax e.g.

|     Dropdown Selections    |                          Expanded versions                          |
|:--------------------------:|:-------------------------------------------------------------------:|
|   Automated Variable Rate  |     Automated Variable Rate Irrigation Management Control System    |

In this case the markup generated for the table within the output JSX is like so:

<table>
    <thead>
        <tr>
            <th style="text-align:center">Dropdown Selections</th>
            <th style="text-align:center">Expanded versions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center">Automated Variable Rate</td>
            <td style="text-align:center">Automated Variable Rate Irrigation Management Control System</td>
        </tr>
    </tbody>
</table>

And though this would be fine if it were truly html JSX has the requirement that "style" take a bracketed javascript object for the style settings not a simple string. Because of that we're getting this error:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by StatelessComponent. at invariant (bundle.js:14373) at assertValidProps (bundle.js:158995) at ReactDOMComponent.mountComponent (bundle.js:159290) at Object.mountComponent (bundle.js:27293) at ReactDOMComponent.mountChildren (bundle.js:162536) at ReactDOMComponent._createInitialChildren (bundle.js:159541) at ReactDOMComponent.mountComponent (bundle.js:159360) at Object.mountComponent (bundle.js:27293) at ReactDOMComponent.mountChildren (bundle.js:162536) at ReactDOMComponent._createInitialChildren (bundle.js:159541)

Do you think I'm seeing this right? Am I right it seems like a bug with react-markdown-loader?

javiercf commented 7 years ago

Hi Darren, thanks for reporting this, yeah it actually looks like we ignored parsing style attributes and converting them to valid jsx, I'll update the module sometime this week as soon as I get some time off from work, if by any chance you guys want to give it a go, it's the function parseCodeBlock located in the parser.js file, thanks for using the module, glad it's helping you guys out!

darrencruse commented 7 years ago

thanks fwiw once I understood the problem I decided - heck with the alignment stuff!!

(so actually atm I'm fine just because the table markup I'm generating now without the alignment stuff doesn't have the style="..." part)