Support for column layout

[michaelfester]

It would be great if blocks could be arranged in columns. Here is an example from Notion, where dragging a block to the left or right edge of another block positions them in a column layout.

While dragging:

The result:

[hayatbiralem]

Of course it would be great and handy, there is no doubt about that but most of the time it complicates editing experience because we want more and more nesting.

But I am thinking a different and endless approach right now.

How?

For example, those columns can be a single module that takes the number of columns as parameters and each column could has one configure button to open a modal which has another full editor.js instance and other configuration inputs. We could add columns in that modal's editor too and that columns could open another modals and so on.

This way, our editing experience never stuck and we could do crazy nestings.

[hata6502]

I developed editor-js-grid, but EditorJS can't be nested.

https://www.npmjs.com/package/editor-js-grid

I'm fixing EditorJS to be nested.

[hayatbiralem]

It looks like you've worked hard. I respect that.

I wonder do you think that a solution like I explained above cannot be produced?

[hata6502]

https://codesandbox.io/s/editor-js-grid-nest-ro2uz?fontsize=14&hidenavigation=1&theme=dark

My demo launches Editor.js instance each grid item.
So I think it is one of the solution of #708 (comment)

[netpalantir]

I developed editor-js-grid, but EditorJS can't be nested.

https://www.npmjs.com/package/editor-js-grid

I'm fixing EditorJS to be nested.

Do you have a valid link for your module? It would be great to see how you solved your problem. Both the links you provide are 404 now.

[gohabereg]

#1055 (comment)

[hata6502]

@hayatbiralem @netpalantir
Unfortunately, editor-js-grid was completely removed from GitHub and npm.
editor-js-grid was too untable plugin, so it was not useful.

But, I'm developing an alternative plugin: editorjs-inline.
Please watch:
https://github.com/hata6502/editorjs-inline
https://hata6502.github.io/editorjs-inline/

[hata6502]

@hayatbiralem @netpalantir

editor-js-grid is revived as editorjs-layout!
See: https://github.com/hata6502/editorjs-layout

[calumk]

Hey, I have been working on a proof of concept that involves nesting editor.js
It is (in my opinion) a very clean way to solve this issue, without the use of the popups

No code online yet, but if people are interested I can publish

EditorJsColumnsPlugin.mp4

Note :
The demo is using vue/vite, but it is not required

[BLumbye]

@calumk That looks pretty much like an ideal solution. We are very interested in using it if you publish it in the near future :)

[calumk]

@BLumbye Working on releasing this, but its probably realistically a week away, as I'm swamped with other work at the moment

[yswang0927]

Hey, I have been working on a proof of concept that involves nesting editor.js It is (in my opinion) a very clean way to solve this issue, without the use of the popups

No code online yet, but if people are interested I can publish

EditorJsColumnsPlugin.mp4
Note : The demo is using vue/vite, but it is not required

@calumk This is exactly what I need and I look forward to seeing you release it soon.

[calumk]

Hi @BLumbye @yswang0927

A very buggy first release is here.

• The biggest usablity issue so far is the tab/enter keys launch events on the parent editor too.
• Currently tools are stored as a global variable, but this will probably change to a config property

https://github.com/calumk/editorjs-columns

[yswang0927]

@calumk Thanks, I got it.

[jatan-ops]

@calumk This is just what I was looking for. Thank you so much for publishing this. Also, code is super clean so thanks for that :). I looked at the code and it seems like this generates new editor instance for each column. Do you have any opinion on what's the upper limit of # of instances before performance issues start to creep in. If I have 3 X 3 grid, that's 9 instances. If I then add 2 columns, that's 2 more so 11 instances in total. Might be too much for system to handle?

[calumk]

Hey,
Yes a new instance will add overhead, but editor.js is quite light while running.
I suspect it will have more to do with what block plugins are used than the editor instance itself.

There are a few issues with the current implementation
Keyboard shortcuts, and some clipping needs improvement.

Very happy to accept pull requests etc