HSL colors from Ckeditor not supported in some e-mailclients

[dev-marcel]

Mautic Version

5.0.x series

Way of installing

I downloaded a release from https://www.mautic.org/mautic-releases

PHP version

8.1

What browsers are you seeing the problem on?

Not relevant

What happened?

The Ckeditor used in the template editor uses HSL colors in tekst, this is not supported by quit some mailclients, for Example all Outlook clients: https://www.campaignmonitor.com/css/color-background/hsl-colors/

How can we reproduce this issue?

Step 1: Make a MJML e-mail (for example with the truly personal theme)
Step 2: Edit the e-mail, dubble click on some text
Step 3: Change the color of the text
Step 4: Send test mail and check it in Outlook

We should set a configuration in the colorpicker: https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_colorpicker_utils-ColorPickerOutputFormat.html, prefered rgb since its fully supported for all mail clients (https://www.campaignmonitor.com/css/color-background/rgb-colors/)

Relevant log output

No response

Code of Conduct

• I confirm that I have read and agree to follow this project's Code of Conduct

---

Care about this issue? Want to get it resolved sooner? If you are a member of Mautic, you can add some funds to the Bounties Project so that the person who completes this task can claim those funds once it is merged by a member of the core team! Read the docs here.

[dev-marcel]

So i figured out it a it is an option for Ckeditor:
.fontColor = { colorPicker: { format: 'hex' } };

for now as quickfix i added it to getCkeConf in the builder.js of GrapeJs.

This fixes the color picker giving Hex colors, but not the default colors the editor shows. This can also be overidden by
fontColor: {
colors: [{
color: '#E64C4C',
label: 'Red'
},
{
color: '#E6994C',
label: 'Orange'
},
{
color: '#E6E64C',
label: 'Yellow'
},
]
},