Replacing html tags with components in 2.0.0-rc.1

[iAdramelk]

Update docs says this about the differences with the previous version:

We now “sandbox” components, for lack of a better name. It means that when you pass a component for h1, it does get used for # hi but not for <h1>hi</h1>

And running playground on:

# Header 1

<h1>Header 1</h1>

Also shows it:

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function MDXContent(props = {}) {
  const _components = Object.assign({
    h1: "h1"
  }, props.components), {wrapper: MDXLayout} = _components;
  const _content = _jsxs(_Fragment, {
    children: [_jsx(_components.h1, {
      children: "Header 1"
    }), "\n", _jsx("h1", {
      children: "Header 1"
    })]
  });
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _content
  })) : _content;
}
return {
  default: MDXContent
};

In the code above there are now way to replace second h1 with custom component as far as I can see it.

But there a lot of cases then default markdown syntax is not enough and you are forced to use html tags instead, on of the main examples are tables and multiline content.

You can render table in markdown with gfm and you can render list in markdown, but you can't render list inside table cell with it or multiple paragraphs. In the previous version html table and list will use the same components as markdown ones, but not in the current one.

Same with images. There are no way to add width and height to the image in markdown, but it can be done in html. In the last version I was replacing img with next/image to enable different kind of on the fly image optimizations and before it worked for both markdown and html images out of the box.

Is there a way to enable back old non-sandbox behavior or apply custom components to html tags as well?

[wooorm]

Many people found the old behavior unexpected: #821, hence this change.
Because there is an alternative: use Image:

import {compile} from '@mdx-js/mdx'

main()

async function main() {
  const doc = await compile('<Image />')
  console.log(String(doc));
}

You can now pass or provide or import Image:

/*@jsxRuntime automatic @jsxImportSource react*/
import {Fragment as _Fragment, jsx as _jsx} from "react/jsx-runtime";
function MDXContent(props = {}) {
  const _components = Object.assign({}, props.components), {Image, wrapper: MDXLayout} = _components;
  const _content = _jsx(_Fragment, {
    children: _jsx(Image, {})
  });
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _content
  })) : _content;
}
export default MDXContent;

[iAdramelk]

Can I sen you links to component in some private way? Do not want to link them here.

[wooorm]

Sure, my email and twitter are listed on my profile. It might help to see a lot of context, but perhaps sharing some examples, made a bit more private, could also work.

[iAdramelk]

Sent you a mail!

[iAdramelk]

Wrote a plugin to disable this behavior if someone like me will need it https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx

[wooorm]

thanks for making a plugin!

[iAdramelk]

Answering my own question here. This feature was removed from [email protected], because of #821

There are no official option in compiler to change this behavior, but it can be done using the plugins.

To revert this change you need to write a plugin that will remove node.data._mdxExplicitJsx (or in case of xmd, node.data._xdmExplicitJsx) flag from the jsx nodes used to render html elements.

If you don't want to write plugin yourself, you can use this one: https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx