@xh/hoist 69.0.0-SNAPSHOT.1727288627891 → 69.0.0-SNAPSHOT.1727461290353

package/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.
 

package/build/types/cmp/markdown/Markdown.d.ts

@@ -1,17 +1,13 @@
 /// <reference types="react" />
 import { HoistProps } from '@xh/hoist/core';
-import { Components } from 'react-markdown';
+import { Options } from 'react-markdown';
 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>;
 }
 /**
  * Render Markdown formatted strings as HTML (e.g. **foo** becomes <strong>foo</strong>).

package/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
         });
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "69.0.0-SNAPSHOT.1727288627891",
+  "version": "69.0.0-SNAPSHOT.1727461290353",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",