Add block-level customization hooks

[FranciscoMoretti]

Summary

• export Block component and expose BlockComponent prop to override per-block rendering
• allow callers to inject custom Markdown-to-blocks parser
• document custom block component pattern reading from reactive stores
• The parseMarkdownIntoBlocksFn is exported to allow user to re-use the calculation if they've already called externally (e.g. in a store)

Example usage

Using the streamdown Block with useMarkdownBlockByIndex, which is a hook from a user's application that only re-renders when this particular block changes (And obtains the block by its index).

const CustomBlock = memo(
  ({ messageId, partIdx, index, ...props }: BlockProps) => {
    const block = useMarkdownBlockByIndex(messageId, partIdx, index);
    if (block === null || block.trim() === "") {
      return null;
    }

    return <Block {...props}>{block}</Block>;
  },
  (prev, next) =>
    prev.messageId === next.messageId &&
    prev.partIdx === next.partIdx &&
    prev.index === next.index
);

[vercel]

@FranciscoMoretti is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[haydenbleasel]

Nice work @FranciscoMoretti 🚀