diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
index 438c9d9a336..dc27e0182f5 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
@@ -47,6 +47,8 @@ import {
unwrapContents,
peek,
rightPos,
+ getAdjacentPreviousSiblings,
+ getAdjacentNextSiblings,
} from './utils/utils.js';
import { editorCommands } from './commands/commands.js';
import { Powerbox } from './powerbox/Powerbox.js';
@@ -1721,6 +1723,30 @@ export class OdooEditor extends EventTarget {
this.commandbarTablePicker.show();
},
},
+ {
+ groupName: 'Widgets',
+ title: '3 Stars',
+ description: 'Insert a rating over 3 stars.',
+ fontawesome: 'fa-star-o',
+ callback: () => {
+ let html = '';
+ html += Array(3).fill().map(() => '').join('');
+ html += '';
+ this.execCommand('insertHTML', html);
+ },
+ },
+ {
+ groupName: 'Widgets',
+ title: '5 Stars',
+ description: 'Insert a rating over 5 stars.',
+ fontawesome: 'fa-star',
+ callback: () => {
+ let html = '';
+ html += Array(5).fill().map(() => '').join('');
+ html += '';
+ this.execCommand('insertHTML', html);
+ },
+ },
];
this.commandBar = new Powerbox({
editable: this.editable,
@@ -2524,6 +2550,29 @@ export class OdooEditor extends EventTarget {
this.historyStep();
}
}
+
+ // handle stars
+ if (node.nodeType === Node.ELEMENT_NODE && node.className.includes('fa-star') &&
+ node.parentElement && node.parentElement.className.includes('o_stars')) {
+ const previousStars = getAdjacentPreviousSiblings(node, sib => (
+ sib.nodeType === Node.ELEMENT_NODE && sib.className.includes('fa-star')
+ ));
+ const nextStars = getAdjacentNextSiblings(node, sib => (
+ sib.nodeType === Node.ELEMENT_NODE && sib.className.includes('fa-star')
+ ));
+ if (nextStars.length || previousStars.length) {
+ const shouldToggleOff = node.classList.contains('fa-star') &&
+ (!nextStars[0] || !nextStars[0].classList.contains('fa-star'));
+ for (const star of [...previousStars, node]) {
+ star.classList.toggle('fa-star-o', shouldToggleOff);
+ star.classList.toggle('fa-star', !shouldToggleOff);
+ };
+ for (const star of nextStars) {
+ star.classList.toggle('fa-star-o', true);
+ star.classList.toggle('fa-star', false);
+ };
+ }
+ }
}
_onDocumentKeydown(ev) {
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 2af44a87004..6d84b6ed568 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -159,6 +159,11 @@ ol > li.o_indent, ul > li.o_indent {
}
}
+// Stars widget
+.o_stars .fa.fa-star {
+ color: gold;
+}
+
// Medias
img.o_we_custom_image {
// Images added with the editor are .img-fluid by default but should