React-markdown: Support for declaring size on images

[LinusU]

It would be great if we could get support for the syntax for sizing images that some^(ref) markdown renderers support.

![Thumbnail image](foobar.png =50x50)

When there is a space in the url the current parser doesn't seem to treat it as an image at all, so it's not possible to add this via a custom image renderer.

I've used the following (super ugly 😂) workaround for now, but would be great if it was supported out of the box ☺️

import ReactMarkdown from 'react-markdown'

const imageSizeRegex = /_33B2BF251EFD_([0-9]+x|x[0-9]+|[0-9]+x[0-9]+)$/
const imagePreprocessor = (source) => source.replace(/(!\[[^\]]*\]\([^)\s]+) =([0-9]+x|x[0-9]+|[0-9]+x[0-9]+)\)/g, '$1_33B2BF251EFD_$2)')

function imageRenderer ({ src, ...props }) {
  const match = imageSizeRegex.exec(src)

  if (!match) {
    return <img src={src} {...props} />
  }

  const [width, height] = match[1].split('x').map(s => s === '' ? undefined : Number(s))
  return <img src={src.replace(imageSizeRegex, '')} width={width} height={height} {...props} />
}

/**
 * @param {ReactMarkdown.ReactMarkdownProps} props
 */
const Markdown = ({ source, ...props }) => {
  /** @type {ReactMarkdown.ReactMarkdownProps['renderers']} */
  const renderers = {}

  source = imagePreprocessor(source)
  renderers['image'] = imageRenderer

  return <ReactMarkdown source={source} renderers={renderers} {...props} />
}

export default Markdown

[krymen]

👍 Would love to have it too!

[bj00rn]

https://github.com/rexxars/react-markdown/issues/384

[ChristianMurphy]

This is not a feature of CommonMark, and so would not be added to core.
However it could be added through a remark plugin.
You can find more information on creating plugins at https://unifiedjs.com/learn/