Quill: Row and Col Or Plugin

[MarcGodard]

I am wondering if there is a way to write an overwrite on the table functionality to replace table elements with divs with classes such as <div class="row"><div class="col"></div></div>

[padraigfl]

Assuming this is Quill v2, you could expand the table module to use those tags here https://github.com/quilljs/quill/blob/develop/formats/table.js and add attributes into the various generators, I guess?

Although this will likely cause huge issues when copying and pasting as I think (and I might be wrong here) the matchers wont be able to detect it's a table.

[MarcGodard]

Any guides out there on adding this as a full plugin so there isnt a copy paste issue?

[padraigfl]

There's hardly anything about how the existing table plugins operate at all, I would say, within the confines of Quill, stick with html tables unless you've a really good reason not to; tables are pretty much the most complicated thing you're likely to deal with within a rich text editor with so many edge cases to deal with.
Just to give you an idea of what're you're dealing with: the tables in Quill v2 do not accept line breaks within their cells, pasting in content that's spread across multiple lines will split the table

If tables are more important than editor choice I would go with an editor which has more advanced table support (e.g. ProseMirror looks like it has decent table support and is also fully open source to the best of my knowledge) because you're gonna go insane working with tables in Quill.

[NeonCreativeStudios]

I may attempt creating a plugin for it, but I had a look at the source code for quill-better-table and it looks incredibly daunting.

I also don't really have the free time available, but this is a feature I would benefit from also. It would allow me to use it as a full page CMS editor. Columns are common in website content.

If you wanted to attempt it, I think studying the table / quill-better-table source code and tweaking it could be the starting point. But it's not a walk in the park

[NeonCreativeStudios]

Actually, I'm going to try my best to create this plugin. Wish me luck lol

[padraigfl]

RE: quill-better-table, bear in mind that plugin is for quill v2 so while it's probably the best table plugin for quill by a long shot, it's for a version that's made very little progress over 2 years and is likely to have breaking changes.
Maybe improving the one that's baked into quill v2 on a fork would be the right way to go?

quill-table, which looks like something one person threw together about 3 or 4 years ago and has hardly progressed since, is really buggy but might be a better starting point. I might do a fork of it to give it some actual documentation of how it works if people are interested.

Really though... if you need tables, use a different editor. Because of how quill works the data for tables will pretty much never be readable imo and you're gonna hit some kind of issue when someone wants to put a block within a table

===========

Sample data from a delta op for a 2x2 table with text on each side from a modified quill-table, cells are marked in the text with r_c_L_ for row number, column number, line number

[
{"insert":"here is some text\nand more on another line, the table starts next line\nr1c1L1"}
{"attributes":{"td":"0vr5488sscn|yw25qah2uoe|az7nfiox5tq|1"},"insert":"\n"},
{"insert":"r1c1L2"},
{"attributes":{"td":"0vr5488sscn|yw25qah2uoe|az7nfiox5tq|1"},"insert":"\n"},
{"insert":"r1c2L1"},
{"attributes":{"td":"0vr5488sscn|yw25qah2uoe|5ot4neywwtb|1"},"insert":"\n"},
{"insert":"r2c1L1"},
{"attributes":{"td":"0vr5488sscn|0paf8rjji2k|5t06pog2pa9|1"},"insert":"\n"},
{"attributes":{"height":"18","width":"18"},"insert":{"image":"linkRemoved"}},
{"insert":"​r2c1L2"},
{"attributes":{"td":"0vr5488sscn|0paf8rjji2k|5t06pog2pa9|1"},"insert":"\n"},
{"insert":"r2c1L3"},
{"attributes":{"td":"0vr5488sscn|0paf8rjji2k|5t06pog2pa9|1"},"insert":"\n"},
{"insert":"r2c2L1"},
{"attributes":{"td":"0vr5488sscn|0paf8rjji2k|l5ef3vct1wh|1"},"insert":"\n"},
{"insert":"table has ended"}
]

[NeonCreativeStudios]

I understand that Quill isn't ideal for this, but columns would be significantly less complicated than tables. No need for rows and columns - we only want a single row.

I made some progress but I'm struggling to replicate better-table's child multi-line blots.

The red multi-line DIV is supposed to be inside the columns. Anyone want to help?
Trying to do the parent child structure of:

1. Container blot (Bootstrap .row class)
2. Block blot (Bootstrap .col class)
3. Container blot (multi-line container)
4. Block blot (multi-line row)

Struggling with #3 and #4

Any smaller working examples of multi-line blots? Any outside of better-table?

[padraigfl]

quill-table on v1 does multiline with very little hassle, it handles it by having every new line character within the table contain the ID for that particular cell. a new line character with a different ID will instantiate a new cell (including the inline content before it) whereas one without an ID will result in the end of the table.

Feel like there's a decent chance quill-better-table handles it the same way?

Now, the big issue with multiline is that block elements wont work without rewriting (e.g. lists, heading tags)

[NeonCreativeStudios]

No better-table actually handles it by inserting new blot for each line, I think the resulting delta is actually multidimensional rather than flat.
Update: Just checked, it's flat like all deltas.

It's also still maintained, last release was posted just an hour ago. I could keep playing with the better-table source code to figure it out but it will likely take me a long time.

[NeonCreativeStudios]

Oh damn I never noticed that those things don't work in better-table. So lists won't work even if I replicate what better-table is doing. That's a shame :(

Also images won't work unless I extend and modify the image class etc.

Top of my list for Quill 3.0 would be proper nesting support which will allow for good non-hacky column and table plugins.

[padraigfl]

Images work okay I think? they did for me the brief time I used it

Personally I think Quill just shouldn't support tables or anything that promotes nesting beyond a basic list and should be upfront about why it doesn't support them. The whole data handling approach is flat deliberately and turns the content into a linear stream. There's little need to be doing a more complex approach when things like ProseMirror and TinyMCE exist.

I said it before in another issue but a "You should not use quill if..." part of the documentation would probably save Jason et al from an absolute ton of stress. It's used in 22k projects on github and has maybe less than 20 plugins built for it, it'd make a lot more sense to focus on the pros of its simplicity over its extensibility because people clearly haven't found it that extendable.

[NeonCreativeStudios]

I've considered ProseMirror, TinyMCE and Slate but the perfect WYSIWYG solution doesn't exist and perhaps may never exist. Either they are HTML only, not open source, too large or use external dependencies I don't wish to add to my project (jQuery / react / vue etc.)

You're right images should work. Once I have more time to spend on this, I'll send an update.

Being unable to use lists won't be too much of an issue for me

[sachinrekhi]

@NeonCreativeStudios Curious what your issue was with Slate specifically? It looks quite promising as an editor.

[NeonCreativeStudios]

Update: just realised headings don't work inside custom blocks, I would possibly need to customise my heading blocks.

@sachinrekhi I think Slate depends on react? React is in their package.json so I suspect so. So probably isn't the most lightweight? Also their examples website appears to have stopped working? https://www.slatejs.org/examples/tables

[padraigfl]

Slate looked like it was a bit more modern with cleaner data but more a replacement for quill than a significantly powerful alternative, good but tables are a very hard problem. It does seem a lot more actively maintained in comparison to quill though.

ProseMirror seemed like the best fully open source option to me (TinyMCE and CKEditor require a license to remove the credit text iirc) https://react-prosemirror-example.now.sh/ I gather it's more heavy duty though. The guy who leads it looks like a bit of an open source superstar too https://github.com/marijnh

To backtrack though, you really shouldn't be using Quill v2 dev version if the product is expected to be maintained. With v1 you've years of people posting issues on here and stackoverflow and getting answers to them, it's pretty stable.