portabletext/react-portabletext

Children prop no longer available in custom block content

gmferise opened this issue · 1 comments

Previously with @sanity/block-content-to-react you could use children in your custom blocks component:

import BaseBlockContent from '@sanity/block-content-to-react';

const components = {
  types: {
    block(props) {
      const { children } = props;
      return <div>{children}</div>;
    }
  },
};

function MyPage(props) {
  return (
    <BaseBlockContent components={components} />
  );
}

Now with this package the attribute is no longer available in props. This is the code I'm using to compute it myself as a workaround, which hopefully helps someone else.

import { PortableText } from '@portabletext/react';
import { buildMarksTree } from '@portabletext/toolkit';

const components = {
  types: {
    block(props) {
      const { value, renderNode } = props;
      const children = buildMarksTree(value).map((child, i) => (
        renderNode({
          node: child,
          isInline: true,
          index: i,
          renderNode,
        })
      ));
      return <div>{children}</div>;
    }
  }
};

function MyPage(props) {
  return (
    <PortableText components={components} />
  );
}

Edited for clarity.