search

oorestisime / gatsby-remark-rehype-images

Augments markdown images with gatsby-image
https://gatsby-remark-rehype-images.netlify.com/
3 stars 2 forks source link

<rehype-image src="someimage.jpg"></rehype-image> does render <div> inside <p> tag #3

Open JochenHiller opened 5 years ago

JochenHiller commented 5 years ago

I am using <rehype-image> and saw in Chrome Browser console this warning:

index.js:2177 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by Image)
    in div (created by Image)
    in Image (at tools.js:60)
    in Photo (at tools.js:75)
    in rehypeImage (created by BlogPost)
    in p (created by BlogPost)
    in div (created by BlogPost)
    in article (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (created by Context.Consumer)
    in WithTheme(Box) (at post.jsx:63)

When I change it to <rehype-image src="someimage.jpg" /> (no child element) it does NOT add a <p> around the <div>section.

Can this somehow be avoided? I checked the code but do not have any idea how to change that.

I used that to add a caption to the image (e.g. <rehype-image src="someimage.jpg">Here is my caption text</rehype-image>). Any other proposal how to to that?

(e.g. see https://github.com/JochenHiller/jochenontour/blame/master/src/md/mongolia2020/2019-08-04-decision/index.md#L78)

oorestisime commented 5 years ago

hm i am not sure how to fix this properly. its basically unrelated to the plugin and has something to do with this https://github.com/JochenHiller/jochenontour/blob/master/src/tools.js#L53

not sure why there is a

tag around it though :/ i ll try and investigate a bit more but maybe you can tell gatsby image not to render a div

JochenHiller commented 5 years ago

Thanks for the hints. I try to understand better. There is the Tag property where the rendering tag can be defined. I will search around that a bit.