Add support for passing options to remark-rehype

Closes GH-669.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>

lib/react-markdown.js

@@ -13,6 +13,7 @@
  * @property {PluggableList} [plugins=[]] **deprecated**: use `remarkPlugins` instead
  * @property {PluggableList} [remarkPlugins=[]]
  * @property {PluggableList} [rehypePlugins=[]]
+ * @property {import('remark-rehype').Options} [remarkRehypeOptions={}]
  *
  * @typedef LayoutOptions
  * @property {string} [className]
@@ -87,7 +88,10 @@ export function ReactMarkdown(options) {
     .use(remarkParse)
     // TODO: deprecate `plugins` in v8.0.0.
     .use(options.remarkPlugins || options.plugins || [])
-    .use(remarkRehype, {allowDangerousHtml: true})
+    .use(remarkRehype, {
+      ...options.remarkRehypeOptions,
+      allowDangerousHtml: true
+    })
     .use(options.rehypePlugins || [])
     .use(rehypeFilter, options)
 

package.json

@@ -87,7 +87,7 @@
     "property-information": "^6.0.0",
     "react-is": "^17.0.0",
     "remark-parse": "^10.0.0",
-    "remark-rehype": "^9.0.0",
+    "remark-rehype": "^10.0.0",
     "space-separated-tokens": "^2.0.0",
     "style-to-object": "^0.3.0",
     "unified": "^10.0.0",

readme.md

@@ -175,6 +175,8 @@ The default export is `ReactMarkdown`.
     list of [remark plugins][remark-plugins] to use
 *   `rehypePlugins` (`Array<Plugin>`, default: `[]`)\
     list of [rehype plugins][rehype-plugins] to use
+*   `remarkRehypeOptions` (`Object?`, default: `undefined`)\
+    options to pass through to [`remark-rehype`][remark-rehype]
 *   `className` (`string?`)\
     wrap the markdown in a `div` with this class name
 *   `skipHtml` (`boolean`, default: `false`)\
@@ -733,6 +735,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
+
 [awesome-remark]: https://github.com/remarkjs/awesome-remark
 
 [awesome-rehype]: https://github.com/rehypejs/awesome-rehype

test/test.jsx

@@ -874,6 +874,25 @@ test('should render image references', () => {
   )
 })
 
+test('should render footnote with custom options', () => {
+  const input = [
+    'This is a statement[^1] with a citation.',
+    '',
+    '[^1]: This is a footnote for the citation.'
+  ].join('\n')
+
+  assert.equal(
+    asHtml(
+      <Markdown
+        children={input}
+        remarkPlugins={[gfm]}
+        remarkRehypeOptions={{clobberPrefix: 'main-'}}
+      />
+    ),
+    '<p>This is a statement<sup><a href="#main-fn-1" id="main-fnref-1" data-footnote-ref="true" aria-describedby="footnote-label">1</a></sup> with a citation.</p>\n<section data-footnotes="true" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>\n<ol>\n<li id="main-fn-1">\n<p>This is a footnote for the citation. <a href="#main-fnref-1" data-footnote-backref="true" class="data-footnote-backref" aria-label="Back to content">↩</a></p>\n</li>\n</ol>\n</section>'
+  )
+})
+
 test('should support definitions with funky keys', () => {
   const input =
     '[][__proto__] and [][constructor]\n\n[__proto__]: a\n[constructor]: b'