React-markdown: feature-request: Support passing hProperties to renderers

[bj00rn]

I was hoping to be able to use the remark-attr plugin in order to pass attributes from markdown.

remark-attr plugin supports declaring attributes on elements like so:

### This is a title
{id="maintitle" style="color:red;"}

These properties are parsed correctly by the plugin into node.data.hProperties However, properties are not passed on by react-markdown to the renderers.

ast-to-react.js

Passing on hProperties would be nice, but maybe it has some security implications.

[arobase-che]

About the security aspect. remark-attr handle a lot of that part. It uses a whitelist approach.

By default, only standard attributes not event based(onclick, on...) are allowed.

[mrm007]

In the meantime, if you like hacks (and who _doesn't_?) I have this workaround in my project:

• pass rawSourcePos={true} to ReactMarkdown
• create a map imageNodes to store references to your image nodes (see code below)
• pass a function to allowNodes that saves references to image nodes
• have a custom image renderer which looks up the corresponding node in imageNodes (the node contains data.hProperties)

function MyMarkdown(props) {
  const imageNodes = new Map();
  const nodeKey = position => JSON.stringify(position.start); // or use your own hash function

  function allowNodes(node) {
    if (node.type === "image") imageNodes.set(nodeKey(node.position), node);
    return true;
  }

  const renderers = {
    image: ({ sourcePosition, alt, src, title }) => {
      const node = imageNodes.get(nodeKey(sourcePosition));
      return (
        <img alt={alt} src={src} title={title} {...node.data.hProperties} />
      );
    }
  };

  return (
    <ReactMarkdown
      {...props}
      allowNodes={allowNodes}
      renderers={renderers}
      rawSourcePos
    />
  );
}

You don't need to clean up imageNodes because it will be recreated and disposed on every render.

[bostrom]

Yes, remark-attr support would be great!

[jacobwicks]

In the meantime, if you like hacks (and who _doesn't_?) I have this workaround in my project:
...

I used this code to resize images in a project I'm making. I did a short writeup of it on my blog here:

https://jacobwicks.github.io/2020/06/19/rendering-markdown-and-resizing-images-with-react-markdown.html

Thanks for the example!

[ChristianMurphy]

this will be resolved by #428 which leverages remark-rehype which handles hProperties