Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue Description

  • 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

[ 3 ][ 4 ]

should be described as

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:60
  • Comments:19 (3 by maintainers)

github_iconTop GitHub Comments

oodevelopercommented, Sep 19, 2020

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: EditorJSMultipleColumns

oodevelopercommented, Sep 18, 2020

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: multiple-column-editorjs


Read more comments on GitHub >

github_iconTop Results From Across the Web

scheme layout plan Definition | Law Insider
layout plan means a plan of the project depicting the division or proposed division of land into plots, roads, open spaces, amenities, etc....
Read more >
A Simple and Useful Layout Scheme to Achieve Uniform ...
A Simple and Useful Layout Scheme to Achieve Uniform Current Distribution for Multi-Finger Silicided Grounded-Gate NMOS ; ISSN Information: Print ISSN: 1541-7026.
Read more >
Scheme designs, themes, templates and ... - Dribbble
Scheme. 741 inspirational designs, illustrations, and graphic elements from the world's best designers. Want more inspiration? Browse our search results.
Read more >
Elements in Creating a Design Scheme - Elevatus Architecture
A design scheme gives you a guide on which to base all your big and small decisions from. Every project is personalized for...
Read more >
Solved: Difference between 'Issue Layout' and Field scheme...
Both issue layout and field scheme lets you set a field to be hidden. ... whereas only 'Issue Layout' lets you mark fields...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found