From 8c32bfb45d6bb0e5c5b0f01b073f694f95b2692e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 12 Jul 2018 12:28:24 +0200
Subject: [PATCH] [REF] web_editor: make our Summernote/BS3 work with BS4

The big plan is to remove our current editor and its customization and
replace it with an updated summernote. Meanwhile, we have to patch our
current lib directly so that it works with BS4.
---
 .../static/lib/summernote/src/js/Renderer.js  |  6 ++--
 .../lib/summernote/src/js/module/Button.js    |  4 +--
 .../static/src/js/editor/rte.summernote.js    | 30 ++++++++-----------
 .../static/src/scss/web_editor.ui.scss        |  2 ++
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index 6f5af317bfa..2c856d4b152 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -162,7 +162,7 @@ define([
       style: function (lang, options) {
         var items = options.styleTags.reduce(function (memo, v) {
           var label = lang.style[v === 'p' ? 'normal' : v];
-          return memo + '<li><a data-event="formatBlock" href="#" data-value="' + v + '">' +
+          return memo + '<li><a class="dropdown-item" data-event="formatBlock" href="#" data-value="' + v + '">' +
                    (
                      (v === 'p' || v === 'pre') ? label :
                      '<' + v + '>' + label + '</' + v + '>'
@@ -225,12 +225,12 @@ define([
         });
 
         var items = [
-          '<li><div class="btn-group">',
+          '<li class="flex"><div class="btn-group flex-column">',
           '<div class="note-palette-title">' + lang.color.background + '</div>',
           '<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>',
-          '</div><div class="btn-group">',
+          '</div><div class="btn-group flex-column">',
           '<div class="note-palette-title">' + lang.color.foreground + '</div>',
           '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">',
           lang.color.resetToDefault,
diff --git a/addons/web_editor/static/lib/summernote/src/js/module/Button.js b/addons/web_editor/static/lib/summernote/src/js/module/Button.js
index 59e3fa19f63..c6d28494cd0 100644
--- a/addons/web_editor/static/lib/summernote/src/js/module/Button.js
+++ b/addons/web_editor/static/lib/summernote/src/js/module/Button.js
@@ -21,10 +21,10 @@ define([
        * @param {Number} value
        */
       var checkDropdownMenu = function ($btn, value) {
-        $btn.find('.dropdown-menu li a').each(function () {
+        $btn.find('.dropdown-menu .dropdown-item').each(function () {
           // always compare string to avoid creating another func.
           var isChecked = ($(this).data('value') + '') === (value + '');
-          this.className = isChecked ? 'checked' : '';
+          this.className = 'dropdown-item' + (isChecked ? ' checked' : '');
         });
       };
 
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 7c394812e7e..b641839286c 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -85,10 +85,6 @@ renderer.tplPopovers = function (lang, options) {
     var $linkPopover = $popover.find('.note-link-popover');
     var $airPopover = $popover.find('.note-air-popover');
 
-    if (window === window.top) {
-        $popover.children().addClass("d-none d-md-block");
-    }
-
     //////////////// image popover
 
     // add center button for images
@@ -104,11 +100,11 @@ renderer.tplPopovers = function (lang, options) {
     var $padding = $('<div class="btn-group"/>');
     $padding.insertBefore($imagePopover.find('.btn-group:first'));
     var dropdown_content = [
-        '<li><a data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>',
-        '<li><a data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>',
-        '<li><a data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>',
-        '<li><a data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>',
-        '<li><a data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>',
+        '<li><a class="dropdown-item" data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>',
+        '<li><a class="dropdown-item" data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>',
+        '<li><a class="dropdown-item" data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>',
+        '<li><a class="dropdown-item" data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>',
+        '<li><a class="dropdown-item" data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>',
     ];
     $(tplIconButton('fa fa-plus-square-o', {
         title: _t('Padding'),
@@ -187,9 +183,9 @@ renderer.tplPopovers = function (lang, options) {
         while (node && (!node.tagName || (!node.tagName || formats.indexOf(node.tagName.toLowerCase()) === -1))) {
             node = node.parentNode;
         }
-        $format.parent().removeClass('active');
+        $format.removeClass('active');
         $format.filter('[data-value="'+(node ? node.tagName.toLowerCase() : "p")+'"]')
-            .parent().addClass("active");
+            .addClass("active");
     });
 
     //////////////// tooltip
@@ -223,13 +219,13 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
     $container.find('.note-color').removeClass('d-none');
 
     if (oStyle.image) {
-        $container.find('[data-event]').parent().removeClass("active");
+        $container.find('[data-event]').removeClass("active");
 
-        $container.find('a[data-event="padding"][data-value="small"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-small"));
-        $container.find('a[data-event="padding"][data-value="medium"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-medium"));
-        $container.find('a[data-event="padding"][data-value="large"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-large"));
-        $container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
-        $container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
+        $container.find('a[data-event="padding"][data-value="small"]').toggleClass("active", $(oStyle.image).hasClass("padding-small"));
+        $container.find('a[data-event="padding"][data-value="medium"]').toggleClass("active", $(oStyle.image).hasClass("padding-medium"));
+        $container.find('a[data-event="padding"][data-value="large"]').toggleClass("active", $(oStyle.image).hasClass("padding-large"));
+        $container.find('a[data-event="padding"][data-value="xl"]').toggleClass("active", $(oStyle.image).hasClass("padding-xl"));
+        $container.find('a[data-event="padding"][data-value=""]').toggleClass("active", !$container.find('.active a[data-event="padding"]').length);
 
         $(oStyle.image).addClass('o_we_selected_image');
 
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 9b3c2e34853..e85f04e8327 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -765,6 +765,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             border-radius: 0;
             background-color: $o-we-color-darker;
             color: $o-we-color-text-normal;
+            white-space: normal;
+
             .dropdown-item {
                 width: 100%;
                 color: $o-we-color-text-light;