Implementing table support in draft js

Question

I’m working on a hack for table support (one level deep) using draft.js

I have one requirement: All existing editor functionality needs to also work inside this table

I present three choices to you, please pick one and explain why you did so:

1. Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
2. Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
3. Is there another way that you think could work better?

Ye

Answer 1

I am using nested Editors in each cells (option 1). Implementing style functionalities inside each cells is much easier. You can use the functionalities you've already use in the 'main' Editor.

There are two main components in my implementation of table. The Table component, a custom block component. And inside each cell of that component is the Subeditor (a nested Editor component). The EditorState for each Subeditor is stored in a Redux store.

Selection handling between editors is quite a handful though.

Djerba

yea it is a handful and that's what I ended up doing as well. The draft-js table plugin actually has the best implementation out there I found but it is ultimately a hack. Someone should work on a pr to put nested structure within draft-js – Ye

@nimrod hey guys, are you still up to tables in draft-js, was it good after 2,5 years? The nested approach is I guess . the simplest one, but aren't there any performance issues say for a table of 500 cells? – Protozoan

@VladislavSorokin unfortunately we abandoned our editor project using draft-js. It's just too complicated and bloated to try creating tables using this library. We haven't try any other library though. – Djerba

@ArieM.Prasetyo I also switched from draft to slatejs and it's much much easier. And tables works fine – Protozoan

@VladislavSorokin thanks for your suggestion, I'm considering using slatejs too! – Mullah

Answer 2

I have a solution for tables in draft-js that works pretty well for us. I do not use separate editors for each cell, just regular EditorBlocks that are all part of the main editor tree. There's a working example here https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte

1. I have a "TableCell" custom block type that primarily just renders a standard EditorBlock, but uses React.createPortal to render into the applicable table cell.

2. The information necessary to recreate the table structure is stored in the metadata of the first cell of the table.

3. When rendering the first block, I render its EditorBlock component wrapped in the full DOM structure of the table. The <th>/<td> tags for all but the first cell are empty, but are given a data attribute corresponding to their position in the table.

4. Then I use ReactDOM.createPortal when rendering each of the subsequent TableCell blocks into the correct position in the table.

As far as draft-js is concerned it's just rendering blocks in the usual linear fashion. This makes editing, managing selection state, & the import/export of html no more difficult than for any other block type for the most part. Though you do have to take precautions with selections and editing that cross into or out of the table.

Oakleil