Nested Blocks (Using Plate component rendering in custom elements)

[JesseLiii]

Hi plate community!

I'm trying to build an editor that has nested blocks, where the node structure can go something like this :

[
	{
		type: 'p',
		id: 'aaaaa',
		text: [
			{
				text: 'This is a the text in the base node ',
			},
		],
		children: [
			{ type: 'p', id: 'bbbbb', children: [{ text: 'line 1' }] },
			{ type: 'p', id: 'bbbbb', children: [{ text: 'line 2' }] },
		],
	} as MyParagraphElement,
]

I would like to render it somewhat like this :

This is a the text in the base node
    line 1 
    line 2 

And for structural reasons, this can't be done using indent tracking but rather it needs to be expressed in terms of having elements inside of other elements.

However, the problem I'm running into is that I'd like to render the text field that I pass in as props as if it were inline children as plate does it with all my other plugins, but I don't know how to access the plates rendering system for that in my custom paragraph component.

Thanks!

[aakashTixio]

I am also attempting to build something similar. Have you found any solution?

[zbeyens]

You can have nested blocks in Plate. Just create a plugin for each element. See the list plugin as reference: https://github.com/udecode/plate/blob/337162a75240987a052a5d2efc8c5d470ebb0c13/packages/list/src/createListPlugin.ts.

The main work you need to do is in the components.