Draft-js: Is there somebody working on splitting content into columns or pages using draft.js' output?

[sarawinter]

Do you want to request a feature or report a bug?

This is possibly a contact request?

Both myself and a friend of mine have run into this issue (on different projects, in different companies) where the project requires that we split output into columns or pages (for print), and we are both using draft.js for the source content.

I do not expect this to be built into draft.js as a feature since it is a bit out of scope, but I have been trying to find out if there is somebody already working on a solution for this.

In jQuery there is Columnizer, which does the job fairly well, but I have not been able to find a react equivalent.

Do you know of any projects that have solved this, or that are working on a solution, or that are willing to collaborate?

If not, is there some place where I could get some pointers or support for creating my own project to solve this issue?

[jan4984]

I suggest to use multiple draftjs editors, one Editor for one column

[confiks]

Splitting the text up manually in columns can be a solution, and for example the Ory editor implements a column layout with separate editor instance (and with Slate instead of DraftJS).

On the other hand, I'm not entirely sure manually splitting is really the solution for designing long form articles. There, the content is mostly linear, with perhaps a few asides and images. Fundamentally this is about text reflow in the context of different screen sizes and in print.

I'm myself trying to see if simply applying CSS to block level DraftJS elements (i.e. float: right inside media rules) is enough to get to acceptable article layouts for all screen sizes. For splitting up text in columns specifically, you might want to try the CSS3 multicolumn layout rule, for example like this.

I don't know if it suffices and is compatible in all browsers, but that rule wasn't yet around when the jQuery Columnizer plugin was first released. Additionally, you could get the DraftJS HTML out of React and do the column transformation with jQuery just for print.

[paloobi]

Hope this discussion was helpful. I'm closing the issue, as this doesn't seem to be a bug or feature request, but feel free to continue the discussion.