diff --git a/test/fixtures/062-custom-block-type-with-children.ts b/test/fixtures/062-custom-block-type-with-children.ts new file mode 100644 index 0000000..4e415b3 --- /dev/null +++ b/test/fixtures/062-custom-block-type-with-children.ts @@ -0,0 +1,21 @@ +import type {ArbitraryTypedObject} from '@portabletext/types' + +const input: ArbitraryTypedObject[] = [ + { + _type: 'quote', + _key: '9a15ea2ed8a2', + background: 'blue', + children: [ + { + _type: 'span', + _key: '9a15ea2ed8a2', + text: 'This is an inspirational quote', + }, + ], + }, +] + +export default { + input, + output: '

Customers say: This is an inspirational quote

', +} diff --git a/test/fixtures/index.ts b/test/fixtures/index.ts index b905b81..dad88d5 100644 --- a/test/fixtures/index.ts +++ b/test/fixtures/index.ts @@ -24,6 +24,7 @@ import inlineBlockWithText from './026-inline-block-with-text' import styledListItems from './027-styled-list-items' import customListItemType from './028-custom-list-item-type' import customBlockType from './050-custom-block-type' +import customBlockTypeWithChildren from './062-custom-block-type-with-children' import customMarks from './052-custom-marks' import overrideDefaultMarks from './053-override-default-marks' import listIssue from './060-list-issue' @@ -56,6 +57,7 @@ export { styledListItems, customListItemType, customBlockType, + customBlockTypeWithChildren, customMarks, overrideDefaultMarks, listIssue, diff --git a/test/portable-text.test.tsx b/test/portable-text.test.tsx index 1152808..b94f317 100644 --- a/test/portable-text.test.tsx +++ b/test/portable-text.test.tsx @@ -310,6 +310,41 @@ tap.test('can specify custom component for custom block types', (t) => { t.end() }) +tap.test('can specify custom component for custom block types with children', (t) => { + const {input, output} = fixtures.customBlockTypeWithChildren + const types: Partial['types'] = { + quote: ({renderNode, ...props}) => { + t.same(props, { + value: { + _type: 'quote', + _key: '9a15ea2ed8a2', + background: 'blue', + children: [ + { + _type: 'span', + _key: '9a15ea2ed8a2', + text: 'This is an inspirational quote', + }, + ], + }, + index: 0, + isInline: false, + }) + + return ( +

+ {props.value.children.map(({text}) => ( + Customers say: {text} + ))} +

+ ) + }, + } + const result = render({value: input, components: {types}}) + t.same(result, output) + t.end() +}) + tap.test('can specify custom components for custom marks', (t) => { const {input, output} = fixtures.customMarks const highlight: PortableTextMarkComponent<{_type: 'highlight'; thickness: number}> = ({