Unwrap figure elements

[aKaradzhov97]

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)

Problem

I have a NextJS app, which makes use of MDX.
The images rendered in that app are wrapped in figure element. By default, these elements are wrapped in a paragraph. Since, figure is closely related to img, I thought we could add support for figure elements also here, because this package solves the same issue.

When rendering figure elements in MDX, they're wrapped in a paragraph producing hydration errors (NextJS).

Solution

Simply unwrap also figure elements.

Alternatives

I cannot think of any.

[wooorm]

Please spend more time framing your question. It is unclear what you want. See https://github.com/remarkjs/.github/blob/main/support.md#asking-quality-questions

[aKaradzhov97]

Sorry, I've improved my explanation of the problem. Does that make sense?

[wooorm]

The images rendered in that app are wrapped in figure element.

How?

When rendering figure elements in MDX, they're wrapped in a paragraph producing hydration errors (NextJS).

Please share the MDX file you have and share the errors you see.
Share the actual input you have, and share what the expected output you’d like to get is.

[aKaradzhov97]

It's a custom implementation - I am passing a custom implementation of the img element, in which I wrap the img tag with a figure and add a figcaption. Here's what I do:

import Picture from "./components/Picture";

export const MDXComponentsMap = {
  img: Picture,
  ... // omitted for the sake of brevity
}

// "components/Picture"
const Picture = ({ src, alt = "", title, className }: Props): JSX.Element => (
  <StyledFigure className={className}>
    <img src={src} alt={alt} />
    {title && <figcaption>{title}</figcaption>}
  </StyledFigure>
);

Then in my MDX, I do something like this:

<img src"..." title="Caption" />

And the output is:

<p>
  <figure>
    <img src"..." />
    <figcaption>Caption</figcaption>
  </figure>
</p>

While the desired output should look like this:

<figure>
  <img src"..." />
  <figcaption>Caption</figcaption>
</figure>

Does that make sense?

[wooorm]

You don’t need anything. This plugin already does what you want.

This plugin works on the markdown/MDX AST.
Your component overwrite works much later, at the final React rendering.
So this plugin doesn’t works earlier. It is unrelated to your component.

[aKaradzhov97]

Actually, it works for me and my use case and I believe it will also work for others too.
I added the following in the node_modules folder:

else if (
  child.type === 'image' ||
  child.type === 'figure' || // This
  child.type === 'imageReference'
)

[remcohaszing]

There is no mdast node of type figure. You’re confusing mdast nodes with HTML or JSX elements.