Expose rule.fence override in <StreamdownRN />

[eeee0717]

StreamdownRN currently hardcodes a custom code block renderer inside StreamdownRN.tsx (rules.fence always returns the built-in component). Consumers can’t swap it out to reuse their existing code block components (with copy button, HTML preview, math parsing, etc.) or to match their design system.

[edgarpavlovsky]

you should already be able to:

• control the code block colorway
• control the font the codeblock uses (maybe monospace is hardcoded right now?)

what other customization would you need? boder styles etc.?

[eeee0717]

This is the custom code block I am currently using, maybe adding the toolbar above? (I need not just to display the copy button; for example, HTML may require using the preview button)

[edgarpavlovsky]

doing a big rewrite right now - will add custom code components to the list 🤝

[edgarpavlovsky]

didn't get to this with 0.2.0 but will put on the backlog for future

[edgarpavlovsky]

@eeee0717 thoughts on #17?

thinking about slating this up for v0.3

[eeee0717]

@edgarpavlovsky LGTM! Thank you for your effort.

[rossaai]

This feature is crucial for real customization. My suggestion you could add a components inside StreamdownRNProps similar to react-markdown:

import type { Content, RootContentMap } from 'mdast';

/**
 * Props for the main StreamdownRN component
 */
export interface StreamdownRNProps {
  components?: {
    [Key in keyof RootContentMap]?: (props: {
      node: Content;
      theme: ThemeConfig;
      componentRegistry?: ComponentRegistry;
      isStreaming: boolean;
      key?: string | number;
    }) => React.ReactNode;
  };
  ...
}

Then update renderNode at ASTRenderer.tsx and override if it is present in components.

NOTE: This could be merged with ComponentRegistry

[edgarpavlovsky]

@rossaai check #17 feel feee to comment there