What replaces rehype-filter?

[charliematters]

I'm upgrading our react-markdown logic, and I notice that the following import (for version 8.0.7) doesn't appear to have an equivalent in (10.1.0)?

import rehypeFilter from 'react-markdown/lib/rehype-filter'

We used it as part of a unified parser:

const file = unified()
  .use(remarkParse)
  // Some remark plugins
  .use(remarkToRehype)
  // Some rehype plugins
  .use(rehypeFilter, { allowedElements:[], unwrapDisallowed:true, ...whatever... } )
  .use(rehypeStringify)
  .processSync(markdown)

And now I'm not sure how to achieve the same functionality. Did that rehype-filter become something else? Is there another library which does the same thing that react-markdown does internally?

[ChristianMurphy]

Rehype filter wasn't meant to be public, hence why it wasn't published on its own.
The closest package I know of is https://github.com/rehypejs/rehype-sanitize

[charliematters]

Ok, that makes sense.

We used it where we needed to generate the html that react-markdown would generate (e.g. in a "Copy as HTML" click handler). This meant the options being the same as the component was really useful.

Other than the sanitise package with different options, is there another way to achieve this?

[ChristianMurphy]

e.g. in a "Copy as HTML" click handler

I don’t follow, rehype filter, filters.
It doesn’t generate anything.

Are you saying some other intermediate step added a handle, and you don't want it to be filtered?

[charliematters]

We're using it a little like this:

const disallowedElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
const remarkPlugins: PluggableList = []
const rehypePlugins: PluggableList = []

function Component({ markdown }) {
  return (
    <ReactMarkdown
      unwrapDisallowed
      disallowedElements={disallowedElements}
      rehypePlugins={rehypePlugins}
      remarkPlugins={remarkPlugins}
    >
      {markdown}
    </ReactMarkdown>
  )
}

function getHtml(markdown: string) {
  const file = unified()
    .use(remarkParse)
    .use(remarkPlugins)
    .use(remarkToRehype)
    .use(rehypePlugins)
    .use(rehypeFilter, { disallowedElements, unwrapDisallowed:true })
    .use(rehypeStringify)
    .processSync(markdown)
  return String(file.value)
}

The key thing here is that we can use a common set of props to process markdown consistently, whether it's in a react component, or whether using an imperative function.

I guess we can look at which elements we are replacing and find an alternative package to do that in a plugin, and just no use the props on .

Looking at it, we're mainly making sure that massive <h1> text doesn't appear jarringly in a tooltip, so we could alternatively solve that with CSS

Edit: Ironically had to comment out the <h1> to stop jarringly large text

[wooorm]

The alternative is a plugin. Plugins are very powerful. You can do anything with them.
The internal filter functionality exists because there were old-legacy-not-so-powerful options.
You can write one plugin and use them in both pipelines.
See https://unifiedjs.com/learn/recipe/remove-node/, https://unifiedjs.com/learn/recipe/tree-traversal/