portabletext / portabletext/react-portabletext
Children prop no longer available in custom block content
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 377
- Forks
- 31
- Avg merge
- 23h 42m
- Merged PRs (30d)
- 9
Description
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} />
);
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the PortableText entry point and inspect how custom block components receive props, comparing that behavior with the former @sanity/block-content-to-react API described in the issue. Verify whether the children prop can be restored without requiring the buildMarksTree and renderNode workaround, and confirm custom block content still renders correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100