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.

[cangSDARM]

If anyone is interested, or someone is having a similar problem, as a reference, I wrote a simple plugin to solve it.

https://github.com/cangSDARM/remark-drop-paragraph

You can find a sample in https://github.com/cangSDARM/blog (next14), especially lib/compile.ts and mdx/*

[wooorm]

please don’t do this in remark :'(

[cangSDARM]

please don’t do this in remark :'(

I think that remark deals with the whole syntax tree, while rehype deals with the attributes of a node. So I wrote it in remark 🤔

[wooorm]

it doesn’t :'(

You deal with html. <p>. <figure>. That has nothing to do with markdown (#, *, that kinda stuff). Use rehype.

[cangSDARM]

it doesn’t :'(

You deal with html. <p>. <figure>. That has nothing to do with markdown (#, *, that kinda stuff). Use rehype.

noted. I'll see if I can change it when I have time 👍🏻

[wooorm]

No worries, it’s common! Some more info here: https://github.com/remarkjs/remark-rehype#what-is-this!