I there a way to make img tags render as top level elements

currently even if the markdown file has just an img, it will render as so: <p><img/></p>

Is there a way to make img’s top level block components?

so I would get from a markdown file with a couple of pargraph’s and an img in the middle the following html:

<p>some text/markdown</p>
<p>some text</p>
<img/>
<p>some text</p>

[sunknudsen]

The following hack works (inspired by @coreyward’s approach).

It removes nesting altogether when a p tag has an Image child.

p: {
  component: props => {
    for (let child of props.children) {
      console.log(child)
    }
    return props.children.some(
      (child: JSX.Element) => child.type && child.type === Image
    ) ? (
      <Fragment>{props.children}</Fragment>
    ) : (
      <p {...props} />
    )
  },
},

[coreyward]

I have a similar issue, only I’m using the overrides to replace the img prop with a React component (Gatsby Image) and that’s creating invalid markup (p > div). For now I’m sidestepping the issue with this approach/hack:

<MarkdownBlock
  overrides={{
    img: MyImageComponent
    p: props => {
      return props.children.some(child => typeof child === "string") ? (
        <p {...props} />
      ) : (
        <div {...props} />
      )
    },
  }}
>
  {content}
</MarkdownBlock>

Effectively I’m checking the type of the children (bad since React expects children to be treated as opaque) and if it’s not a string render a div element. This has been working for the project I need it on, but I suspect there are more than a few pitfalls I haven’t run into yet.

It would be great to get this as an option, or for the library to expose a function to an overridden element that would let it determine the type of the parent/ancestor.