Accept remark and rehype plugin props to the markdown component (#3795)

* Markdown component accepts remark and rehype plugins, add Changelog entry

* Ensure app plugins take precedence, update Changelog

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 69.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* `Markdown` now supports a `reactMarkdownOptions` prop to allow passing React Markdown
+  props to the underlying `reactMarkdown` instance.
+
 ### ⚙️ Technical
 * Misc. Improvements to Cluster Tab in Admin Panel.
 

cmp/markdown/Markdown.ts

@@ -6,7 +6,7 @@
  */
 import {hoistCmp, HoistProps} from '@xh/hoist/core';
 import {reactMarkdown} from '@xh/hoist/kit/react-markdown';
-import {Components} from 'react-markdown';
+import {Options} from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import {PluggableList} from 'unified/lib';
@@ -15,15 +15,11 @@ interface MarkdownProps extends HoistProps {
     /** Markdown formatted string to render. */
     content: string;
 
-    /**
-     * Map of html tag to tag or functional component to control rendering of standard html
-     * elements. See https://www.npmjs.com/package/react-markdown/v/8.0.6#appendix-b-components
-     * for details.
-     */
-    components?: Components;
-
     /** True (default) to render new lines with <br/> tags. */
     lineBreaks?: boolean;
+
+    /** Escape hatch to provide additional options to the React Markdown implementation */
+    reactMarkdownOptions?: Partial<Options>;
 }
 
 /**
@@ -34,13 +30,18 @@ interface MarkdownProps extends HoistProps {
  */
 export const [Markdown, markdown] = hoistCmp.withFactory<MarkdownProps>({
     displayName: 'Markdown',
-    render({content, lineBreaks = true, components = {}}) {
-        const remarkPlugins: PluggableList = [remarkGfm];
+    render({content, lineBreaks = true, reactMarkdownOptions = {}}) {
+        // add default remark plugins, ensure app provided takes precedence
+        const remarkPlugins: PluggableList = [],
+            appRemarkPlugins = reactMarkdownOptions.remarkPlugins;
+        if (appRemarkPlugins) remarkPlugins.push(...appRemarkPlugins);
         if (lineBreaks) remarkPlugins.push(remarkBreaks);
+        remarkPlugins.push(remarkGfm);
+
         return reactMarkdown({
             item: content,
-            remarkPlugins,
-            components
+            ...reactMarkdownOptions,
+            remarkPlugins
         });
     }
 });