Nested content support

[gohabereg]

Problem statement

Currently Editor.js supports only flat rigid document structure: Blocks are organised in an array. With this structure we are not able to support nested Blocks. The use cases for this feature are wide: lists in tables, inline images, etc.

Proposal

The model is designed the way it can handle nested Blocks. I see two main options:

1. Tree structure — Block's data nodes can contain other Blocks
2. Flat structure — Blocks are still stored in an array, but each Block can contain a parent property with ID of the parent Block and a keypath within the parent Block where the nested Block is located. The link could be two-way, each block can contain an array of child Blocks IDs

While flat structure might be bring more cognitive load, it would be much easier to locate the Block by it's ID. In case of the tree structure we'd need to store some map connecting Block ID and it's location.

In both cases serialized data should be in a tree structure — that would be easier to read and process.

This change would also require all operations to use Block ID instead of Block's index. Which in turn will affect OT. Though it's all solvable issues.

Open questions

While the model could be updated with not much effort to support nested content, there's an issue with DOM representation. Tools would need to be aware of possible Blocks inside their content. Other complications are: split, merge, cross-block selection and any other operations on the Blocks from the UI point of view.

Call to action

Please leave your comments or suggesting. If anyone's up to dive deeper into this, let me know!