search

d4rekanguok / gatsby-remark-images-anywhere

Handle images with relative, absolute & remote path for gatsby-transformer-remark & gatsby-plugin-mdx
MIT License
22 stars 8 forks source link

Execute on nested image nodes (for use of <img> inside container <div>) #8

Open fartinmartin opened 5 years ago

fartinmartin commented 5 years ago

Say I want to create a gallery of images in my markdown body. I might nest some <img>s inside of a <div> or gatsby-transform-remark custom component (as in this codesandbox). Doing so will exclude my images from being processed by gatsby-remark-images-anywhere. Is it possible to for this plugin to access those <img> nodes and process them?

d4rekanguok commented 5 years ago

Ah yeah, this plugin is currently expecting only one image per node. It should be able to handle multiple image nodes!

The culprit is again this line, since I used Array.prototype.find, it only search for the first image node in the direct children.

It'll need to be rewritten so that it can search deeper & also return an array of results. This means these lines needs to be able to flatten array as well, probably with flatMap or something like that.

I'll take a stab at it when I have a bit more time later this month, but as always if you'd like to explore a PR I'm hugely appreciate it!!