In order to create image carousel, I thought creating nested blocks as following
Then I found draft.js doesn't support nested blocks. (https://github.com/facebook/draft-js/issues/143 they say draft.js is flat)
But on the other hand, there's UL/OL and LI , that's like group and element structure.
Is there a way to group elements/components/blocks so that we can render the whole + individual (such as we render carousel with individual images)
Draft.js doesn’t actually support ul/ol and li as separate blocks – these are just implemented as ordered-list-item and unordered-list-item blocks, stored as a flat list in the editor.
The nesting is "faked" by having those blocks’ depth set to values above 0, and using wrappers to wrap sequences of those blocks into a parent element. See the docs: Advanced topics – Custom block wrappers
.
If it works for you, you could follow a similar model and have a single block type image-carousel-item, that contains the contents of each "slide", then use a wrapper to render carousels with multiple items however you want, both in the editor and when exporting HTML.