Forward React.forwardRef react nodes (markdoc#263)

* Forward React.forwardRef react nodes

Closes markdoc#255

* duplicate tagName function

Author: mfix-stripe

src/renderers/react/react.ts

@@ -1,13 +1,28 @@
-import { tagName } from './shared';
 import Tag from '../../tag';
 import { RenderableTreeNodes, Scalar } from '../../types';
-import type { createElement, Fragment, ReactNode } from 'react';
+
+import type { createElement, ComponentType, Fragment, ReactNode } from 'react';
 
 type ReactShape = Readonly<{
   createElement: typeof createElement;
   Fragment: typeof Fragment;
 }>;
 
+type Component = ComponentType<unknown>;
+
+function tagName(
+  name: string,
+  components: Record<string, Component> | ((string: string) => Component)
+): string | Component {
+  return typeof name !== 'string'
+    ? name // This can be an object, e.g. when React.forwardRef is used
+    : name[0] !== name[0].toUpperCase()
+    ? name
+    : components instanceof Function
+    ? components(name)
+    : components[name];
+}
+
 export default function dynamic(
   node: RenderableTreeNodes,
   React: ReactShape,

src/renderers/react/shared.ts

@@ -1,7 +1,23 @@
-import { tagName } from './shared';
 import Tag from '../../tag';
 import { RenderableTreeNode, RenderableTreeNodes } from '../../types';
 
+import type { ComponentType } from 'react';
+
+type Component = ComponentType<unknown>;
+
+function tagName(
+  name: string,
+  components: Record<string, Component> | ((string: string) => Component)
+): string | Component {
+  return typeof name !== 'string'
+    ? 'Fragment'
+    : name[0] !== name[0].toUpperCase()
+    ? name
+    : components instanceof Function
+    ? components(name)
+    : components[name];
+}
+
 function renderArray(children: RenderableTreeNode[]): string {
   return children.map(render).join(', ');
 }