fix "th" and "td" type definitions based off native elements

[lucasassisrosa]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)
• If applicable, I’ve added docs and tests

Description of changes

Addresses #713 . Specify "th" and "td" props based off html elements. ast-to-react.d.ts will look like:

export type TableDataCellProps = ComponentPropsWithoutRef<'td'> &
  ReactMarkdownProps & {
    style?: Record<string, unknown>
    isHeader: false
  }
export type TableHeaderCellProps = ComponentPropsWithoutRef<'th'> &
  ReactMarkdownProps & {
    style?: Record<string, unknown>
    isHeader: true
  }
(...)

export type TableDataCellComponent = ComponentType<TableDataCellProps>
export type TableHeaderCellComponent = ComponentType<TableHeaderCellProps>
(...)

export type SpecialComponents = {
  (...)
  td: TableDataCellComponent | ReactMarkdownNames
  th: TableHeaderCellComponent | ReactMarkdownNames
}

[ChristianMurphy]

Thanks @lucasassisrosa!
A few things:

1. it would be good to get Missing props in "table" type definitions #713 (comment) answered/resolved before moving forward
2. It would be good to add a test case covering this case

[wooorm]

As it’s a clear typo in the types (td or th should be used instead of table), I think it’s fine to solve it. A test case improvement for

react-markdown/test/test.jsx

Lines 597 to 618 in 9b20440

	test('should pass `isHeader: true` to `th`s, `isHeader: false` to `td`s', () => {
	const input = '| a |\n| - |\n| b |\n| c |'
	const actual = asHtml(
	<Markdown
	children={input}
	remarkPlugins={[gfm]}
	components={{
	th({node, isHeader, ...props}) {
	assert.equal(isHeader, true)
	return React.createElement('th', props)
	},
	td({node, isHeader, ...props}) {
	assert.equal(isHeader, false)
	return React.createElement('td', props)
	}
	}}
	/>
	)
	const expected =
	'<table><thead><tr><th>a</th></tr></thead><tbody><tr><td>b</td></tr><tr><td>c</td></tr></tbody></table>'
	assert.equal(actual, expected)
	})

would be useful though.

[wooorm]

Released in 8.0.4!