remarkDirective with rehypeSanitize

[Sagie501]

Hi!

I am using react-markdown version 9.0.0. I am also using the following plugins: rehype-raw (version 7.0.0), rehype-sanitize (version 6.0.0), remark-gfm (version 4.0.0), remark-directive (version 3.0.0).

And this is how I am using it:

<ReactMarkdown
    remarkPlugins={[remarkGfm, remarkDirective, myRemarkPlugin]}
    rehypePlugins={[rehypeRaw, rehypeSanitize]}
>
    {content}
</ReactMarkdown>

I want to create a custom directive like the follow:

:::my-directive
This is a regular text, :red[this is red], :green[this is green], :blue[this is blue]
:::

And this is how myRemarkPlugin looks like:

function myRemarkPlugin() {
    return (tree) => {
        visit(tree, (node) => {
            if (node.name === 'my-directive') {
                const data = node.data || (node.data = {});
                data.hName = 'div';
            } else if (node.name === 'red' || node.name === 'green' || node.name === 'blue') {
                const data = node.data || (node.data = {});
                data.hName = 'span';
                data.hProperties = {
                    style: `color: ${node.name}`,
                };
            }
        });
    };
}

It works perfectly good when I am removing the rehypeSanitize plugin, but when I add it it doesn't work (it removes the style attributes).

How should I make it work with the rehypeSanitize plugin "on"?

• Maybe I should also refactor my myRemarkPlugin function, LMK how I should do it correctly.

Thanks!

[ChristianMurphy]

Welcome @Sagie501! 👋

I'd recommend taking a look at this related discussion https://github.com/orgs/rehypejs/discussions/158
To summarize the discussion there, using inline styles can be both difficult to maintain and make secure.
Instead create CSS classes for the colors you want to support and add an allow list of only those class names to your rehype sanitize configuration. (similar to https://github.com/rehypejs/rehype-sanitize#example-syntax-highlighting)