Mail-App Editor: Add Tables

[AlexanderZuehr]

Is your feature request related to a problem? Please describe.

Hello @ChristophWurst,
i've seen you added the function to add an image in the mail-app editor.
I appreciate your effort amd would like to ask if it is possible to also add tables to the editor and a way to hide the table borders?
My company as many others uses html signatures and i would like to try to rebuild the html signature in the mail-app from nextcloud. Your new function to add an image helps alot but we also do have text next to the image and i think the easiest way is to solve this problem is to have a table with hidden borders and two collumns. On one site the picture and the other site with text.

I like to hear what you think about that.

Thanks alot.

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

[ChristophWurst]

That should be possible with a ckeditor plugin: https://www.npmjs.com/package/@ckeditor/ckeditor5-table

[AlexanderZuehr]

@ChristophWurst Do i need to install that plugin into nextcloud or is this some kind of patch that is needed.
As stupid as it sounds, i probably rely on your skills to help me with that.

[ChristophWurst]

It's a plugin that a developer has to install inside this app. Do you have any front-end developers in your company? I can assist getting this in. It shouldn't require too much effort.

[AlexanderZuehr]

@ChristophWurst
I've found the ckeditor dependencies in the package.json.
Would it work to simply add the @ckeditor/ckeditor5-table line into that?
Furthermore is it possible to merge this code for the future so that updates of the mail app implement this feature by standard without the need of a developer of my company building the app for our nextcloud.

[ChristophWurst]

https://github.com/nextcloud/mail/blob/main/src/components/TextEditor.vue has to be adjusted as well.

And yes, this should go through a pull request rather than a local change on your system.

[AlexanderZuehr]

@ChristophWurst
Hey, after some trying and a lot of endurance i've got a build working with the tables plugin.
I was able to create a table and edit it.

As you can see in the first picture it shows the table as i configured it, the borders are invisible.
But as i receive the mail there is a recognizable gap in front of the table and in front of the inserted image, furthermore the table is not saving/sending the fonts i configured. I can live with the fonts, but that gap in front of the whole table and the image is causing me headaches. I hope you can help me here again.

Thank you.

[ChristophWurst]

It sounds like the rendering of the HTML table depends on the browser engine on the receiving end and how it styles the table.

We have had similar issues with the text in a HTML message. It didn't look the same while editing vs when received.

Some of this can be fixed by sending css along with the message that ensures consistent styling between the two states.

[AlexanderZuehr]

@ChristophWurst
Is there an easy way to implement this?

The whole table implementation otherwise makes no sense for me.

[ChristophWurst]

I think it could work in a similar way as #2538

[AlexanderZuehr]

@ChristophWurst
I've read #2538 but i am not able to understand if there is a solution to my problem or what to do.

[ChristophWurst]

I don't have the time to set up a environment to replicate your issue at the moment. See if injecting styles and defining how tables should be rendered remedies the issue. Otherwise I'm currently out of ideas as well.

Another approach would be to compose emails with tables from Gmail and Thunderbird and inspect their sources as a reference.

[AlexanderZuehr]

Thank you very much for your help.