Interesting, was it dropped recently or never supported?

I guess we best add classes in that case, right? align-left, align-center, align-right?
Inline styles seems like a bad idea.

I don't know when React started to ignore it.
Adding classes looks OK for me.

But adding classes requires CSS styling in every application.

I’d like to get someone else’s input on this as well, but I’m OK with requiring CSS: it’s better than inline styles at least.

found a way to avoid this issue using remarkReactComponents:

import React, { createElement } from 'react'
import remark from 'remark'
import remarkReact from 'remark-react'

function createTableCellComponent (tagName) {
  return class TableCell extends React.Component {
    render () {
      const style = { textAlign: this.props.align }
      const props = { ...this.props, style }
      return createElement(tagName, props, this.props.children)
    }
  }
}

const options = {
  remarkReactComponents: {
    td: createTableCellComponent('td'),
    th: createTableCellComponent('th')
  }
}
const processor = remark().use(remarkReact, options)

@tmcw Any thoughts on this?

• Should align be ignored in remark-react?
• Should it be passed through?
• Should we expose align as classes by default?

I lean toward inline styles here - if we required a stylesheet for remark-react's output to be viewed correctly, I doubt many would include it. And GFM supports table alignment, so it seems like a complete implementation should include it.

I am running up against this issue creating email templates using React. Unfortunately I need to use many align attributes for legacy reasons.

Hey folks! I try’d my hand at this after GH-32, by using style instead of align, but I forgot that the sanitation mechanism strips style tags away (as it’s not very safe to have style, just like classes, render by default).

I think it would be simplest to have a component handle this instead, something like remark-react-lowlight.

@noradaiko Would you be interested in creating something like that? (or maybe someone else?)

Do you mean that having a separate component from remark-react for it is good idea?
I don't like it because the table align support is standard in GFM.

I think it's better to have a default remarkReactComponents for the table elements.
It can be added here: https://github.com/mapbox/remark-react/blob/master/index.js#L36

Thanks!

@noradaiko I think you’re right! I just pushed to GH-32 to use remarkReactComponents, and fix this!

Excellent!