balena-io-modules / rendition

A library of React UI components
https://balena-io-modules.github.io/rendition
Apache License 2.0
214 stars 27 forks source link

Need to be able to pass onClick events down to images within the `Markdown` component #1126

Open ljewalsh opened 4 years ago

ljewalsh commented 4 years ago

Is your feature request related to a problem? Please describe. In Jellyfish there are two types of images that can be added to threads -- images that are attached via the attachment button, and images that are added via markdown.

In both cases, we are constraining the size of these images so that they don't take up too much size in the thread.

With attachmed images, we have added an onClick event so that the user can open the fullsize version of the image in the browser. Currently, we are unable to add this same behaviour to the images in the markdown

Describe the solution you'd like Similar to the sanitizerOptions it would be great to be able to pass down a prop to the Markdown component that would set props on certain parts of the rendered JSX (e.g. on the img tag)

Describe alternatives you've considered We could turn off the onClick feature for images and assume that people are knowledgeable enough to right click -> view image themselves

Additional context Related PR in Jellyfish: https://github.com/product-os/jellyfish/pull/4089

Before submitting this issue, please check that this issue is not a duplicate. If there is another issue describing the same problem or feature please add your information to the existing issue's comments.

grahammcculloch commented 4 years ago

@ljewalsh I think you might be able to do this already using transformTags in the sanitizerOptions prop of the Markdown component. See documentation.