web-components icon indicating copy to clipboard operation
web-components copied to clipboard

[rich-text-editor] Integrate table support once updated to quill 2

Open stefanuebe opened this issue 6 months ago • 1 comments

Describe your motivation

One feature, that many rich text editors nowadays provide is the ability to create, modify and style tables. This is a feature, that our RTE currently does not provide due to the lacking function in the used quill editor.

However, many users requested that feature, which finally led to the enhanced rich text editor (ERTE) tables extension. Unfortunately, the ERTE is not synced with the basic RTE and thus new features need to be implemented there as well. This leads to a functionality gap, that, together with not having official bug support, some users are not willing to risk.

To prevent users from not selecting Vaadin because of a lack of such a basic feature or needing users to develop their own feature, we should integrate some kind of table support.

Describe the solution you'd like

The easiest solution would be to integrate an existing quill plugin, so that we do not have to write and maintain it on our own.

https://github.com/attoae/quill-table-better seems like a good candidate for that.

Describe alternatives you've considered

Based on having quill 2 integrated into out RTE, providing an easy mechanism to allow devs include any quill 2 plugin would make it possible for devs to integrate the above mentioned table.

Additional context

No response

stefanuebe avatar Jun 25 '25 09:06 stefanuebe

Some implementation notes:

  1. Looking at the quill-table-better source code, I see that it imports some modules from quill e.g. clipboard. If we want to use this plugin, we'll likely have to fork it because we'll keep using our Quill fork published as @vaadin/quill.
  2. Also the Quill 2 branch has quill-delta replaced with quill-delta-es for first class ES modules support. Same will need to be applied to the forked version of the plugin to avoid having two versions of Delta.
  3. The CSS from the quill-table-better will need to be added to the base styles of the web component (shadow DOM).
  4. The UI used by quill-table-better is using @jaames/ico color picker which is ~10kB gzipped (in comparison, vanilla-colorful is < 3Kb) and also not actively maintained as its README states.

Overall the library looks way too complicated, especially the part related to table controls. I would suggest us to start with the basic tables support which is available in Quill v2 with some basic UI e.g. by reusing code from quill-table-ui library.

web-padawan avatar Jun 25 '25 09:06 web-padawan