Table align not working

[craftzdog]

React ignores align property since this property is obsolete in HTML5. align is not listed as supported attribute: https://facebook.github.io/react/docs/tags-and-attributes.html It should use CSS instead.

[wooorm]

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.

[craftzdog]

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

[craftzdog]

But adding classes requires CSS styling in every application.

[wooorm]

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.

[craftzdog]

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)

[wooorm]

@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?

[tmcw]

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.

[jmca]

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

[wooorm]

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?)

[craftzdog]

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!

[wooorm]

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

[craftzdog]

Excellent!