Multi-column layouts


I have been searching so much through all those existing editors and just now stumbled upon ProseMirror. The initial blog post really points out all the problems contenteditable has and has strong ties to the post written by the medium guys (“why contenteditable is terrible”).

I have been talking with maintainers of other repositories on if it is possible to have multi-column / grid layouts (not tables!) inside a contenteditable. All of them told me: nope, very messy with contenteditable.

My question is if this is something that ProseMirror can solve as well or if it is out of this project’s scope. The most well-known grid system is by bootstrap:

The contenteditable inner would probably look something like:

<div contenteditable="true">
    <div class="row">
       <p class="col-xs-6">abcdef</p>
       <p class="col-xs-6">abcdef</p>

I hope my question is clear :slight_smile:

ProseMirror’s approach is to mostly limit the editing view to a semantic representation of the document, and leave the presentation to other parts of the pipeline. Are you sure you want to edit in two columns, or would you also be happy to divide your document into some kind of sections, and then later render those side-by-side?

Ok great, I’m actually working on a solution for this and considering ProseMirror to be responsible for the editing part. I believe keeping it semantic and simple is the way to go for a rock solid contenteditable editor!

Using the column-count CSS property on the editor view works just fine.