mail icon indicating copy to clipboard operation
mail copied to clipboard

Mail-App Editor: Add Tables

Open AlexanderZuehr opened this issue 3 years ago • 12 comments

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

AlexanderZuehr avatar Sep 16 '22 09:09 AlexanderZuehr

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

ChristophWurst avatar Sep 16 '22 09:09 ChristophWurst

@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.

AlexanderZuehr avatar Sep 16 '22 09:09 AlexanderZuehr

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.

ChristophWurst avatar Sep 16 '22 10:09 ChristophWurst

@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.

AlexanderZuehr avatar Sep 16 '22 11:09 AlexanderZuehr

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.

ChristophWurst avatar Sep 16 '22 11:09 ChristophWurst

@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. Sending

Receiving

AlexanderZuehr avatar Sep 19 '22 12:09 AlexanderZuehr

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.

ChristophWurst avatar Sep 19 '22 12:09 ChristophWurst

@ChristophWurst Is there an easy way to implement this?

The whole table implementation otherwise makes no sense for me.

AlexanderZuehr avatar Sep 19 '22 12:09 AlexanderZuehr

I think it could work in a similar way as https://github.com/nextcloud/mail/pull/2538

ChristophWurst avatar Sep 19 '22 12:09 ChristophWurst

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

AlexanderZuehr avatar Sep 19 '22 12:09 AlexanderZuehr

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.

ChristophWurst avatar Sep 19 '22 12:09 ChristophWurst

Thank you very much for your help.

AlexanderZuehr avatar Sep 19 '22 13:09 AlexanderZuehr