mdast-util-to-hast Options passThrough example

[jnorvell]

I'm fairly new to mdast-util-to-hast and am hoping someone could provide a simple example of how to pass the passThrough attribute in the Options. I'm wanting to passThrough Image (img) tags especially the src attribute's values.

[ChristianMurphy]

@jnorvell could you share an example of what you mean?
In terms of input markdown and output HTML?

[jnorvell]

For me, the unified pipeline is buried under third-party libraries. I don't have direct access to it. Here is basically what is going on:

my code -> react-markdown -> unified
                           remark-parse
                           (remark plugins)
                           remark-rehype  -> hast, mdast
                           (rehype-plugins)
                           rehype-react -> hast-util-to-jsx-runtime

[ChristianMurphy]

Thanks for the context, react-markdown has a URL sanitizer.
Encoded images are considered unsafe (they are), but if you are confident the only ones coming through are ones you encoded, you can allow them through.
See remarkjs/react-markdown#774 (comment)

[jnorvell]

@ChristianMurphy thank you for the pointer. The urlTransform() does not seem to be getting called for me. Am I passing it correctly?

               <Markdown
                  options={{
                     urlTransform: (url, key, node) => {
                        console.log(
                           `DEBUG: urlTransform: url=${url.substring(
                              0,
                              Math.min(50,url.length)
                           )}, key=${key}, node=`,
                           node
                        );
                        return url;
                     },
                  }}
                  remarkPlugins={[
                        blah, blah
                  ]}
                  rehypePlugins={[
                        blah, blah
                  ]}
               >
                  {article.markdown}
               </Markdown>

[ChristianMurphy]

The url transform is a top level property.
The tests give an example
https://github.com/remarkjs/react-markdown/blob/515bf190a06e2510aa4d09d4c186cfa558b75452/test.jsx#L366-L381

[jnorvell]

Thank you, this did indeed seem to help. If you would like to post the answer on my stackoverflow post (listed above), I will mark that as the accepted answer as well.

[wooorm]

It sounds like you are looking for how to do HTML in markdown.

That is not what passThrough does.

But there is a lot in the readme that talks about HTML in markdown. Such as, the examples: https://github.com/syntax-tree/mdast-util-to-hast#examples

[jnorvell]

Here is my stackoverflow post seeking help on this issue, which explains in more detail what I am trying to do and what isn't working.

https://stackoverflow.com/questions/79115885/how-to-prevent-base64-inline-images-from-being-removed-when-using-remark-rehype

I am indirectly using the rehype library to convert markdown to HTML, and one of the byproducts of that library is blanking out base64 data that could be set in the <img src="..." > tag. I have read in various places that rehype-raw library allows for that behavior to be disabled, by it utilizing the passThrough option of mdast-util-to-hast. But I cannot find any documentation or examples anywhere of what using the passThrough option could look like.