Don't replace literal HTML elements with MDXProvider

Right now when you provide a component mapping to an MDXProvider, every matching markdown element is replaced, even if those elements are authored in HTML instead of markdown.

For example, given this configuration:

// App.js
import { MDXProvider } from '@mdx-js/react'

const components = {
  h2: () => (<span>Boo!</span>),
}

export default props =>
  <MDXProvider components={components}>
    <div {...props} />
  </MDXProvider>

…the following MDX:

// Page.mdx
# My Page

## Should become "Boo!"

<h2>But please leave this one alone</h2>

…is rendered as:

<h1>My Page</h1>

<span>Boo!</span>

<span>Boo!</span>

This can be very surprising and challenging to work with when you are embedding components in your MDX that receive children:

// Page.mdx
import MyComponent from '../components/MyComponent'

# My Page

## Should become "Boo!"

<MyComponent>
  <h2>Please leave this alone!</h2>
</MyComponent>

I would love a way to be able to tell MDX “please only transform markdown tags, not literal HTML tags” so that literal HTML can be used as an escape hatch.

Hope this makes sense, and thanks for the awesome work on MDX!

[johno]

Going to close this now since it’s implemented in the canary release of v2. You can take it for a spin with yarn add @mdx-js/mdx@next @mdx-js/react@next.

And then use it like so:

<MDXProvider disableParentContext={true}>
  {/* All MDX contained within will render as literal HTML elements */}
</MDXProvider>

Additionally, you can create a component if you wanted to “sandbox” elements:

export const MDXSandbox = props => <MDXProvider {...props} disableParentContext={true} />

# I'm using the `h1` from MDXProvider!

<MDXSandbox>
  <h1>I'm a literal h1!</h1>
</MDXSanbox>

Thanks for the input all!

[adamwathan]

Hey thanks for following up on this with me! The specific use case was writing documentation with inline code samples (specifically I was working on a redesign of the Tailwind CSS docs), and I wanted to bake styles into my headings, paragraphs, etc., but didn’t want those styles leaking into the examples:

// App.js
import { MDXProvider } from '@mdx-js/react'

const components = {
  h2: ({ children }) => (<h2 class="text-2xl font-bold mt-6 mb-4">{children}</h2),
  // ...
}

export default props =>
  <MDXProvider components={components}>
    <div {...props} />
  </MDXProvider>

// Page.mdx
# My Page

## Some documentation title

A paragraph explaining something.

<div>
  <h2>An embedded example that I don't want to have my markdown h2 styles.</h2>
</div>

Think stuff like this screenshot, where there I don’t want my markdown styles interfering with my demo styles:

Historically I have solved this with a bunch of convoluted CSS that uses direct descendant selectors and stuff to make sure the markdown styles never leak down into the examples, but was excited about being able to ditch that with MDX.