Re-expose the RuleType object from markdown-to-jsx

[maxpatiiuk]

Is your feature request related to a problem? Please describe.

Storybook is using the markdown-to-jsx library, and is re-exposing it's Markdown component:

storybook/code/addons/docs/src/blocks/blocks/Markdown.tsx

Line 12 in 84bc7f7

export const Markdown = (props: MarkdownProps) => {

However, to effectively use that component, I would like Storybook to also re-expose the following object from that library: https://github.com/quantizor/markdown-to-jsx/blob/9d53fa83f7c29da747e457159850083b53394510/index.tsx#L15

Because this library is bundled into storybook, I cannot simply import from it directly as it won't guarantee my version matches what is bundled with storybook

Describe the solution you'd like

Re-Expose RuleType type

Describe alternatives you've considered

My use case and workaround:

type MarkdownProps = Parameters<typeof VanillaMarkdown>[0];
function Markdown(props: MarkdownProps): JSX.Element {
  return <VanillaMarkdown {...props} options={props.options ? { ...options, ...props.options } : options} />;
}
const options: MarkdownProps["options"] = {
  renderRule(next, _ast, _renderChildren, state): React.ReactNode {
    const result = next();
    // Don't render <p> tags to avoid React errors like
    // `In HTML, <pre> cannot be a descendant of <p>.`
    // The proper way to do this check is to check for
    // ast.type === RuleType.paragraph, but Storybook bundles in markdown-to-jsx,
    // and does not re-expose the RuleType enum.
    if (
      typeof result === "object" &&
      result !== null &&
      "type" in result &&
      result?.type === "p" &&
      typeof result.props === "object" &&
      result.props !== null &&
      "children" in result.props
    ) {
      const { children, ...rest } = result.props;
      return (
        <div
          {...rest}
          style={{
            // Mirror Storybook's <p> element styles
            fontSize: "14px",
            margin: "16px 0",
          }}
          key={state.key}
        >
          {children as React.ReactNode}
        </div>
      );
    } else {
      return result;
    }
  },
};

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[ardunster]

I was just linked to this discussion by the bot from my bug report #32433 ; this would be more helpful if it was described where or how to implement this as a workaround. I am not clear at all where I would place this code or how I would ensure it gets used. Is anyone able to shed some light on that? Thanks!

[maxpatiiuk]

I don't think this issue is related