MDX renderer fails to apply custom delete (del) component

Custom delete component fails to render

First ran into this over in system-ui/theme-ui#401 where applying a custom delete component failed to render when passed into MDXRenderer’s component prop. MDX rendered a del, but not the custom one.

I’ve tried tracking down exactly where the issue happens, but only managed to get a few failing tests going in mdx-js and mdx-js/react.

Steps to reproduce / Expected / Etc

Here’s a commit with the two failing tests, or see the input/output below.

For mdx core:

const components = {
  delete: ({children}) =>
    React.createElement('del', {style: {color: 'crimson'}}, children)
}
it('renders delete component from context', async () => {
  const result = await renderWithReact(`Hello, ~~world~~ MDX!`, {components})

  expect(result).toContain(
    '<p>Hello, <del style="color:crimson">world</del> MDX!</p>'
  )
})

Expected substring: "<p>Hello, <del style=\"color:crimson\">world</del> MDX!</p>
"
    Received string:    "<p>Hello, <del>world</del> MDX!</p>"

Similar deal with @mdx-js/react:

const CustomDelete = props => <del style={{color: 'crimson'}} {...props} />

it('Should render delete as del', () => {
  const result = renderToString(
    <MDXProvider components={{delete: CustomDelete}}>
      <Fixture />
    </MDXProvider>
  )

  // CustomDelete is rendered
  expect(result).toMatch(/style="color:crimson"/)
})

Expected pattern: /style="color:crimson"/
    Received string:  "<h1></h1><h2></h2><p>h3, h4</p>"

I suspect it’s further up the chain somewhere, so maybe someone with better knowledge of the ecosystem can hunt it down or point me in the right direction. Thanks!

[johno]

Thanks for reporting! This definitely looks like a bug. Do you mind opening up a PR with your failing tests @markmichon? That way we could use that as a starting point to get a fix in.

[wooorm]

There’s a new release candidate out for v2. See more on the website for that: https://v2.mdxjs.com. One feature that it includes is a one-to-one mapping of HTML tag names to components. That means del is now supported. More info on the Table of components: https://v2.mdxjs.com/table-of-components/.