Images are wrapped in a p tag

[iremlopsum]

All of the images are wrapped in a p tag, which makes styling images hard. If I set a max-width of a paragraph 600px, but I want the image to be 700px and responsive at that, this becomes awful.

I have to custom render paragraphs, add a class to them, style them based on that. I feel like it would be easier not to wrap images in paragraphs.

Any reason why this is done like this?

[rexxars]

Only because the current parser emits a paragraph. In v3 you have the option to manipulate the AST before rendering, which should make unwrapping images pretty simple. I'll get back to you with an example once v3 is released.

[iremlopsum]

I found a work around. I'm just checking whether it contains an image and return only the image.

[kaifaust]

Can we get an example of how to do this in v3?

[mkum9469]

@rexxars How can we achieve this is v3? How can we make it not wrap the output in a paragraph? :)

[wallawe]

@iremlopsum mind providing an example of how you did this?

[iremlopsum]

@wallawe something like this should work.

renderParagraph(props) {
  const { children } = props;

  if (children && children[0]
    && children.length === 1
    && children[0].props
    && children[0].props.src) { // rendering media without p wrapper

    return children;
  }

  return <p>{children}</p>;
}
renderPost() {
  return (
    <ReactMarkdown
      source={source}
      renderers={{
        paragraph: this.renderParagraph,
      }}
    />
  );
}

[wallawe]

you're the man, thank you

[tairosonloa]

This syntax is not valid for current version (6.0.2). What should we do now?

Edit: Could achieve it using a plugin: https://www.npmjs.com/package/remark-unwrap-images