react-markdown-loader icon indicating copy to clipboard operation
react-markdown-loader copied to clipboard

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

Open darrencruse opened this issue 8 years ago • 2 comments

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?

darrencruse avatar Mar 09 '17 01:03 darrencruse

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!

javiercf avatar Mar 09 '17 05:03 javiercf

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)

darrencruse avatar Mar 09 '17 18:03 darrencruse