remark-external-links plugin not working with <ReactMarkdown/>

[isaac-jordan]

remark-external-links plugin not working with <ReactMarkdown/>

I'm trying to use remark-external-links with react-markdown in order to add "noopener noreferrer" to my anchor tags. The problem is that ReactMarkdown appears to be ignoring the plugins. I'm trying to follow the examples from both repos as closely as I can.

It seems like the plugin is doing nothing, however please tell me if I'm doing something wrong. As it stands, I'm going to try and implement a custom renderer for links so I can add in these rel flags.

Your environment

• OS: macOS Catalina v10.15.7
• Packages: "react-markdown": "^5.0.3", "remark-external-links": "^8.0.0",
• Env: Node v12, browser is FireFox

Steps to reproduce

const ReactMarkdown = require("react-markdown");
const externalLinks = require('remark-external-links');

<ReactMarkdown
  source="[my test link](https://test.com)"
  plugins={[[externalLinks, {
    target: "_blank",
    rel: ["noopener", "noreferrer"]
  }]]}
/>

Expected behavior

<p><a href="https://test.com" target="_blank" rel="noopener noreferrer">my test link</a></p>

Actual behavior

<p><a href="https://test.com">my test link</a></p>

[ChristianMurphy]

This is because hProperties currently aren't supported, which is logged as #384, #427 aims to address this

[isaac-jordan]

For anyone coming to this looking for a (temporary) solution, I've added a custom renderer for adding in the required rel tags:

const customRenderers = {
  link: ({ href, children }) => (
    <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>
  ),
};

...

<ReactMarkdown
  source="[my test link](https://test.com)"
  renderers={customRenderers}
/>

This is fine for my use-case because all my links are external, but you could add in logic to change the target if the href domain was local to the current website (for example).

[ChristianMurphy]

closing as this is a duplicate of #384