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

[JonathanScialpi]

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

This worked for me:

const 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>;
}

... ... ...

<ReactMarkdown
            components={{
              p: renderParagraph
            }}
            children={markdown}
          />

[Schachte]

  p: ({ node, children }) => {
    if (node.children[0].tagName === "img") {
      const image = node.children[0].properties.src;
      return (
        <div
          style={{
            width: "100%",
            maxWidth: "100vw",
            position: "relative"
          }}
        >
          <Image alt={'grafana and prometheus'} src={`${image}`} width={600} height={300} />
        </div>
      );
    }
    // return a standard paragraph in all other cases
    else return <p>{children}</p>;
  },