Invalid DOM property colspan. Did you mean colSpan

[lemcii]

What happened?

When using {% colspan=2 %} or {% rowspan=2 %} this warning or equivalent is logged serverside.

To reproduce

{% table %}

- 1
- 2
- 3

---

- 1
- 2 & 3 {% colspan=2 %}

---

- 1
- 2 & 3 {% colspan=2 %}

{% /table %}

Version

0.2.1

Additional context

@markdoc/next.js

[adreyfus-stripe]

@lemcii Thanks for filing, your bug report makes sense. React expects DOM attributes to be camelCase rather than lowercase so that warning is coming from React. Let me circle back with the team and see how we want to fix this in our react renderer meanwhile should be safe to ignore for now since React will safely pass colspan through to the DOM: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

[rpaul-stripe]

These attributes are defined in Markdoc's built-in schema for the td node type. It's possible to override what the render tree outputs for those attributes by adding a render property to the schema definition:

attributes: {
    colspan: { type: Number, render: 'colSpan' },
    rowspan: { type: Number, render: 'rowSpan' }
}

It's a bit of a tricky situation because we really only want them to have this camel casing for the React renderer, it's not applicable to the HTML renderer. There are a few different ways we could approach it, but maybe what we want to do is apply the casing in the built-in schema definition and then have the HTML renderer just call toLowerCase on its attribute values so that the HTML output is still conforming with standards. I will collect some feedback from the team and then move forward with that change if there's consensus.