Layout scheme

• 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]

[oodeveloper]

Hi Again 😃 I tested flex layout and it worked fine so far. I made a demo Paragraph with layout settings and other custom tools ( text fields,buttons and …) It can be added like supportMultipeColumns: true to EditorJS. I hope it helps! It is for me 😉 I can not implement this settings globally though (for other available tools). About nesting and having extra elements to implement multiple columns I think EditorJS is more Editor than a Builder or Composer . Actually this is the main reason I’m developing with EditorJS and it is clean, minimal and super flexible! Here is the demo:

[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