Layout scheme

[neSpecc]

• Create rows on render, by default each row have 1 column
• Add ability to drag-n-drop block to the left or to the right of other block, creating several columns layout
• Add id to each block to saved data blocks property
• Add layout property to saved data object.

The layout should describe layout scheme of Blocks by their ids. For example

[---1---]
[---2---]
[ 3 ][ 4 ]
[---5---]

should be described as

[1, 2, [3, 4], 5]

[kumamaki]

Hey. Smart feature. Nice 👏
We really need this in our project. Do you think there is any simpler and temporary way I can implement this with current API?

[juanmiret]

I too would love to have something like this. Will try to contribute! :P

[calumk]

+1 for this feature

[hata6502]

This is very interested feature! 😃
But Editor.js may become difficult to maintain.

[christianostrem]

This is the only feature I need to start using Editor.js in my project.
I think that this feature should be thought of I a more generic mater.
Though it's great in its use for layout. It could do more than that. The setup inside Editor.js would be the same but the output could also be:

Tabs (vertical/horizontal)
Slides
Ul => li
Bootstrap => Rows and columns
And probably more...

Since editor.js allows us to set our own options. You can add options for:
Tabs and bootstrap like => Type: Tab / Boostrap or row size, it's basically up to you.

I have also explained some of it on my post #1199

[tvvignesh]

+1 from my end too please. This would be really important to have.

@neSpecc Also, is it limited to 2 columns or can it be more?

For eg. if I need a row with 4 columns, while the data model should remain the same making it [1, 2, [3, 4,5,6], 7] but I hope editor.js would be supporting that.

Thanks.

[smeijer]

Is the idea to limit it to a single level? Or will it be recursive nesting?

In other words, will this be possible?

[         1         ]
[         2         ]
[   3   ]   [   4   ]
[ 5 [ 6 [ 7 ] 8 ] 9 ]

[1, 2, [3, 4], [5, [6, [7], 8], 9]]

[oodeveloper]

Hi, I think this feature will make editorjs more awesome.
A Simple Idea:
Brief: By using CSS flex and bootstrap like column layout system there is no need to have row blocks in order to achieve grid layouting or even nested elements ( not an ultimate solution but a minimal editorjs style :| )
You can

• Use flex for block container: .codex-editor__redactor{display: flex;flex-wrap: wrap;flex-direction: row;}
• Make block full width by default : .ce-block{width: 100%;}
• Two buttons to increase and decrease width ( by switching grid classes like bootstrap layout system col-1, to col-2 to col-3 and ... ) which adds the class to the block element (parent of parent of inserted elements)
  I'm using this method in my case though :) but I created my own form fields so I already added the buttons!

I don't know how can I add default settings to all available elements (like delete and sort arrows for paragraph or header ) but if someone can guide me where to look I can prepare a demo to show you! ;)
This is the current implementation in my project:

Thanks