Serialize markdown inside custom components

The children props inside custom components aren’t serialized. Let’s say that you have a Callout component like the following:

import { Box, HStack } from "@chakra-ui/react";
import React, { FC } from "react";

const Callout: FC = ({ children }) => {
  return (
    <Box p={4} rounded="sm" bg="gray.800" color="white">
      <HStack spacing={2}>
        <Box fontSize={48}>💡</Box>
        <Box>{children}</Box>
      </HStack>
    </Box>
  );
};

export default Callout;

We call it like this:

<Callout>
  Markdown oh **yeah**!! [Cool,
  right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
</Callout>

You will get something like this:

This issue extends this one.

[jescalan]

Afaik there is a stable release of mdx@2 coming soon, as soon as that is out we will put out a new release that supports it 😅

[mattboon]

You could try using this fork which upgrades MDX to v2 - discussion here, which seems to handle nested markdown better in my experience.

It might work if your MDX becomes as follows, with new lines to force inline MDX transclusion:

<Callout>

Markdown oh **yeah**!! [Cool,
right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
  
</Callout>

Further discussions: https://github.com/mdx-js/mdx/issues/628 https://github.com/mdx-js/mdx/issues/241