rehype-attr plugin not working

[eoinmurphy]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

8.0.7

Link to runnable example

https://codesandbox.io/p/sandbox/bold-water-s8v68v?file=%2Fsrc%2FApp.js%3A14%2C1

Steps to reproduce

(This example is based on the rehype-attr examples)

Attempt to render the below Markdown string using react-markdown with the rehype-attr plugin:

import ReactMarkdown from "react-markdown";
import rehypeAttrs from "rehype-attr";

// Example: https://github.com/jaywcjlove/rehype-attr#markdown-example-3
const markdown = `Npm stands for *node* <!--rehype:style=color: red--> package manager.`;

export default function App() {
  return (
    <ReactMarkdown rehypePlugins={[rehypeAttrs, { properties: "attr" }]}>
      {markdown}
    </ReactMarkdown>
  );
}

Runtime: Node 18.12.0

I did search for past issues related to this, but couldn't find any.

Expected behavior

I expect the HTML output of this parsed Markdown to be

<p>Npm stands for <em style="color: red">node</em><!--rehype:style=color: red--> package manager.</p>

Actual behavior

The following is rendered in the body:

Npm stands for node <!--rehype:style=color: red--> package manager.

Looking at the outputted HTML:

<p>Npm stands for node 
    <!-- -->
    <!--rehype:style=color: red--&>
    <!-- --> 
    package manager.
</p>

It seems like it's trying to take the HTML comment into account, but renders two empty comments within the <p> tag instead.

Note: I'm getting the Markdown from Strapi and then passing the body of that API response into react-markdown. I've inspected the values received from the API in the console and all looks to be as expected:

{
  id: 7,
  attributes: {
    title: 'Rehype Test',
    date: '2023-07-31',
    body: 'Npm stands for *node* <!--rehype:style=color: red--> package manager.',
    slug: 'rehype-test',
    createdAt: '2023-07-31T14:17:25.804Z',
    updatedAt: '2023-07-31T14:49:18.733Z',
    publishedAt: '2023-07-31T14:17:27.021Z',
    author: 'Eoin Murphy',
}

Runtime

No response

Package manager

yarn 1

OS

macOS

Build and bundle tools

Next.js

[ChristianMurphy]

Welcome @eoinmurphy! 👋
rehype-attr relies on HTML embedded in markdown which you have disabled in your example.

To enable HTML see https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown
If you choose to do so, also see security considerations for embedding HTML https://github.com/remarkjs/react-markdown#security

[eoinmurphy]

Thanks for the quick response, @ChristianMurphy! I've just added rehype-raw, but the attribute I expect is still not being added to the rendered output. 🤔

Here's what's in my Markdown editor in Strapi:

1.
Npm stands for *node* <!--rehype:style=color: red--> package manager.

2.
Npm stands for <em class="test">node</em> package manager.

3.
Npm stands for *node*<!--rehype:class=test--> package manager.

But each result in the following:

<!-- 1 -->
<p>Npm stands for <em>node</em> <!-- --> package manager.</p>

<!-- 2, 3 -->
<p>Npm stands for <em>node</em> package manager.</p>

I've also updated the CodeSandbox to show this behavior.

Am I missing something silly here?

[ChristianMurphy]

rehype-attr relies on parsed HTML (a hast tree), rehype-raw generates that parsed hast tree.
rehype-raw needs to run before rehype-attr, but you are running it after.

[eoinmurphy]

Ah, that was it, I have it working now on my project. I also ran rehype-sanitize before which stripped it too, I guess. Will spend some time with rehype-sanitize to ensure that this is as secure as possible.

Thanks so much for the help!