pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: prevent crash when colorpickers receive split values

Browse Source 
Steps to reproduce:
- Edit
- Add a snippet with columns
- Save
- HTML editor
- Set up a border on one column of the snippet with different colors for
  the top/right/bottom/left sides
- Edit
- Click on the column => crash

This is only an example, but if a colorpicker widget is linked to a
SnippetOption instance's `selectStyle` method designed to handle the
"border-color" property of an element, the value received can be split
if the item uses different colors for its top/right/bottom/left borders.
For instance, you could receive "red blue" if the item has red top and
bottom borders and blue left and right borders. In that case, the
colorpicker widget code would try to add the class "bg-red blue" on its
preview item which would crash because of the space inside).

After this commit, we simply do not show any color for this case.

opw-2803311

closes odoo/odoo#103842

X-original-commit: 484230481cd7195e2c992e673a2b6e627baf505d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
qsm-odoo
2022-10-21 21:21:47 +02:00
parent ead52d72a7
commit 9f3463aad3
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+21 -7
View File
@@ -1487,14 +1487,28 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
if (this._value) {
if (ColorpickerWidget.isCSSColor(this._value)) {
this.colorPreviewEl.style.backgroundColor = this._value;
} else if (!weUtils.isColorGradient(this._value)) {
if (weUtils.EDITOR_COLOR_CSS_VARIABLES.includes(this._value)) {
this.colorPreviewEl.style.backgroundColor = `var(--we-cp-${this._value}`;
} else {
this.colorPreviewEl.classList.add(`bg-${this._value}`);
}
} else {
} else if (weUtils.isColorGradient(this._value)) {
this.colorPreviewEl.style.backgroundImage = this._value;
} else if (weUtils.EDITOR_COLOR_CSS_VARIABLES.includes(this._value)) {
this.colorPreviewEl.style.backgroundColor = `var(--we-cp-${this._value}`;
} else {
// Checking if the className actually exists seems overkill but
// it is actually needed to prevent a crash. As an example, if a
// colorpicker widget is linked to a SnippetOption instance's
// `selectStyle` method designed to handle the "border-color"
// property of an element, the value received can be split if
// the item uses different colors for its top/right/bottom/left
// borders. For instance, you could receive "red blue" if the
// item as red top and bottom borders and blue left and right
// borders, in which case you would reach this `else` and try to
// add the class "bg-red blue" which would crash because of the
// space inside). In that case, we simply do not show any color.
// We could choose to handle this split-value case specifically
// but it was decided that this is enough for the moment.
const className = `bg-${this._value}`;
if (classes.includes(className)) {
this.colorPreviewEl.classList.add(className);
}
}
}
// If the palette was already opened (e.g. modifying a gradient), the new DOM state must be