[FIX] web_editor: fix classes removed from selected links

Steps to reproduce the bug :
    - In website (edit mode), add a mega menu in the Header.
    - Choose the "Cards" template for the mega menu.
    - Click on a card of the mega menu.
    - Change the url of link in the editor panel toolbar.
    - The style of the card is broken.

The issue is that when the link of the card is changed, 2 classes are
removed from the link ('text-wrap' and 'text-center').

This is from code that removes all classes starting with "text-" and
"btn-" when updating the link in the DOM. This commit fixes that by
avoiding removing classes that should never be removed there.

Note that a previous commit ([1]) had already corrected this but only
for the "btn-block" class. This commit fixes the issue in a more generic
way.

[1]: https://github.com/odoo/odoo/commit/888687b487e95b4bf4fb080118b5eb945c8ab724

opw-2954714
task-3006845

closes odoo/odoo#110186

X-original-commit: 121af26cfee8a227ce5925d3a64a99c5bb63d35f
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
This commit is contained in:
Benjamin Vray
2023-01-18 13:25:46 +01:00
parent 3a5060c691
commit 70cafe7cca
@@ -105,13 +105,19 @@ const Link = Widget.extend({
this.data.isNewWindow = this.data.isNewWindow || this.linkEl.target === '_blank';
}
const classesToKeep = [
'text-wrap', 'text-nowrap', 'text-start', 'text-center', 'text-end',
'text-truncate',
];
const keptClasses = this.data.iniClassName.split(' ').filter(className => classesToKeep.includes(className));
const allBtnColorPrefixes = /(^|\s+)(bg|text|border)(-[a-z0-9_-]*)?/gi;
const allBtnClassSuffixes = /(^|\s+)btn(?!-block)(-[a-z0-9_-]*)?/gi;
const allBtnClassSuffixes = /(^|\s+)btn(-[a-z0-9_-]*)?/gi;
const allBtnShapes = /\s*(rounded-circle|flat)\s*/gi;
this.data.className = this.data.iniClassName
.replace(allBtnColorPrefixes, ' ')
.replace(allBtnClassSuffixes, ' ')
.replace(allBtnShapes, ' ');
this.data.className += ' ' + keptClasses.join(' ');
// 'o_submit' class will force anchor to be handled as a button in linkdialog.
if (/(?:s_website_form_send|o_submit)/.test(this.data.className)) {
this.isButton = true;