[IMP] web_editor: add custom colors for editor colorpicker

- Custom color can now be applied to elements
- Find used custom colors in the page and add them as colorpicker
  suggestions
- Current color is selected in the picker when you open the custom
  color wizard

task-37974
Closes #26274

1 files changed, 6 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index 7169c27ee8d..0ef7881b920 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -985,6 +985,9 @@ renderer.tplButtonInfo.color = function (lang, options) {
     var foreColorItems = [
         '<li><div class="btn-group flex-column">',
         '<div class="note-color-palette" data-target-event="foreColor"></div>',
+        '<h6 class="note-custom-color mt8" data-event="customColor" data-value="foreColor" title="' + lang.color.custom + '">',
+        lang.color.custom + '</h6>',
+        '<div class="note-custom-color-palette" data-target-event="foreColor"></div>',
         '</div></li>',
     ];
     var backColorItems = [
@@ -992,6 +995,9 @@ renderer.tplButtonInfo.color = function (lang, options) {
         '<div class="note-color-reset" data-event="backColor" data-value="inherit" title="' + lang.color.transparent + '">',
         lang.color.setTransparent + '</div>',
         '<div class="note-color-palette" data-target-event="backColor"></div>',
+        '<h6 class="note-custom-color mt8" data-event="customColor" data-value="backColor" title="' + lang.color.custom + '">',
+        lang.color.custom + '</h6>',
+        '<div class="note-custom-color-palette" data-target-event="backColor"></div>',
         '</div></li>',
     ];
     var foreColorButton = renderer.getTemplate().button(foreColorButtonLabel, {