Traversing children in renderElement

Do you want to request a feature or report a bug?

Feature

What’s the current behavior?

Children is always single component, not collection.

Slate: 0.59.0

What’s the expected behavior?

It would be nice to be able to traverse children provided in renderElement functions (with React.Children).

That way you can for example visually group/separate elements without actually changing document structure.

[Mangatt]

Great, I’ll do that next week.

Nested lists are good example, as managing proper structure is immense amount of work and results are still not bulletproof. With this change you can have just flat list-item type with depth prop and render proper structure on the fly.

After this change you can produce from following structure:

{
	type: 'list',
	children: [
		{type: 'list-item', children:['Item 1']},
		{type: 'list-item', children:['Item 1.1'], depth: 1},
		{type: 'list-item', children:['Item 2']},
	]
}

this HTML:

<ul>
	<li>
		<div>Item 1</div>
		<ul>
			<li>Item 1.1</li>
		</ul>
	</li>
	<li>Item 2</li>
</ul>

[ianstormtaylor]

@Mangatt nice, a useChildren hook sounds like a good way to do it. A PR would be great.

Can you explain the structure you’d like to impose by iterating children, or provide any pseudo-code snippets of the kind of functionality you’re trying to achieve? (Often helps in PRs for people to understand what you’re asking for.)