Add support for passing options to remark-rehype (#1935)

Reviewed-by: Christian Murphy <[email protected]>
Reviewed-by: Titus Wormer <[email protected]>

packages/mdx/lib/core.js

@@ -4,6 +4,7 @@
  * @typedef {import('./plugin/recma-document.js').RecmaDocumentOptions} RecmaDocumentOptions
  * @typedef {import('./plugin/recma-stringify.js').RecmaStringifyOptions} RecmaStringifyOptions
  * @typedef {import('./plugin/recma-jsx-rewrite.js').RecmaJsxRewriteOptions} RecmaJsxRewriteOptions
+ * @typedef {import('remark-rehype').Options} RemarkRehypeOptions
  *
  * @typedef BaseProcessorOptions
  * @property {boolean} [jsx=false]
@@ -22,6 +23,8 @@
  *   List of remark (mdast, markdown) plugins.
  * @property {PluggableList} [rehypePlugins]
  *   List of rehype (hast, HTML) plugins.
+ * @property {RemarkRehypeOptions} [remarkRehypeOptions]
+ *   Options to pass through to `remark-rehype`.
  *
  * @typedef {Omit<RecmaDocumentOptions & RecmaStringifyOptions & RecmaJsxRewriteOptions, 'outputFormat'>} PluginOptions
  * @typedef {BaseProcessorOptions & PluginOptions} ProcessorOptions
@@ -70,6 +73,7 @@ export function createProcessor(options = {}) {
     recmaPlugins,
     rehypePlugins,
     remarkPlugins,
+    remarkRehypeOptions = {},
     SourceMapGenerator,
     ...rest
   } = options
@@ -103,7 +107,12 @@ export function createProcessor(options = {}) {
   pipeline
     .use(remarkMarkAndUnravel)
     .use(remarkPlugins || [])
-    .use(remarkRehype, {allowDangerousHtml: true, passThrough: nodeTypes})
+    .use(remarkRehype, {
+      ...remarkRehypeOptions,
+      allowDangerousHtml: true,
+      /* c8 ignore next */
+      passThrough: [...(remarkRehypeOptions.passThrough || []), ...nodeTypes]
+    })
     .use(rehypePlugins || [])
 
   if (format === 'md') {

packages/mdx/readme.md

@@ -193,6 +193,23 @@ List of recma plugins.
 This is a new ecosystem, currently in beta, to transform [esast][] trees
 (JavaScript).
 
+###### `options.remarkRehypeOptions`
+
+Options to pass through to [`remark-rehype`][remark-rehype].
+The option `allowDangerousHtml` will always be set to `true` and the MDX nodes
+are passed through.
+In particular, you might want to pass `clobberPrefix`, `footnoteLabel`, and
+`footnoteBackLabel`.
+
+<details>
+<summary>Example</summary>
+
+```js
+compile({value: '…'}, {remarkRehypeOptions: {clobberPrefix: 'comment-1'}})
+```
+
+</details>
+
 ###### `options.mdExtensions`
 
 List of markdown extensions, with dot (`Array<string>`, default: `['.md',
@@ -1061,6 +1078,8 @@ abide by its terms.
 
 [rehype-plugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
 
+[remark-rehype]: https://github.com/remarkjs/remark-rehype
+
 [mdx-syntax]: https://mdxjs.com/docs/what-is-mdx/#mdx-syntax
 
 [use]: #use

packages/mdx/test/compile.js

@@ -1080,6 +1080,33 @@ test('markdown (math, `remark-math`, `rehype-katex`)', async () => {
   )
 })
 
+test('remark-rehype options', async () => {
+  assert.equal(
+    renderToStaticMarkup(
+      React.createElement(
+        await run(
+          compileSync('Text[^1]\n\n[^1]: Note.', {
+            remarkPlugins: [remarkGfm],
+            remarkRehypeOptions: {
+              footnoteLabel: 'Notes',
+              footnoteBackLabel: 'Back'
+            }
+          })
+        )
+      )
+    ),
+    `<p>Text<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="true" aria-describedby="footnote-label">1</a></sup></p>
+<section data-footnotes="true" class="footnotes"><h2 id="footnote-label" class="sr-only">Notes</h2>
+<ol>
+<li id="user-content-fn-1">
+<p>Note. <a href="#user-content-fnref-1" data-footnote-backref="true" class="data-footnote-backref" aria-label="Back">↩</a></p>
+</li>
+</ol>
+</section>`,
+    'should pass options to remark-rehype'
+  )
+})
+
 test('MDX (JSX)', async () => {
   assert.equal(
     renderToStaticMarkup(