feat(Markdown): allow custom components to override default renderers

packages/components/src/components/Markdown/Markdown.tsx

@@ -22,6 +22,8 @@ export interface MarkdownProps
   color?: "default" | AlphaColor;
   /** Shifts all heading levels by the given offset. @default 0 */
   headingOffset?: number;
+  /** Allows overriding markdown element renderers from outside. */
+  components?: Components;
   /** @internal */
   style?: CSSProperties;
   ref?: Ref<HTMLDivElement>;
@@ -34,11 +36,12 @@ export const Markdown: FC<MarkdownProps> = (props) => {
     color = "default",
     className,
     headingOffset = 0,
+    components: customComponents,
     ref,
     ...rest
   } = props;
 
-  const components: Components = {
+  const defaultComponents: Components = {
     a: (props) => (
       <Link target="_blank" color={color} href={props.href}>
         {props.children}
@@ -140,10 +143,14 @@ export const Markdown: FC<MarkdownProps> = (props) => {
   };
 
   const textContent = extractTextFromFirstChild(children);
+  const mergedComponents: Components = {
+    ...defaultComponents,
+    ...customComponents,
+  };
 
   return (
     <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={mergedComponents}>
         {textContent}
       </ReactMarkdown>
     </div>

packages/components/src/components/Markdown/stories/Default.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Markdown> = {
   },
   args: { color: "default", headingOffset: 0 },
   parameters: {
-    controls: { exclude: ["style", "ref"] },
+    controls: { exclude: ["style", "ref", "components"] },
   },
   render: (props, context) => (
     <StoryBackground color={props.color} theme={context.globals.theme}>
@@ -44,3 +44,25 @@ export default meta;
 type Story = StoryObj<typeof Markdown>;
 
 export const Default: Story = {};
+
+export const CustomComponents: Story = {
+  render: (props, context) => (
+    <StoryBackground color={props.color} theme={context.globals.theme}>
+      <Markdown
+        {...props}
+        components={{
+          h2: ({ children }) => (
+            <h2 style={{ letterSpacing: "0.08em", textTransform: "uppercase" }}>
+              {children}
+            </h2>
+          ),
+        }}
+      >
+        {"# Heading 1\n" +
+          "## Heading 2 overridden\n" +
+          "This story uses custom renderers for `h2`\n" +
+          "[Open docs](https://flowtide.dev)"}
+      </Markdown>
+    </StoryBackground>
+  ),
+};

packages/remote-elements/src/auto-generated/RemoteMarkdownElement.ts

@@ -15,6 +15,7 @@ export class RemoteMarkdownElement extends FlowRemoteElement<RemoteMarkdownEleme
       allowedElements: {},
       className: {},
       color: {},
+      components: {},
       disallowedElements: {},
       headingOffset: {},
       rehypePlugins: {},