Missing props in "table" type definitions

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

Affected packages and versions

8.0.3

Link to runnable example

No response

Steps to reproduce

Check https://github.com/remarkjs/react-markdown/blob/main/lib/ast-to-react.js#L61 and try to match a td or th component with ThHTMLAttributes or TdHTMLAttributes from react

Expected behavior

as-to-react.js should have

 * @typedef {ComponentPropsWithoutRef<'th'> & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: true}} TableHeaderCellProps
 * @typedef {ComponentPropsWithoutRef<'td'> & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: false}} TableDataCellProps

 * @typedef {ComponentType<TableHeaderCellProps>} TableHeaderCellComponent
 * @typedef {ComponentType<TableDataCellProps>} TableDataCellProps

 * @property {TableHeaderCellComponent|ReactMarkdownNames} th
 * @property {TableDataCellComponent|ReactMarkdownNames} td

Actual behavior

as-to-react.js has

 * @typedef {ComponentPropsWithoutRef<'table'> & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: boolean}} TableCellProps

 * @typedef {ComponentType<TableCellProps>} TableCellComponent

 * @property {TableCellComponent|ReactMarkdownNames} td
 * @property {TableCellComponent|ReactMarkdownNames} th

Runtime

Node v16

Package manager

yarn 1

OS

macOS

Build and bundle tools

Next.js

[ChristianMurphy]

This may be a good add, but it's hard to tell because it is currently framed as an XY Problem.
What is the actual issue you are running into? Could you share an example?

[lucasassisrosa]

This may be a good add, but it's hard to tell because it is currently framed as an XY Problem. What is the actual issue you are running into? Could you share an example?

Yes I can share. I have custom TableHeaderCell and TableDataCell elements that look like this:

export type TableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;
const HeaderCell = ({ children, ...props }: TableHeaderCellProps) => {
  return (
    <th {...props}>
      {children}
    </th>
  );
};

export type TableDataCellProps = TdHTMLAttributes<HTMLTableCellElement>;
const DataCell = ({ children, ...props }: TableDataCellProps) => {
  return (
    <td {...props}>
      {children}
    </td>
  );
};

When I add custom components to <ReactMarkdown />:

import ReactMarkdown from 'react-markdown';
import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';

type Components = ReactMarkdownOptions['components'];

const Markdown = ({ children }) => {
  const initialComponents: Components = {
    th: Table.HeaderCell,
    td: Table.DataCell,
  };
  
  return (
    <ReactMarkdown
      components={{ ...initialComponents, ...components }}
    >
      {children}
    </ReactMarkdown>
  );
};

I receive the following type error:

      Type 'TableCellProps' is not assignable to type 'TableHeaderCellProps'.
        Types of property 'onCopy' are incompatible.
          Type 'ClipboardEventHandler<HTMLTableElement> | undefined' is not assignable to type 'ClipboardEventHandler<HTMLTableCellElement> | undefined'.
            Type 'ClipboardEventHandler<HTMLTableElement>' is not assignable to type 'ClipboardEventHandler<HTMLTableCellElement>'.
              Type 'HTMLTableElement' is missing the following properties from type 'HTMLTableCellElement': abbr, axis, cellIndex, ch, and 8 more.ts(2322)

[ChristianMurphy]

Thanks!

I'm not quite following where ThHTMLAttributes and TdHTMLAttributes are coming from.

Reading between the lines a bit, it sounds like you want to reflect react's html element props exactly for the prop type?
Something like:

import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import Markdown from "react-markdown";

const markdownSource = `
# heading

* list
* items

\`\`\`js
function () {}
\`\`\`
`;

const HeaderCell = ({
  children,
  ...props
}: DetailedHTMLProps<
  HTMLAttributes<HTMLTableHeaderCellElement>,
  HTMLTableHeaderCellElement
>) => {
  return <th {...props}>{children}</th>;
};

const DataCell = ({
  children,
  ...props
}: DetailedHTMLProps<
  HTMLAttributes<HTMLTableDataCellElement>,
  HTMLTableDataCellElement
>) => {
  return <td {...props}>{children}</td>;
};

const App = () => (
  <Markdown components={{ th: HeaderCell, td: DataCell }}>
    {markdownSource}
  </Markdown>
);

export default App;

runnable example in a sandbox: https://codesandbox.io/s/trusting-hamilton-wnnqfh?file=/src/app.tsx

Is that accurate to your end goal?

[lucasassisrosa]

Thanks!

I'm not quite following where ThHTMLAttributes and TdHTMLAttributes are coming from.

Reading between the lines a bit, it sounds like you want to reflect react's html element props exactly for the prop type? Something like:

import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import Markdown from "react-markdown";

const markdownSource = `
# heading

* list
* items

\`\`\`js
function () {}
\`\`\`
`;

const HeaderCell = ({
  children,
  ...props
}: DetailedHTMLProps<
  HTMLAttributes<HTMLTableHeaderCellElement>,
  HTMLTableHeaderCellElement
>) => {
  return <th {...props}>{children}</th>;
};

const DataCell = ({
  children,
  ...props
}: DetailedHTMLProps<
  HTMLAttributes<HTMLTableDataCellElement>,
  HTMLTableDataCellElement
>) => {
  return <td {...props}>{children}</td>;
};

const App = () => (
  <Markdown components={{ th: HeaderCell, td: DataCell }}>
    {markdownSource}
  </Markdown>
);

export default App;

runnable example in a sandbox: https://codesandbox.io/s/trusting-hamilton-wnnqfh?file=/src/app.tsx

Is that accurate to your end goal?

Yes exactly. ThHTMLAttributes and TdHTMLAttributes come from react