ProseMirror for editing page layout


#1

Hy

I’m thinking about using ProseMirror for editing the layout of a blog post or similar. Sort of what the Ory.am Editor is doing. So the idea is that the user can start with an empty page and drag blocks like a two column layout, image, table, Dropbox file list, etc. to the page. So there are blocks for layouting the content and other blocks that provide actual content.

Do you think that ProseMirror fits nicely for such an editing experience or is it more a misuse?

Thank you very much for your inputs. Micha


#2

This is probably possible — ProseMirror isn’t really written for showing content precisely as it will appear in some final output, since we take the approach that during editing you’re more interested in semantic information than in layout, but I expect it’s flexible enough to get something like this working. (That being said, I’m not familiar with Ory.am, so I’m not really aware of the requirements.)


#3

Thank you Marijn for your fast response…

I think the idea can be well summarized by saying that the editor is used to build a page in a CMS like product. The user can choose between different building blocks that can be added by dragging them onto the page. A building block can be a layouting element like a two column layout where the column contents are other “building blocks” or building blocks that actually show some content like a rich text editor, a table, an image, a twitter feed and so on. What might be special about its use is that the cursor position is not relevant in all building blocks. E.g. a user cannot set the cursor into a twitter feed (the user can configure the hashtag, but not edit its content). Might this be concerning?

May you elaborate what showing content precisely means for you? Should I expect layouting issues or misplaced elements? The requirement is not to have a print-ready version of a newspaper. But the content in editing mode should look as precisely as possible as the final, read-only rendered document.

Thanks again, Micha


#4

I guess dragging blocks into the editor could be made to trigger structural changes to the document. So yes, I think this’ll work well with ProseMirror. Embedding things that aren’t editable is definitely supported.

Depending on what your HTML looks like, contentEditable may misbehave for some complex things like having things positioned in fancy ways. You’ll have to experiment and see.


#5

Thank you Marjin for, again, your fast response.

I’ve played a little bit around with prose mirror and like the well-thought separation between document, schema, and the editor. However, integrating it with React.js seems to be possible, but might result in some quirks in the near future (especially since we do not require the flexibility that prose mirror offer). Nevertheless, I hope to find some project in the near future where I get the chance to use ProseMirror in production as it makes a very solid impression on me.

Thank you for your time and superior work, Micha