[REV] wev_editor, website: revert saas-12.2 editor

This commit reverts the saas-12.2 editor by putting back the editor
of Odoo 12.

The saas-12.2 editor was an intermediate work between the previous
editor of Odoo 12 and the new one slated for Odoo 13. It was unstable
but it was supposed to be replaced by the new editor of version 13.

However, since the new editor has been postponed to Odoo 14, the
saas-12.2 one would have been staying in Odoo 13, which would have
been a nightmare to maintain. To avoid this outcome, we chose to
put back the 12.0 editor in its place.

This has the particular advantage that Odoo 13 will share the same
bugfixes as Odoo 12 and 11 as they all run under the same core
editor, while the saas-12.2 one would have been an entirely
different beast to maintain.

This is a partial revert of f2969923.

Part of PR 35677.

Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>

addons/web_editor/static/src/js/base.js

@@ -0,0 +1,157 @@
+odoo.define('web_editor.base', function (require) {
+'use strict';
+
+var ajax = require('web.ajax');
+var session = require('web.session');
+
+var domReady = $.Deferred();
+$(domReady.resolve.bind(domReady));
+
+return {
+    /**
+     * Retrieves all the CSS rules which match the given parser (Regex).
+     *
+     * @param {Regex} filter
+     * @returns {Object[]} Array of CSS rules descriptions (objects). A rule is
+     *          defined by 3 values: 'selector', 'css' and 'names'. 'selector'
+     *          is a string which contains the whole selector, 'css' is a string
+     *          which contains the css properties and 'names' is an array of the
+     *          first captured groups for each selector part. E.g.: if the
+     *          filter is set to match .fa-* rules and capture the icon names,
+     *          the rule:
+     *              '.fa-alias1::before, .fa-alias2::before { hello: world; }'
+     *          will be retrieved as
+     *              {
+     *                  selector: '.fa-alias1::before, .fa-alias2::before',
+     *                  css: 'hello: world;',
+     *                  names: ['.fa-alias1', '.fa-alias2'],
+     *              }
+     */
+    cacheCssSelectors: {},
+    getCssSelectors: function (filter) {
+        if (this.cacheCssSelectors[filter]) {
+            return this.cacheCssSelectors[filter];
+        }
+        this.cacheCssSelectors[filter] = [];
+        var sheets = document.styleSheets;
+        for (var i = 0; i < sheets.length; i++) {
+            var rules;
+            try {
+                // try...catch because Firefox not able to enumerate
+                // document.styleSheets[].cssRules[] for cross-domain
+                // stylesheets.
+                rules = sheets[i].rules || sheets[i].cssRules;
+            } catch (e) {
+                console.warn("Can't read the css rules of: " + sheets[i].href, e);
+                continue;
+            }
+            if (!rules) {
+                continue;
+            }
+
+            for (var r = 0 ; r < rules.length ; r++) {
+                var selectorText = rules[r].selectorText;
+                if (!selectorText) {
+                    continue;
+                }
+                var selectors = selectorText.split(/\s*,\s*/);
+                var data = null;
+                for (var s = 0; s < selectors.length; s++) {
+                    var match = selectors[s].trim().match(filter);
+                    if (!match) {
+                        continue;
+                    }
+                    if (!data) {
+                        data = {
+                            selector: match[0],
+                            css: rules[r].cssText.replace(/(^.*\{\s*)|(\s*\}\s*$)/g, ''),
+                            names: [match[1]]
+                        };
+                    } else {
+                        data.selector += (', ' + match[0]);
+                        data.names.push(match[1]);
+                    }
+                }
+                if (data) {
+                    this.cacheCssSelectors[filter].push(data);
+                }
+            }
+        }
+        return this.cacheCssSelectors[filter];
+    },
+    /**
+     * List of font icons to load by editor. The icons are displayed in the media
+     * editor and identified like font and image (can be colored, spinned, resized
+     * with fa classes).
+     * To add font, push a new object {base, parser}
+     *
+     * - base: class who appear on all fonts
+     * - parser: regular expression used to select all font in css stylesheets
+     *
+     * @type Array
+     */
+    fontIcons: [{base: 'fa', parser: /\.(fa-(?:\w|-)+)::?before/i}],
+    /**
+     * Searches the fonts described by the @see fontIcons variable.
+     */
+    computeFonts: _.once(function () {
+        var self = this;
+        _.each(this.fontIcons, function (data) {
+            data.cssData = self.getCssSelectors(data.parser);
+            data.alias = _.flatten(_.map(data.cssData, _.property('names')));
+        });
+    }),
+    /**
+     * If a widget needs to be instantiated on page loading, it needs to wait
+     * for appropriate resources to be loaded. This function returns a Deferred
+     * which is resolved when the dom is ready, the session is bound
+     * (translations loaded) and the XML is loaded. This should however not be
+     * necessary anymore as widgets should not be parentless and should then be
+     * instantiated (directly or not) by the page main component (webclient,
+     * website root, editor bar, ...). The DOM will be ready then, the main
+     * component is in charge of waiting for the session and the XML can be
+     * lazy loaded thanks to the @see Widget.xmlDependencies key.
+     *
+     * @returns {Deferred}
+     */
+    ready: function () {
+        return $.when(domReady, session.is_bound, ajax.loadXML());
+    },
+};
+});
+
+//==============================================================================
+
+odoo.define('web_editor.context', function (require) {
+'use strict';
+
+function getContext(context) {
+    var html = document.documentElement;
+    return _.extend({
+        lang: (html.getAttribute('lang') || 'en_US').replace('-', '_'),
+    }, context || {});
+}
+function getExtraContext(context) {
+    var html = document.documentElement;
+    return _.extend(getContext(), {
+        editable: !!(html.dataset.editable || $('[data-oe-model]').length), // temporary hack, this should be done in python
+        translatable: !!html.dataset.translatable,
+        edit_translations: !!html.dataset.edit_translations,
+    }, context || {});
+}
+
+return {
+    get: getContext,
+    getExtra: getExtraContext,
+};
+});
+
+//==============================================================================
+
+odoo.define('web_editor.ready', function (require) {
+'use strict';
+
+var base = require('web_editor.base');
+
+return base.ready();
+});

addons/web_editor/static/src/js/common/ace.js

@@ -2,12 +2,13 @@ odoo.define('web_editor.ace', function (require) {
 'use strict';
 
 var ajax = require('web.ajax');
-var config = require('web.config');
 var concurrency = require('web.concurrency');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
+var weContext = require('web_editor.context');
 var localStorage = require('web.local_storage');
+var session = require('web.session');
 
 var _t = core._t;
 
@@ -119,22 +120,20 @@ var ViewEditor = Widget.extend({
     jsLibs: [
         '/web/static/lib/ace/ace.js',
         [
-            '/web/static/lib/ace/javascript_highlight_rules.js',
             '/web/static/lib/ace/mode-xml.js',
             '/web/static/lib/ace/mode-scss.js',
-            '/web/static/lib/ace/mode-js.js',
             '/web/static/lib/ace/theme-monokai.js'
         ]
     ],
     events: {
         'click .o_ace_type_switcher_choice': '_onTypeChoice',
         'change .o_res_list': '_onResChange',
-        'click .o_ace_filter': '_onFilterChange',
+        'click .js_include_bundles': '_onIncludeBundlesChange',
+        'click .js_include_all_scss': '_onIncludeAllSCSSChange',
         'click button[data-action=save]': '_onSaveClick',
         'click button[data-action=reset]': '_onResetClick',
         'click button[data-action=format]': '_onFormatClick',
         'click button[data-action=close]': '_onCloseClick',
-        'click #ace-view-id > .alert-warning .close': '_onCloseWarningClick'
     },
 
     /**
@@ -152,35 +151,30 @@ var ViewEditor = Widget.extend({
      * @param {string} [options.position=right]
      * @param {boolean} [options.doNotLoadViews=false]
      * @param {boolean} [options.doNotLoadSCSS=false]
-     * @param {boolean} [options.doNotLoadJS=false]
      * @param {boolean} [options.includeBundles=false]
-     * @param {string} [options.filesFilter=custom]
+     * @param {boolean} [options.includeAllSCSS=false]
      * @param {string[]} [options.defaultBundlesRestriction]
      */
     init: function (parent, viewKey, options) {
         this._super.apply(this, arguments);
 
-        this.context = options.context;
-
         this.viewKey = viewKey;
         this.options = _.defaults({}, options, {
             position: 'right',
             doNotLoadViews: false,
             doNotLoadSCSS: false,
-            doNotLoadJS: false,
             includeBundles: false,
-            filesFilter: 'custom',
+            includeAllSCSS: false,
             defaultBundlesRestriction: [],
         });
 
-        this.resources = {xml: {}, scss: {}, js: {}};
-        this.editingSessions = {xml: {}, scss: {}, js: {}};
+        this.resources = {xml: {}, scss: {}};
+        this.editingSessions = {xml: {}, scss: {}};
         this.currentType = 'xml';
 
         // Alias
         this.views = this.resources.xml;
         this.scss = this.resources.scss;
-        this.js = this.resources.js;
     },
     /**
      * Loads everything the ace library needs to work.
@@ -189,10 +183,11 @@ var ViewEditor = Widget.extend({
      * @override
      */
     willStart: function () {
-        return Promise.all([
+        return $.when(
             this._super.apply(this, arguments),
+            ajax.loadLibs(this),
             this._loadResources()
-        ]);
+        );
     },
     /**
      * Initializes the library and initial view once the DOM is ready. It also
@@ -208,13 +203,11 @@ var ViewEditor = Widget.extend({
 
         this.$lists = {
             xml: this.$('#ace-view-list'),
-            scss: this.$('#ace-scss-list'),
-            js: this.$('#ace-js-list'),
+            scss: this.$('#ace-scss-list')
         };
         this.$includeBundlesArea = this.$('.oe_include_bundles');
         this.$includeAllSCSSArea = this.$('.o_include_all_scss');
         this.$viewID = this.$('#ace-view-id > span');
-        this.$warningMessage = this.$('#ace-view-id > .alert-warning');
 
         this.$formatButton = this.$('button[data-action=format]');
         this.$resetButton = this.$('button[data-action=reset]');
@@ -234,24 +227,12 @@ var ViewEditor = Widget.extend({
         var initType;
         if (this.options.initialResID) {
             initResID = this.options.initialResID;
-            if (_.isString(initResID) && initResID[0] === '/') {
-                if (_.str.endsWith(initResID, '.scss')) {
-                    initType = 'scss';
-                } else {
-                    initType = 'js';
-                }
-            } else {
-                initType = 'xml';
-            }
+            initType = (_.isString(initResID) && initResID[0] === '/') ? 'scss' : 'xml';
         } else {
             if (!this.options.doNotLoadSCSS) {
                 initResID = this.sortedSCSS[0][1][0].url; // first bundle, scss files, first one
                 initType = 'scss';
             }
-            if (!this.options.doNotLoadJS) {
-                initResID = this.sortedJS[0][1][0].url; // first bundle, js files, first one
-                initType = 'js';
-            }
             if (!this.options.doNotLoadViews) {
                 if (typeof this.viewKey === "number") {
                     initResID = this.viewKey;
@@ -339,7 +320,7 @@ var ViewEditor = Widget.extend({
      * Initializes a text editor for the specified resource.
      *
      * @private
-     * @param {integer|string} resID - the ID/URL of the view/scss/js file
+     * @param {integer|string} resID - the ID/URL of the view/scss file
      * @param {string} [type] (default to the currently selected one)
      * @returns {ace.EditSession}
      */
@@ -359,13 +340,13 @@ var ViewEditor = Widget.extend({
         return editingSession;
     },
     /**
-     * Forces the view/scss/js file identified by its ID/URL to be displayed in the
+     * Forces the view/scss file identified by its ID/URL to be displayed in the
      * editor. The method will update the resource select DOM element as well if
      * necessary.
      *
      * @private
      * @param {integer|string} resID
-     * @param {string} [type] - the type of resource (either 'xml', 'scss' or 'js')
+     * @param {string} [type] - the type of resource (either 'xml' or 'scss')
      */
     _displayResource: function (resID, type) {
         if (type) {
@@ -378,29 +359,14 @@ var ViewEditor = Widget.extend({
         }
         this.aceEditor.setSession(editingSession);
 
-        var isCustomized = false;
         if (this.currentType === 'xml') {
             this.$viewID.text(_.str.sprintf(_t("Template ID: %s"), this.views[resID].key));
-        } else if (this.currentType === 'scss') {
-            isCustomized = this.scss[resID].customized;
-            this.$viewID.text(_.str.sprintf(_t("SCSS file: %s"), resID));
         } else {
-            isCustomized = this.js[resID].customized;
-            this.$viewID.text(_.str.sprintf(_t("JS file: %s"), resID));
+            this.$viewID.text(_.str.sprintf(_t("SCSS file: %s"), resID));
         }
         this.$lists[this.currentType].select2('val', resID);
 
-        this.$resetButton.toggleClass('d-none', this.currentType === 'xml' || !isCustomized);
-
-        // TODO the warning message is always shown for XML templates but:
-        // 1) We have to implement a way to be able to reset XML templates
-        //    otherwise the warning message is not accurate
-        // 2) We should be able to detect if the XML template is customized to
-        //    not show the warning in that case
-        this.$warningMessage.toggleClass('d-none',
-            this.currentType !== 'xml' && (resID.indexOf('/user_custom_') >= 0 || isCustomized));
-
-        this.aceEditor.resize(true);
+        this.$resetButton.toggleClass('d-none', this.currentType === 'xml' || !this.scss[resID].customized);
     },
     /**
      * Formats the current resource being vizualized.
@@ -432,15 +398,14 @@ var ViewEditor = Widget.extend({
      * is loading the activate views, index them and build their hierarchy.
      *
      * @private
-     * @returns {Promise}
+     * @returns {Deferred}
      */
     _loadResources: function () {
         // Reset resources
-        this.resources = {xml: {}, scss: {}, js: {}};
-        this.editingSessions = {xml: {}, scss: {}, js: {}};
+        this.resources = {xml: {}, scss: {}};
+        this.editingSessions = {xml: {}, scss: {}};
         this.views = this.resources.xml;
         this.scss = this.resources.scss;
-        this.js = this.resources.js;
 
         // Load resources
         return this._rpc({
@@ -449,15 +414,12 @@ var ViewEditor = Widget.extend({
                 key: this.viewKey,
                 get_views: !this.options.doNotLoadViews,
                 get_scss: !this.options.doNotLoadSCSS,
-                get_js: !this.options.doNotLoadJS,
                 bundles: this.options.includeBundles,
-                bundles_restriction: this.options.filesFilter === 'all' ? [] : this.options.defaultBundlesRestriction,
-                only_user_custom_files: this.options.filesFilter === 'custom',
+                bundles_restriction: this.options.includeAllSCSS ? [] : this.options.defaultBundlesRestriction,
             },
         }).then((function (resources) {
             _processViews.call(this, resources.views || []);
-            _processJSorSCSS.call(this, resources.scss || [], 'scss');
-            _processJSorSCSS.call(this, resources.js || [], 'js');
+            _processSCSS.call(this, resources.scss || []);
         }).bind(this));
 
         function _processViews(views) {
@@ -498,24 +460,20 @@ var ViewEditor = Widget.extend({
             });
         }
 
-        function _processJSorSCSS(data, type) {
-            // The received scss or js data is already sorted by bundle and DOM order
-            if (type === 'scss') {
-                this.sortedSCSS = data;
-            } else {
-                this.sortedJS = data;
-            }
+        function _processSCSS(scss) {
+            // The received scss data is already sorted by bundle and DOM order
+            this.sortedSCSS = scss;
 
             // Store the URL ungrouped by bundle and use the URL as key (resource ID)
-            var resources = type === 'scss' ? this.scss : this.js;
-            _.each(data, function (bundleInfos) {
+            var self = this;
+            _.each(scss, function (bundleInfos) {
                 _.each(bundleInfos[1], function (info) { info.bundle_xmlid = bundleInfos[0].xmlid; });
-                _.extend(resources, _.indexBy(bundleInfos[1], 'url'));
+                _.extend(self.scss, _.indexBy(bundleInfos[1], 'url'));
             });
         }
     },
     /**
-     * Forces the view/scss/js file identified by its ID/URL to be reset to the way
+     * Forces the view/scss file identified by its ID/URL to be reset to the way
      * it was before the user started editing it.
      *
      * @todo views reset is not supported yet
@@ -523,57 +481,59 @@ var ViewEditor = Widget.extend({
      * @private
      * @param {integer|string} [resID] (default to the currently selected one)
      * @param {string} [type] (default to the currently selected one)
-     * @returns {Promise}
+     * @returns {Deferred}
      */
     _resetResource: function (resID, type) {
         resID = resID || this._getSelectedResource();
         type = type || this.currentType;
 
         if (this.currentType === 'xml') {
-            return Promise.reject(_t("Reseting views is not supported yet"));
+            return $.Defered().reject(_t("Reseting views is not supported yet"));
         } else {
-            var resource = type === 'scss' ? this.scss[resID] : this.js[resID];
             return this._rpc({
-                route: '/web_editor/reset_asset',
+                route: '/web_editor/reset_scss',
                 params: {
                     url: resID,
-                    bundle_xmlid: resource.bundle_xmlid,
+                    bundle_xmlid: this.scss[resID].bundle_xmlid,
                 },
             });
         }
     },
     /**
-     * Saves a unique SCSS or JS file.
+     * Saves an unique SCSS file.
      *
      * @private
      * @param {Object} session - contains the 'id' (url) and the 'text' of the
-     *                         SCSS or JS file to save.
-     * @return {Promise} status indicates if the save is finished or if an
+     *                         SCSS file to save.
+     * @return {Deferred} status indicates if the save is finished or if an
      *                    error occured.
      */
-    _saveSCSSorJS: function (session) {
+    _saveSCSS: function (session) {
+        var def = $.Deferred();
+
         var self = this;
-        var sessionIdEndsWithJS = _.string.endsWith(session.id, '.js');
-        var bundleXmlID = sessionIdEndsWithJS ? this.js[session.id].bundle_xmlid : this.scss[session.id].bundle_xmlid;
-        var fileType = sessionIdEndsWithJS ? 'js' : 'scss';
-        return self._rpc({
-            route: '/web_editor/save_asset',
+        this._rpc({
+            route: '/web_editor/save_scss',
             params: {
                 url: session.id,
-                bundle_xmlid: bundleXmlID,
+                bundle_xmlid: this.scss[session.id].bundle_xmlid,
                 content: session.text,
-                file_type: fileType,
             },
         }).then(function () {
-            self._toggleDirtyInfo(session.id, fileType, false);
+            self._toggleDirtyInfo(session.id, 'scss', false);
+            def.resolve();
+        }, function (source, error) {
+            def.reject(session, error);
         });
+
+        return def;
     },
     /**
      * Saves every resource that has been modified. If one cannot be saved, none
      * is saved and an error message is displayed.
      *
      * @private
-     * @return {Promise} status indicates if the save is finished or if an
+     * @return {Deferred} status indicates if the save is finished or if an
      *                    error occured.
      */
     _saveResources: function () {
@@ -602,7 +562,7 @@ var ViewEditor = Widget.extend({
                 }
             }
         }).bind(this));
-        if (errorFound) return Promise.reject(errorFound);
+        if (errorFound) return $.Deferred().reject(errorFound);
 
         var defs = [];
         var mutex = new concurrency.Mutex();
@@ -611,15 +571,13 @@ var ViewEditor = Widget.extend({
             _toSave = _.sortBy(_toSave, 'id').reverse();
             _.each(_toSave, function (session) {
                 defs.push(mutex.exec(function () {
-                    return (type === 'xml' ? self._saveView(session) : self._saveSCSSorJS(session));
+                    return (type === 'xml' ? self._saveView(session) : self._saveSCSS(session));
                 }));
             });
         }).bind(this));
 
-        var self = this;
-        return Promise.all(defs).guardedCatch(function (results) {
-            var error = results[1];
-            Dialog.alert(self, '', {
+        return $.when.apply($, defs).fail((function (session, error) {
+            Dialog.alert(this, '', {
                 title: _t("Server error"),
                 $content: $('<div/>').html(
                     _t("A server error occured. Please check you correctly signed in and that the file you are saving is correctly formatted.")
@@ -627,32 +585,34 @@ var ViewEditor = Widget.extend({
                     + error
                 )
             });
-        });
+        }).bind(this));
     },
     /**
      * Saves an unique XML view.
      *
      * @private
      * @param {Object} session - the 'id' and the 'text' of the view to save.
-     * @returns {Promise} status indicates if the save is finished or if an
+     * @returns {Deferred} status indicates if the save is finished or if an
      *                     error occured.
      */
     _saveView: function (session) {
+        var def = $.Deferred();
+
         var self = this;
-        return new Promise(function (resolve, reject) {
-            self._rpc({
-                model: 'ir.ui.view',
-                method: 'write',
-                args: [[session.id], {arch: session.text}],
-            }, {
-                noContextKeys: 'lang',
-            }).then(function () {
-                self._toggleDirtyInfo(session.id, 'xml', false);
-                resolve();
-            }, function (source, error) {
-                reject(session, error);
-            });
+        this._rpc({
+            model: 'ir.ui.view',
+            method: 'write',
+            args: [[session.id], {arch: session.text}],
+        }, {
+            noContextKeys: 'lang',
+        }).then(function () {
+            self._toggleDirtyInfo(session.id, 'xml', false);
+            def.resolve();
+        }, function (source, error) {
+            def.reject(session, error);
         });
+
+        return def;
     },
     /**
      * Shows a line which produced an error. Red color is added to the editor,
@@ -704,11 +664,11 @@ var ViewEditor = Widget.extend({
         }
     },
     /**
-     * Switches to the SCSS, XML or JS edition. Calling this method will adapt all
+     * Switches to the SCSS or XML edition. Calling this method will adapt all
      * DOM elements to keep the editor consistent.
      *
      * @private
-     * @param {string} type - either 'xml', 'scss' or 'js'
+     * @param {string} type - either 'xml' or 'scss'
      */
     _switchType: function (type) {
         this.currentType = type;
@@ -716,10 +676,9 @@ var ViewEditor = Widget.extend({
         _.each(this.$lists, function ($list, _type) { $list.toggleClass('d-none', type !== _type); });
         this.$lists[type].change();
 
-        this.$includeBundlesArea.toggleClass('d-none', this.currentType !== 'xml' || !config.isDebug());
-        this.$includeAllSCSSArea.toggleClass('d-none', this.currentType !== 'scss' || !config.isDebug());
-        this.$includeAllSCSSArea.find('[data-value="restricted"]').toggleClass('d-none', this.options.defaultBundlesRestriction.length === 0);
-        this.$formatButton.toggleClass('d-none', this.currentType !== 'xml');
+        this.$includeBundlesArea.toggleClass('d-none', this.currentType === 'scss' || !session.debug);
+        this.$includeAllSCSSArea.toggleClass('d-none', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
+        this.$formatButton.toggleClass('d-none', this.currentType === 'scss');
     },
     /**
      * Updates the select option DOM element associated with a particular resID
@@ -764,10 +723,21 @@ var ViewEditor = Widget.extend({
         });
 
         this.$lists.scss.empty();
-        _populateList(this.sortedSCSS, this.$lists.scss, 5);
-
-        this.$lists.js.empty();
-        _populateList(this.sortedJS, this.$lists.js, 3);
+        _.each(this.sortedSCSS, function (bundleInfos) {
+            var $optgroup = $('<optgroup/>', {
+                label: bundleInfos[0].name,
+            }).appendTo(self.$lists.scss);
+            _.each(bundleInfos[1], function (scssInfo) {
+                var name = scssInfo.url.substring(_.lastIndexOf(scssInfo.url, '/') + 1, scssInfo.url.length - 5);
+                $optgroup.append($('<option/>', {
+                    value: scssInfo.url,
+                    text: name,
+                    selected: currentId === scssInfo.url,
+                    'data-debug': scssInfo.url,
+                    'data-customized': scssInfo.customized
+                }));
+            });
+        });
 
         this.$lists.xml.select2('destroy');
         this.$lists.xml.select2({
@@ -781,30 +751,6 @@ var ViewEditor = Widget.extend({
             formatSelection: _formatDisplay.bind(this, true),
         });
         this.$lists.scss.data('select2').dropdown.addClass('o_ace_select2_dropdown');
-        this.$lists.js.select2('destroy');
-        this.$lists.js.select2({
-            formatResult: _formatDisplay.bind(this, false),
-            formatSelection: _formatDisplay.bind(this, true),
-        });
-        this.$lists.js.data('select2').dropdown.addClass('o_ace_select2_dropdown');
-
-        function _populateList(sortedData, $list, lettersToRemove) {
-            _.each(sortedData, function (bundleInfos) {
-                var $optgroup = $('<optgroup/>', {
-                    label: bundleInfos[0].name,
-                }).appendTo($list);
-                _.each(bundleInfos[1], function (dataInfo) {
-                    var name = dataInfo.url.substring(_.lastIndexOf(dataInfo.url, '/') + 1, dataInfo.url.length - lettersToRemove);
-                    $optgroup.append($('<option/>', {
-                        value: dataInfo.url,
-                        text: name,
-                        selected: currentId === dataInfo.url,
-                        'data-debug': dataInfo.url,
-                        'data-customized': dataInfo.customized
-                    }));
-                });
-            });
-        }
 
         function _formatDisplay(isSelected, data) {
             var $elem = $(data.element);
@@ -824,7 +770,7 @@ var ViewEditor = Widget.extend({
                 }));
             }
 
-            if (!isSelected && config.isDebug() && $elem.data('debug')) {
+            if (!isSelected && session.debug && $elem.data('debug')) {
                 $div.append($('<span/>', {
                     text: ' (' + $elem.data('debug') + ')',
                     class: 'ml4 small text-muted',
@@ -856,20 +802,25 @@ var ViewEditor = Widget.extend({
         this._formatResource();
     },
     /**
-     * Called when a filter dropdown item is cliked. Reload the resources
-     * according to the new filter and make it visually active.
+     * Called when the checkbox which indicates if all SCSS should be included
+     * is toggled -> reloads the resources accordingly.
      *
      * @private
      * @param {Event} ev
      */
-    _onFilterChange: function (ev) {
-        var $item = $(ev.target);
-        $item.addClass('active').siblings().removeClass('active');
-        if ($item.data('type') === 'xml') {
-            this.options.includeBundles = $(ev.target).data('value') === 'all';
-        } else {
-            this.options.filesFilter = $item.data('value');
-        }
+    _onIncludeAllSCSSChange: function (ev) {
+        this.options.includeAllSCSS = $(ev.target).prop('checked');
+        this._loadResources().then(this._updateViewSelectDOM.bind(this));
+    },
+    /**
+     * Called when the checkbox which indicates if assets bundles should be
+     * included is toggled -> reloads the resources accordingly.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onIncludeBundlesChange: function (ev) {
+        this.options.includeBundles = $(ev.target).prop('checked');
         this._loadResources().then(this._updateViewSelectDOM.bind(this));
     },
     /**
@@ -915,13 +866,6 @@ var ViewEditor = Widget.extend({
         ev.preventDefault();
         this._switchType($(ev.target).data('type'));
     },
-    /**
-     * Allows to hide the warning message without removing it from the DOM
-     * -> by default Bootstrap removes alert from the DOM
-     */
-    _onCloseWarningClick: function () {
-        this.$warningMessage.addClass('d-none');
-    },
 });
 
 return ViewEditor;

addons/web_editor/static/src/js/editor/editor.js

@@ -0,0 +1,286 @@
+odoo.define('web_editor.editor', function (require) {
+'use strict';
+
+var Dialog = require('web.Dialog');
+var Widget = require('web.Widget');
+var core = require('web.core');
+var rte = require('web_editor.rte');
+var snippetsEditor = require('web_editor.snippet.editor');
+
+var _t = core._t;
+
+var EditorMenuBar = Widget.extend({
+    template: 'web_editor.editorbar',
+    xmlDependencies: ['/web_editor/static/src/xml/editor.xml'],
+    events: {
+        'click button[data-action=save]': '_onSaveClick',
+        'click button[data-action=cancel]': '_onCancelClick',
+    },
+    custom_events: {
+        request_history_undo_record: '_onHistoryUndoRecordRequest',
+        request_save: '_onSaveRequest',
+    },
+
+    /**
+     * Initializes RTE and snippets menu.
+     *
+     * @constructor
+     */
+    init: function (parent) {
+        var self = this;
+        var res = this._super.apply(this, arguments);
+        this.rte = new rte.Class(this);
+        this.rte.on('rte:start', this, function () {
+            self.trigger('rte:start');
+        });
+
+        // Snippets edition
+        var $editable = this.rte.editable();
+        window.__EditorMenuBar_$editable = $editable; // TODO remove this hack asap
+        this.snippetsMenu = new snippetsEditor.Class(this, $editable);
+
+        return res;
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        var defs = [this._super.apply(this, arguments)];
+
+        core.bus.on('editor_save_request', this, this.save);
+        core.bus.on('editor_discard_request', this, this.cancel);
+
+        $('.dropdown-toggle').dropdown();
+
+        $(document).on('keyup', function (event) {
+            if ((event.keyCode === 8 || event.keyCode === 46)) {
+                var $target = $(event.target).closest('.o_editable');
+                if (!$target.is(':has(*:not(p):not(br))') && !$target.text().match(/\S/)) {
+                    $target.empty();
+                }
+            }
+        });
+        $(document).on('click', '.note-editable', function (ev) {
+            ev.preventDefault();
+        });
+        $(document).on('submit', '.note-editable form .btn', function (ev) {
+            ev.preventDefault(); // Disable form submition in editable mode
+        });
+        $(document).on('hide.bs.dropdown', '.dropdown', function (ev) {
+            // Prevent dropdown closing when a contenteditable children is focused
+            if (ev.originalEvent
+                    && $(ev.target).has(ev.originalEvent.target).length
+                    && $(ev.originalEvent.target).is('[contenteditable]')) {
+                ev.preventDefault();
+            }
+        });
+
+        this.rte.start();
+
+        var flag = false;
+        window.onbeforeunload = function (event) {
+            if (rte.history.getEditableHasUndo().length && !flag) {
+                flag = true;
+                _.defer(function () { flag=false; });
+                return _t('This document is not saved!');
+            }
+        };
+
+        // Snippets menu
+        defs.push(this.snippetsMenu.insertAfter(this.$el));
+        this.rte.editable().find('*').off('mousedown mouseup click');
+
+        return $.when.apply($, defs).then(function () {
+            self.trigger_up('edit_mode');
+        });
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        core.bus.off('editor_save_request', this, this._onSaveRequest);
+        core.bus.off('editor_discard_request', this, this._onDiscardRequest);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Asks the user if he really wants to discard its changes (if there are
+     * some of them), then simply reload the page if he wants to.
+     *
+     * @param {boolean} [reload=true]
+     *        true if the page has to be reloaded when the user answers yes
+     *        (do nothing otherwise but add this to allow class extension)
+     * @returns {Deferred}
+     */
+    cancel: function (reload) {
+        var self = this;
+        var def = $.Deferred();
+        if (!rte.history.getEditableHasUndo().length) {
+            def.resolve();
+        } else {
+            var confirm = Dialog.confirm(this, _t("If you discard the current edition, all unsaved changes will be lost. You can cancel to return to the edition mode."), {
+                confirm_callback: def.resolve.bind(def),
+            });
+            confirm.on('closed', def, def.reject);
+        }
+        return def.then(function () {
+            if (reload !== false) {
+                window.onbeforeunload = null;
+                return self._reload();
+            }
+        });
+    },
+    /**
+     * Asks the snippets to clean themself, then saves the page, then reloads it
+     * if asked to.
+     *
+     * @param {boolean} [reload=true]
+     *        true if the page has to be reloaded after the save
+     * @returns {Deferred}
+     */
+    save: function (reload) {
+        var self = this;
+        var defs = [];
+        this.trigger_up('ready_to_save', {defs: defs});
+        return $.when.apply($, defs).then(function () {
+            self.snippetsMenu.cleanForSave();
+            return self._saveCroppedImages();
+        }).then(function () {
+            return self.rte.save();
+        }).then(function () {
+            if (reload !== false) {
+                return self._reload();
+            }
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Reloads the page in non-editable mode, with the right scrolling.
+     *
+     * @private
+     * @returns {Deferred} (never resolved, the page is reloading anyway)
+     */
+    _reload: function () {
+        window.location.hash = 'scrollTop=' + window.document.body.scrollTop;
+        if (window.location.search.indexOf('enable_editor') >= 0) {
+            window.location.href = window.location.href.replace(/&?enable_editor(=[^&]*)?/g, '');
+        } else {
+            window.location.reload(true);
+        }
+        return $.Deferred();
+    },
+    /**
+     * @private
+     */
+    _saveCroppedImages: function () {
+        var self = this;
+        var defs = _.map(this.rte.editable().find('.o_cropped_img_to_save'), function (croppedImg) {
+            var $croppedImg = $(croppedImg);
+            $croppedImg.removeClass('o_cropped_img_to_save');
+
+            var resModel = $croppedImg.data('crop:resModel');
+            var resID = $croppedImg.data('crop:resID');
+            var cropID = $croppedImg.data('crop:id');
+            var mimetype = $croppedImg.data('crop:mimetype');
+            var originalSrc = $croppedImg.data('crop:originalSrc');
+
+            var datas = $croppedImg.attr('src').split(',')[1];
+
+            if (!cropID) {
+                var name = originalSrc + '.crop';
+                return self._rpc({
+                    model: 'ir.attachment',
+                    method: 'create',
+                    args: [{
+                        res_model: resModel,
+                        res_id: resID,
+                        name: name,
+                        datas_fname: name,
+                        datas: datas,
+                        mimetype: mimetype,
+                        url: originalSrc, // To save the original image that was cropped
+                    }],
+                }).then(function (attachmentID) {
+                    return self._rpc({
+                        model: 'ir.attachment',
+                        method: 'generate_access_token',
+                        args: [[attachmentID]],
+                    }).then(function (access_token) {
+                        $croppedImg.attr('src', '/web/image/' + attachmentID + '?access_token=' + access_token[0]);
+                    });
+                });
+            } else {
+                return self._rpc({
+                    model: 'ir.attachment',
+                    method: 'write',
+                    args: [[cropID], {datas: datas}],
+                });
+            }
+        });
+        return $.when.apply($, defs);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when the "Discard" button is clicked -> discards the changes.
+     *
+     * @private
+     */
+    _onCancelClick: function () {
+        this.cancel();
+    },
+    /**
+     * Called when an element askes to record an history undo -> records it.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onHistoryUndoRecordRequest: function (ev) {
+        this.rte.historyRecordUndo(ev.data.$target, ev.data.event);
+    },
+    /**
+     * Called when the "Save" button is clicked -> saves the changes.
+     *
+     * @private
+     */
+    _onSaveClick: function () {
+        this.save();
+    },
+    /**
+     * Called when a discard request is received -> discard the page content
+     * changes.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onDiscardRequest: function (ev) {
+        this.cancel(ev.data.reload).then(ev.data.onSuccess, ev.data.onFailure);
+    },
+    /**
+     * Called when a save request is received -> saves the page content.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onSaveRequest: function (ev) {
+        ev.stopPropagation();
+        this.save(ev.data.reload).then(ev.data.onSuccess, ev.data.onFailure);
+    },
+});
+
+return {
+    Class: EditorMenuBar,
+};
+});

addons/web_editor/static/src/js/editor/rte.js

@@ -0,0 +1,749 @@
+odoo.define('web_editor.rte', function (require) {
+'use strict';
+
+var base = require('web_editor.base');
+var concurrency = require('web.concurrency');
+var core = require('web.core');
+var Widget = require('web.Widget');
+var weContext = require('web_editor.context');
+var summernote = require('web_editor.summernote');
+var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
+
+var _t = core._t;
+
+// Summernote Lib (neek change to make accessible: method and object)
+var dom = summernote.core.dom;
+var range = summernote.core.range;
+
+// Change History to have a global History for all summernote instances
+var History = function History($editable) {
+    var aUndo = [];
+    var pos = 0;
+    var toSnap;
+
+    this.makeSnap = function (event, rng) {
+        rng = rng || range.create();
+        var elEditable = $(rng && rng.sc).closest('.o_editable')[0];
+        if (!elEditable) {
+            return false;
+        }
+        return {
+            event: event,
+            editable: elEditable,
+            contents: elEditable.innerHTML,
+            bookmark: rng && rng.bookmark(elEditable),
+            scrollTop: $(elEditable).scrollTop()
+        };
+    };
+
+    this.applySnap = function (oSnap) {
+        var $editable = $(oSnap.editable);
+
+        if (document.documentMode) {
+            $editable.removeAttr('contentEditable').removeProp('contentEditable');
+        }
+
+        $editable.trigger('content_will_be_destroyed');
+        $editable.html(oSnap.contents).scrollTop(oSnap.scrollTop);
+        $editable.trigger('content_was_recreated');
+
+        $('.oe_overlay').remove();
+        $('.note-control-selection').hide();
+
+        $editable.trigger('content_changed');
+
+        try {
+            var r = oSnap.editable.innerHTML === '' ? range.create(oSnap.editable, 0) : range.createFromBookmark(oSnap.editable, oSnap.bookmark);
+            r.select();
+        } catch (e) {
+            console.error(e);
+            return;
+        }
+
+        $(document).trigger('click');
+        $('.o_editable *').filter(function () {
+            var $el = $(this);
+            if ($el.data('snippet-editor')) {
+                $el.removeData();
+            }
+        });
+
+
+        _.defer(function () {
+            var target = dom.isBR(r.sc) ? r.sc.parentNode : dom.node(r.sc);
+            if (!target) {
+                return;
+            }
+
+            $editable.trigger('applySnap');
+
+            var evt = document.createEvent('MouseEvents');
+            evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, target);
+            target.dispatchEvent(evt);
+
+            $editable.trigger('keyup');
+        });
+    };
+
+    this.undo = function () {
+        if (!pos) { return; }
+        var _toSnap = toSnap;
+        if (_toSnap) {
+            this.saveSnap();
+        }
+        if (!aUndo[pos] && (!aUndo[pos] || aUndo[pos].event !== 'undo')) {
+            var temp = this.makeSnap('undo');
+            if (temp && (!pos || temp.contents !== aUndo[pos-1].contents)) {
+                aUndo[pos] = temp;
+            } else {
+               pos--;
+            }
+        } else if (_toSnap) {
+            pos--;
+        }
+        this.applySnap(aUndo[Math.max(--pos,0)]);
+        while (pos && (aUndo[pos].event === 'blur' || (aUndo[pos+1].editable ===  aUndo[pos].editable && aUndo[pos+1].contents ===  aUndo[pos].contents))) {
+            this.applySnap(aUndo[--pos]);
+        }
+    };
+
+    this.hasUndo = function () {
+        return (toSnap && (toSnap.event !== 'blur' && toSnap.event !== 'activate' && toSnap.event !== 'undo')) ||
+            !!_.find(aUndo.slice(0, pos+1), function (undo) {
+                return undo.event !== 'blur' && undo.event !== 'activate' && undo.event !== 'undo';
+            });
+    };
+
+    this.getEditableHasUndo = function () {
+        var editable = [];
+        if ((toSnap && (toSnap.event !== 'blur' && toSnap.event !== 'activate' && toSnap.event !== 'undo'))) {
+            editable.push(toSnap.editable);
+        }
+        _.each(aUndo.slice(0, pos+1), function (undo) {
+            if (undo.event !== 'blur' && undo.event !== 'activate' && undo.event !== 'undo') {
+                editable.push(undo.editable);
+            }
+        });
+        return _.uniq(editable);
+    };
+
+    this.redo = function () {
+        if (!aUndo[pos+1]) { return; }
+        this.applySnap(aUndo[++pos]);
+        while (aUndo[pos+1] && aUndo[pos].event === 'active') {
+            this.applySnap(aUndo[pos++]);
+        }
+    };
+
+    this.hasRedo = function () {
+        return aUndo.length > pos+1;
+    };
+
+    this.recordUndo = function ($editable, event, internal_history) {
+        var self = this;
+        if (!$editable) {
+            var rng = range.create();
+            if (!rng) return;
+            $editable = $(rng.sc).closest('.o_editable');
+        }
+
+        if (aUndo[pos] && (event === 'applySnap' || event === 'activate')) {
+            return;
+        }
+
+        if (!internal_history) {
+            if (!event || !toSnap || !aUndo[pos-1] || toSnap.event === 'activate') { // don't trigger change for all keypress
+                setTimeout(function () {
+                    $editable.trigger('content_changed');
+                },0);
+            }
+        }
+
+        if (aUndo[pos]) {
+            pos = Math.min(pos, aUndo.length);
+            aUndo.splice(pos, aUndo.length);
+        }
+
+        // => make a snap when the user change editable zone (because: don't make snap for each keydown)
+        if (toSnap && (toSnap.split || !event || toSnap.event !== event || toSnap.editable !== $editable[0])) {
+            this.saveSnap();
+        }
+
+        if (pos && aUndo[pos-1].editable !== $editable[0]) {
+            var snap = this.makeSnap('blur', range.create(aUndo[pos-1].editable, 0));
+            pos++;
+            aUndo.push(snap);
+        }
+
+        if (range.create()) {
+            toSnap = self.makeSnap(event);
+        } else {
+            toSnap = false;
+        }
+    };
+
+    this.splitNext = function () {
+        if (toSnap) {
+            toSnap.split = true;
+        }
+    };
+
+    this.saveSnap = function () {
+        if (toSnap) {
+            if (!aUndo[pos]) {
+                pos++;
+            }
+            aUndo.push(toSnap);
+            delete toSnap.split;
+            toSnap = null;
+        }
+    };
+};
+var history = new History();
+
+// jQuery extensions
+$.extend($.expr[':'], {
+    o_editable: function (node, i, m) {
+        while (node) {
+            if (node.className && _.isString(node.className)) {
+                if (node.className.indexOf('o_not_editable')!==-1 ) {
+                    return false;
+                }
+                if (node.className.indexOf('o_editable')!==-1 ) {
+                    return true;
+                }
+            }
+            node = node.parentNode;
+        }
+        return false;
+    },
+});
+$.fn.extend({
+    focusIn: function () {
+        if (this.length) {
+            range.create(dom.firstChild(this[0]), 0).select();
+        }
+        return this;
+    },
+    focusInEnd: function () {
+        if (this.length) {
+            var last = dom.lastChild(this[0]);
+            range.create(last, dom.nodeLength(last)).select();
+        }
+        return this;
+    },
+    selectContent: function () {
+        if (this.length) {
+            var next = dom.lastChild(this[0]);
+            range.create(dom.firstChild(this[0]), 0, next, next.textContent.length).select();
+        }
+        return this;
+    },
+});
+
+// RTE
+var RTEWidget = Widget.extend({
+    /**
+     * @constructor
+     */
+    init: function (parent, getConfig) {
+        var self = this;
+        this._super.apply(this, arguments);
+
+        this.init_bootstrap_carousel = $.fn.carousel;
+        this.edit_bootstrap_carousel = function () {
+            var res = self.init_bootstrap_carousel.apply(this, arguments);
+            // off bootstrap keydown event to remove event.preventDefault()
+            // and allow to change cursor position
+            $(this).off('keydown.bs.carousel');
+            return res;
+        };
+
+        this._getConfig = getConfig || this._getDefaultConfig;
+
+        base.computeFonts();
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+
+        this.saving_mutex = new concurrency.Mutex();
+
+        $.fn.carousel = this.edit_bootstrap_carousel;
+
+        $(document).on('click.rte keyup.rte', function () {
+            var current_range = {};
+            try {
+                current_range = range.create() || {};
+            } catch (e) {
+                // if range is on Restricted element ignore error
+            }
+            var $popover = $(current_range.sc).closest('[contenteditable]');
+            var popover_history = ($popover.data()||{}).NoteHistory;
+            if (!popover_history || popover_history === history) return;
+            var editor = $popover.parent('.note-editor');
+            $('button[data-event="undo"]', editor).attr('disabled', !popover_history.hasUndo());
+            $('button[data-event="redo"]', editor).attr('disabled', !popover_history.hasRedo());
+        });
+        $(document).on('mousedown.rte activate.rte', this, this._onMousedown.bind(this));
+        $(document).on('mouseup.rte', this, this._onMouseup.bind(this));
+
+        $('.o_not_editable').attr('contentEditable', false);
+
+        var $editable = this.editable();
+
+        // When a undo/redo is performed, the whole DOM is changed so we have
+        // to prepare for it (website will restart animations for example)
+        // TODO should be better handled
+        $editable.on('content_will_be_destroyed', function (ev) {
+            self.trigger_up('content_will_be_destroyed', {
+                $target: $(ev.currentTarget),
+            });
+        });
+        $editable.on('content_was_recreated', function (ev) {
+            self.trigger_up('content_was_recreated', {
+                $target: $(ev.currentTarget),
+            });
+        });
+
+        $editable.addClass('o_editable')
+        .data('rte', this)
+        .each(function () {
+            var $node = $(this);
+
+            // fallback for firefox iframe display:none see https://github.com/odoo/odoo/pull/22610
+            var computedStyles = window.getComputedStyle(this) || window.parent.getComputedStyle(this);
+            // add class to display inline-block for empty t-field
+            if (computedStyles.display === 'inline' && $node.data('oe-type') !== 'image') {
+                $node.addClass('o_is_inline_editable');
+            }
+        });
+
+        // start element observation
+        $(document).on('content_changed', '.o_editable', function (ev) {
+            self.trigger_up('rte_change', {target: ev.target});
+            if (!ev.__isDirtyHandled) {
+                $(this).addClass('o_dirty');
+                ev.__isDirtyHandled = true;
+            }
+        });
+
+        $('#wrapwrap, .o_editable').on('click.rte', '*', this, this._onClick.bind(this));
+
+        $('body').addClass('editor_enable');
+
+        $(document.body)
+            .tooltip({
+                selector: '[data-oe-readonly]',
+                container: 'body',
+                trigger: 'hover',
+                delay: { 'show': 1000, 'hide': 100 },
+                placement: 'bottom',
+                title: _t("Readonly field")
+            })
+            .on('click', function () {
+                $(this).tooltip('hide');
+            });
+
+        $(document).trigger('mousedown');
+        this.trigger('rte:start');
+
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.cancel();
+        this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Stops the RTE.
+     */
+    cancel: function () {
+        if (this.$last) {
+            this.$last.destroy();
+            this.$last = null;
+        }
+
+        $.fn.carousel = this.init_bootstrap_carousel;
+
+        $(document).off('.rte');
+        $('#wrapwrap, .o_editable').off('.rte');
+
+        $('.o_not_editable').removeAttr('contentEditable');
+
+        $(document).off('click.rte keyup.rte mousedown.rte activate.rte mouseup.rte');
+        $(document).off('content_changed').removeClass('o_is_inline_editable').removeData('rte');
+        $(document).tooltip('dispose');
+        $('body').removeClass('editor_enable');
+        this.trigger('rte:stop');
+    },
+    /**
+     * Returns the editable areas on the page.
+     *
+     * @returns {jQuery}
+     */
+    editable: function () {
+        return $('#wrapwrap [data-oe-model]')
+            .not('.o_not_editable')
+            .filter(function () {
+                return !$(this).closest('.o_not_editable').length;
+            })
+            .not('link, script')
+            .not('[data-oe-readonly]')
+            .not('img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]')
+            .not('.oe_snippet_editor')
+            .add('.o_editable');
+    },
+    /**
+     * Records the current state of the given $target to be able to undo future
+     * changes.
+     *
+     * @see History.recordUndo
+     * @param {jQuery} $target
+     * @param {string} event
+     * @param {boolean} internal_history
+     */
+    historyRecordUndo: function ($target, event, internal_history) {
+        $target = $($target);
+        var rng = range.create();
+        var $editable = $(rng && rng.sc).closest('.o_editable');
+        if (!rng || !$editable.length) {
+            $editable = $target.closest('.o_editable');
+            rng = range.create($target.closest('*')[0],0);
+        } else {
+            rng = $editable.data('range') || rng;
+        }
+        try {
+            // TODO this line might break for unknown reasons. I suppose that
+            // the created range is an invalid one. As it might be tricky to
+            // adapt that line and that it is not a critical one, temporary fix
+            // is to ignore the errors that this generates.
+            rng.select();
+        } catch (e) {
+            console.log('error', e);
+        }
+        history.recordUndo($editable, event, internal_history);
+    },
+    /**
+     * Searches all the dirty element on the page and saves them one by one. If
+     * one cannot be saved, this notifies it to the user and restarts rte
+     * edition.
+     *
+     * @param {Object} [context] - the context to use for saving rpc, default to
+     *                           the editor context found on the page
+     * @return {Deferred} rejected if the save cannot be done
+     */
+    save: function (context) {
+        var self = this;
+
+        $('.o_editable')
+            .destroy()
+            .removeClass('o_editable o_is_inline_editable');
+
+        var $dirty = $('.o_dirty');
+        $dirty
+            .removeAttr('contentEditable')
+            .removeClass('o_dirty oe_carlos_danger o_is_inline_editable');
+        var defs = _.map($dirty, function (el) {
+            var $el = $(el);
+
+            $el.find('[class]').filter(function () {
+                if (!this.getAttribute('class').match(/\S/)) {
+                    this.removeAttribute('class');
+                }
+            });
+
+            // TODO: Add a queue with concurrency limit in webclient
+            // https://github.com/medikoo/deferred/blob/master/lib/ext/function/gate.js
+            return self.saving_mutex.exec(function () {
+                return self._saveElement($el, context || weContext.get())
+                .then(function () {
+                    $el.removeClass('o_dirty');
+                }, function (response) {
+                    // because ckeditor regenerates all the dom, we can't just
+                    // setup the popover here as everything will be destroyed by
+                    // the DOM regeneration. Add markings instead, and returns a
+                    // new rejection with all relevant info
+                    var id = _.uniqueId('carlos_danger_');
+                    $el.addClass('o_dirty oe_carlos_danger ' + id);
+                    var html = (response.data.exception_type === 'except_osv');
+                    if (html) {
+                        var msg = $('<div/>', {text: response.data.message}).html();
+                        var data = msg.substring(3, msg.length  -2).split(/', u'/);
+                        response.data.message = '<b>' + data[0] + '</b>' + data[1];
+                    }
+                    $('.o_editable.' + id)
+                        .removeClass(id)
+                        .popover({
+                            html: html,
+                            trigger: 'hover',
+                            content: response.data.message,
+                            placement: 'auto top',
+                        })
+                        .popover('show');
+                });
+            });
+        });
+
+        return $.when.apply($, defs).then(function () {
+            window.onbeforeunload = null;
+        }, function (failed) {
+            // If there were errors, re-enable edition
+            self.cancel();
+            self.start();
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * When the users clicks on an editable element, this function allows to add
+     * external behaviors.
+     *
+     * @private
+     * @param {jQuery} $editable
+     */
+    _enableEditableArea: function ($editable) {
+        if ($editable.data('oe-type') === "monetary") {
+            $editable.attr('contenteditable', false);
+            $editable.find('.oe_currency_value').attr('contenteditable', true);
+        }
+        if ($editable.is('[data-oe-model]') && !$editable.is('[data-oe-model="ir.ui.view"]') && !$editable.is('[data-oe-type="html"]')) {
+            $editable.data('layoutInfo').popover().find('.btn-group:not(.note-history)').remove();
+        }
+    },
+    /**
+     * When an element enters edition, summernote is initialized on it. This
+     * function returns the default configuration for the summernote instance.
+     *
+     * @see _getConfig
+     * @private
+     * @param {jQuery} $editable
+     * @returns {Object}
+     */
+    _getDefaultConfig: function ($editable) {
+        return {
+            'airMode' : true,
+            'focus': false,
+            'airPopover': [
+                ['style', ['style']],
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['para', ['ul', 'ol', 'paragraph']],
+                ['table', ['table']],
+                ['insert', ['link', 'picture']],
+                ['history', ['undo', 'redo']],
+            ],
+            'styleWithSpan': false,
+            'inlinemedia' : ['p'],
+            'lang': 'odoo',
+            'onChange': function (html, $editable) {
+                $editable.trigger('content_changed');
+            },
+            'colors': summernoteCustomColors,
+        };
+    },
+    /**
+     * Gets jQuery cloned element with internal text nodes escaped for XML
+     * storage.
+     *
+     * @private
+     * @param {jQuery} $el
+     * @return {jQuery}
+     */
+    _getEscapedElement: function ($el) {
+        var escaped_el = $el.clone();
+        var to_escape = escaped_el.find('*').addBack();
+        to_escape = to_escape.not(to_escape.filter('object,iframe,script,style,[data-oe-model][data-oe-model!="ir.ui.view"]').find('*').addBack());
+        to_escape.contents().each(function () {
+            if (this.nodeType === 3) {
+                this.nodeValue = $('<div />').text(this.nodeValue).html();
+            }
+        });
+        return escaped_el;
+    },
+    /**
+     * Saves one (dirty) element of the page.
+     *
+     * @private
+     * @param {jQuery} $el - the element to save
+     * @param {Object} context - the context to use for the saving rpc
+     * @param {boolean} [withLang=false]
+     *        false if the lang must be omitted in the context (saving "master"
+     *        page element)
+     */
+    _saveElement: function ($el, context, withLang) {
+        return this._rpc({
+            model: 'ir.ui.view',
+            method: 'save',
+            args: [
+                $el.data('oe-id'),
+                this._getEscapedElement($el).prop('outerHTML'),
+                $el.data('oe-xpath') || null,
+            ],
+            context: context,
+        }, withLang ? undefined : {
+            noContextKeys: 'lang',
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when any editable element is clicked -> Prevents default browser
+     * action for the element.
+     *
+     * @private
+     * @param {Event} e
+     */
+    _onClick: function (e) {
+        e.preventDefault();
+    },
+    /**
+     * Called when the mouse is pressed on the document -> activate element
+     * edition.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onMousedown: function (ev) {
+        var $target = $(ev.target);
+        var $editable = $target.closest('.o_editable');
+
+        if (!$editable.length || $.summernote.core.dom.isContentEditableFalse($target)) {
+            return;
+        }
+
+        // Removes strange _moz_abspos attribute when it appears. Cannot
+        // find another solution which works in all cases. A grabber still
+        // appears at the same time which I did not manage to remove.
+        // TODO find a complete and better solution
+        _.defer(function () {
+            $editable.find('[_moz_abspos]').removeAttr('_moz_abspos');
+        });
+
+        if ($target.is('a')) {
+            /**
+             * Remove content editable everywhere and add it on the link only so that characters can be added
+             * and removed at the start and at the end of it.
+             */
+            $target.attr('contenteditable', true);
+            _.defer(function () {
+                $editable.not($target).attr('contenteditable', false);
+                $target.focus();
+            });
+
+            // Once clicked outside, remove contenteditable on link and reactive all
+            $(document).on('mousedown.reactivate_contenteditable', function (e) {
+                if ($target.is(e.target)) return;
+                $target.removeAttr('contenteditable');
+                $editable.attr('contenteditable', true);
+                $(document).off('mousedown.reactivate_contenteditable');
+            });
+        }
+
+        if (this && this.$last && (!$editable.length || this.$last[0] !== $editable[0])) {
+            var $destroy = this.$last;
+            history.splitNext();
+
+            _.delay(function () {
+                var id = $destroy.data('note-id');
+                $destroy.destroy().removeData('note-id').removeAttr('data-note-id');
+                $('#note-popover-'+id+', #note-handle-'+id+', #note-dialog-'+id+'').remove();
+            }, 150); // setTimeout to remove flickering when change to editable zone (re-create an editor)
+            this.$last = null;
+        }
+        if ($editable.length && (!this.$last || this.$last[0] !== $editable[0])) {
+            $editable.summernote(this._getConfig($editable));
+
+            $editable.data('NoteHistory', history);
+            this.$last = $editable;
+
+            // firefox & IE fix
+            try {
+                document.execCommand('enableObjectResizing', false, false);
+                document.execCommand('enableInlineTableEditing', false, false);
+                document.execCommand('2D-position', false, false);
+            } catch (e) { /* */ }
+            document.body.addEventListener('resizestart', function (evt) {evt.preventDefault(); return false;});
+            document.body.addEventListener('movestart', function (evt) {evt.preventDefault(); return false;});
+            document.body.addEventListener('dragstart', function (evt) {evt.preventDefault(); return false;});
+
+            if (!range.create()) {
+                $editable.focusIn();
+            }
+
+            if (dom.isImg($target[0])) {
+                $target.trigger('mousedown'); // for activate selection on picture
+            }
+
+            this._enableEditableArea($editable);
+        }
+    },
+    /**
+     * Called when the mouse is unpressed on the document.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onMouseup: function (ev) {
+        var $target = $(ev.target);
+        var $editable = $target.closest('.o_editable');
+
+        if (!$editable.length) {
+            return;
+        }
+
+        var self = this;
+        _.defer(function () {
+            self.historyRecordUndo($target, 'activate',  true);
+        });
+
+        // Browsers select different content from one to another after a
+        // triple click (especially: if triple-clicking on a paragraph on
+        // Chrome, blank characters of the element following the paragraph are
+        // selected too)
+        //
+        // The triple click behavior is reimplemented for all browsers here
+        if (ev.originalEvent.detail === 3) {
+            // Select the whole content inside the deepest DOM element that was
+            // triple-clicked
+            range.create(ev.target, 0, ev.target, ev.target.childNodes.length).select();
+        }
+    },
+});
+
+return {
+    Class: RTEWidget,
+    history: history,
+};
+});
+
+odoo.define('web_editor.rte.summernote_custom_colors', function (require) {
+'use strict';
+
+return [
+    ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
+    ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
+    ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],
+    ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],
+    ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],
+    ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],
+    ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],
+    ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
+];
+});

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -5,7 +5,6 @@ var core = require('web.core');
 var dom = require('web.dom');
 var Widget = require('web.Widget');
 var options = require('web_editor.snippets.options');
-var Wysiwyg = require('web_editor.wysiwyg');
 
 var _t = core._t;
 
@@ -25,7 +24,6 @@ var SnippetEditor = Widget.extend({
         'click .oe_snippet_parent': '_onParentButtonClick',
         'click .oe_snippet_clone': '_onCloneClick',
         'click .oe_snippet_remove': '_onRemoveClick',
-        'mousedown .oe_options [data-toggle="dropdown"]:first': '_onOpenCusomize',
     },
     custom_events: {
         cover_update: '_onCoverUpdate',
@@ -37,15 +35,9 @@ var SnippetEditor = Widget.extend({
      * @param {Widget} parent
      * @param {Element} target
      * @param templateOptions
-     * @param {jQuery} $editable
-     * @param {Object} options
      */
-    init: function (parent, target, templateOptions, $editable, options) {
+    init: function (parent, target, templateOptions) {
         this._super.apply(this, arguments);
-        this.options = options;
-        this.$editable = $editable;
-        this.ownerDocument = this.$editable[0].ownerDocument;
-        this.$body = $(this.ownerDocument.body);
         this.$target = $(target);
         this.$target.data('snippet-editor', this);
         this.templateOptions = templateOptions;
@@ -67,13 +59,13 @@ var SnippetEditor = Widget.extend({
         defs.push(this._initializeOptions());
 
         // Initialize move/clone/remove buttons
-        if (!this.options.isEditableNode(this.$target[0])) {
+        if (!this.$target.parent().is(':o_editable')) {
             this.$el.find('.oe_snippet_move, .oe_snippet_clone, .oe_snippet_remove').remove();
         } else {
             this.dropped = false;
             this.$el.draggable({
                 greedy: true,
-                appendTo: this.$body,
+                appendTo: 'body',
                 cursor: 'move',
                 handle: '.oe_snippet_move',
                 cursorAt: {
@@ -84,7 +76,7 @@ var SnippetEditor = Widget.extend({
                     var $clone = $(this).clone().css({width: '24px', height: '24px', border: 0});
                     $clone.find('.oe_overlay_options >:not(:contains(.oe_snippet_move)), .o_handle').remove();
                     $clone.find(':not(.glyphicon)').css({position: 'absolute', top: 0, left: 0});
-                    $clone.appendTo(self.$body).removeClass('d-none');
+                    $clone.appendTo('body').removeClass('d-none');
                     return $clone;
                 },
                 start: _.bind(self._onDragAndDropStart, self),
@@ -102,7 +94,7 @@ var SnippetEditor = Widget.extend({
             }
         });
 
-        return Promise.all(defs);
+        return $.when.apply($, defs);
     },
     /**
      * @override
@@ -158,7 +150,7 @@ var SnippetEditor = Widget.extend({
             top: offset.top,
         });
         this.$('.o_handles').css('height', this.$target.outerHeight());
-        this.$el.toggleClass('o_top_cover', offset.top < this.$editable.offset().top);
+        this.$el.toggleClass('o_top_cover', offset.top < 15);
     },
     /**
      * Removes the associated snippet from the DOM and destroys the associated
@@ -177,12 +169,13 @@ var SnippetEditor = Widget.extend({
         });
 
         var $parent = this.$target.parent();
-        this.$target.find('*').addBack().tooltip('dispose');
+        this.$target.find('*').andSelf().tooltip('dispose');
         this.$target.remove();
         this.$el.remove();
 
         var node = $parent[0];
         if (node && node.firstChild) {
+            $.summernote.core.dom.removeSpace(node, node.firstChild, 0, node.lastChild, 1);
             if (!node.firstChild.tagName && node.firstChild.textContent === ' ') {
                 node.removeChild(node.firstChild);
             }
@@ -204,12 +197,11 @@ var SnippetEditor = Widget.extend({
         }
 
         // clean editor if they are image or table in deleted content
-        this.$body.find('.note-control-selection').hide();
-        this.$body.find('.o_table_handler').remove();
+        $('.note-control-selection').hide();
+        $('.o_table_handler').remove();
 
         this.trigger_up('snippet_removed');
         this.destroy();
-        $parent.trigger('content_changed');
     },
     /**
      * Displays/Hides the editor overlay and notifies the associated snippet
@@ -219,9 +211,6 @@ var SnippetEditor = Widget.extend({
      * @param {boolean} focus - true to display, false to hide
      */
     toggleFocus: function (focus) {
-        if (!this.$el) {
-            return;
-        }
         var do_action = (focus ? _do_action_focus : _do_action_blur);
 
         // Attach own and parent options on the current overlay
@@ -249,10 +238,6 @@ var SnippetEditor = Widget.extend({
         this.cover();
         this.$el.toggleClass('oe_active', !!focus);
 
-        if (focus) {
-            this.trigger_up('snippet_focused');
-        }
-
         function _do_action_focus(style, $dest) {
             style.$el.insertAfter($dest);
             style.onFocus();
@@ -313,8 +298,7 @@ var SnippetEditor = Widget.extend({
                 self,
                 val.base_target ? self.$target.find(val.base_target).eq(0) : self.$target,
                 self.$el,
-                val.data,
-                self.options
+                val.data
             );
             self.styles[optionName || _.uniqueId('option')] = option;
             option.__order = i++;
@@ -341,7 +325,7 @@ var SnippetEditor = Widget.extend({
 
         this.$el.find('[data-toggle="dropdown"]').dropdown();
 
-        return Promise.all(defs);
+        return $.when.apply($, defs);
     },
 
     //--------------------------------------------------------------------------
@@ -356,13 +340,13 @@ var SnippetEditor = Widget.extend({
      */
     _onCloneClick: function (ev) {
         ev.preventDefault();
-        this.trigger_up('cover_will_change');
 
         this.trigger_up('snippet_will_be_cloned', {$target: this.$target});
 
         var $clone = this.$target.clone(false);
 
         this.trigger_up('request_history_undo_record', {$target: this.$target});
+
         this.$target.after($clone);
         this.trigger_up('call_for_each_child_snippet', {
             $snippet: $clone,
@@ -375,7 +359,6 @@ var SnippetEditor = Widget.extend({
             },
         });
         this.trigger_up('snippet_cloned', {$target: $clone, $origin: this.$target});
-        $clone.trigger('content_changed');
     },
     /**
      * Called when the overlay dimensions/positions should be recomputed.
@@ -383,7 +366,6 @@ var SnippetEditor = Widget.extend({
      * @private
      */
     _onCoverUpdate: function () {
-        this.trigger_up('cover_will_change');
         this.cover();
     },
     /**
@@ -420,11 +402,11 @@ var SnippetEditor = Widget.extend({
             $selectorChildren: $selectorChildren,
         });
 
-        this.$body.addClass('move-important');
+        $('body').addClass('move-important');
 
-        this.$editable.find('.oe_drop_zone').droppable({
+        $('.oe_drop_zone').droppable({
             over: function () {
-                self.$editable.find('.oe_drop_zone.hide').removeClass('hide');
+                $('.oe_drop_zone.hide').removeClass('hide');
                 $(this).addClass('hide').first().after(self.$target);
                 self.dropped = true;
             },
@@ -434,8 +416,6 @@ var SnippetEditor = Widget.extend({
                 self.dropped = false;
             },
         });
-
-        this.trigger_up('cover_will_change');
     },
     /**
      * Called when the snippet is dropped after being dragged thanks to the
@@ -446,7 +426,7 @@ var SnippetEditor = Widget.extend({
      * @param {Object} ui
      */
     _onDragAndDropStop: function (ev, ui) {
-        this.$editable.find('.oe_drop_zone').droppable('destroy').remove();
+        var self = this;
 
         // TODO lot of this is duplicated code of the d&d feature of snippets
         if (!this.dropped) {
@@ -457,21 +437,22 @@ var SnippetEditor = Widget.extend({
             }
         }
 
+        $('.oe_drop_zone').droppable('destroy').remove();
+
         var prev = this.$target.first()[0].previousSibling;
         var next = this.$target.last()[0].nextSibling;
         var $parent = this.$target.parent();
 
-        var $clone = this.$editable.find('.oe_drop_clone');
+        var $clone = $('.oe_drop_clone');
         if (prev === $clone[0]) {
             prev = $clone[0].previousSibling;
         } else if (next === $clone[0]) {
             next = $clone[0].nextSibling;
         }
         $clone.after(this.$target);
-        var $from = $clone.parent();
 
         this.$el.removeClass('d-none');
-        this.$body.removeClass('move-important');
+        $('body').removeClass('move-important');
         $clone.remove();
 
         if (this.dropped) {
@@ -488,13 +469,10 @@ var SnippetEditor = Widget.extend({
             for (var i in this.styles) {
                 this.styles[i].onMove();
             }
-
-            this.$target.trigger('content_changed');
-            $from.trigger('content_changed');
         }
 
-        this.trigger_up('drag_and_drop_stop', {
-            $snippet: this.$target,
+        self.trigger_up('drag_and_drop_stop', {
+            $snippet: self.$target,
         });
     },
     /**
@@ -505,7 +483,6 @@ var SnippetEditor = Widget.extend({
      * @param {OdooEvent} ev
      */
     _onOptionUpdate: function (ev) {
-        this.trigger_up('cover_will_change');
         // If multiple option names are given, we suppose it should not be
         // propagated to parent editor
         if (ev.data.optionNames) {
@@ -528,16 +505,6 @@ var SnippetEditor = Widget.extend({
             }
         }
     },
-    /**
-     * Called when the user opens the customize menu.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onOpenCusomize: function (ev) {
-        this.trigger_up('request_history_undo_record', {$target: this.$target});
-    },
-
     /**
      * Called when the 'parent' button is clicked.
      *
@@ -558,7 +525,6 @@ var SnippetEditor = Widget.extend({
      */
     _onRemoveClick: function (ev) {
         ev.preventDefault();
-        this.trigger_up('cover_will_change');
         this.trigger_up('request_history_undo_record', {$target: this.$target});
         this.removeSnippet();
     },
@@ -569,7 +535,6 @@ var SnippetEditor = Widget.extend({
  */
 var SnippetsMenu = Widget.extend({
     id: 'oe_snippets',
-    cacheSnippetTemplate: {},
     activeSnippets: [],
     custom_events: {
         activate_insertion_zones: '_onActivateInsertionZones',
@@ -579,34 +544,15 @@ var SnippetsMenu = Widget.extend({
         go_to_parent: '_onGoToParent',
         remove_snippet: '_onRemoveSnippet',
         snippet_removed: '_onSnippetRemoved',
-        reload_snippet_dropzones: '_disableUndroppableSnippets',
     },
 
     /**
-     * @param {Widget} parent
-     * @param {Object} [options]
-     * @param {string} [options.snippets]
-     *      URL of the snippets template. This URL might have been set
-     *      in the global 'snippets' variable, otherwise this function
-     *      assigns a default one.
-     *      default: 'web_editor.snippets'
-     *
      * @constructor
      */
-    init: function (parent, options) {
+    init: function (parent, $editable) {
         this._super.apply(this, arguments);
-        options = options || {};
-        this.trigger_up('getRecordInfo', {
-            recordInfo: options,
-            callback: function (recordInfo) {
-                _.defaults(options, recordInfo);
-            },
-        });
 
-        this.options = options;
-        if (!this.options.snippets) {
-            this.options.snippets = 'web_editor.snippets';
-        }
+        this.$editable = $editable;
         this.$activeSnippet = false;
         this.snippetEditors = [];
     },
@@ -616,14 +562,12 @@ var SnippetsMenu = Widget.extend({
     start: function () {
         var self = this;
         var defs = [this._super.apply(this, arguments)];
-        this.ownerDocument = this.$el[0].ownerDocument;
-        this.$document = $(this.ownerDocument);
-        this.window = this.ownerDocument.defaultView;
-        this.$window = $(this.window);
+        var $document = $(document);
+        var $window = $(window);
 
         // Fetch snippet templates and compute it
-
-        defs.push(this.loadSnippets().then(function (html) {
+        var url = this._getSnippetURL();
+        defs.push(this._rpc({route: url}).then(function (html) {
             return self._computeSnippetTemplates(html);
         }));
 
@@ -634,8 +578,8 @@ var SnippetsMenu = Widget.extend({
 
         // Active snippet editor on click in the page
         var lastClickedElement;
-        this.$document.on('click.snippets_menu', '*', function (ev) {
-            var srcElement = ev.target || (ev.originalEvent && (ev.originalEvent.target || ev.originalEvent.originalTarget)) || ev.srcElement;
+        $document.on('click.snippets_menu', '*', function (ev) {
+            var srcElement = ev.srcElement || (ev.originalEvent && (ev.originalEvent.originalTarget || ev.originalEvent.target) || ev.target);
             if (lastClickedElement === srcElement || !srcElement) {
                 return;
             }
@@ -654,21 +598,27 @@ var SnippetsMenu = Widget.extend({
         core.bus.on('deactivate_snippet', this, this._onDeactivateSnippet);
         core.bus.on('snippet_editor_clean_for_save', this, this._onCleanForSaveDemand);
 
+        // Some summernote customization
+        var _isNotBreakable = $.summernote.core.dom.isNotBreakable;
+        $.summernote.core.dom.isNotBreakable = function (node) {
+            return _isNotBreakable(node) || $(node).is('div') || globalSelector.is($(node));
+        };
+
         // Adapt overlay covering when the window is resized / content changes
         var debouncedCoverUpdate = _.debounce(function () {
-            self.updateCurrentSnippetEditorOverlay();
+            self._updateCurrentSnippetEditorOverlay();
         }, 200);
-        this.$window.on('resize.snippets_menu', debouncedCoverUpdate);
-        this.$window.on('content_changed.snippets_menu', debouncedCoverUpdate);
+        $window.on('resize.snippets_menu', debouncedCoverUpdate);
+        $window.on('content_changed.snippets_menu', debouncedCoverUpdate);
 
         // On keydown add a class on the active overlay to hide it and show it
         // again when the mouse moves
-        this.$document.on('keydown.snippets_menu', function () {
+        $document.on('keydown.snippets_menu', function () {
             if (self.$activeSnippet && self.$activeSnippet.data('snippet-editor')) {
                 self.$activeSnippet.data('snippet-editor').$el.addClass('o_keypress');
             }
         });
-        this.$document.on('mousemove.snippets_menu, mousedown.snippets_menu', function () {
+        $document.on('mousemove.snippets_menu', function () {
             if (self.$activeSnippet && self.$activeSnippet.data('snippet-editor')) {
                 self.$activeSnippet.data('snippet-editor').$el.removeClass('o_keypress');
             }
@@ -676,21 +626,20 @@ var SnippetsMenu = Widget.extend({
 
         // Auto-selects text elements with a specific class and remove this
         // on text changes
-        this.$document.on('click.snippets_menu', '.o_default_snippet_text', function (ev) {
+        $document.on('click.snippets_menu', '.o_default_snippet_text', function (ev) {
             $(ev.target).selectContent();
-            $(ev.target).removeClass('o_default_snippet_text');
         });
-        this.$document.on('keyup.snippets_menu', function () {
-            var range = Wysiwyg.getRange(this);
-            $(range && range.sc).closest('.o_default_snippet_text').removeClass('o_default_snippet_text');
+        $document.on('keyup.snippets_menu', function () {
+            var r = $.summernote.core.range.create();
+            $(r && r.sc).closest('.o_default_snippet_text').removeClass('o_default_snippet_text');
         });
 
-        return Promise.all(defs).then(function () {
+        return $.when.apply($, defs).then(function () {
             // Trigger a resize event once entering edit mode as the snippets
             // menu will take part of the screen width (delayed because of
             // animation). (TODO wait for real animation end)
             setTimeout(function () {
-                self.$window.trigger('resize');
+                $window.trigger('resize');
             }, 1000);
         });
     },
@@ -699,14 +648,11 @@ var SnippetsMenu = Widget.extend({
      */
     destroy: function () {
         this._super.apply(this, arguments);
-        if (this.$window) {
-            this.$snippetEditorArea.remove();
-            this.$window.off('.snippets_menu');
-            this.$document.off('.snippets_menu');
-        }
+        this.$snippetEditorArea.remove();
+        $(window).off('.snippets_menu');
+        $(document).off('.snippets_menu');
         core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet);
         core.bus.off('snippet_editor_clean_for_save', this, this._onCleanForSaveDemand);
-        delete this.cacheSnippetTemplate[this.options.snippets];
     },
 
     //--------------------------------------------------------------------------
@@ -719,69 +665,16 @@ var SnippetsMenu = Widget.extend({
      * - Remove the 'contentEditable' attributes
      */
     cleanForSave: function () {
-        this._activateSnippet(false);
         this.trigger_up('ready_to_clean_for_save');
         this._destroyEditors();
 
-        this.getEditableArea().find('[contentEditable]')
+        this.$editable.find('[contentEditable]')
             .removeAttr('contentEditable')
             .removeProp('contentEditable');
 
-        this.getEditableArea().find('.o_we_selected_image')
+        this.$editable.find('.o_we_selected_image')
             .removeClass('o_we_selected_image');
     },
-    /**
-     * Load snippets.
-     */
-    loadSnippets: function () {
-        if (this.cacheSnippetTemplate[this.options.snippets]) {
-            this._defLoadSnippets = this.cacheSnippetTemplate[this.options.snippets];
-            return this._defLoadSnippets;
-        }
-        this._defLoadSnippets = this._rpc({
-            model: 'ir.ui.view',
-            method: 'render_template',
-            args: [this.options.snippets, {}],
-            kwargs: {
-                context: this.options.context,
-            },
-        });
-        this.cacheSnippetTemplate[this.options.snippets] = this._defLoadSnippets;
-        return this.cacheSnippetTemplate[this.options.snippets];
-    },
-    /**
-     * Sets the instance variables $editor, $body and selectorEditableArea.
-     *
-     * @param {JQuery} $editor
-     * @param {String} selectorEditableArea
-     */
-    setSelectorEditableArea: function ($editor, selectorEditableArea) {
-        this.selectorEditableArea = selectorEditableArea;
-        this.$editor = $editor;
-        this.$body = $editor.closest('body');
-    },
-    /**
-     * Get the editable area.
-     *
-     * @returns {JQuery}
-     */
-    getEditableArea: function () {
-        return this.$editor.find(this.selectorEditableArea);
-    },
-    /**
-     * Updates the cover dimensions of the current snippet editor.
-     */
-    updateCurrentSnippetEditorOverlay: function () {
-        if (this.$activeSnippet && this.$activeSnippet.data('snippet-editor')) {
-            this.$activeSnippet.data('snippet-editor').cover();
-        }
-        this.snippetEditors = _.filter(this.snippetEditors, function (snippetEditor) {
-            if (snippetEditor.$target.closest('body').length) {
-                return true;
-            }
-            snippetEditor.destroy();
-        });
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -799,7 +692,6 @@ var SnippetsMenu = Widget.extend({
      *        child
      */
     _activateInsertionZones: function ($selectorSiblings, $selectorChildren) {
-        var self = this;
         var zone_template = $('<div/>', {
             class: 'oe_drop_zone oe_insert',
         });
@@ -811,8 +703,8 @@ var SnippetsMenu = Widget.extend({
         if ($selectorChildren) {
             $selectorChildren.each(function () {
                 var $zone = $(this);
-                var css = self.window.getComputedStyle(this);
-                var parentCss = self.window.getComputedStyle($zone.parent()[0]);
+                var css = window.getComputedStyle(this);
+                var parentCss = window.getComputedStyle($zone.parent()[0]);
                 var float = css.float || css.cssFloat;
                 var parentDisplay = parentCss.display;
                 var parentFlex = parentCss.flexDirection;
@@ -823,7 +715,7 @@ var SnippetsMenu = Widget.extend({
                 var test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === 'BR'));
                 if (test) {
                     $drop.addClass('oe_vertical').css({
-                        height: parseInt(self.window.getComputedStyle($zone[0]).lineHeight),
+                        height: parseInt(window.getComputedStyle($zone[0]).lineHeight),
                         float: 'none',
                         display: 'inline-block',
                     });
@@ -841,7 +733,7 @@ var SnippetsMenu = Widget.extend({
                 test = !!(node && ((!node.tagName && node.textContent.match(/\S/)) ||  node.tagName === 'BR'));
                 if (test) {
                     $drop.addClass('oe_vertical').css({
-                        height: parseInt(self.window.getComputedStyle($zone[0]).lineHeight),
+                        height: parseInt(window.getComputedStyle($zone[0]).lineHeight),
                         float: 'none',
                         display: 'inline-block'
                     });
@@ -864,8 +756,8 @@ var SnippetsMenu = Widget.extend({
             $selectorSiblings.filter(':not(.oe_drop_zone):not(.oe_drop_clone)').each(function () {
                 var $zone = $(this);
                 var $drop;
-                var css = self.window.getComputedStyle(this);
-                var parentCss = self.window.getComputedStyle($zone.parent()[0]);
+                var css = window.getComputedStyle(this);
+                var parentCss = window.getComputedStyle($zone.parent()[0]);
                 var float = css.float || css.cssFloat;
                 var parentDisplay = parentCss.display;
                 var parentFlex = parentCss.flexDirection;
@@ -897,14 +789,14 @@ var SnippetsMenu = Widget.extend({
         var $zones;
         do {
             count = 0;
-            $zones = this.getEditableArea().find('.oe_drop_zone > .oe_drop_zone').remove(); // no recursive zones
+            $zones = this.$editable.find('.oe_drop_zone > .oe_drop_zone').remove(); // no recursive zones
             count += $zones.length;
             $zones.remove();
         } while (count > 0);
 
         // Cleaning consecutive zone and up zones placed between floating or
         // inline elements. We do not like these kind of zones.
-        $zones = this.getEditableArea().find('.oe_drop_zone:not(.oe_vertical)');
+        $zones = this.$editable.find('.oe_drop_zone:not(.oe_vertical)');
         $zones.each(function () {
             var zone = $(this);
             var prev = zone.prev();
@@ -938,8 +830,7 @@ var SnippetsMenu = Widget.extend({
      * @param {jQuery|false} $snippet
      *        The DOM element whose editor need to be enabled. Only disable the
      *        current one if false is given.
-     * @returns {Promise<SnippetEditor>}
-     *          (might be async when an editor must be created)
+     * @returns {Deferred} (might be async when an editor must be created)
      */
     _activateSnippet: function ($snippet) {
         if ($snippet) {
@@ -947,27 +838,25 @@ var SnippetsMenu = Widget.extend({
                 $snippet = globalSelector.closest($snippet);
             }
             if (this.$activeSnippet && this.$activeSnippet[0] === $snippet[0]) {
-                return Promise.resolve($snippet.data('snippet-editor'));
+                return $.when();
             }
         }
-        var editor = null;
         if (this.$activeSnippet) {
-            editor = this.$activeSnippet.data('snippet-editor');
-            if (editor) {
-                editor.toggleFocus(false);
+            if (this.$activeSnippet.data('snippet-editor')) {
+                this.$activeSnippet.data('snippet-editor').toggleFocus(false);
             }
             this.$activeSnippet = false;
         }
         if ($snippet && $snippet.length) {
             var self = this;
-            this.trigger_up('activate_snippet', $snippet);
-            return this._createSnippetEditor($snippet).then(function (editor) {
+            return this._createSnippetEditor($snippet).then(function () {
                 self.$activeSnippet = $snippet;
-                editor.toggleFocus(true);
-                return editor;
+                if (self.$activeSnippet.data('snippet-editor')) {
+                    self.$activeSnippet.data('snippet-editor').toggleFocus(true);
+                }
             });
         }
-        return Promise.resolve(editor);
+        return $.when();
     },
     /**
      * @private
@@ -977,6 +866,16 @@ var SnippetsMenu = Widget.extend({
             snippetEditor.destroy();
         });
     },
+    /**
+     * Updates the cover dimensions of the current snippet editor.
+     *
+     * @private
+     */
+    _updateCurrentSnippetEditorOverlay: function () {
+        if (this.$activeSnippet && this.$activeSnippet.data('snippet-editor')) {
+            this.$activeSnippet.data('snippet-editor').cover();
+        }
+    },
     /**
      * Calls a given callback 'on' the given snippet and all its child ones if
      * any (DOM element with options).
@@ -988,7 +887,7 @@ var SnippetsMenu = Widget.extend({
      * @param {function} callback
      *        Given two arguments: the snippet editor associated to the snippet
      *        being managed and the DOM element of this snippet.
-     * @returns {Promise} (might be async if snippet editors need to be created
+     * @returns {Deferred} (might be async if snippet editors need to be created
      *                     and/or the callback is async)
      */
     _callForEachChildSnippet: function ($snippet, callback) {
@@ -1001,7 +900,7 @@ var SnippetsMenu = Widget.extend({
                 }
             });
         });
-        return Promise.all(defs);
+        return $.when.apply($, defs);
     },
     /**
      * Creates and returns a set of helper functions which can help finding
@@ -1056,7 +955,7 @@ var SnippetsMenu = Widget.extend({
             selectorConditions += ':has(' + target + ')';
         }
         if (!noCheck) {
-            selectorConditions = (this.options.addDropSelector || '') + selectorConditions;
+            selectorConditions = ':o_editable' + selectorConditions;
         }
 
         // (Re)join the subselectors
@@ -1079,7 +978,7 @@ var SnippetsMenu = Widget.extend({
             };
         } else {
             functions.closest = function ($from, parentNode) {
-                var parents = self.getEditableArea().get();
+                var parents = self.$editable.get();
                 return $from.closest(selector, parentNode).filter(function () {
                     var node = this;
                     while (node.parentNode) {
@@ -1092,9 +991,9 @@ var SnippetsMenu = Widget.extend({
                 });
             };
             functions.all = isChildren ? function ($from) {
-                return dom.cssFind($from || self.getEditableArea(), selector);
+                return dom.cssFind($from || self.$editable, selector);
             } : function ($from) {
-                $from = $from || self.getEditableArea();
+                $from = $from || self.$editable;
                 return $from.filter(selector).add(dom.cssFind($from, selector));
             };
         }
@@ -1221,6 +1120,7 @@ var SnippetsMenu = Widget.extend({
         if (!this.$snippets.length) {
             this.$el.detach();
         }
+        $('body').toggleClass('editor_has_snippets', this.$snippets.length > 0);
 
         // Register the text nodes that needs to be auto-selected on click
         this._registerDefaultTexts();
@@ -1252,13 +1152,13 @@ var SnippetsMenu = Widget.extend({
      *
      * @private
      * @param {jQuery} $snippet
-     * @returns {Promise<SnippetEditor>}
+     * @returns {Deferred<SnippetEditor>}
      */
     _createSnippetEditor: function ($snippet) {
         var self = this;
         var snippetEditor = $snippet.data('snippet-editor');
         if (snippetEditor) {
-            return Promise.resolve(snippetEditor);
+            return $.when(snippetEditor);
         }
 
         var def;
@@ -1267,8 +1167,8 @@ var SnippetsMenu = Widget.extend({
             def = this._createSnippetEditor($parent);
         }
 
-        return Promise.resolve(def).then(function (parentEditor) {
-            snippetEditor = new SnippetEditor(parentEditor || self, $snippet, self.templateOptions, self.getEditableArea(), self.options);
+        return $.when(def).then(function (parentEditor) {
+            snippetEditor = new SnippetEditor(parentEditor || self, $snippet, self.templateOptions);
             self.snippetEditors.push(snippetEditor);
             return snippetEditor.appendTo(self.$snippetEditorArea);
         }).then(function () {
@@ -1303,6 +1203,17 @@ var SnippetsMenu = Widget.extend({
             $snippet.toggleClass('o_disabled', !check);
         });
     },
+    /**
+     * Returns the URL where to find the snippets template. This URL might have
+     * been set in the global 'snippetsURL' variable, otherwise this function
+     * returns a default one.
+     *
+     * @private
+     * @returns {string}
+     */
+    _getSnippetURL: function () {
+        return odoo.snippetsURL || '/web_editor/snippets';
+    },
     /**
      * Make given snippets be draggable/droppable thanks to their thumbnail.
      *
@@ -1319,7 +1230,8 @@ var SnippetsMenu = Widget.extend({
         $snippets.draggable({
             greedy: true,
             helper: 'clone',
-            appendTo: this.$body,
+            zIndex: '1000',
+            appendTo: 'body',
             cursor: 'move',
             handle: '.oe_snippet_thumbnail',
             distance: 30,
@@ -1337,10 +1249,12 @@ var SnippetsMenu = Widget.extend({
                 for (var k in temp) {
                     if ($base_body.is(temp[k].base_selector) && !$base_body.is(temp[k].base_exclude)) {
                         if (temp[k]['drop-near']) {
-                            $selectorSiblings = $selectorSiblings.add(temp[k]['drop-near'].all());
+                            if (!$selectorSiblings) $selectorSiblings = temp[k]['drop-near'].all();
+                            else $selectorSiblings = $selectorSiblings.add(temp[k]['drop-near'].all());
                         }
                         if (temp[k]['drop-in']) {
-                            $selectorChildren = $selectorChildren.add(temp[k]['drop-in'].all());
+                            if (!$selectorChildren) $selectorChildren = temp[k]['drop-in'].all();
+                            else $selectorChildren = $selectorChildren.add(temp[k]['drop-in'].all());
                         }
                     }
                 }
@@ -1355,12 +1269,11 @@ var SnippetsMenu = Widget.extend({
                 self._activateSnippet(false);
                 self._activateInsertionZones($selectorSiblings, $selectorChildren);
 
-                self.getEditableArea().find('.oe_drop_zone').droppable({
+                $('.oe_drop_zone').droppable({
                     over: function () {
                         if (!dropped) {
                             dropped = true;
                             $(this).first().after($toInsert).addClass('d-none');
-                            $toInsert.removeClass('oe_snippet_body');
                         }
                     },
                     out: function () {
@@ -1369,25 +1282,22 @@ var SnippetsMenu = Widget.extend({
                             dropped = false;
                             $toInsert.detach();
                             $(this).removeClass('d-none');
-                            $toInsert.addClass('oe_snippet_body');
                         }
                     },
                 });
-
-                self.trigger_up('cover_will_change');
             },
             stop: function (ev, ui) {
                 $toInsert.removeClass('oe_snippet_body');
 
                 if (!dropped && ui.position.top > 3 && ui.position.left + 50 > self.$el.outerWidth()) {
-                    var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
+                    var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone').first();
                     if ($el.length) {
                         $el.after($toInsert);
                         dropped = true;
                     }
                 }
 
-                self.getEditableArea().find('.oe_drop_zone').droppable('destroy').remove();
+                self.$editable.find('.oe_drop_zone').droppable('destroy').remove();
 
                 if (dropped) {
                     var prev = $toInsert.first()[0].previousSibling;
@@ -1408,6 +1318,8 @@ var SnippetsMenu = Widget.extend({
                         $parent.prepend($toInsert);
                     }
 
+                    $toInsert.closest('.o_editable').trigger('content_changed');
+
                     var $target = $toInsert;
 
                     _.defer(function () {
@@ -1415,12 +1327,12 @@ var SnippetsMenu = Widget.extend({
                         self._disableUndroppableSnippets();
 
                         self._callForEachChildSnippet($target, function (editor, $snippet) {
-                            editor.buildSnippet();
+                            _.defer(function () {
+                                editor.buildSnippet();
+                            });
                         }).then(function () {
-                            $target.trigger('content_changed');
-                            if ($target.closest('body').length) { // can be destroyed (eg in test)
-                                self._activateSnippet($target);
-                            }
+                            $target.closest('.o_editable').trigger('content_changed');
+                            self._activateSnippet($target);
                         });
                     });
                 } else {

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4,9 +4,8 @@ odoo.define('web_editor.snippets.options', function (require) {
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
-var weWidgets = require('wysiwyg.widgets');
-var FontPlugin = require('web_editor.wysiwyg.plugin.font');
-var ColorpickerDialog = require('web.ColorpickerDialog');
+var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
+var weWidgets = require('web_editor.widget');
 
 var qweb = core.qweb;
 var _t = core._t;
@@ -19,12 +18,10 @@ var _t = core._t;
 var SnippetOption = Widget.extend({
     events: {
         'mouseenter': '_onLinkEnter',
-        'mouseenter a': '_onLinkEnter',
+        'mouseenter .dropdown-item': '_onLinkEnter',
         'click': '_onLinkClick',
-        'click a': '_onLinkClick',
         'mouseleave': '_onMouseleave',
-        'mouseleave a': '_onMouseleave',
-        'mouseleave .dropdown-menu': '_onMouseleave',
+        'mouseleave .dropdown-item': '_onMouseleave',
     },
     /**
      * When editing a snippet, its options are shown alongside the ones of its
@@ -41,11 +38,9 @@ var SnippetOption = Widget.extend({
      *
      * @constructor
      */
-    init: function (parent, $target, $overlay, data, options) {
+    init: function (parent, $target, $overlay, data) {
         this._super.apply(this, arguments);
-        this.options = options;
         this.$target = $target;
-        this.ownerDocument = this.$target[0].ownerDocument;
         this.$overlay = $overlay;
         this.data = data;
         this.__methodNames = [];
@@ -245,7 +240,6 @@ var SnippetOption = Widget.extend({
         if (!previewMode) {
             this._reset();
             this.trigger_up('request_history_undo_record', {$target: this.$target});
-            this.$target.trigger('content_changed');
         }
 
         // Search for methods (data-...) (i.e. data-toggle-class) on the
@@ -373,7 +367,7 @@ var SnippetOption = Widget.extend({
      */
     _onLinkClick: function (ev) {
         var $opt = $(ev.target).closest('.dropdown-item');
-        if (ev.isDefaultPrevented() || !$opt.length || !$opt.is(':hasData')) {
+        if (!$opt.length || !$opt.is(':hasData')) {
             return;
         }
 
@@ -460,7 +454,7 @@ registry.sizing = SnippetOption.extend({
             var regClass = new RegExp('\\s*' + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
 
             var cursor = $handle.css('cursor') + '-important';
-            var $body = $(this.ownerDocument.body);
+            var $body = $(document.body);
             $body.addClass(cursor);
 
             var xy = ev['page' + XY];
@@ -667,19 +661,12 @@ registry.colorpicker = SnippetOption.extend({
         }
 
         if (!this.$el.find('.colorpicker').length) {
-            // Add common colors to palettes if not excluded
-            var fontPlugin = new FontPlugin({
-                layoutInfo: {
-                    editable: $('<div/>'),
-                    editingArea: $('<div/>'),
-                },
-                options: {},
-            });
+            // TODO remove old UI's code that survived
+            var $pt = $(qweb.render('web_editor.snippet.option.colorpicker'));
+            var $clpicker = $(qweb.render('web_editor.colorpicker'));
 
-            var $clpicker = fontPlugin.createPalette('backColor').find('.note-color-palette'); // don't use custom color
-            $clpicker.find('.note-color-reset').remove();
-            $clpicker.find('h6').each(function () {
-                $(this).replaceWith($('<div class="mt8"/>').text($(this).text()));
+            _.each($clpicker.find('.o_colorpicker_section'), function (elem) {
+                $(elem).prepend("<div class='text-muted mt8'>" + elem.dataset.display + "</div>");
             });
 
             // Retrieve excluded palettes list
@@ -689,7 +676,7 @@ registry.colorpicker = SnippetOption.extend({
             }
             // Apply a custom title if specified
             if (this.data.paletteTitle) {
-                $clpicker.find('.note-palette-title').text(this.data.paletteTitle);
+                $pt.find('.note-palette-title').text(this.data.paletteTitle);
             }
 
             // Remove excluded palettes
@@ -697,29 +684,39 @@ registry.colorpicker = SnippetOption.extend({
                 $clpicker.find('[data-name="' + exc + '"]').remove();
             });
 
-            var $pt = $(qweb.render('web_editor.snippet.option.colorpicker'));
+            // Add common colors to palettes if not excluded
+            if (!('common' in excluded)) {
+                var $commonColorSection = $clpicker.find('[data-name="common"]');
+                _.each(summernoteCustomColors, function (colorRow, i) {
+                    var $div = $('<div/>', {class: 'clearfix'}).appendTo($commonColorSection);
+                    if (i === 0) {
+                        // Ignore the summernote gray palette and use ours
+                        return;
+                    }
+                    _.each(colorRow, function (color) {
+                        $div.append('<button class="o_custom_color" style="background-color: ' + color + '" />');
+                    });
+                });
+            }
+
             $pt.find('.o_colorpicker_section_tabs').append($clpicker);
             this.$el.find('.dropdown-menu').append($pt);
         }
 
-        var bgColor = ColorpickerDialog.formatColor(self.$target.css('background-color'));
         var classes = [];
         this.$el.find('.colorpicker button').each(function () {
             var $color = $(this);
             var color = $color.data('color');
-            if (color) {
-                $color.addClass('bg-' + color);
-                var className = self.colorPrefix + color;
-                if (self.$target.hasClass(className)) {
-                    $color.addClass('selected');
-                }
-                classes.push(className);
-            } else {
-                color = $color.data('value');
-                if (bgColor === ColorpickerDialog.formatColor(color)) {
-                    $color.addClass('selected');
-                }
+            if (!color) {
+                return;
             }
+
+            $color.addClass('bg-' + color);
+            var className = self.colorPrefix + color;
+            if (self.$target.hasClass(className)) {
+                $color.addClass('selected');
+            }
+            classes.push(className);
         });
         this.classes = classes.join(' ');
 
@@ -753,9 +750,6 @@ registry.colorpicker = SnippetOption.extend({
         var color = $(ev.currentTarget).data('color');
         if (color) {
             this.$target.addClass(this.colorPrefix + color);
-        } else if ($(ev.currentTarget).data('value')) {
-            color = $(ev.currentTarget).data('value');
-            this.$target.css('background-color', color);
         } else if ($(ev.target).hasClass('o_custom_color')) {
             this.$target
                 .removeClass(this.classes)
@@ -848,20 +842,18 @@ registry.background = SnippetOption.extend({
      */
     chooseImage: function (previewMode, value, $opt) {
         // Put fake image in the DOM, edit it and use it as background-image
-        var $image = $('<img/>', {class: 'd-none', src: value === 'true' ? '' : value}).appendTo(this.$target);
+        var $image = $('<img/>', {class: 'd-none', src: value}).appendTo(this.$target);
 
         var $editable = this.$target.closest('.o_editable');
         var _editor = new weWidgets.MediaDialog(this, {
             onlyImages: true,
-            mediaWidth: 1920,
             firstFilters: ['background'],
             res_model: $editable.data('oe-model'),
             res_id: $editable.data('oe-id'),
-        }, $image[0]).open();
+        }, null, $image[0]).open();
 
-        _editor.on('save', this, function (image) {
-            this._setCustomBackground(image.src);
-            this.$target.trigger('content_changed');
+        _editor.on('save', this, function () {
+            this._setCustomBackground($image.attr('src'));
         });
         _editor.on('closed', this, function () {
             $image.remove();
@@ -916,8 +908,7 @@ registry.background = SnippetOption.extend({
         if (value === undefined) {
             value = this.$target.css('background-image');
         }
-        var srcValueWrapper = /url\(['"]*|['"]*\)|^none$/g;
-        return value && value.replace(srcValueWrapper, '') || '';
+        return value.replace(/url\(['"]*|['"]*\)|^none$/g, '');
     },
     /**
      * @override
@@ -1182,11 +1173,6 @@ registry.many2one = SnippetOption.extend({
      */
     start: function () {
         var self = this;
-        this.trigger_up('getRecordInfo', _.extend(this.options, {
-            callback: function (recordInfo) {
-                _.defaults(self.options, recordInfo);
-            },
-        }));
 
         this.Model = this.$target.data('oe-many2one-model');
         this.ID = +this.$target.data('oe-many2one-id');
@@ -1219,7 +1205,6 @@ registry.many2one = SnippetOption.extend({
         this.$search.find('input')
             .focus()
             .on('keyup', function (e) {
-                self.$overlay.removeClass('o_keypress');
                 self._findExisting($(this).val());
             });
 
@@ -1260,7 +1245,7 @@ registry.many2one = SnippetOption.extend({
      *
      * @private
      * @param {string} name
-     * @returns {Promise}
+     * @returns {Deferred}
      */
     _findExisting: function (name) {
         var self = this;
@@ -1286,7 +1271,6 @@ registry.many2one = SnippetOption.extend({
             kwargs: {
                 order: [{name: 'name', asc: false}],
                 limit: 5,
-                context: this.options.context,
             },
         }).then(function (result) {
             self.$search.siblings().remove();
@@ -1325,7 +1309,6 @@ registry.many2one = SnippetOption.extend({
                         args: [[self.ID]],
                         kwargs: {
                             options: options,
-                            context: self.options.context,
                         },
                     }).then(function (html) {
                         $node.html(html);

addons/web_editor/static/src/js/editor/transcoder.js

@@ -1,7 +1,9 @@
-odoo.define('web_editor.convertInline', function (require) {
+odoo.define('web_editor.transcoder', function (require) {
 'use strict';
 
-var FieldHtml = require('web_editor.field.html');
+var base = require('web_editor.base');
+
+var rulesCache = [];
 
 /**
  * Returns the css rules which applies on an element, tweaked so that they are
@@ -12,11 +14,8 @@ var FieldHtml = require('web_editor.field.html');
  */
 function getMatchedCSSRules(a) {
     var i, r, k;
-    var doc = a.ownerDocument;
-    var rulesCache = a.ownerDocument._rulesCache || (a.ownerDocument._rulesCache = []);
-
     if (!rulesCache.length) {
-        var sheets = doc.styleSheets;
+        var sheets = document.styleSheets;
         for (i = sheets.length-1 ; i >= 0 ; i--) {
             var rules;
             // try...catch because browser may not able to enumerate rules for cross-domain sheets
@@ -188,13 +187,11 @@ function getMatchedCSSRules(a) {
  *                           converted to images
  */
 function fontToImg($editable) {
-    var fonts = odoo.__DEBUG__.services["wysiwyg.fonts"];
-
     $editable.find('.fa').each(function () {
         var $font = $(this);
         var icon, content;
-        _.find(fonts.fontIcons, function (font) {
-            return _.find(fonts.getCssSelectors(font.parser), function (data) {
+        _.find(base.fontIcons, function (font) {
+            return _.find(base.getCssSelectors(font.parser), function (data) {
                 if ($font.is(data.selector.replace(/::?before/g, ''))) {
                     icon = data.names[0].split('-').shift();
                     content = data.css.match(/content:\s*['"]?(.)['"]?/)[1];
@@ -268,6 +265,9 @@ function applyOverDescendants(node, func) {
  * @param {jQuery} $editable
  */
 function classToStyle($editable) {
+    if (!rulesCache.length) {
+        getMatchedCSSRules($editable[0]);
+    }
     applyOverDescendants($editable[0], function (node) {
         var $target = $(node);
         var css = getMatchedCSSRules(node);
@@ -328,7 +328,9 @@ function styleToClass($editable) {
         $(this).after($('a,img', this));
     }).remove();
 
-    var $c = $('<span/>').appendTo($editable[0].ownerDocument.body);
+    getMatchedCSSRules($editable[0]);
+
+    var $c = $('<span/>').appendTo(document.body);
 
     applyOverDescendants($editable[0], function (node) {
         var $target = $(node);
@@ -340,7 +342,7 @@ function styleToClass($editable) {
             }
         });
         css = ($c.attr('style', style).attr('style') || '').split(/\s*;\s*/);
-        style = ($target.attr('style') || '').replace(/\s*:\s*/, ':').replace(/\s*;\s*/, ';');
+        style = $target.attr('style') || '';
         _.each(css, function (v) {
             style = style.replace(v, '');
         });
@@ -362,13 +364,13 @@ function styleToClass($editable) {
  * @param {jQuery} $editable
  */
 function attachmentThumbnailToLinkImg($editable) {
-    $editable.find('a[href*="/web/content/"][data-mimetype]').filter(':empty, :containsExact( )').each(function () {
+    $editable.find('a[href*="/web/content/"][data-mimetype]:empty').each(function () {
         var $link = $(this);
         var $img = $('<img/>')
             .attr('src', $link.css('background-image').replace(/(^url\(['"])|(['"]\)$)/g, ''))
             .css('height', Math.max(1, $link.height()) + 'px')
             .css('width', Math.max(1, $link.width()) + 'px');
-        $link.prepend($img);
+        $link.append($img);
     });
 }
 
@@ -382,83 +384,6 @@ function linkImgToAttachmentThumbnail($editable) {
     $editable.find('a[href*="/web/content/"][data-mimetype] > img').remove();
 }
 
-
-//--------------------------------------------------------------------------
-//--------------------------------------------------------------------------
-
-
-FieldHtml.include({
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    commitChanges: function () {
-        if (this.nodeOptions['style-inline'] && this.isRendered) {
-            this._toInline();
-        }
-        return this._super();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Converts CSS dependencies to CSS-independent HTML.
-     * - CSS display for attachment link -> real image
-     * - Font icons -> images
-     * - CSS styles -> inline styles
-     *
-     * @private
-     */
-    _toInline: function () {
-        var $editable = this.wysiwyg.getEditable();
-        var html = this.wysiwyg.getValue();
-        $editable.html(html);
-
-        attachmentThumbnailToLinkImg($editable);
-        fontToImg($editable);
-        classToStyle($editable);
-        this.wysiwyg.setValue($editable.html(), {
-            notifyChange: false,
-        });
-    },
-    /**
-     * Revert _toInline changes.
-     *
-     * @private
-     */
-    _fromInline: function () {
-        var $editable = this.wysiwyg.getEditable();
-        var html = this.wysiwyg.getValue();
-        $editable.html(html);
-
-        styleToClass($editable);
-        imgToFont($editable);
-        linkImgToAttachmentThumbnail($editable);
-        this.wysiwyg.setValue($editable.html(), {
-            notifyChange: false,
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handler
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _onLoadWysiwyg: function () {
-        if (this.nodeOptions['style-inline']) {
-            this._fromInline();
-        }
-        this._super();
-    },
-});
-
 return {
     fontToImg: fontToImg,
     imgToFont: imgToFont,

addons/web_editor/static/src/js/tours/rte.js

@@ -0,0 +1,325 @@
+odoo.define('web_editor.tour', function (require) {
+'use strict';
+
+var core = require('web.core');
+var tour = require('web_tour.tour');
+var base = require('web_editor.base');
+
+/**
+ * Simulates a click event of given type on the given element.
+ *
+ * @param {DOMElement} el
+ * @param {string} type - 'click', 'mouseup', ...
+ */
+function simulateClickEvent(el, type) {
+    var evt = document.createEvent('MouseEvents');
+    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
+    el.dispatchEvent(evt);
+}
+
+tour.register('rte', {
+    url: '/web_editor/field/html?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+    test: true,
+    wait_for: base.ready(),
+}, [{
+    content: "Change html for this test",
+    trigger: "#editable_area",
+    run: function () {
+        var html = '\n'+
+            '<section>\n'+
+            '    <div class="container" style="width: 600px;">\n'+
+            '        <div class="row">\n'+
+            '            <div class="col-lg-6 mt16">\n'+
+            '<h1 id="text_content_id">Batnae municipium in Anthemusia</h1>     \n'+
+            '     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+
+            '     <p>    Quam <img style="width: 25%" src="/web/static/src/img/logo.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+
+            '     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
+            '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
+            '        </div>\n'+
+            '        <div class="col-lg-6 mt16">\n'+
+            '            <img class="img img-fluid shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+
+            '        </div>\n'+
+            '    </div>\n'+
+            '</section>\n';
+        this.$anchor.html(html);
+    }
+}, {
+    content: "simulate triple click and change text bg-color",
+    trigger: '#editable_area > section .row > div:first',
+    run: function () {
+        var $h1 = $('h1', this.$anchor);
+        $.summernote.core.range.create($h1[0].firstChild, 0, $('p', this.$anchor)[0], 0).select();
+        simulateClickEvent($h1[0], 'mouseup');
+    }
+}, {
+    content: "change text bg-color after triple click",
+    trigger: '.note-color button.dropdown-toggle:has(.fa-paint-brush)',
+    extra_trigger: '#editable_area > section .row > div:first',
+}, {
+    content: "change text backColor",
+    trigger: "button[data-event=backColor]:visible:eq(2)",
+}, {
+    content: "change selection to change text color",
+    trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
+    run: function () {
+        $.summernote.core.range.create(this.$anchor[0].firstChild, 5, this.$anchor[0].firstChild, 10).select();
+        simulateClickEvent(this.$anchor[0], 'mouseup');
+    }
+}, {
+    content: "open color dropdown",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-font)",
+}, {
+    content: "change text color",
+    trigger: "button[data-event=foreColor]:visible:first",
+}, {
+    content: "change selection to change text bg-color again",
+    trigger: '#editable_area > section .row > div:first h1 font:eq(2)',
+    run: function () {
+        $.summernote.core.range.create(this.$anchor.prev()[0].firstChild, 3, this.$anchor[0].firstChild, 10).select();
+        simulateClickEvent(this.$anchor.prev()[0], 'mouseup');
+    }
+}, {
+    content: "open color dropdown",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-paint-brush)",
+}, {
+    content: "change text backColor again",
+    trigger: "button[data-event=backColor]:visible:first",
+}, {
+    content: "change selection (h1 and p) to change text color with class",
+    trigger: '#editable_area > section .row > div:first h1 font:eq(4)',
+    run: function () {
+        $.summernote.core.range.create(this.$anchor.prev()[0].firstChild, 3, this.$anchor.parent("h1").next("p")[0].firstChild, 30).select();
+        simulateClickEvent(this.$anchor.prev()[0], 'mouseup');
+    }
+}, {
+    content: "open color dropdown",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-font)",
+}, {
+    content: "change text color again",
+    trigger: "button[data-event=foreColor]:visible:eq(3)",
+}, {
+    content: "delete selection",
+    trigger: '.o_editable.note-editable.o_dirty',
+    extra_trigger: '#editable_area > section .row > div:first p font',
+    run: "keydown 46", // delete
+}, {
+    content: "create an other selection to delete",
+    trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+    extra_trigger: '.o_editable.note-editable.o_dirty',
+    run: function () {
+        $.summernote.core.range.createFromNode(this.$anchor.next("p")[0]).clean();
+        $.summernote.core.range.create(this.$anchor.find('font:containsExact(ici)')[0].firstChild, 1, this.$anchor.next().next()[0].firstChild, 5).select();
+        simulateClickEvent(this.$anchor.find('font:last')[0], 'mouseup');
+    },
+}, {
+    content: "clean and delete (backspace) an other selection",
+    trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+    run: "keydown 8", // backspace
+}, {
+    content: "an other selection",
+    trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
+    extra_trigger: '.o_editable.note-editable.o_dirty',
+    run: function () {
+        $.summernote.core.range.create(this.$anchor.find('font:first')[0].firstChild, 3, this.$anchor.next("p")[0].childNodes[2], 8).select();
+        simulateClickEvent(this.$anchor.find('font:first')[0], 'mouseup');
+    },
+}, {
+    content: "delete an other selection",
+    trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
+    run: "keydown 46",
+}, {
+    content: "undo",
+    trigger: '.note-image-popover button[data-event="undo"]',
+    extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(Bat) )',
+}, {
+    content: "undo again",
+    trigger: '.note-air-popover button[data-event="undo"]',
+    extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) )',
+}, {
+    content: "delete (backspace) after undo",
+    trigger: '.o_editable.note-editable.o_dirty',
+    extra_trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+    run: "keydown 8", // backspace
+}, {
+    content: "click on image",
+    trigger: '#editable_area > section .row > div:first img[style*="25%"]',
+    extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) )',
+}, {
+    content: "Click on resize half",
+    trigger: '.note-image-popover:visible button[data-event="resize"][data-value="0.5"]',
+}, {
+    content: "Click on edit picture",
+    trigger: '.note-image-popover:visible button[data-event="showImageDialog"]',
+    extra_trigger: '#editable_area > section .row > div:first img[style*="50%"]',
+}, {
+    content: "Click on pictogram tab",
+    trigger: 'a[data-toggle="tab"]:contains(Pictogram)',
+    extra_trigger: '#editor-media-image',
+}, {
+    content: "select a pictogram",
+    trigger: '#editor-media-icon.active span.fa:first',
+}, {
+    content: "save pictogram",
+    trigger: '.modal-footer > .btn-primary',
+    extra_trigger: '#editor-media-icon.active span.o_selected',
+}, {
+    content: "select a size for the pictogram",
+    trigger: '.note-image-popover button[data-event="resizefa"][data-value="3"]',
+}, {
+    content: "click on float right",
+    trigger: '.note-image-popover:visible button[data-event="floatMe"][data-value="right"]',
+    extra_trigger: '#wrapwrap span.fa-3x',
+}, {
+    content: "click on create link",
+    trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]',
+    extra_trigger: '#editable_area > section .row > div:first span.fa.float-right',
+}, {
+    content: "insert a link url",
+    trigger: 'input[name="url"]',
+    run: "text http://www.odoo.com",
+}, {
+    content: "click on color style",
+    trigger: '.o_link_dialog_color > .o_link_dialog_color_item.btn-success',
+    extra_trigger: 'a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.float-right',
+}, {
+    content: "save link",
+    trigger: '.modal-footer > .btn-primary',
+    extra_trigger: 'a#link-preview.btn.btn-success span.fa.fa-3x.float-right',
+}, {
+    content: "click on other picture",
+    trigger: '#editable_area > section .row > div:last img',
+    extra_trigger: 'body:not(:has(#link-preview)) a.btn[href^="http://"]:has(span.fa.fa-3x.float-right)',
+}, {
+    content: "click on create link again",
+    trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]',
+    extra_trigger: '#editable_area > section .row > div:first span.fa.float-right',
+}, {
+    content: "insert an email",
+    trigger: 'input[name="url"]',
+    run: "text test@test.test",
+}, {
+    content: "click on color style again",
+    trigger: '.o_link_dialog_color > .o_link_dialog_color_item.btn-success',
+    extra_trigger: 'a#link-preview:containsRegex(/^<img [^>]+>$/) img',
+}, {
+    content: "save link",
+    trigger: '.modal-footer > .btn-primary',
+    extra_trigger: 'a#link-preview.btn.btn-success[href="mailto:test@test.test"]:containsRegex(/^<img [^>]+>$/) img',
+}, {
+    content: "select for triple enter then double backspace",
+    trigger: '#editable_area > section .row > div:first p:eq(2)',
+    extra_trigger: 'body:not(:has(#link-preview)) #editable_area > section .row > div:eq(1) > a > img',
+    run: function () {
+        var p = this.$anchor[0].firstChild;
+        $.summernote.core.range.create(p, p.textContent.length, p, p.textContent.length).select();
+        simulateClickEvent(p, 'mouseup');
+    },
+}, {
+    content: "triple enter then double backspace",
+    trigger: '#editable_area > section .row > div:first p:eq(2)',
+    run: "keydown 66,13,66,13,13,8,8", // B enter B enter enter backspace backspace
+}, {
+    content: "add ul content",
+    trigger: '#editable_area > section .row > div:first',
+    extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(5), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
+    run: function () {
+        var html = '  <ul>     '+
+            '\n     <li>   <p>Batnae municipium.  </p></li>'+
+            '\n     <li>    Seleucia praeter.</li>'+
+            '\n     <li><p>Et hanc quidem.</p></li>'+
+            '\n    </ul>';
+        this.$anchor.append(html);
+        var node = this.$anchor.find('ul li p:last')[0].firstChild;
+        $.summernote.core.range.create(node, 6).select();
+        simulateClickEvent(node, 'mouseup');
+    }
+}, {
+    content: "click on style dropdown",
+    trigger: '.note-air-popover .note-style button.dropdown-toggle',
+    extra_trigger: '#editable_area > section .row > div:first ul li p:first',
+}, {
+    content: "select h3",
+    trigger: '.note-air-popover .note-style ul:visible a[data-value="h3"]',
+}, {
+    content: "select h3",
+    trigger: '#editable_area > section .row > div:first > ul > li > h3',
+    run: function () {
+        var node = this.$anchor[0].firstChild;
+        $.summernote.core.range.create(node, 0).select();
+        simulateClickEvent(node, 'mouseup');
+    }
+}, {
+    content: "double tabulation",
+    trigger: '#editable_area > section .row > div:first > ul > li > h3',
+    run: "keydown 9,9", // tabulation
+}, {
+    content: "click on order list",
+    trigger: '.note-air-popover button[data-event="insertOrderedList"]',
+    extra_trigger: '#editable_area > section .row > div:first ul > li > ul > li > ul > li > h3',
+}, {
+    content: "select for enter in ul",
+    trigger: '#editable_area > section .row > div:first ul li > p:last',
+    run: function () {
+        this.$anchor[0].firstChild.textContent += "";
+        $.summernote.core.range.create(this.$anchor[0].firstChild, 7).select();
+        simulateClickEvent(this.$anchor[0], 'mouseup');
+    }
+}, {
+    content: "enter in ul",
+    trigger: '#editable_area > section .row > div:first ul li > p:last',
+    run: "keydown 66,13", // enter
+}, {
+    trigger: '#editable_area > section .row > div:first ul li > p:eq(1):containsRegex(/^municipium./)',
+    content: "backspace in list",
+    run: "keydown 8",
+}, {
+    content: "end",
+    trigger: '#editable_area > section .row > div:first ul li p:eq(0):containsRegex(/^Batnae Bmunicipium.$/)',
+}]);
+
+tour.register('rte_inline', {
+    url: '/web_editor/field/html/inline?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+    test: true,
+    wait_for: base.ready(),
+}, [{
+    content: "Change html for this test",
+    trigger: "#editable_area",
+    run: function () {
+        var html = '\n'+
+            '<div>\n'+
+            '  <table cellspacing="0" cellpadding="0" width="100%">\n'+
+            '    <tbody>\n'+
+            '      <tr>\n'+
+            '        <td valign="center" width="270">\n'+
+            '          <img src="/logo.png" alt="Your Logo" class="rounded-circle img-thumbnail">\n'+
+            '        </td>\n'+
+            '        <td valign="center" width="270">\n'+
+            '          <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+
+            '          <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square float-right"></span>\n'+
+            '        </td>\n'+
+            '      </tr>\n'+
+            '    </tbody>\n'+
+            '  </table>\n'+
+            '</div>';
+        this.$anchor.html(html);
+    }
+}, {
+    content: "call clean for save",
+    trigger: '#wrapwrap table',
+    run: function () {
+        core.bus.trigger('snippet_editor_clean_for_save');
+    }
+}, {
+    content: "check the image style",
+    trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
+}, {
+    content: "check the font image src",
+    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,160,157)/28"]',
+}, {
+    content: "check the font class to css",
+    trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
+}, {
+    content: "check the second font class to css",
+    trigger: '#wrapwrap img:eq(2)[style*="float: right"],#wrapwrap img:eq(2)[style*="float:right"]',
+}]);
+});

addons/web_editor/static/src/js/wysiwyg/options.js

@@ -1,6 +0,0 @@
-odoo.define('web_editor.wysiwyg.options', function (require) {
-'use strict';
-
-return $.summernote.options;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/abstract.js

@@ -1,222 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.abstract', function (require) {
-'use strict';
-
-var Class = require('web.Class');
-var mixins = require('web.mixins');
-var ServicesMixin = require('web.ServicesMixin');
-var wysiwygTranslation = require('web_editor.wysiwyg.translation');
-var wysiwygOptions = require('web_editor.wysiwyg.options');
-
-//--------------------------------------------------------------------------
-// AbstractPlugin for summernote module API
-//--------------------------------------------------------------------------
-
-var AbstractPlugin = Class.extend(mixins.EventDispatcherMixin, ServicesMixin).extend({
-    /**
-     * Use this prop if you want to extend a summernote plugin.
-     */
-    init: function (context) {
-        var self = this;
-        this._super.apply(this, arguments);
-        this.setParent(context.options.parent);
-        this.context = context;
-
-        if (!this.context.invoke) {
-            // for use outside of wysiwyg/summernote
-            this.context.invoke = function () {};
-        }
-
-        this.$editable = context.layoutInfo.editable;
-        this.editable = this.$editable[0];
-        this.document = this.editable.ownerDocument;
-        this.window = this.document.defaultView;
-        this.summernote = this.window._summernoteSlave || $.summernote; // if the target is in iframe
-        this.ui = this.summernote.ui;
-        this.$editingArea = context.layoutInfo.editingArea;
-        this.options = _.defaults(context.options || {}, wysiwygOptions);
-        this.lang = wysiwygTranslation;
-        this._addButtons();
-        if (this.events) {
-            this.events = _.clone(this.events);
-            _.each(_.keys(this.events), function (key) {
-                var value = self.events[key];
-                if (typeof value === 'string') {
-                    value = self[value].bind(self);
-                }
-                if (key.indexOf('summernote.') === 0) {
-                    self.events[key] = value;
-                } else {
-                    delete self.events[key];
-                    key = key.split(' ');
-                    if (key.length > 1) {
-                        self.context.layoutInfo.editor.on(key[0], key.slice(1).join(' '), value);
-                    } else {
-                        self.context.layoutInfo.editor.on(key, value);
-                    }
-                }
-            });
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Public summernote module API
-    //--------------------------------------------------------------------------
-
-    shouldInitialize: function () {
-        return true;
-    },
-    initialize: function () {},
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Override to add buttons.
-     */
-    _addButtons: function () {},
-    /**
-     * Creates a dropdown button with its contents and behavior.
-     *
-     * @param {str} optionName
-     * @param {str} buttonIcon (ex.: 'note-icon-align')
-     * @param {str} buttonTooltip (ex.: 'Align Paragraph')
-     * @param {Object[]} values (ex.: [{value: 'padding-small', string: 'S'}])
-     * @param {function} onclick
-     */
-    _createDropdownButton: function (optionName, buttonIcon, buttonTooltip, values, onclick) {
-        var self = this;
-
-        if (!onclick) {
-            onclick = function (e) {
-                var classNames = _.map(values, function (item) {
-                    return item.value;
-                }).join(' ');
-                var $target = $(self.context.invoke('editor.restoreTarget'));
-                $target.removeClass(classNames);
-                if ($(e.target).data('value')) {
-                    $target.addClass($(e.target).data('value'));
-                }
-            };
-        }
-        if (optionName) {
-            this.context.memo('button.' + optionName, function () {
-                return self._renderDropdownButton(buttonIcon, buttonTooltip, values, onclick);
-            });
-        } else {
-            return this._renderDropdownButton(buttonIcon, buttonTooltip, values, onclick);
-        }
-    },
-    /**
-     * Creates a button to toggle a class.
-     *
-     * @param {str} optionName
-     * @param {str} buttonIcon (ex.: 'note-icon-align')
-     * @param {str} buttonTooltip (ex.: 'Align Paragraph')
-     * @param {str} className
-     */
-    _createToggleButton: function (optionName, buttonIcon, buttonTooltip, className) {
-        var self = this;
-        return this._createButton(optionName, buttonIcon, buttonTooltip, function () {
-            var $target = $(self.context.invoke('editor.restoreTarget'));
-            $target.toggleClass(className);
-        });
-    },
-    /**
-     * Creates a button.
-     *
-     * @param {str} optionName
-     * @param {str} buttonIcon (ex.: 'note-icon-align')
-     * @param {str} buttonTooltip (ex.: 'Align Paragraph')
-     * @param {function} onclick
-     */
-    _createButton: function (optionName, buttonIcon, buttonTooltip, onclick) {
-        var self = this;
-        if (optionName) {
-            this.context.memo('button.' + optionName, function () {
-                return self._renderButton(buttonIcon, buttonTooltip, onclick);
-            });
-        } else {
-            return this._renderButton(buttonIcon, buttonTooltip, onclick);
-        }
-    },
-    /**
-     * Helper function to _createButton: renders the button.
-     *
-     * @param {str} buttonIcon (ex.: 'note-icon-align')
-     * @param {str} buttonTooltip (ex.: 'Align Paragraph')
-     * @param {function} onclick
-     * @returns {JQuery}
-     */
-    _renderButton: function (buttonIcon, buttonTooltip, onclick) {
-        var self = this;
-        return this.context.invoke('buttons.button', {
-            contents: buttonIcon.indexOf('<') === -1 ? this.ui.icon(buttonIcon) : buttonIcon,
-            tooltip: buttonTooltip,
-            click: function (e) {
-                e.preventDefault();
-                self.context.invoke('editor.beforeCommand');
-                onclick(e);
-                self.editable.normalize();
-                self.context.invoke('editor.saveRange');
-                self.context.invoke('editor.afterCommand');
-            },
-        }).render();
-    },
-    /**
-     * Helper function to _createDropdownButton: renders the dropdown button.
-     *
-     * @param {str} buttonIcon (ex.: 'note-icon-align')
-     * @param {str} buttonTooltip (ex.: 'Align Paragraph')
-     * @param {Object[]} values (ex.: [{value: 'padding-small', string: 'S'}])
-     * @param {function} onclick
-     * @param {JQuery}
-     */
-    _renderDropdownButton: function (buttonIcon, buttonTooltip, values, onclick) {
-        return this.ui.buttonGroup([
-            this.context.invoke('buttons.button', {
-                className: 'dropdown-toggle',
-                contents: buttonIcon.indexOf('<') === -1 ?
-                    this.ui.dropdownButtonContents(this.ui.icon(buttonIcon), this.options) : buttonIcon,
-                tooltip: buttonTooltip,
-                data: {
-                    toggle: 'dropdown'
-                }
-            }),
-            this.ui.dropdown({
-                items: values,
-                template: function (item) {
-                    return item.string;
-                },
-                click: this._wrapCommand(function (e) {
-                    e.preventDefault();
-                    onclick(e);
-                }),
-            })
-        ]).render();
-    },
-    /**
-     * Wraps a given function between common actions required
-     * for history (undo/redo) and the maintenance of the DOM/range.
-     *
-     * @param {function} fn
-     * @returns {any} the return of fn
-     */
-    _wrapCommand: function (fn) {
-        var self = this;
-        return function () {
-            self.context.invoke('editor.restoreRange');
-            self.context.invoke('editor.beforeCommand');
-            var res = fn.apply(self, arguments);
-            self.editable.normalize();
-            self.context.invoke('editor.saveRange');
-            self.context.invoke('editor.afterCommand');
-            return res;
-        };
-    },
-
-});
-
-return AbstractPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/bullet.js

@@ -1,571 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.bullet', function (require) {
-'use strict';
-
-var core = require('web.core');
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var wysiwygOptions = require('web_editor.wysiwyg.options');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var wysiwygTranslation = require('web_editor.wysiwyg.translation');
-
-var _t = core._t;
-var dom = $.summernote.dom;
-
-wysiwygOptions.icons.checklist = 'fa fa-check-square';
-wysiwygOptions.keyMap.pc['CTRL+SHIFT+NUM9'] = 'insertCheckList';
-wysiwygOptions.keyMap.mac['CMD+SHIFT+NUM9'] = 'insertCheckList';
-wysiwygTranslation.lists.checklist = _t('Checklist');
-wysiwygTranslation.help.checklist = _t('Toggle checkbox list');
-
-
-var BulletPlugin = AbstractPlugin.extend({
-    events: {
-        'summernote.mousedown': '_onMouseDown',
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Insert an ordered list, an unordered list or a checklist.
-     * If already in list, remove the list or convert it to the given type.
-     *
-     * @param {string('ol'|'ul'|'checklist')} type the type of list to insert
-     * @returns {false|Node[]} contents of the ul/ol or content of the converted/removed list
-     */
-    insertList: function (type) {
-        var range = this.context.invoke('editor.createRange');
-        if (!range) {
-            return;
-        }
-        var res;
-        var start = range.getStartPoint();
-        var end = range.getEndPoint();
-
-        var isInList = dom.ancestor(range.sc, dom.isList);
-        if (isInList) {
-            res = this._convertList(false, [], start, end, type);
-        } else {
-            var ul = this._createList(type);
-            res = ul ? [].slice.call(ul.children) : [];
-        }
-
-        var startLeaf = this.context.invoke('HelperPlugin.firstLeaf', start.node);
-        var endLeaf = this.context.invoke('HelperPlugin.firstLeaf', end.node);
-        range = this.context.invoke('editor.setRange', startLeaf, start.offset, endLeaf, end.offset);
-        range.select();
-        this.context.invoke('editor.saveRange');
-
-        return res;
-    },
-    /**
-     * Indent a node (list or format node).
-     *
-     * @returns {false|Node[]} contents of list/indented item
-     */
-    indent: function () {
-        return this._indent();
-    },
-    /**
-     * Outdent a node (list or format node).
-     *
-     * @returns {false|Node[]} contents of list/outdented item
-     */
-    outdent: function () {
-        return this._indent(true);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Add checklist buttons.
-     */
-    _addButtons: function () {
-        var self = this;
-        this._super();
-        this.context.memo('help.checklist', this.lang.help.checklist);
-        this._createButton('checklist', this.options.icons.checklist, this.lang.lists.checklist, function (e) {
-            e.preventDefault();
-            self.context.invoke('editor.insertCheckList');
-        });
-    },
-    /**
-     * Convert ul<->ol or remove ul/ol.
-     *
-     * @param {boolean} isWithinElem true if selection already inside the LI
-     * @param {DOM[]} nodes selected nodes
-     * @param {Object} startPoint
-     * @param {Object} endPoint
-     * @param {boolean} sorted
-     * @returns {boolean} isWithinElem
-     */
-    _convertList: function (isWithinElem, nodes, startPoint, endPoint, sorted) {
-        var ol = dom.ancestor(startPoint.node, dom.isList);
-        var parent = ol.parentNode;
-
-        // get selected lis
-
-        var lis = [];
-        var lisBefore = [];
-        var lisAfter = [];
-        _.each(ol.children, function (li) {
-            if (!isWithinElem && (li === startPoint.node || $.contains(li, startPoint.node))) {
-                isWithinElem = true;
-            }
-            if (isWithinElem) {
-                lis.push(li);
-            } else if (lis.length) {
-                lisAfter.push(li);
-            } else {
-                lisBefore.push(li);
-            }
-            if (isWithinElem && (li === endPoint.node || $.contains(li, endPoint.node))) {
-                isWithinElem = false;
-            }
-        });
-
-        var res = lis;
-
-        if (lisBefore.length) {
-            var ulBefore = this.document.createElement(ol.tagName);
-            ulBefore.className = ol.className;
-
-            if (dom.isLi(ol.parentNode)) {
-                var li = this.document.createElement('li');
-                li.className = ol.parentNode.className;
-                $(li).insertBefore(ol.parentNode);
-                li.appendChild(ulBefore);
-            } else {
-                $(ulBefore).insertBefore(ol);
-            }
-
-            $(ulBefore).append(lisBefore);
-        }
-        if (lisAfter.length) {
-            var ulAfter = this.document.createElement(ol.tagName);
-            ulAfter.className = ol.className;
-
-            if (dom.isLi(ol.parentNode)) {
-                var li = this.document.createElement('li');
-                li.className = ol.parentNode.className;
-                $(li).insertAfter(ol.parentNode);
-                li.appendChild(ulAfter);
-            } else {
-                $(ulAfter).insertAfter(ol);
-            }
-
-            $(ulAfter).append(lisAfter);
-        }
-
-        // convert ul<->ol or remove list
-        var current = ol.tagName === 'UL' && ol.className.indexOf('o_checklist') !== -1 ? 'checklist' : ol.tagName.toLowerCase();
-        if (current !== sorted) {
-            // convert ul <-> ol
-
-            var ul;
-            $(ol).removeClass('o_checklist');
-            if (sorted === 'checklist' && current === "ul") {
-                ul = ol;
-            } else if (sorted === 'ul' && current === 'checklist') {
-                ul = ol;
-            } else {
-                ul = this.document.createElement(sorted === "ol" ? "ol" : "ul");
-                ul.className = ol.className;
-                $(ul).removeClass('o_checklist');
-                $(ul).insertBefore(ol).append(lis);
-                parent.removeChild(ol);
-            }
-            if (sorted === 'checklist') {
-                $(ul).addClass('o_checklist');
-            }
-
-            this.context.invoke('HelperPlugin.deleteEdge', ul, 'next');
-            this.context.invoke('HelperPlugin.deleteEdge', ul, 'prev');
-
-        } else {
-            // remove ol/ul
-
-            if (dom.isLi(parent) || dom.isList(parent)) {
-                if (dom.isLi(parent)) {
-                    ol = parent;
-                    parent = ol.parentNode;
-                }
-                $(lis).insertBefore(ol);
-            } else {
-                res = [];
-                _.each(lis, function (li) {
-                    res.push.apply(res, li.childNodes);
-                    $(li.childNodes).insertBefore(ol);
-                });
-
-                // wrap in p
-
-                var hasNode = _.find(res, function (node) {
-                    return node.tagName && node.tagName !== "BR" && !dom.isMedia(node);
-                });
-                if (!hasNode) {
-                    var p = this.document.createElement('p');
-                    $(p).insertBefore(ol).append(res);
-                    res = [p];
-                }
-            }
-            parent.removeChild(ol);
-
-        }
-
-        nodes.push.apply(nodes, res);
-
-        return isWithinElem;
-    },
-    /**
-     * Create a list if allowed.
-     *
-     * @param {string('ol'|'ul'|'checklist')} type the type of list to insert
-     * @returns {false|Node} the list, if any
-     */
-    _createList: function (type) {
-        var nodes = this.context.invoke('HelperPlugin.getSelectedNodes');
-        var formatNodes = this._filterEditableFormatNodes(nodes);
-        if (!formatNodes.length) {
-            return;
-        }
-
-        var ul = this._createListElement(type);
-        $(formatNodes[0][0] || formatNodes[0]).before(ul);
-        this._fillListElementWith(ul, formatNodes);
-        this._deleteListElementEdges(ul);
-
-        return ul;
-    },
-    /**
-     * Create a list element of the given type and return it.
-     *
-     * @param {string('ol'|'ul'|'checklist')} type the type of list to insert
-     * @returns {Node}
-     */
-    _createListElement: function (type) {
-        var ul = this.document.createElement(type === "ol" ? "ol" : "ul");
-        if (type === 'checklist') {
-            ul.className = 'o_checklist';
-        }
-        return ul;
-    },
-    /**
-     * Delete a list element's edges if necessary.
-     *
-     * @param {Node} ul
-     */
-    _deleteListElementEdges: function (ul) {
-        this.context.invoke('HelperPlugin.deleteEdge', ul, 'next');
-        this.context.invoke('HelperPlugin.deleteEdge', ul, 'prev');
-        this.editable.normalize();
-    },
-    /**
-     * Fill a list element with the nodes passed, wrapped in LIs.
-     *
-     * @param {Node} ul
-     * @param {Node[]} nodes
-     */
-    _fillListElementWith: function (ul, nodes) {
-        var self = this;
-        _.each(nodes, function (node) {
-            var li = self.document.createElement('li');
-            $(li).append(node);
-            ul.appendChild(li);
-        });
-    },
-    /**
-     * Filter the editable format ancestors of the given nodes
-     * and fill or wrap them if needed for range selection.
-     *
-     * @param {Node[]} nodes
-     * @returns {Node[]}
-     */
-    _filterEditableFormatNodes: function (nodes) {
-        var self = this;
-        var formatNodes = this.context.invoke('HelperPlugin.filterFormatAncestors', nodes);
-        formatNodes = _.compact(_.map(formatNodes, function (node) {
-            var ancestor = (!node.tagName || node.tagName === 'BR') && dom.ancestor(node, dom.isCell);
-            if (ancestor && self.options.isEditableNode(ancestor)) {
-                if (!ancestor.childNodes.length) {
-                    var br = self.document.createElement('br');
-                    ancestor.appendChild(br);
-                }
-                var p = self.document.createElement('p');
-                $(p).append(ancestor.childNodes);
-                ancestor.appendChild(p);
-                return p;
-            }
-            return self.options.isEditableNode(node) && node || null;
-        }));
-        return formatNodes;
-    },
-    /**
-     * Indent or outdent a format node.
-     *
-     * @param {bool} outdent true to outdent, false to indent
-     * @returns {false|[]Node} indented nodes
-     */
-    _indent: function (outdent) {
-        var range = this.context.invoke('editor.createRange');
-        if (!range) {
-            return;
-        }
-        // list groups shouldn't be outdented like regular lists
-        if ($(dom.ancestor(range.sc, dom.isList)).hasClass('list-group')) {
-            return;
-        }
-
-        var self = this;
-        var nodes = [];
-        var isWithinElem;
-        var ancestor = range.commonAncestor() || this.editable;
-        var $dom = $(ancestor);
-
-        if (!dom.isList(ancestor)) {
-            // to indent a selection, we indent the child nodes of the common
-            // ancestor that contains this selection
-            $dom = $(ancestor.tagName ? ancestor : ancestor.parentNode).children();
-        }
-
-        // if selection is inside indented contents and outdent is true, we can outdent this node
-        var indentedContent = outdent && dom.ancestor(ancestor, function (node) {
-            var style = dom.isCell(node) ? 'paddingLeft' : 'marginLeft';
-            return node.tagName && !!parseFloat(node.style[style] || 0);
-        });
-
-        if (indentedContent) {
-            $dom = $(indentedContent);
-        } else {
-            // if selection is inside a list, we indent its list items
-            $dom = $(dom.ancestor(ancestor, dom.isList));
-            if (!$dom.length) {
-                // if the selection is contained in a single HTML node, we indent
-                // the first ancestor 'content block' (P, H1, PRE, ...) or TD
-                var nodes = this.context.invoke('HelperPlugin.getSelectedNodes');
-                $dom = $(this._filterEditableFormatNodes(nodes));
-            }
-        }
-
-        // if select tr, take the first td
-        $dom = $dom.map(function () {
-            return this.tagName === "TR" ? this.firstElementChild : this;
-        });
-
-        $dom.each(function () {
-            if (isWithinElem || $.contains(this, range.sc)) {
-                if (dom.isList(this)) {
-                    if (outdent) {
-                        var type = this.tagName === 'OL' ? 'ol' : (this.className && this.className.indexOf('o_checklist') !== -1 ? 'checklist' : 'ul');
-                        isWithinElem = self._convertList(isWithinElem, nodes, range.getStartPoint(), range.getEndPoint(), type);
-                    } else {
-                        isWithinElem = self._indentUL(isWithinElem, nodes, this, range.sc, range.ec);
-                    }
-                } else if (self.context.invoke('HelperPlugin.isFormatNode', this) || dom.ancestor(this, dom.isCell)) {
-                    isWithinElem = self._indentFormatNode(outdent, isWithinElem, nodes, this, range.sc, range.ec);
-                }
-            }
-        });
-
-        if ($dom.parent().length) {
-            var $parent = $dom.parent();
-
-            // remove text nodes between lists
-            var $ul = $parent.find('ul, ol');
-            if (!$ul.length) {
-                $ul = $(dom.ancestor(range.sc, dom.isList));
-            }
-            $ul.each(function () {
-                var notWhitespace = /\S/;
-                if (
-                    this.previousSibling &&
-                    this.previousSibling !== this.previousElementSibling &&
-                    !this.previousSibling.textContent.match(notWhitespace)
-                ) {
-                    this.parentNode.removeChild(this.previousSibling);
-                }
-                if (
-                    this.nextSibling &&
-                    this.nextSibling !== this.nextElementSibling &&
-                    !this.nextSibling.textContent.match(notWhitespace)
-                ) {
-                    this.parentNode.removeChild(this.nextSibling);
-                }
-            });
-
-            // merge same ul or ol
-            $ul.prev('ul, ol').each(function () {
-                self.context.invoke('HelperPlugin.deleteEdge', this, 'next');
-            });
-
-        }
-
-        range.normalize().select();
-        this.context.invoke('editor.saveRange');
-
-        return !!nodes.length && nodes;
-    },
-    /**
-     * Indent several LIs in a list.
-     *
-     * @param {bool} isWithinElem true if selection already inside the LI
-     * @param {Node[]} nodes
-     * @param {Node} UL
-     * @param {Node} start
-     * @param {Node} end
-     * @returns {bool} isWithinElem
-     */
-    _indentUL: function (isWithinElem, nodes, UL, start, end) {
-        var next;
-        var tagName = UL.tagName;
-        var node = UL.firstChild;
-        var ul = document.createElement(tagName);
-        ul.className = UL.className;
-        var flag;
-
-        if (isWithinElem) {
-            flag = true;
-        }
-
-        // create and fill ul into a li
-        while (node) {
-            if (flag || node === start || $.contains(node, start)) {
-                isWithinElem = true;
-                node.parentNode.insertBefore(ul, node);
-            }
-            next = node.nextElementSibling;
-            if (isWithinElem) {
-                ul.appendChild(node);
-                nodes.push(node);
-            }
-            if (node === end || $.contains(node, end)) {
-                isWithinElem = false;
-                break;
-            }
-            node = next;
-        }
-
-        var temp;
-        var prev = ul.previousElementSibling;
-        if (
-            prev && prev.tagName === "LI" &&
-            (temp = prev.firstElementChild) && temp.tagName === tagName &&
-            ((prev.firstElementChild || prev.firstChild) !== ul)
-        ) {
-            $(prev.firstElementChild || prev.firstChild).append($(ul).contents());
-            $(ul).remove();
-            ul = prev;
-            ul.parentNode.removeChild(ul.nextElementSibling);
-        }
-        next = ul.nextElementSibling;
-        if (
-            next && next.tagName === "LI" &&
-            (temp = next.firstElementChild) && temp.tagName === tagName &&
-            (ul.firstElementChild !== next.firstElementChild)
-        ) {
-            $(ul.firstElementChild).append($(next.firstElementChild).contents());
-            $(next.firstElementChild).remove();
-            ul.parentNode.removeChild(ul.nextElementSibling);
-        }
-
-        // wrap in li
-        var li = this.document.createElement('li');
-        li.className = 'o_indent';
-        $(ul).before(li);
-        li.appendChild(ul);
-
-        return isWithinElem;
-    },
-    /**
-     * Outdent a container node.
-     *
-     * @param {Node} node
-     * @returns {float} margin
-     */
-    _outdentContainer: function (node) {
-        var style = dom.isCell(node) ? 'paddingLeft' : 'marginLeft';
-        var margin = parseFloat(node.style[style] || 0) - 1.5;
-        node.style[style] = margin > 0 ? margin + "em" : "";
-        return margin;
-    },
-    /**
-     * Indent a container node.
-     *
-     * @param {Node} node
-     * @returns {float} margin
-     */
-    _indentContainer: function (node) {
-        var style = dom.isCell(node) ? 'paddingLeft' : 'marginLeft';
-        var margin = parseFloat(node.style[style] || 0) + 1.5;
-        node.style[style] = margin + "em";
-        return margin;
-    },
-    /**
-     * Indent/outdent a format node.
-     *
-     * @param {bool} outdent true to outdent, false to indent
-     * @param {bool} isWithinElem true if selection already inside the element
-     * @param {DOM[]} nodes
-     * @param {DOM} p
-     * @param {DOM} start
-     * @param {DOM} end
-     * @returns {bool} isWithinElem
-     */
-    _indentFormatNode: function (outdent, isWithinElem, nodes, p, start, end) {
-        if (p === start || $.contains(p, start) || $.contains(start, p)) {
-            isWithinElem = true;
-        }
-        if (isWithinElem) {
-            nodes.push(p);
-            if (outdent) {
-                this._outdentContainer(p);
-            } else {
-                this._indentContainer(p);
-            }
-        }
-        if (p === end || $.contains(p, end) || $.contains(end, p)) {
-            isWithinElem = false;
-        }
-        return isWithinElem;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handle
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {SummernoteEvent} se
-     * @param {jQueryEvent} e
-     */
-    _onMouseDown: function (se, e) {
-        if (!dom.isLi(e.target) || !$(e.target).parent('ul.o_checklist').length || e.offsetX > 0) {
-            return;
-        }
-        e.preventDefault();
-        var checked = $(e.target).hasClass('o_checked');
-        $(e.target).toggleClass('o_checked', !checked);
-        var $sublevel = $(e.target).next('ul.o_checklist, li:has(> ul.o_checklist)').find('> li, ul.o_checklist > li');
-        var $parents = $(e.target).parents('ul.o_checklist').map(function () {
-            return this.parentNode.tagName === 'LI' ? this.parentNode : this;
-        });
-        if (checked) {
-            $sublevel.removeClass('o_checked');
-            $parents.prev('ul.o_checklist li').removeClass('o_checked');
-        } else {
-            $sublevel.addClass('o_checked');
-            var $lis;
-            do {
-                $lis = $parents.not(':has(li:not(.o_checked))').prev('ul.o_checklist li:not(.o_checked)');
-                $lis.addClass('o_checked');
-            } while ($lis.length);
-        }
-    },
-});
-
-registry.add('BulletPlugin', BulletPlugin);
-
-return BulletPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/buttons.js

@@ -1,88 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.buttons', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-
-var dom = $.summernote.dom;
-
-Plugins.buttons.include({
-    /**
-     * Fix tooltip for 'option' buttons (summernote 0.8.9 bug)
-     * Remove this once the library is updated to 0.8.10.
-     *
-     * @override
-     */
-    addToolbarButtons: function () {
-        this.options.codeview = this.lang.options.codeview;
-        this.options.help = this.lang.options.help;
-        this.options.fullscreen = this.lang.options.fullscreen;
-        this._super();
-    },
-    /**
-     * Show current style (of start of selection) in magic wand dropdown.
-     *
-     * @param {JQuery Object} $container
-     */
-    updateActiveStyleDropdown: function ($container) {
-        var self = this;
-        var range = this.context.invoke('editor.createRange');
-        var el = dom.ancestor(range.sc, function (n) {
-            return n.tagName && self.options.styleTags.indexOf(n.tagName.toLowerCase()) !== -1;
-        });
-        if (el) {
-            var tagName = el.tagName.toLowerCase();
-            $container.find('.dropdown-style a').each(function (idx, item) {
-                var $item = $(item);
-                // always compare string to avoid creating another func.
-                var isChecked = ($item.data('value') + '') === (tagName + '');
-                $item.toggleClass('active', isChecked);
-            });
-        } else {
-            var $item = $container.find('.dropdown-style a.active');
-            $item.removeClass('active');
-        }
-    },
-    /**
-     * @override
-     */
-    updateCurrentStyle: function ($container) {
-        this._super.apply(this, arguments);
-
-        this.updateParaAlignIcon($container || this.$toolbar);
-        this.updateActiveStyleDropdown($container || this.$toolbar);
-    },
-    /**
-     * Show current paragraph alignment (of start of selection) on paragraph alignment dropdown.
-     *
-     * @param {JQuery Object} $container
-     */
-    updateParaAlignIcon: function ($container) {
-        var range = this.context.invoke('editor.createRange');
-        var $paraIcon = $container.find('.note-para .dropdown-toggle i');
-        var el = dom.isText(range.sc) ? range.sc.parentNode : range.sc;
-        if (el) {
-            $paraIcon.removeClass();
-            switch ($(el).css('text-align')) {
-                case 'left':
-                    $paraIcon.addClass('note-icon-align-left');
-                    break;
-                case 'center':
-                    $paraIcon.addClass('note-icon-align-center');
-                    break;
-                case 'right':
-                    $paraIcon.addClass('note-icon-align-right');
-                    break;
-                case 'justify':
-                    $paraIcon.addClass('note-icon-align-justify');
-                    break;
-                default:
-                    $paraIcon.addClass('note-icon-align-left');
-                    break;
-            }
-        }
-    },
-});
-
-return Plugins.buttons;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/codeview.js

@@ -1,60 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.codeview', function (require) {
-'use strict';
-
-var core = require('web.core');
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var _t = core._t;
-
-
-var CodeviewPlugin = Plugins.codeview.extend({
-    /**
-     * @override
-     */
-    activate: function () {
-        this._super();
-        if (this.$codable.height() === 0) {
-            this.$codable.height(180);
-        }
-        this.context.invoke('editor.hidePopover');
-        this.context.invoke('editor.clearTarget');
-    },
-    /**
-     * @override
-     */
-    deactivate: function () {
-        if (
-            this.context.invoke('HelperPlugin.hasJinja', this.context.invoke('code')) &&
-            !this.isBeingDestroyed
-        ) {
-            var message = _t("Your code contains JINJA conditions.\nRemove them to return to WYSIWYG HTML edition.");
-            this.do_warn(_t("Cannot edit HTML"), message);
-            this.$codable.focus();
-            return;
-        }
-        this._super();
-        this.$editable.css('height', '');
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this.isBeingDestroyed = true;
-        this._super();
-    },
-    /**
-     * Force activation of the code view.
-     */
-    forceActivate: function () {
-        if (!this.isActivated()) {
-            this.activate();
-        }
-    },
-});
-
-registry.add('codeview', CodeviewPlugin);
-
-return CodeviewPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js

@@ -1,229 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.dropzone', function (require) {
-'use strict';
-
-var core = require('web.core');
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var utils = require('web.utils');
-
-var _t = core._t;
-var dom = $.summernote.dom;
-
-var DropzonePlugin = Plugins.dropzone.extend({
-    //--------------------------------------------------------------------------
-    // Public summernote module API
-    //--------------------------------------------------------------------------
-
-    /**
-     * Disable Summernote's handling of drop events.
-     */
-    attachDragAndDropEvent: function () {
-        this._super.apply(this, arguments);
-        this.$dropzone.off('drop');
-        this.$dropzone.on('dragenter', this._onDragenter.bind(this));
-        this.$dropzone.on('drop', this._onDrop.bind(this));
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Clean up then drops HTML or plain text into the editor.
-     *
-     * @private
-     * @param {String} html
-     * @param {Boolean} textOnly true to allow only dropping plain text
-     */
-    _dropHTML: function (html, textOnly) {
-        this.context.invoke('editor.beforeCommand');
-
-        // Clean up
-        var nodes = this.context.invoke('TextPlugin.prepareClipboardData', html);
-
-        // Delete selection
-        this.context.invoke('HelperPlugin.deleteSelection');
-
-        // Insert the nodes
-        this.context.invoke('TextPlugin.pasteNodes', nodes, textOnly);
-        this.context.invoke('HelperPlugin.normalize');
-        this.context.invoke('editor.saveRange');
-
-        this.context.invoke('editor.afterCommand');
-    },
-    /**
-     * Drop images into the editor: save them as attachments.
-     *
-     * @private
-     * @param {File[]]} files (images only)
-     */
-    _dropImages: function (files) {
-        var self = this;
-        this.context.invoke('editor.beforeCommand');
-        var range = this.context.invoke('editor.createRange');
-
-        var spinners = [];
-        var images = [];
-        var defs = [];
-        _.each(files, function (file) {
-            // Add spinner
-            var spinner = $('<span class="fa fa-spinner fa-spin">').attr('data-filename', file.name)[0];
-            self.context.invoke('editor.hidePopover');
-            if (range.sc.tagName) {
-                if (range.so >= dom.nodeLength(range.sc)) {
-                    $(range.sc).append(spinner);
-                } else {
-                    $(range.sc.childNodes[range.so]).before(spinner);
-                }
-            } else {
-                range.sc.splitText(range.so);
-                $(range.sc).after(spinner);
-            }
-            spinners.push(spinner);
-
-            // save images as attachments
-            var def = new Promise(function (resolve) {
-                // Get image's Base64 string
-                utils.getDataURLFromFile(file).then(function (result) {
-                    self._uploadImage(result, file.name).then(function (attachment) {
-                        // Make the HTML
-                        var image = self.document.createElement('img');
-                        image.setAttribute('style', 'width: 100%;');
-                        image.src = '/web/content/' + attachment.id + '/' + attachment.name;
-                        image.alt = attachment.name;
-                        $(spinner).replaceWith(image);
-                        images.push(image);
-                        resolve(image);
-                        $(image).trigger('dropped');
-                    });
-                });
-            });
-            defs.push(def);
-        });
-
-        this.trigger_up('drop_images', {
-            spinners: spinners,
-            promises: defs,
-        });
-
-        Promise.all(defs).then(function () {
-            var defs = [];
-            $(images).each(function () {
-                if (!this.height) {
-                    var def = new Promise(function (resolve) {
-                        $(this).one('load error abort', resolve);
-                    });
-                    defs.push(def);
-                }
-            });
-            Promise.all(defs).then(function () {
-                if (images.length === 1) {
-                    range = self.context.invoke('editor.setRange', _.last(images), 0);
-                    range.select();
-                    self.context.invoke('editor.saveRange');
-                    self.context.invoke('editor.afterCommand');
-                    self.context.invoke('MediaPlugin.updatePopoverAfterEdit', images[0]);
-                } else {
-                    self.context.invoke('editor.afterCommand');
-                }
-            });
-        });
-    },
-    /**
-     * Upload an image from its Base64 representation.
-     *
-     * @private
-     * @param {String} imageBase64
-     * @param {String} fileName
-     * @returns {Promise}
-     */
-    _uploadImage: function (imageBase64, fileName) {
-        var options = {};
-        this.trigger_up('getRecordInfo', {
-            recordInfo: options,
-            type: 'media',
-            callback: function (recordInfo) {
-                _.defaults(options, recordInfo);
-            },
-        });
-
-        return this._rpc({
-            route: '/web_editor/attachment/add_data',
-            params: {
-                'data': imageBase64.split(';base64,').pop(),
-                'name': fileName,
-                'res_id': options.res_id || 0,
-                'res_model': options.res_model,
-            },
-        });
-    },
-    /**
-     * @private
-     * @param {JQueryEvent} e
-     */
-    _onDragenter: function (e) {
-        var range = this.context.invoke('editor.createRange');
-        if (!this.editable.contains(range.sc)) {
-            var node = this.editable;
-            if (node && node.firstChild) {
-                node = node.firstChild;
-            }
-            range = this.context.invoke('editor.setRange', node, 0, node, 0);
-            range.select();
-        }
-    },
-    /**
-     * @private
-     * @param {JQueryEvent} e
-     */
-    _onDrop: function (e) {
-        e.preventDefault();
-
-        this.$editor.removeClass('dragover');
-
-        if (this.options.disableDragAndDrop) {
-            return;
-        }
-        var dataTransfer = e.originalEvent.dataTransfer;
-
-        if (!this._canDropHere()) {
-            this.context.invoke('HelperPlugin.notify', _t("Not a dropzone"), _t("Dropping is prohibited in this area."));
-            return;
-        }
-
-        if (dataTransfer.getData('text/html')) {
-            this._dropHTML(dataTransfer.getData('text/html'));
-            return;
-        }
-        if (dataTransfer.files.length) {
-            var images = [];
-            _.each(dataTransfer.files, function (file) {
-                if (file.type.indexOf('image') !== -1) {
-                    images.push(file);
-                }
-            });
-            if (!images.length || images.length < dataTransfer.files.length) {
-                this.context.invoke('HelperPlugin.notify', _t("Unsupported file type"), _t("Images are the only file types that can be dropped."));
-            }
-            if (images.length) {
-                this._dropImages(images);
-            }
-        }
-    },
-    /**
-     * Return true if dropping is allowed at the current range.
-     *
-     * @private
-     * @returns {Boolean}
-     */
-    _canDropHere: function () {
-        var range = this.context.invoke('editor.createRange');
-        return this.options.isEditableNode(range.sc);
-    },
-});
-
-registry.add('dropzone', DropzonePlugin);
-
-return DropzonePlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/editor.js

@@ -1,189 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.editor', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var TablePlugin = require('web_editor.wysiwyg.plugin.table');
-
-
-var NewSummernoteEditor = Plugins.editor.extend({
-    //--------------------------------------------------------------------------
-    // Public summernote module API
-    //--------------------------------------------------------------------------
-
-    initialize: function () {
-        var self = this;
-        this.history = this.context.modules.HistoryPlugin;
-        this.dropzone = this.context.modules.DropzonePlugin;
-
-        this.insertTable = this.wrapCommand(this._insertTable.bind(this));
-        this.insertOrderedList = this.wrapCommand(this._insertOrderedList.bind(this));
-        this.insertUnorderedList = this.wrapCommand(this._insertUnorderedList.bind(this));
-        this.insertCheckList = this.wrapCommand(this._insertCheckList.bind(this));
-        this.indent = this.wrapCommand(this._indent.bind(this));
-        this.outdent = this.wrapCommand(this._outdent.bind(this));
-        this.table = new TablePlugin(this.context);
-        this.hasFocus = this._hasFocus.bind(this);
-
-        this._makeTextCommand('formatBlock');
-        this._makeTextCommand('removeFormat');
-        _.each('bold,italic,underline,strikethrough,superscript,subscript'.split(','), function (sCmd) {
-            self._makeTextCommand('formatText', sCmd);
-        });
-        _.each('justifyLeft,justifyCenter,justifyRight,justifyFull'.split(','), function (sCmd) {
-            self._makeTextCommand('formatBlockStyle', sCmd);
-        });
-
-        this._super();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Hide all popovers.
-     */
-    hidePopover: function () {
-        this.context.invoke('MediaPlugin.hidePopovers');
-        this.context.invoke('LinkPopover.hide');
-    },
-    /*
-     * Focus the editor.
-     */
-    focus: function () {
-        // [workaround] Screen will move when page is scolled in IE.
-        //  - do focus when not focused
-        if (!this.hasFocus()) {
-            var range = $.summernote.range.create();
-            if (range) {
-                $(range.sc).closest('[contenteditable]').focus();
-                range.select();
-            } else {
-                this.$editable.focus();
-            }
-        }
-    },
-    /**
-     * Fix double-undo (CTRL-Z) issue with Odoo integration.
-     *
-     * @override
-     */
-    undo: function () {
-        this.createRange();
-        this._super();
-    },
-    /**
-     * Set the range at the given nodes and offsets.
-     * If no `ec` is specified, the range is collapsed on start.
-     * Note: Does NOT select the range.
-     *
-     * @param {Node} sc
-     * @param {Number} so
-     * @param {Node} [ec]
-     * @param {Number} [eo]
-     * @returns {Object} range
-     */
-    setRange: function (sc, so, ec, eo) {
-        var range = this.createRange();
-        range.sc = sc;
-        range.so = so;
-        range.ec = ec || sc;
-        range.eo = eo || so;
-        return range;
-    },
-    /**
-     * Remove a link and preserve its text contents.
-     */
-    unlink: function () {
-        this.beforeCommand();
-        this.context.invoke('LinkPlugin.unlink');
-        this.afterCommand();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Returns true if editable area has focus.
-     *
-     * @private
-     * @returns {Boolean}
-     */
-    _hasFocus: function () {
-        return this.$editable.is(':focus') || !!this.$editable.find('[contenteditable]:focus').length;
-    },
-    /**
-     * Indent a list or a format node.
-     *
-     * @private
-     * @returns {false|Node[]} contents of list/indented item
-     */
-    _indent: function () {
-        return this.context.invoke('BulletPlugin.indent');
-    },
-    /**
-     * Insert a checklist.
-     *
-     * @private
-     */
-    _insertCheckList: function () {
-        this.context.invoke('BulletPlugin.insertList', 'checklist');
-    },
-    /**
-     * Insert an ordered list.
-     *
-     * @private
-     */
-    _insertOrderedList: function () {
-        this.context.invoke('BulletPlugin.insertList', 'ol');
-    },
-    /**
-     * Insert table (respecting unbreakable node rules).
-     *
-     * @private
-     * @param {string} dim (eg: 3x3)
-     */
-    _insertTable: function (dim) {
-        this.context.invoke('TablePlugin.insertTable', dim);
-    },
-    /**
-     * Insert an ordered list.
-     *
-     * @private
-     */
-    _insertUnorderedList: function () {
-        this.context.invoke('BulletPlugin.insertList', 'ul');
-    },
-    /**
-     * Adds a TextPlugin command to the editor object.
-     * The command will exist in the editor object under the name
-     * arg if specified, or commandName otherwise.
-     *
-     * @param {String} commandName
-     * @param {String} arg
-     */
-    _makeTextCommand: function (commandName, arg) {
-        var self = this;
-        this[arg || commandName] = self.wrapCommand(function (value) {
-            self.context.invoke('TextPlugin.' + commandName, arg || value, value);
-        });
-    },
-    /**
-     * Outdent a list or a format node.
-     *
-     * @private
-     * @returns {false|Node[]} contents of list/outdented item
-     */
-    _outdent: function () {
-        return this.context.invoke('BulletPlugin.outdent');
-    },
-});
-
-// Override Summernote default editor
-registry.add('editor', NewSummernoteEditor);
-
-return NewSummernoteEditor;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/font.js

@@ -1,567 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.font', function (require) {
-'use strict';
-
-var core = require('web.core');
-var ColorpickerDialog = require('web.ColorpickerDialog');
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var wysiwygTranslation = require('web_editor.wysiwyg.translation');
-var wysiwygOptions = require('web_editor.wysiwyg.options');
-
-var QWeb = core.qweb;
-var _t = core._t;
-
-var dom = $.summernote.dom;
-
-//--------------------------------------------------------------------------
-// Font (colorpicker & font-size)
-//--------------------------------------------------------------------------
-
-dom.isFont = function (node) {
-    return node && node.tagName === "FONT" || dom.isIcon(node);
-};
-
-var FontPlugin = AbstractPlugin.extend({
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Creates both ColorPicker buttons (fore- and backcolors) containing their palettes.
-     *
-     * @returns {jQuery} the buttons' div.btn-group container
-     */
-    createColorPickerButtons: function () {
-        var self = this;
-        var $container = $('<div class="note-btn-group btn-group note-color"/>');
-
-        // create and append the buttons
-
-        this._createForeColorButton().appendTo($container);
-        this._createBackColorButton().appendTo($container);
-
-        // add event
-
-        $container.on('mousedown', function () {
-            self.context.invoke('editor.saveRange');
-        });
-        return $container;
-    },
-    /**
-     * Takes the font size button created by summernote and override its
-     * events so as to customize its behavior.
-     *
-     * @param {jQuery} $button the button, as created by summernote
-     * @returns {jQuery} the overridden button
-     */
-    overrideFontSizeButton: function ($button) {
-        var self = this;
-        $button.click(function (e) {
-            e.preventDefault();
-        });
-        $button.find('.dropdown-menu').off('click').on('mousedown', function (e) {
-            e.preventDefault();
-            self.context.invoke('editor.createRange');
-            self.context.invoke('editor.beforeCommand');
-            var $target = $(e.target);
-            self.context.invoke('FontPlugin.changeFontSize', $target.closest('[data-value]').data('value'), $target);
-            self.context.invoke('buttons.updateCurrentStyle');
-            self.context.invoke('editor.saveRange');
-            self.context.invoke('editor.afterCommand');
-        });
-        return $button;
-    },
-    /**
-     * Creates a (fore- or back-) color palette.
-     *
-     * @param {string('foreColor'|'backColor')} eventName
-     * @returns {jQuery}
-     */
-    createPalette: function (eventName) {
-        var self = this;
-        var colors = _.clone(this.options.colors);
-        colors.splice(0, 1); // Ignore the summernote gray palette and use ours
-        var $palette = $(QWeb.render('wysiwyg.plugin.font.colorPalette', {
-            colors: colors,
-            eventName: eventName,
-            lang: this.lang,
-        }));
-        if (this.options.tooltip) {
-            $palette.find('.note-color-btn').tooltip({
-                container: this.options.container,
-                trigger: 'hover',
-                placement: 'bottom'
-            });
-        }
-
-        // custom structure for the color picker and custom colorsin XML template
-        var $clpicker = $(QWeb.render('web_editor.colorpicker'));
-
-        var $buttons = $(_.map($clpicker.children(), function (group) {
-            var $contents = $(group).contents();
-            if (!$contents.length) {
-                return '';
-            }
-            var $row = $("<div/>", {
-                "class": "note-color-row mb8 clearfix",
-                'data-group': $(group).data('name'),
-            }).append($contents);
-            var $after_breaks = $row.find(".o_small + :not(.o_small)");
-            if ($after_breaks.length === 0) {
-                $after_breaks = $row.find(":nth-child(8n+9)");
-            }
-            $after_breaks.addClass("o_clear");
-            return $row[0].outerHTML;
-        }).join(""));
-
-        $buttons.find('button').each(function () {
-            var color = $(this).data('color');
-            $(this).addClass('note-color-btn bg-' + color).attr('data-value', (eventName === 'backColor' ? 'bg-' : 'text-') + color);
-        });
-
-        $palette.find('.o_theme_color_placeholder').prepend($buttons.filter('[data-group="theme"]'));
-        $palette.find('.o_transparent_color_placeholder').prepend($buttons.filter('[data-group="transparent_grayscale"]'));
-        $palette.find('.o_common_color_placeholder').prepend($buttons.filter('[data-group="common"]'));
-
-        $palette.off('click').on('mousedown', '.note-color-btn', function (e) {
-            e.preventDefault();
-            self.context.invoke('editor.createRange');
-            self.context.invoke('editor.beforeCommand');
-            var method = eventName === 'backColor' ? 'changeBgColor' : 'changeForeColor';
-            var $target = $(e.target);
-            self.context.invoke('FontPlugin.' + method, $target.closest('[data-value]').data('value'), $target);
-            self.context.invoke('buttons.updateCurrentStyle');
-            self.editable.normalize();
-            self.context.invoke('editor.saveRange');
-            self.context.invoke('editor.afterCommand');
-        });
-        $palette.on('mousedown', '.note-custom-color', this._onCustomColor.bind(this, eventName));
-
-        return $palette;
-    },
-    /**
-     * Change the selection's fore color.
-     *
-     * @param {string} color (hexadecimal or class name)
-     */
-    changeForeColor: function (color) {
-        this._applyFont(color || 'text-undefined', null, null);
-    },
-    /**
-     * Change the selection's background color.
-     *
-     * @param {string} color (hexadecimal or class name)
-     */
-    changeBgColor: function (color) {
-        this._applyFont(null, color || 'bg-undefined', null);
-    },
-    /**
-     * Change the selection's font size.
-     *
-     * @param {integer} fontsize
-     */
-    changeFontSize: function (fontsize) {
-        this._applyFont(null, null, fontsize || 'inherit');
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Applies the given styles (fore- or backcolor, font size)
-     * to a given <font> node.
-     *
-     * @private
-     * @param {Node} node
-     * @param {string} color (hexadecimal or class name)
-     * @param {string} bgcolor (hexadecimal or class name)
-     * @param {integer} size
-     * @returns {Node} the <font> node
-     */
-    _applyStylesToFontNode: function (node, color, bgcolor, size) {
-        var className = node.className.split(this.context.invoke('HelperPlugin.getRegex', 'space'));
-        var k;
-        if (color) {
-            for (k = 0; k < className.length; k++) {
-                if (className[k].length && className[k].slice(0, 5) === "text-") {
-                    className.splice(k, 1);
-                    k--;
-                }
-            }
-            if (color === 'text-undefined') {
-                node.className = className.join(" ");
-                node.style.color = "inherit";
-            } else if (color.indexOf('text-') !== -1) {
-                node.className = className.join(" ") + " " + color;
-                node.style.color = "inherit";
-            } else {
-                node.className = className.join(" ");
-                node.style.color = color;
-            }
-        }
-        if (bgcolor) {
-            for (k = 0; k < className.length; k++) {
-                if (className[k].length && className[k].slice(0, 3) === "bg-") {
-                    className.splice(k, 1);
-                    k--;
-                }
-            }
-
-            if (bgcolor === 'bg-undefined') {
-                node.className = className.join(" ");
-                node.style.backgroundColor = "inherit";
-            } else if (bgcolor.indexOf('bg-') !== -1) {
-                node.className = className.join(" ") + " " + bgcolor;
-                node.style.backgroundColor = "inherit";
-            } else {
-                node.className = className.join(" ");
-                node.style.backgroundColor = bgcolor;
-            }
-        }
-        if (size) {
-            node.style.fontSize = "inherit";
-            if (!isNaN(size) && Math.abs(parseInt(this.window.getComputedStyle(node).fontSize, 10) - size) / size > 0.05) {
-                node.style.fontSize = size + "px";
-            }
-        }
-        return node;
-    },
-    /**
-     * Applies the given styles (fore- or backcolor, font size) to the selection.
-     * If no text is selected, apply to the current text node, if any.
-     *
-     * @private
-     * @param {string} color (hexadecimal or class name)
-     * @param {string} bgcolor (hexadecimal or class name)
-     * @param {integer} fontsize
-     */
-    _applyFont: function (color, bgcolor, size) {
-        var self = this;
-        var r = this.context.invoke('editor.createRange');
-        if (!r || !this.$editable.has(r.sc).length || !this.$editable.has(r.ec).length) {
-            return;
-        }
-        var target;
-        var font;
-        if (r.isCollapsed()) {
-            if (dom.isIcon(r.sc)) {
-                target = dom.lastAncestor(r.sc, dom.isIcon);
-            } else {
-                target = this.context.invoke('editor.restoreTarget');
-                if (target && dom.isIcon(target)) {
-                    r = this.context.invoke('editor.setRange', target, 0);
-                } else if (dom.isText(r.sc)) {
-                    font = dom.create("font");
-                    font.appendChild(this.document.createTextNode('\u200B'));
-
-                    var fontParent = dom.ancestor(r.sc, function (n) {
-                        return n.tagName === 'FONT';
-                    });
-                    var right;
-                    if (fontParent) {
-                        right = this.context.invoke('HelperPlugin.splitTree', fontParent, r.getStartPoint());
-                    } else {
-                        right = r.sc.splitText(r.so);
-                    }
-                    $(right).before(font);
-                    font = this._applyStylesToFontNode(font, color, bgcolor, size);
-                    r = this.context.invoke('editor.setRange', font, 1);
-                    r.select();
-                    return;
-                }
-            }
-        }
-
-        var startPoint = r.getStartPoint();
-        var endPoint = r.getEndPoint();
-        if (startPoint.node.tagName && startPoint.node.childNodes[startPoint.offset]) {
-            startPoint.node = startPoint.node.childNodes[startPoint.offset];
-            startPoint.offset = 0;
-        }
-        if (endPoint.node.tagName && endPoint.node.childNodes[endPoint.offset]) {
-            endPoint.node = endPoint.node.childNodes[endPoint.offset];
-            endPoint.offset = 0;
-        }
-        // get first and last point
-        var ancestor;
-        var node;
-        if (!r.isCollapsed()) {
-            if (endPoint.offset && endPoint.offset !== dom.nodeLength(endPoint.node)) {
-                ancestor = dom.lastAncestor(endPoint.node, dom.isFont) || endPoint.node;
-                dom.splitTree(ancestor, endPoint);
-            }
-            if (startPoint.offset && startPoint.offset !== dom.nodeLength(startPoint.node)) {
-                ancestor = dom.lastAncestor(startPoint.node, dom.isFont) || startPoint.node;
-                node = dom.splitTree(ancestor, startPoint);
-                if (endPoint.node === startPoint.node) {
-                    endPoint.node = node;
-                    endPoint.offset = dom.nodeLength(node);
-                }
-                startPoint.node = node;
-                startPoint.offset = 0;
-            }
-        }
-        // get list of nodes to change
-        var nodes = [];
-        dom.walkPoint(startPoint, endPoint, function (point) {
-            var node = point.node;
-            if (((dom.isText(node) && self.context.invoke('HelperPlugin.isVisibleText', node)) || dom.isIcon(node)) &&
-                (node !== endPoint.node || endPoint.offset)) {
-                nodes.push(point.node);
-            }
-        });
-        nodes = _.unique(nodes);
-        // if fontawesome
-        if (r.isCollapsed()) {
-            nodes.push(startPoint.node);
-        }
-
-        // apply font: foreColor, backColor, size (the color can be use a class text-... or bg-...)
-        var $font;
-        var fonts = [];
-        var style;
-        var className;
-        var i;
-        if (color || bgcolor || size) {
-            for (i = 0; i < nodes.length; i++) {
-                node = nodes[i];
-                font = dom.lastAncestor(node, dom.isFont);
-                if (!font) {
-                    if (node.textContent.match(this.context.invoke('HelperPlugin.getRegex', 'startAndEndSpace'))) {
-                        node.textContent = node.textContent.replace(this.context.invoke('HelperPlugin.getRegex', 'startAndEndSpace', 'g'), '\u00A0');
-                    }
-                    font = dom.create("font");
-                    node.parentNode.insertBefore(font, node);
-                    font.appendChild(node);
-                }
-                fonts.push(font);
-                this._applyStylesToFontNode(font, color, bgcolor, size);
-            }
-        }
-        // remove empty values
-        // we must remove the value in 2 steps (applay inherit then remove) because some
-        // browser like chrome have some time an error for the rendering and/or keep inherit
-        for (i = 0; i < fonts.length; i++) {
-            font = fonts[i];
-            if (font.style.color === "inherit") {
-                font.style.color = "";
-            }
-            if (font.style.backgroundColor === "inherit") {
-                font.style.backgroundColor = "";
-            }
-            if (font.style.fontSize === "inherit") {
-                font.style.fontSize = "";
-            }
-            $font = $(font);
-            if (font.style.color === '' && font.style.backgroundColor === '' && font.style.fontSize === '') {
-                $font.removeAttr("style");
-            }
-            if (!font.className.length) {
-                $font.removeAttr("class");
-            }
-        }
-
-        // target the deepest node
-        if (startPoint.node.tagName && !startPoint.offset) {
-            startPoint.node = this.context.invoke('HelperPlugin.firstLeaf', startPoint.node.childNodes[startPoint.offset] || startPoint.node);
-            startPoint.offset = 0;
-        }
-        if (endPoint.node.tagName && !endPoint.offset) {
-            endPoint.node = this.context.invoke('HelperPlugin.firstLeaf', endPoint.node.childNodes[endPoint.offset] || endPoint.node);
-            endPoint.offset = 0;
-        }
-
-        // select nodes to clean (to remove empty font and merge same nodes)
-        nodes = [];
-        dom.walkPoint(startPoint, endPoint, function (point) {
-            nodes.push(point.node);
-        });
-        nodes = _.unique(nodes);
-        // remove node without attributes (move content), and merge the same nodes
-        for (i = 0; i < nodes.length; i++) {
-            node = nodes[i];
-            if (dom.isText(node) && !this.context.invoke('HelperPlugin.isVisibleText', node)) {
-                continue;
-            }
-            font = dom.lastAncestor(node, dom.isFont);
-            node = font || dom.ancestor(node, dom.isSpan);
-            if (!node) {
-                continue;
-            }
-            $font = $(node);
-            className = this.context.invoke('HelperPlugin.orderClass', node);
-            style = this.context.invoke('HelperPlugin.orderStyle', node);
-            if (!className && !style) {
-                $(node).before($(node).contents());
-                if (endPoint.node === node) {
-                    endPoint = dom.prevPointUntil(endPoint, function (point) {
-                        return point.node !== node;
-                    });
-                }
-                $(node).remove();
-
-                nodes.splice(i, 1);
-                i--;
-                continue;
-            }
-            var prev = font && font.previousSibling;
-            while (prev && !font.tagName && !this.context.invoke('HelperPlugin.isVisibleText', prev)) {
-                prev = prev.previousSibling;
-            }
-            if (prev &&
-                font.tagName === prev.tagName &&
-                className === this.context.invoke('HelperPlugin.orderClass', prev) && style === this.context.invoke('HelperPlugin.orderStyle', prev)) {
-                $(prev).append($(font).contents());
-                if (endPoint.node === font) {
-                    endPoint = dom.prevPointUntil(endPoint, function (point) {
-                        return point.node !== font;
-                    });
-                }
-                $(font).remove();
-
-                nodes.splice(i, 1);
-                i--;
-                continue;
-            }
-        }
-
-        // restore selection
-        r = this.context.invoke('editor.setRange', startPoint.node, startPoint.offset, endPoint.node, endPoint.offset);
-        r.normalize().select();
-
-        if (target) {
-            this.context.invoke('MediaPlugin.updatePopoverAfterEdit', target);
-        }
-    },
-    /**
-     * Creates the backcolor button containing its palette.
-     *
-     * @private
-     * @returns {jQuery} the backcolor button
-     */
-    _createBackColorButton: function () {
-        var $bgPalette = this.createPalette('backColor');
-        $bgPalette.find("button:not(.note-color-btn)")
-            .addClass("note-color-btn")
-            .attr('data-event', 'backColor')
-            .each(function () {
-                var $el = $(this);
-                var className = $el.hasClass('o_custom_color') ? $el.data('color') : 'bg-' + $el.data('color');
-                $el.attr('data-value', className).addClass($el.hasClass('o_custom_color') ? '' : className);
-            });
-
-        var $bgContainer = $(QWeb.render('wysiwyg.plugin.font.paletteButton', {
-            className: 'note-bg-color',
-            icon: this.options.icons.bg,
-        }));
-        $bgContainer.find('.dropdown-menu').append($bgPalette);
-        return $bgContainer;
-    },
-    /**
-     * Creates the forecolor button containing its palette.
-     *
-     * @private
-     * @returns {jQuery} the forecolor button
-     */
-    _createForeColorButton: function () {
-        var $forePalette = this.createPalette('foreColor');
-        $forePalette.find("button:not(.note-color-btn)")
-            .addClass("note-color-btn")
-            .attr('data-event', 'foreColor')
-            .each(function () {
-                var $el = $(this);
-                var className = $el.hasClass('o_custom_color') ? $el.data('color') : 'text-' + $el.data('color');
-                $el.attr('data-value', className).addClass($el.hasClass('o_custom_color') ? '' : 'bg-' + $el.data('color'));
-            });
-
-        var $foreContainer = $(QWeb.render('wysiwyg.plugin.font.paletteButton', {
-            className: 'note-fore-color',
-            icon: this.options.icons.fore,
-        }));
-        $foreContainer.find('.dropdown-menu').append($forePalette);
-        return $foreContainer;
-    },
-    /**
-     * Method called on custom color button click :
-     * opens the color picker dialog and saves the chosen color on save.
-     *
-     * @private
-     * @param {string} targetColor
-     * @param {jQuery Event} ev
-     */
-    _onCustomColor: function (targetColor, ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        var self = this;
-        var $button = $(ev.target).next('button');
-        var target = this.context.invoke('editor.restoreTarget');
-        var colorPickerDialog = new ColorpickerDialog(this, {});
-
-        this.context.invoke('editor.saveRange');
-        colorPickerDialog.on('colorpicker:saved', this, this._wrapCommand(function (ev) {
-            $button = $button.clone().appendTo($button.parent());
-            $button.show();
-            $button.css('background-color', ev.data.cssColor);
-            $button.attr('data-value', ev.data.cssColor);
-            $button.data('value', ev.data.cssColor);
-            $button.attr('title', ev.data.cssColor);
-            self.context.invoke('editor.saveTarget', target);
-            self.context.invoke('editor.restoreRange');
-            $button.mousedown();
-        }));
-        colorPickerDialog.open();
-        this.context.invoke('MediaPlugin.hidePopovers');
-    },
-});
-
-_.extend(wysiwygOptions.icons, {
-    fore: 'fa fa-font',
-    bg: 'fa fa-paint-brush',
-});
-_.extend(wysiwygTranslation.color, {
-    customColor: _t('Custom color'),
-    fore: _t('Color'),
-    bg: _t('Background color'),
-});
-
-registry.add('FontPlugin', FontPlugin);
-
-registry.addXmlDependency('/web_editor/static/src/xml/wysiwyg_colorpicker.xml');
-registry.addJob(function (wysiwyg) {
-    if ('web_editor.colorpicker' in QWeb.templates) {
-        return;
-    }
-
-    if (wysiwyg.isDestroyed()) {
-        throw new Error('The Wysiwyg are destroyed before this loading');
-    }
-
-    var options = {};
-    wysiwyg.trigger_up('getRecordInfo', {
-        recordInfo: options,
-        callback: function (recordInfo) {
-            _.defaults(options, recordInfo);
-        },
-    });
-    return wysiwyg._rpc({
-        model: 'ir.ui.view',
-        method: 'read_template',
-        args: ['web_editor.colorpicker'],
-        kwargs: {
-            context: options.context,
-        },
-    }).then(function (template) {
-        if (!/^<templates>/.test(template)) {
-            template = _.str.sprintf('<templates>%s</templates>', template);
-        }
-        QWeb.add_template(template);
-    });
-});
-
-
-return FontPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/font_buttons.js

@@ -1,31 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.font.buttons', function (require) {
-'use strict';
-
-var ButtonsPlugin = require('web_editor.wysiwyg.plugin.buttons');
-
-//--------------------------------------------------------------------------
-// override the ColorPicker button into the Toolbar and the font size button
-//--------------------------------------------------------------------------
-
-ButtonsPlugin.include({
-    /**
-     * @override
-     */
-    addToolbarButtons: function () {
-        var self = this;
-        this._super();
-
-        this.context.memo('button.colorpicker', function () {
-            return self.context.invoke('FontPlugin.createColorPickerButtons');
-        });
-
-        var fontsizeFunction = this.context.memo('button.fontsize');
-        this.context.memo('button.fontsize', function () {
-            return self.context.invoke('FontPlugin.overrideFontSizeButton', fontsizeFunction());
-        });
-    },
-});
-
-return ButtonsPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/help_dialog.js

@@ -1,27 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.HelpDialog', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-/**
- * Allows to customize link content and style.
- */
-var HelpDialog = Plugins.helpDialog.extend({
-    /**
-     * Restore the hidden close button.
-     */
-    showHelpDialog: function () {
-        var self = this;
-        return this._super().then(function () {
-            self.$dialog.find('button.close span').attr('aria-hidden', 'false');
-        });
-    },
-});
-
-registry.add('helpDialog', HelpDialog);
-
-return {
-    HelpDialog: HelpDialog,
-};
-});

addons/web_editor/static/src/js/wysiwyg/plugin/hint.js

@@ -1,139 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.hint', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var dom = $.summernote.dom;
-
-
-var HintPlugin = Plugins.hintPopover.extend({
-    init: function (context) {
-        context.options.hint = (context.options.hint || []).concat(this._hints());
-        this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public summernote module API
-    //--------------------------------------------------------------------------
-
-    /**
-     * Replace the current hint.
-     */
-    replace: function () {
-        var self = this;
-        var $item = this.$content.find('.note-hint-item.active');
-        if ($item.length) {
-            this.lastWordRange.select();
-            this.context.invoke('HelperPlugin.deleteSelection');
-            var range = this.context.invoke('editor.createRange');
-
-            this.nodeFromItem($item).each(function () {
-                $(range.sc).after(this);
-                range = self.context.invoke('editor.setRange', this, dom.nodeLength(this));
-            });
-            range.select();
-            this.context.invoke('editor.saveRange');
-            this.lastWordRange = null;
-            this.hide();
-            this.context.triggerEvent('change', this.$editable.html(), this.$editable[0]);
-            this.context.invoke('editor.focus');
-        }
-    },
-    /**
-     * @param {JQueryEvent} e
-     */
-    handleKeyup: function (e) {
-        var self = this;
-        if ([13, 38, 40].indexOf(e.keyCode) === -1) { // enter, up, down
-            var wordRange = this.context.invoke('editor.createRange');
-            var keyword_1 = wordRange.sc.textContent.slice(0, wordRange.so);
-            if (this.hints.length && keyword_1) {
-                this.$content.empty();
-                this.$popover.hide();
-                this.lastWordRange = wordRange;
-                var hasMatch = false;
-
-                // test all hints
-                this.hints.forEach(function (hint, idx) {
-                    var match = keyword_1.match(hint.match);
-                    if (match) {
-                        hasMatch = true;
-                        wordRange.so = wordRange.eo - match[0].length;
-                        self.createGroup(idx, match[0]).appendTo(self.$content);
-                    }
-                });
-                if (!hasMatch) {
-                    return;
-                }
-
-                // select first .note-hint-item
-                this.$content.find('.note-hint-item:first').addClass('active');
-
-                // set position for popover after group is created
-                var rect = wordRange.getClientRects()[0];
-                var bnd = {
-                    top: rect.top + $(this.document).scrollTop(),
-                    left: rect.left + $(this.document).scrollLeft(),
-                };
-                this.$popover.css({
-                    left: bnd.left,
-                    top: bnd.top + (this.direction === 'top' ? -this.$popover.outerHeight() : (rect.bottom - rect.top)) - 5,
-                });
-            } else {
-                this.hide();
-            }
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Get hint objects.
-     *
-     * @private
-     * @returns {Object[]} hints
-     */
-    _hints: function () {
-        var self = this;
-        return [{
-                className: 'o_hint_partner',
-                match: /\B@(\w+(\s\w*)?)$/,
-                search: function (keyword, callback) {
-                    self._rpc({
-                        model: 'res.partner',
-                        method: "search_read",
-                        fields: ['id', 'name', 'email'],
-                        domain: [
-                            ['name', 'ilike', keyword],
-                        ],
-                        limit: 10,
-                    }).then(callback);
-                },
-                template: function (partner) {
-                    return partner.name + (partner.email ? ' <i style="color: #999;">(' + partner.email + ')</i>' : '');
-                },
-                content: function (item) {
-                    return $(self.document.createTextNode('@' + item.name + '\u00A0'));
-                },
-            },
-            {
-                className: 'fa',
-                match: /:([\-+\w]+)$/,
-                search: function () {},
-                template: function () {
-                    return '<span class="fa fa-star">\u200B</span>';
-                },
-                content: function () {}
-            },
-        ];
-    },
-});
-
-registry.add('hintPopover', null);
-
-return HintPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/history.js

@@ -1,87 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.history', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-
-var HistoryPlugin = Plugins.history.extend({
-    /**
-     * Apply a snapshot.
-     *
-     * @override
-     */
-    applySnapshot: function () {
-        this.context.invoke('MediaPlugin.hidePopovers');
-        try {
-            this._super.apply(this, arguments);
-        } catch (e) {
-            console.error(e);
-        }
-        this.context.invoke('editor.focus');
-        var newRange = this.context.invoke('editor.createRange');
-        if (!this.options.isEditableNode(newRange.sc)) {
-            var firstEditableSel = '[contenteditable="true"]:not(":hidden")';
-            var sc = this.$editable.find(firstEditableSel)[0];
-            this.context.invoke('editor.setRange', sc, 0, sc, 0).select();
-        }
-    },
-    /**
-     * Clear the history.
-     *
-     * @override
-     */
-    clear: function () {
-        this.stack = [];
-        this.stackOffset = -1;
-        this.recordUndo();
-    },
-    /**
-     * Get the current history stack and the current offset.
-     *
-     * @returns {Object} {stack: Object, stackOffset: Integer}
-     */
-    getHistoryStep: function () {
-        return {
-            stack: this.stack,
-            stackOffset: this.stackOffset,
-        };
-    },
-    /**
-     * Prevent errors with first snapshot.
-     *
-     * @override
-     */
-    makeSnapshot: function () {
-        var rng = $.summernote.range.create(this.editable);
-        var snapshot = this._super();
-        if (rng.sc === this.editable || $(rng.sc).has(this.editable).length) {
-            snapshot.bookmark.s.path = snapshot.bookmark.e.path = [0];
-            snapshot.bookmark.s.offset = snapshot.bookmark.e.offset = 0;
-        }
-        return snapshot;
-    },
-    /**
-     * @override
-     */
-    recordUndo: function () {
-        if (!this.stack[this.stackOffset] || this.$editable.html() !== this.stack[this.stackOffset].contents) {
-            this._super();
-        }
-    },
-    /**
-     * @override
-     */
-    undo: function () {
-        if (this.stackOffset > 0) {
-            this.stackOffset--;
-        }
-        this.applySnapshot(this.stack[this.stackOffset]);
-    },
-});
-
-registry.add('HistoryPlugin', HistoryPlugin);
-
-return HistoryPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/link.js

@@ -1,493 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.link', function (require) {
-'use strict';
-
-var core = require('web.core');
-var LinkDialog = require('wysiwyg.widgets.LinkDialog');
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var _t = core._t;
-var dom = $.summernote.dom;
-dom.isAnchor = function (node) {
-    return (node.tagName === 'A' || node.tagName === 'BUTTON' || $(node).hasClass('btn')) &&
-        !$(node).hasClass('fa') && !$(node).hasClass('o_image');
-};
-
-//--------------------------------------------------------------------------
-// link
-//--------------------------------------------------------------------------
-
-var LinkPlugin = Plugins.linkDialog.extend({
-    events: {
-        'dblclick .note-editable': '_onDblclick',
-    },
-
-    //--------------------------------------------------------------------------
-    // Public summernote module API
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {Object} layoutInfo
-     */
-    show: function () {
-        var self = this;
-        var linkInfo = this.context.invoke('editor.getLinkInfo');
-        this.context.invoke('editor.saveRange');
-        return this.showLinkDialog(linkInfo)
-            .then(function (linkInfo) {})
-            .guardedCatch(function () {});
-    },
-    /**
-     * @override
-     * @param {Object} linkInfo
-     * @returns {Promise}
-     */
-    showLinkDialog: function (linkInfo) {
-        var self = this;
-        this.context.invoke('editor.hidePopover');
-        var media = this.context.invoke('editor.restoreTarget');
-
-        if (linkInfo.range) {
-            var r = linkInfo.range.getPoints();
-
-            // move carret in icon, video...
-            if (!media && (dom.ancestor(r.sc, dom.isImg) || dom.ancestor(r.sc, dom.isIcon))) {
-                media = dom.ancestor(r.sc, dom.isImg) || dom.ancestor(r.sc, dom.isIcon);
-            }
-            // if select a text content in anchor then click on image then click on anchor button
-            if (dom.isImg(media) || dom.isIcon(media)) {
-                r.sc = media.parentNode;
-                r.so = [].indexOf.call(media.parentNode.childNodes, media);
-                r.ec = media;
-                r.eo = dom.nodeLength(media);
-
-                linkInfo.range.sc = r.sc;
-                linkInfo.range.so = r.so;
-                linkInfo.range.ec = r.ec;
-                linkInfo.range.eo = r.eo;
-            }
-
-            linkInfo.isAnchor = linkInfo.range.isOnAnchor();
-            linkInfo.className = linkInfo.isAnchor ? dom.ancestor(r.sc, dom.isAnchor).className : '';
-            linkInfo.url = linkInfo.isAnchor ? ($(dom.ancestor(r.sc, dom.isAnchor)).attr('href') || '').replace(window.location.origin, '') : '';
-
-            var nodes = [];
-            if (linkInfo.isAnchor) {
-                nodes = dom.ancestor(r.sc, dom.isAnchor).childNodes;
-            } else if (!linkInfo.range.isCollapsed()) {
-                if (dom.isImg(media) || dom.isIcon(media)) {
-                    nodes.push(media);
-                } else {
-                    if (r.sc.tagName) {
-                        r.sc = (r.so ? r.sc.childNodes[r.so] : r.sc).firstChild || r.sc;
-                        r.so = 0;
-                    } else if (r.so !== r.sc.textContent.length) {
-                        if (r.sc === r.ec) {
-                            r.ec = r.sc = r.sc.splitText(r.so);
-                            r.eo -= r.so;
-                        } else {
-                            r.sc = r.sc.splitText(r.so);
-                        }
-                        r.so = 0;
-                    }
-                    if (r.ec.tagName) {
-                        r.ec = (r.eo ? r.ec.childNodes[r.eo - 1] : r.ec).lastChild || r.ec;
-                        r.eo = r.ec.textContent.length;
-                    } else if (r.eo !== r.ec.textContent.length) {
-                        r.ec.splitText(r.eo);
-                    }
-
-                    // browsers can't target a picture or void node
-                    if (dom.isVoid(r.sc) || dom.isImg(r.sc)) {
-                        r.so = dom.listPrev(r.sc).length - 1;
-                        r.sc = r.sc.parentNode;
-                    }
-                    if (dom.isBR(r.ec)) {
-                        r.eo = dom.listPrev(r.ec).length - 1;
-                        r.ec = r.ec.parentNode;
-                    } else if (dom.isVoid(r.ec) || dom.isImg(r.sc)) {
-                        r.eo = dom.listPrev(r.ec).length;
-                        r.ec = r.ec.parentNode;
-                    }
-                    linkInfo.range.sc = r.sc;
-                    linkInfo.range.so = r.so;
-                    linkInfo.range.ec = r.ec;
-                    linkInfo.range.eo = r.eo;
-                    linkInfo.range.select();
-                    this.context.invoke('editor.saveRange');
-                    linkInfo.range = this.context.invoke('editor.createRange');
-
-                    // search nodes to insert in the anchor
-
-                    var startPoint = this.context.invoke('HelperPlugin.makePoint', r.sc, r.so);
-                    var endPoint = this.context.invoke('HelperPlugin.makePoint', r.ec, r.eo);
-                    dom.walkPoint(startPoint, endPoint, function (point) {
-                        var node = point.node.childNodes && point.node.childNodes[point.offset] || point.node;
-                        nodes.push(node);
-                    });
-
-                    nodes = _.filter(_.uniq(nodes), function (node) {
-                        return nodes.indexOf(node.parentNode) === -1;
-                    });
-                }
-            }
-
-            if (nodes.length > 0) {
-                var text = "";
-                linkInfo.images = [];
-                for (var i = 0; i < nodes.length; i++) {
-                    if (dom.ancestor(nodes[i], dom.isImg)) {
-                        text += dom.ancestor(nodes[i], dom.isImg).outerHTML;
-                    } else if (dom.ancestor(nodes[i], dom.isIcon)) {
-                        text += dom.ancestor(nodes[i], dom.isIcon).outerHTML;
-                    } else if (!linkInfo.isAnchor && nodes[i].nodeType === 1) {
-                        // just use text nodes from listBetween
-                    } else if (!linkInfo.isAnchor && i === 0) {
-                        text += nodes[i].textContent;
-                    } else if (!linkInfo.isAnchor && i === nodes.length - 1) {
-                        text += nodes[i].textContent;
-                    } else {
-                        text += nodes[i].textContent;
-                    }
-                }
-                linkInfo.text = text.replace(this.context.invoke('HelperPlugin.getRegex', 'space', 'g'), ' ');
-            }
-
-            linkInfo.needLabel = !linkInfo.text.length;
-        }
-
-        var def = new Promise(function (resolve, reject) {
-            var linkDialog = new LinkDialog(self.options.parent, {
-                    onClose: function () {
-                        setTimeout(function () {
-                            self.context.invoke('editor.focus');
-                        });
-                    }
-                },
-                _.omit(linkInfo, 'range')
-            );
-
-            linkDialog.on('save', self, self._wrapCommand(function (newLinkInfo) {
-                var isCollapsed = linkInfo.range.isCollapsed();
-                linkInfo.range.select();
-                newLinkInfo.range = linkInfo.range;
-
-                var $anchor;
-                if (linkInfo.isAnchor) {
-                    $anchor = $(dom.ancestor(r.sc, dom.isAnchor));
-                    $anchor.css(newLinkInfo.style || {});
-                    if (newLinkInfo.isNewWindow) {
-                        $anchor.attr('target', '_blank');
-                    } else {
-                        $anchor.removeAttr('target');
-                    }
-                } else {
-                    self.context.invoke('editor.saveRange');
-                    self.context.invoke('editor.createLink', newLinkInfo);
-                    var range = self.context.invoke('editor.createRange');
-                    var anchor = dom.ancestor(range.sc.childNodes[range.so] || range.sc, dom.isAnchor);
-                    $anchor = $(anchor);
-                    if (isCollapsed) {
-                        // move the range just after the link
-                        var point = dom.nextPoint({
-                            node: anchor,
-                            offset: dom.nodeLength(anchor),
-                        });
-                        range = self.context.invoke('editor.setRange', point.node, point.offset);
-                        range.select();
-                    } else {
-                        $anchor.selectContent();
-                    }
-                }
-                if ((dom.isImg(media) || dom.isIcon(media)) && !$anchor.find(media).length) {
-                    $(media).remove();
-                }
-                $anchor.attr('class', newLinkInfo.className);
-                $anchor.attr('href', newLinkInfo.url);
-                self.context.invoke('editor.saveRange');
-                self.context.invoke('editor.saveTarget', $anchor[0]);
-                self.context.triggerEvent('focusnode', $anchor[0]);
-                resolve(linkInfo);
-            }));
-            linkDialog.on('closed', self, function () {
-                this.context.invoke('editor.restoreRange');
-                this.context.invoke('LinkPopover.update');
-                reject();
-            });
-            linkDialog.open();
-        });
-        return def;
-    },
-    /**
-     * Remove the current link, keep its contents.
-     *
-     * @override
-     */
-    unlink: function () {
-        var rng = this.context.invoke('editor.createRange');
-        var anchor = rng.sc;
-        while (anchor && anchor.tagName !== 'A') {
-            anchor = anchor.parentElement;
-        }
-        if (!anchor) {
-            this.context.invoke('editor.hidePopover');
-            return;
-        }
-        var startAndEndInvisible = this.context.invoke('HelperPlugin.getRegex', 'startAndEndInvisible', 'g');
-        anchor.innerHTML = anchor.innerHTML.replace(startAndEndInvisible, '');
-        var $contents = $(anchor).contents();
-        $(anchor).before($contents).remove();
-
-        this.context.invoke('editor.hidePopover');
-
-        var start = $contents[0];
-        var end = $contents.last()[0];
-        rng = this.context.invoke('editor.setRange', start, 0, end, dom.nodeLength(end));
-        rng.select();
-        this.editable.normalize();
-        this.context.invoke('editor.saveRange');
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _addButtons: function () {
-        var self = this;
-        this._super();
-
-        this.context.memo('help.LinkPlugin.show', this.options.langInfo.help['linkDialog.show']);
-
-        this.context.memo('button.linkPlugin', function () {
-            return self.context.invoke('buttons.button', {
-                contents: self.ui.icon(self.options.icons.link),
-                tooltip: self.lang.link.link + self.context.invoke('buttons.representShortcut', 'LinkPlugin.show'),
-                click: self.context.createInvokeHandler('LinkPlugin.show')
-            }).render();
-        });
-    },
-    /**
-     * @param {jQueryEvent} e
-     */
-    _onDblclick: function (e) {
-        if (dom.ancestor(e.target, dom.isAnchor) && !dom.isMedia(e.target)) {
-            this.show();
-        }
-    },
-});
-
-var LinkPopover = Plugins.linkPopover.extend({
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Prevent links without text: replace empty text with the word "Label".
-     *
-     * @param {DOM} anchor
-     * @param {bool} select
-     */
-    fillEmptyLink: function (anchor, select) {
-        if (dom.isAnchor(anchor)) {
-            var text = _t('Label');
-            if (this.context.invoke('HelperPlugin.getRegex', 'onlyEmptySpace').test(anchor.innerHTML)) {
-                $(anchor).contents().remove();
-                $(anchor).append(this.document.createTextNode(text));
-            }
-            var rng = this.context.invoke('editor.createRange');
-            if (select && anchor.innerHTML === text) {
-                this._cleanLastLink();
-                rng.sc = rng.ec = anchor.firstChild;
-                rng.so = 0;
-                rng.eo = dom.nodeLength(rng.sc);
-                rng.select();
-                this.context.invoke('editor.saveRange');
-            }
-            if (select) {
-                this.lastAnchor = anchor;
-            }
-        }
-    },
-    /**
-     * @override
-     */
-    hide: function () {
-        this._cleanLastLink();
-        this._super();
-    },
-    /**
-     * @override
-     */
-    update: function () {
-        var rng = this.context.invoke('editor.createRange');
-        var anchor = dom.ancestor(rng.sc, dom.isAnchor);
-        if (anchor && anchor === dom.ancestor(rng.ec, dom.isAnchor)) {
-            anchor = dom.ancestor(rng.sc, dom.isAnchor);
-            if (!$(anchor).is(':o_editable')) {
-                this.hide();
-                return;
-            }
-        } else {
-            anchor = false;
-        }
-
-        if ($(anchor).data('toggle') === 'tab') {
-            anchor = false;
-        }
-
-        if (!this.options.displayPopover(anchor)) {
-            anchor = false;
-        }
-
-        if (anchor !== this.lastAnchor) {
-            this._cleanLastLink();
-        }
-
-        if (!anchor) {
-            this.hide();
-            return;
-        }
-
-        if (dom.isAnchor(anchor)) {
-            this.lastAnchor = anchor;
-        }
-
-
-        var $target = $(anchor);
-        if (!$target.data('show_tooltip') && this.context.options.tooltip) {
-            $target.data('show_tooltip', true);
-            setTimeout(function () {
-                $target.tooltip({
-                    title: _t('Double-click to edit'),
-                    trigger: 'manual',
-                    container: this.document.body,
-                    placement: 'top'
-                }).tooltip('show');
-                setTimeout(function () {
-                    $target.tooltip('dispose');
-                }, 2000);
-            }, 400);
-        }
-
-        var innerHTML = anchor.innerHTML.replace('&nbsp;', '\u00A0').replace('&#8203;', '\u200B');
-
-        // prevent links without text
-        this.fillEmptyLink(anchor, true);
-
-        // add invisible char to prevent the carret to leave the link at the begin or end
-        if (innerHTML[0] !== '\u200B') {
-            var before = this.document.createTextNode('\u200B');
-            $(anchor).prepend(before);
-        }
-        if (innerHTML[innerHTML.length - 1] !== '\u200B') {
-            var after = this.document.createTextNode('\u200B');
-            $(anchor).append(after);
-        }
-
-        anchor.normalize();
-
-        var href = $(anchor).attr('href');
-        this.$popover.find('a').attr('href', href).html(href);
-
-        var pos = $(anchor).offset();
-        var posContainer = $(this.options.container).offset();
-        pos.left = pos.left - posContainer.left + 10;
-        pos.top = pos.top - posContainer.top + $(anchor).outerHeight();
-
-        this.$popover.css({
-            display: 'block',
-            left: pos.left,
-            top: pos.top,
-        });
-
-        this.context.layoutInfo.editor.after(this.$popover);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Clean the last link and prevent links without text.
-     *
-     * @private
-     */
-    _cleanLastLink: function () {
-        if (this.lastAnchor) {
-            this.fillEmptyLink(this.lastAnchor);
-
-            var range = this.context.invoke('editor.createRange');
-            var rangeChange;
-            var innerHTML = this.lastAnchor.innerHTML.replace('&nbsp;', '\u00A0').replace('&#8203;', '\u200B');
-            // prevent links without text
-            if (
-                this.$editable.has(this.lastAnchor).length &&
-                this.context.invoke('HelperPlugin.getRegexBlank', {
-                    space: true,
-                    invisible: true,
-                    nbsp: true,
-                }).test(innerHTML)
-            ) {
-                $(this.lastAnchor).contents().remove();
-                $(this.lastAnchor).append(this.document.createTextNode(_t('Label')));
-                range.sc = range.ec = this.lastAnchor.firstChild;
-                range.so = 0;
-                range.eo = dom.nodeLength(range.sc);
-                rangeChange = true;
-            }
-            var firstChild = this.context.invoke('HelperPlugin.firstLeaf', this.lastAnchor);
-            if (
-                !firstChild.tagName &&
-                this.context.invoke('HelperPlugin.getRegex', 'startInvisible').test(firstChild.textContent)
-            ) {
-                firstChild.textContent = firstChild.textContent.replace(this.context.invoke('HelperPlugin.getRegex', 'startInvisible'), '');
-                if (range.sc === firstChild && range.so) {
-                    range.so -= 1;
-                    rangeChange = true;
-                }
-                if (range.ec === firstChild && range.eo) {
-                    range.eo -= 1;
-                    rangeChange = true;
-                }
-            }
-            var lastChild = this.context.invoke('HelperPlugin.lastLeaf', this.lastAnchor);
-            if (
-                lastChild.textContent.length > 1 &&
-                !lastChild.tagName &&
-                this.context.invoke('HelperPlugin.getRegex', 'endInvisible').test(lastChild.textContent)
-            ) {
-                lastChild.textContent = lastChild.textContent.replace(this.context.invoke('HelperPlugin.getRegex', 'endInvisible'), '');
-                if (range.sc === lastChild && range.so > dom.nodeLength(lastChild)) {
-                    range.so = dom.nodeLength(lastChild);
-                    rangeChange = true;
-                }
-                if (range.ec === lastChild && range.eo > dom.nodeLength(lastChild)) {
-                    range.eo = dom.nodeLength(lastChild);
-                    rangeChange = true;
-                }
-            }
-            if (rangeChange) {
-                range.select();
-                this.context.invoke('editor.saveRange');
-            }
-            this.lastAnchor = null;
-        }
-    },
-});
-
-registry.add('LinkPlugin', LinkPlugin)
-    .add('LinkPopover', LinkPopover)
-    .add('linkDialog', null)
-    .add('linkPopover', null)
-    .add('autoLink', null);
-
-return {
-    LinkPlugin: LinkPlugin,
-    LinkPopover: LinkPopover,
-};
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/plugins.js

@@ -1,78 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugins', function (require) {
-'use strict';
-
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var wysiwygOptions = require('web_editor.wysiwyg.options');
-
-
-var plugins = _.mapObject(wysiwygOptions.modules, function (Module, pluginName) {
-    var prototype = {
-        init: function () {
-            var self = this;
-            this._super.apply(this, arguments);
-            var events = _.clone(this.events);
-            this.summernote.options.modules[pluginName].apply(this, arguments);
-            _.each(events, function (value, key) {
-                self.events[key] = value;
-            });
-        },
-    };
-    _.each(Module.prototype, function (prop, name) {
-        if (typeof prop === 'function') {
-            prototype[name] = function () {
-                return this.summernote.options.modules[pluginName].prototype[name].apply(this, arguments);
-            };
-        } else {
-            prototype[name] = prop;
-        }
-    });
-
-    var Plugin = AbstractPlugin.extend(prototype).extend({
-        destroy: function () {
-            if (this.shouldInitialize()) {
-                this._super();
-            }
-        },
-    });
-
-    // override summernote default buttons
-    registry.add(pluginName, Plugin);
-
-    return Plugin;
-});
-
-// export table plugin to convert it in module (see editor)
-
-var $textarea = $('<textarea>');
-$('body').append($textarea);
-$textarea.summernote();
-var summernote = $textarea.data('summernote');
-
-_.each(['style', 'table', 'typing', 'bullet', 'history'], function (name) {
-    var prototype = {};
-    for (var k in summernote.modules.editor[name]) {
-        prototype[k] = summernote.modules.editor[name][k];
-    }
-    plugins[name] = AbstractPlugin.extend(prototype);
-});
-
-var History = summernote.modules.editor.history.constructor;
-plugins.history.include({
-    init: function (context) {
-        this._super(context);
-        History.call(this, this.$editable);
-    },
-});
-
-try {
-    $textarea.summernote('destroy');
-} catch (e) {
-    summernote.layoutInfo.editor.remove();
-}
-$textarea.remove();
-
-
-return plugins;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/table.js

@@ -1,244 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.table', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var dom = $.summernote.dom;
-
-
-var TablePlugin = Plugins.table.extend({
-
-    initialize: function () {
-        this._super.apply(this, arguments);
-        var self = this;
-        // We need setTimeout to make sure to initialize after HelperPlugin and HistoryPlugin
-        setTimeout(function () {
-            // contentEditable fail for image and font in table
-            // user must use right arrow the number of space but without feedback
-            self.$editable.find('td:has(img, span.fa)').each(function () {
-                if (this.firstChild && !this.firstChild.tagName) {
-                    var startSpace = self.context.invoke('HelperPlugin.getRegex', 'startSpace');
-                    this.firstChild.textContent = this.firstChild.textContent.replace(startSpace, ' ');
-                }
-                if (this.lastChild && !this.lastChild.tagName) {
-                    var endSpace = self.context.invoke('HelperPlugin.getRegex', 'endSpace');
-                    this.lastChild.textContent = this.lastChild.textContent.replace(endSpace, ' ');
-                }
-            });
-            self.context.invoke('HistoryPlugin.clear');
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Add a new col and
-     * wrap contents of the new cells in p elements.
-     *
-     * @see summernote library
-     *
-     * @override
-     * @param {WrappedRange} rng
-     * @param {String('left'|'right')} position
-     */
-    addCol: function (rng, position) {
-        this._super.apply(this, arguments);
-        var cell = dom.ancestor(rng.commonAncestor(), dom.isCell);
-        var table = dom.ancestor(cell, function (n) {
-            return n.tagName === 'TABLE';
-        });
-        var newColIndex = $(cell)[position === 'right' ? 'next' : 'prev']('td').index() + 1;
-        $(table).find('td:nth-child(' + newColIndex + ')').contents().wrap('<p></p>');
-    },
-    /**
-     * Add a new row and
-     * wrap contents of the new cells in p elements.
-     *
-     * @see summernote library
-     *
-     * @override
-     * @param {WrappedRange} rng
-     * @param {String('top'|'bottom')} position
-     */
-    addRow: function (rng, position) {
-        this._super.apply(this, arguments);
-        var row = dom.ancestor(rng.commonAncestor(), dom.isCell).parentElement;
-        $(row)[position === 'bottom' ? 'next' : 'prev']('tr').find('td').contents().wrap('<p></p>');
-    },
-    /**
-     * Create empty table element and
-     * wrap the contents of all cells in p elements.
-     *
-     * @see summernote library
-     *
-     * @override
-     * @param {Number} rowCount
-     * @param {Number} colCount
-     * @returns {Node} table
-     */
-    createTable: function () {
-        var table = this._super.apply(this, arguments);
-        $(table).find('td').contents().wrap('<p></p>');
-        return table;
-    },
-    /**
-     * @see summernote library
-     *
-     * @override
-     */
-    deleteCol: function () {
-        var range = this.context.invoke('editor.createRange');
-
-        // Delete the last remaining column === delete the table
-        var cell = dom.ancestor(range.commonAncestor(), dom.isCell);
-        if (cell && !cell.previousElementSibling && !cell.nextElementSibling) {
-            return this.deleteTable();
-        }
-        var neighbor = cell.previousElementSibling || cell.nextElementSibling;
-
-        this._super.apply(this, arguments);
-
-        // Put the range back on the previous or next cell after deleting
-        // to allow chain-removing
-        range = this.context.invoke('editor.createRange');
-        if (range.sc.tagName !== 'TD' && neighbor) {
-            range = this.context.invoke('editor.setRange', neighbor, 0);
-            range.normalize().select();
-        }
-    },
-    /**
-     * @see summernote library
-     *
-     * @override
-     */
-    deleteRow: function () {
-        var range = this.context.invoke('editor.createRange');
-
-        // Delete the last remaining row === delete the table
-        var row = dom.ancestor(range.commonAncestor(), function (n) {
-            return n.tagName === 'TR';
-        });
-        if (row && !row.previousElementSibling && !row.nextElementSibling) {
-            return this.deleteTable();
-        }
-        var neighbor = row.previousElementSibling || row.nextElementSibling;
-
-        this._super.apply(this, arguments);
-
-        // Put the range back on the previous or next row after deleting
-        // to allow chain-removing
-        range = this.context.invoke('editor.createRange');
-        if (range.sc.tagName !== 'TR' && neighbor) {
-            range = this.context.invoke('editor.setRange', neighbor, 0);
-            range.normalize().select();
-        }
-    },
-    /**
-     * Delete the table in range.
-     */
-    deleteTable: function () {
-        var range = this.context.invoke('editor.createRange');
-        var cell = dom.ancestor(range.commonAncestor(), dom.isCell);
-        var table = $(cell).closest('table')[0];
-
-        var point = this.context.invoke('HelperPlugin.removeBlockNode', table);
-        range = this.context.invoke('editor.setRange', point.node, point.offset);
-        range.normalize().select();
-    },
-    /**
-     * Insert a table.
-     * Note: adds <p><br></p> before/after the table if the table
-     * has nothing brefore/after it, so as to allow the carret to move there.
-     *
-     * @param {String} dim dimension of table (ex : "5x5")
-     */
-    insertTable: function (dim) {
-        var dimension = dim.split('x');
-        var table = this.createTable(dimension[0], dimension[1], this.options);
-        this.context.invoke('HelperPlugin.insertBlockNode', table);
-        var p;
-        if (!table.previousElementSibling) {
-            p = this.document.createElement('p');
-            $(p).append(this.document.createElement('br'));
-            $(table).before(p);
-        }
-        if (!table.nextElementSibling) {
-            p = this.document.createElement('p');
-            $(p).append(this.document.createElement('br'));
-            $(table).after(p);
-        }
-        var range = this.context.invoke('editor.setRange', $(table).find('td')[0], 0);
-        range.normalize().select();
-        this.context.invoke('editor.saveRange');
-    },
-});
-
-
-var TablePopover = Plugins.tablePopover.extend({
-    events: _.defaults({
-        'summernote.scroll': '_onScroll',
-    }, Plugins.tablePopover.prototype.events),
-
-    /**
-     * Update the table's popover and its position.
-     *
-     * @override
-     * @param {Node} target
-     * @returns {false|Node} the selected cell (on which to display the popover)
-     */
-    update: function (target) {
-        if (!target || this.context.isDisabled()) {
-            return false;
-        }
-        var cell = dom.ancestor(target, dom.isCell);
-        if (!!cell && this.options.isEditableNode(cell)) {
-            var pos = $(cell).offset();
-            var posContainer = $(this.options.container).offset();
-            pos.left = pos.left - posContainer.left + 10;
-            pos.top = pos.top - posContainer.top + $(cell).outerHeight() - 4;
-
-            this.lastPos = this.context.invoke('HelperPlugin.makePoint', target, $(target).offset());
-
-            this.$popover.css({
-                display: 'block',
-                left: pos.left,
-                top: pos.top,
-            });
-        } else {
-            this.hide();
-        }
-        return cell;
-    },
-    /**
-     * Update the target table and its popover.
-     *
-     * @private
-     */
-    _onScroll: function () {
-        var range = this.context.invoke('editor.createRange');
-        var target = dom.ancestor(range.sc, dom.isCell);
-        if (!target || target === this.editable) {
-            return;
-        }
-        if (this.lastPos && this.lastPos.target === target && $(target).offset()) {
-            var newTop = $(target).offset().top;
-            var movement = this.lastPos.offset.top - newTop;
-            if (movement && this.mousePosition) {
-                this.mousePosition.pageY -= movement;
-            }
-        }
-        return this.update(target);
-    },
-});
-
-
-registry.add('TablePlugin', TablePlugin);
-registry.add('TablePopover', TablePopover);
-registry.add('tablePopover', null);
-
-return TablePlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/text.js

@@ -1,811 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.text', function (require) {
-'use strict';
-
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var dom = $.summernote.dom;
-dom.isAnchor = function (node) {
-    return (node.tagName === 'A' || node.tagName === 'BUTTON' || $(node).hasClass('btn')) &&
-        !$(node).hasClass('fa') && !$(node).hasClass('o_image');
-};
-
-
-var TextPlugin = AbstractPlugin.extend({
-    events: {
-        'summernote.paste': '_onPaste',
-    },
-
-    // See: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#removeformat-candidate
-    formatTags: [
-        'abbr',
-        'acronym',
-        'b',
-        'bdi',
-        'bdo',
-        'big',
-        'blink',
-        'cite',
-        'code',
-        'dfn',
-        'em',
-        'font',
-        'i',
-        'ins',
-        'kbd',
-        'mark',
-        'nobr',
-        'q',
-        's',
-        'samp',
-        'small',
-        'span',
-        'strike',
-        'strong',
-        'sub',
-        'sup',
-        'tt',
-        'u',
-        'var',
-    ],
-    tab: '\u00A0\u00A0\u00A0\u00A0',
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Insert a Horizontal Rule element (hr).
-     */
-    insertHR: function () {
-        var self = this;
-        var hr = this.document.createElement('hr');
-        this.context.invoke('HelperPlugin.insertBlockNode', hr);
-        var point = this.context.invoke('HelperPlugin.makePoint', hr, 0);
-        point = dom.nextPointUntil(point, function (pt) {
-            return pt.node !== hr && !self.options.isUnbreakableNode(pt.node);
-        }) || point;
-        var range = $.summernote.range.create(point.node, point.offset);
-        range.select();
-    },
-    /**
-     * Insert a TAB (4 non-breakable spaces).
-     */
-    insertTab: function () {
-        this.context.invoke('HelperPlugin.insertTextInline', this.tab);
-    },
-    /**
-     * Paste nodes or their text content into the editor.
-     *
-     * @param {Node[]} nodes
-     * @param {Boolean} textOnly true to allow only dropping plain text
-     */
-    pasteNodes: function (nodes, textOnly) {
-        if (!nodes.length) {
-            return;
-        }
-        nodes = textOnly ? this.document.createTextNode($(nodes).text()) : nodes;
-        nodes = textOnly ? nodes : this._mergeAdjacentULs(nodes);
-
-        var point = this._getPastePoint();
-        // Prevent pasting HTML within a link:
-        point = textOnly ? point : dom.nextPointUntil(point, this._isPointInAnchor.bind(this));
-
-        this._insertNodesAt(nodes, point);
-
-        var start = nodes[nodes.length - 1];
-        this.context.invoke('editor.setRange', start, dom.nodeLength(start)).normalize().select();
-    },
-    /**
-     * Prepare clipboard data for safe pasting into the editor.
-     *
-     * @see clipboardWhitelist
-     * @see clipboardBlacklist
-     *
-     * @param {DOMString} clipboardData
-     * @returns {Node[]}
-     */
-    prepareClipboardData: function (clipboardData) {
-        var $html = $('<wrapper>' + clipboardData + '</wrapper>').contents();
-        var $clipboardData = this._removeIllegalClipboardElements($html);
-
-        var $all = $clipboardData.find('*').addBack();
-        $all.filter('table').addClass('table table-bordered');
-        this._wrapTDContents($all.filter('td'));
-        this._fillEmptyBlocks($all);
-        this._removeIllegalClipboardAttributes($all);
-        $all.filter('a').removeClass();
-        $all.filter('img').css('max-width', '100%');
-
-        return $clipboardData.toArray();
-    },
-    /**
-     * Format a 'format' block: change its tagName (eg: p -> h1).
-     *
-     * @param {string} tagName
-     *       P, H1, H2, H3, H4, H5, H6, BLOCKQUOTE, PRE
-     */
-    formatBlock: function (tagName) {
-        var self = this;
-        var r = this.context.invoke('editor.createRange');
-        if (
-            !r ||
-            !this.$editable.has(r.sc).length ||
-            !this.$editable.has(r.ec).length ||
-            this.options.isUnbreakableNode(r.sc)
-        ) {
-            return;
-        }
-        var nodes = this.context.invoke('HelperPlugin.getSelectedNodes');
-        nodes = this.context.invoke('HelperPlugin.filterFormatAncestors', nodes);
-        if (!nodes.length) {
-            var node = this.context.invoke('editor.createRange').sc;
-            if (node.tagName === 'BR' || dom.isText(node)) {
-                node = node.parentNode;
-            }
-            nodes = [node];
-        }
-        var changedNodes = [];
-        _.each(nodes, function (node) {
-            var newNode = self.document.createElement(tagName);
-            $(newNode).append($(node).contents());
-            var attributes = $(node).prop("attributes");
-            _.each(attributes, function (attr) {
-                $(newNode).attr(attr.name, attr.value);
-            });
-            $(node).replaceWith(newNode);
-            changedNodes.push(newNode);
-        });
-
-        // Select all formatted nodes
-        if (changedNodes.length) {
-            var lastNode = changedNodes[changedNodes.length - 1];
-            var startNode = changedNodes[0].firstChild || changedNodes[0];
-            var endNode = lastNode.lastChild || lastNode;
-            var range = this.context.invoke('editor.setRange', startNode, 0, endNode, dom.nodeLength(endNode));
-            range.select();
-        }
-    },
-    /**
-     * Change the paragraph alignment of a 'format' block.
-     *
-     * @param {string} style
-     *       justifyLeft, justifyCenter, justifyRight, justifyFull
-     */
-    formatBlockStyle: function (style) {
-        var self = this;
-        var nodes = this.context.invoke('HelperPlugin.getSelectedNodes');
-        nodes = this.context.invoke('HelperPlugin.filterFormatAncestors', nodes);
-        var align = style === 'justifyLeft' ? 'left' :
-            style === 'justifyCenter' ? 'center' :
-            style === 'justifyRight' ? 'right' : 'justify';
-        _.each(nodes, function (node) {
-            if (dom.isText(node)) {
-                return;
-            }
-            var textAlign = self.window.getComputedStyle(node).textAlign;
-            if (align !== textAlign) {
-                if (align !== self.window.getComputedStyle(node.parentNode).textAlign) {
-                    $(node).css('text-align', align);
-                } else {
-                    $(node).css('text-align', '');
-                }
-            }
-        });
-        this.editable.normalize();
-    },
-    /**
-     * (Un-)format text: make it bold, italic, ...
-     *
-     * @param {string} tagName
-     *       bold, italic, underline, strikethrough, superscript, subscript
-     */
-    formatText: function (tagName) {
-        var self = this;
-        var tag = {
-            bold: 'B',
-            italic: 'I',
-            underline: 'U',
-            strikethrough: 'S',
-            superscript: 'SUP',
-            subscript: 'SUB',
-        } [tagName];
-        if (!tag) {
-            throw new Error(tagName);
-        }
-
-        var range = this.context.invoke('editor.createRange');
-        if (!range || !this.$editable.has(range.sc).length || !this.$editable.has(range.ec).length) {
-            return;
-        }
-        if (range.isCollapsed()) {
-            var br;
-            if (range.sc.tagName === 'BR') {
-                br = range.sc;
-            } else if (range.sc.firstChild && range.sc.firstChild.tagName === 'BR') {
-                br = range.sc.firstChild;
-            }
-            if (br) {
-                var emptyText = this.document.createTextNode('\u200B');
-                $(br).before(emptyText).remove();
-                range = this.context.invoke('editor.setRange', emptyText, 0, emptyText, 1);
-            } else {
-                var offset = range.so;
-                this.context.invoke('HelperPlugin.insertTextInline', '\u200B');
-                range = this.context.invoke('editor.createRange');
-                range.so = offset;
-                range.eo = offset + 1;
-            }
-            range.select();
-        }
-
-        var nodes = this.context.invoke('HelperPlugin.getSelectedNodes');
-        var texts = this.context.invoke('HelperPlugin.filterLeafChildren', nodes);
-        var formatted = this.context.invoke('HelperPlugin.filterFormatAncestors', nodes);
-
-        var start = this.context.invoke('HelperPlugin.firstLeaf', nodes[0]);
-        var end = this.context.invoke('HelperPlugin.lastLeaf', nodes[nodes.length - 1]);
-
-        function containsOnlySelectedText(node) {
-            return _.all(node.childNodes, function (n) {
-                return _.any(texts, function (t) {
-                    return n === t && !(dom.isText(n) && n.textContent === '');
-                }) && containsOnlySelectedText(n);
-            });
-        }
-
-        function containsAllSelectedText(node) {
-            return _.all(texts, function (t) {
-                return _.any(node.childNodes, function (n) {
-                    return n === t && !(dom.isText(n) && n.textContent === '') || containsAllSelectedText(n);
-                });
-            });
-        }
-
-        var nodeAlreadyStyled = [];
-        var toStyled = [];
-        var notStyled = _.filter(texts, function (text, index) {
-            if (toStyled.indexOf(text) !== -1 || nodeAlreadyStyled.indexOf(text) !== -1) {
-                return;
-            }
-            nodeAlreadyStyled.push(text);
-
-            end = text;
-
-            var styled = dom.ancestor(text, function (node) {
-                return node.tagName === tag;
-            });
-            if (styled) {
-                if (
-                    !/^\u200B$/.test(text.textContent) &&
-                    containsAllSelectedText(styled) &&
-                    containsOnlySelectedText(styled)
-                ) {
-                    // Unwrap all contents
-                    nodes = $(styled).contents();
-                    $(styled).before(nodes).remove();
-                    nodeAlreadyStyled.push.apply(nodeAlreadyStyled, nodes);
-                    end = _.last(nodeAlreadyStyled);
-                } else {
-                    var options = {
-                        isSkipPaddingBlankHTML: true,
-                        isNotSplitEdgePoint: true,
-                    };
-
-                    if (
-                        nodeAlreadyStyled.indexOf(text.nextSibling) === -1 &&
-                        !dom.isRightEdgeOf(text, styled)
-                    ) {
-                        options.nextText = false;
-                        var point = self.context.invoke('HelperPlugin.makePoint', text, dom.nodeLength(text));
-                        if (dom.isMedia(text)) {
-                            point = dom.nextPoint(point);
-                        }
-                        var next = self.context.invoke('HelperPlugin.splitTree', styled, point, options);
-                        nodeAlreadyStyled.push(next);
-                    }
-                    if (
-                        nodeAlreadyStyled.indexOf(text.previousSibling) === -1 &&
-                        !dom.isLeftEdgeOf(text, styled)
-                    ) {
-                        options.nextText = true;
-                        var textPoint = self.context.invoke('HelperPlugin.makePoint', text, 0);
-                        text = self.context.invoke('HelperPlugin.splitTree', styled, textPoint, options);
-                        nodeAlreadyStyled.push(text);
-                        if (index === 0) {
-                            start = text;
-                        }
-                        end = text;
-                    }
-
-                    var toRemove = dom.ancestor(text, function (n) {
-                        return n.tagName === tag;
-                    });
-                    if (toRemove) {
-                        // Remove generated empty elements
-                        if (
-                            toRemove.nextSibling &&
-                            self.context.invoke('HelperPlugin.isBlankNode', toRemove.nextSibling)
-                        ) {
-                            $(toRemove.nextSibling).remove();
-                        }
-                        if (
-                            toRemove.previousSibling &&
-                            self.context.invoke('HelperPlugin.isBlankNode', toRemove.previousSibling)
-                        ) {
-                            $(toRemove.previousSibling).remove();
-                        }
-
-                        // Unwrap the element
-                        nodes = $(toRemove).contents();
-                        $(toRemove).before(nodes).remove();
-                        nodeAlreadyStyled.push.apply(nodeAlreadyStyled, nodes);
-                        end = _.last(nodeAlreadyStyled);
-                    }
-                }
-            }
-
-            if (dom.ancestor(text, function (node) {
-                    return toStyled.indexOf(node) !== -1;
-                })) {
-                return;
-            }
-
-            var node = text;
-            while (
-                node && node.parentNode &&
-                formatted.indexOf(node) === -1 &&
-                formatted.indexOf(node.parentNode) === -1
-            ) {
-                node = node.parentNode;
-            }
-            if (node !== text) {
-                if (containsAllSelectedText(node)) {
-                    toStyled.push.apply(toStyled, texts);
-                    node = text;
-                } else if (!containsOnlySelectedText(node)) {
-
-                    node = text;
-                }
-            }
-
-            if (toStyled.indexOf(node) === -1) {
-                toStyled.push(node);
-            }
-            return !styled;
-        });
-
-        toStyled = _.uniq(toStyled);
-
-        if (notStyled.length) {
-            nodes = [];
-            var toMerge = [];
-            _.each(toStyled, function (node) {
-                var next = true;
-                if (node.nextSibling && node.nextSibling.tagName === tag) {
-                    $(node.nextSibling).prepend(node);
-                    next = false;
-                }
-                if (node.previousSibling && node.previousSibling.tagName === tag) {
-                    $(node.previousSibling).append(node);
-                }
-                if (node.parentNode && node.parentNode.tagName !== tag) {
-                    var styled = self.document.createElement(tag);
-                    if (node.tagName) {
-                        $(styled).append(node.childNodes);
-                        $(node).append(styled);
-                    } else {
-                        $(node).before(styled);
-                        styled.appendChild(node);
-                    }
-                }
-                // Add adjacent nodes with same tagName to list of nodes to merge
-                if (
-                    node.parentNode && node.parentNode[next ? 'nextSibling' : 'previousSibling'] &&
-                    node.parentNode.tagName === node.parentNode[next ? 'nextSibling' : 'previousSibling'].tagName
-                ) {
-                    toMerge.push(next ? node.parentNode : node.parentNode.previousSibling);
-                }
-            });
-            // Merge what needs merging
-            while (toMerge.length) {
-                this.context.invoke('HelperPlugin.deleteEdge', toMerge.pop(), 'next');
-            }
-        }
-
-        range = this.context.invoke('editor.setRange', start, 0, end, dom.nodeLength(end));
-
-        if (range.sc === range.ec && range.sc.textContent === '\u200B') {
-            range.so = range.eo = 1;
-        }
-
-        range.select();
-        this.editable.normalize();
-    },
-    /**
-     * Remove format on the current range.
-     *
-     * @see _isParentRemoveFormatCandidate
-     */
-    removeFormat: function () {
-        this._selectCurrentIfCollapsed();
-        var selectedText = this.context.invoke('HelperPlugin.getSelectedText');
-        var selectedIcons = this.context.invoke('HelperPlugin.getSelectedNodes');
-        selectedIcons = _.filter(selectedIcons, dom.isIcon);
-        if (!selectedText.length && !selectedIcons.length) {
-            return;
-        }
-        _.each(selectedIcons, this._removeIconFormat.bind(this));
-        _.each(selectedText, this._removeTextFormat.bind(this));
-        var startNode = selectedText[0];
-        var endNode = selectedText[selectedText.length - 1];
-        this.context.invoke('editor.setRange', startNode, 0, endNode, dom.nodeLength(endNode)).select();
-        this.editable.normalize();
-        this.context.invoke('editor.saveRange');
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Remove the non-whitelisted or blacklisted
-     * top level elements from clipboard data.
-     *
-     * @see clipboardWhitelist
-     * @see clipboardBlacklist
-     *
-     * @private
-     * @param {JQuery} $clipboardData
-     * @returns {Object} {$clipboardData: JQuery, didRemoveNodes: Boolean}
-     */
-    _cleanClipboardRoot: function ($clipboardData) {
-        var didRemoveNodes = false;
-        var whiteList = this._clipboardWhitelist();
-        var blackList = this._clipboardBlacklist();
-        var $fakeParent = $(this.document.createElement('div'));
-        _.each($clipboardData, function (node) {
-            var isWhitelisted = dom.isText(node) || $(node).filter(whiteList.join(',')).length;
-            var isBlacklisted = $(node).filter(blackList.join(',')).length;
-            if (!isWhitelisted || isBlacklisted) {
-                $fakeParent.append(node.childNodes);
-                didRemoveNodes = true;
-            } else {
-                $fakeParent.append(node);
-            }
-        });
-        return {
-            $clipboardData: $fakeParent.contents(),
-            didRemoveNodes: didRemoveNodes,
-        };
-    },
-    /**
-     * Return a list of jQuery selectors for prohibited nodes on paste.
-     *
-     * @private
-     * @returns {String[]}
-     */
-    _clipboardBlacklist: function () {
-        return ['.Apple-interchange-newline'];
-    },
-    /**
-     * Return a list of jQuery selectors for exclusively authorized nodes on paste.
-     *
-     * @private
-     * @returns {String[]}
-     */
-    _clipboardWhitelist: function () {
-        var listSels = ['ul', 'ol', 'li'];
-        var styleSels = ['i', 'b', 'u', 'em', 'strong'];
-        var tableSels = ['table', 'th', 'tbody', 'tr', 'td'];
-        var miscSels = ['img', 'br', 'a', '.fa'];
-        return this.options.styleTags.concat(listSels, styleSels, tableSels, miscSels);
-    },
-    /**
-     * Return a list of attribute names that are exclusively authorized on paste.
-     * 
-     * @private
-     * @returns {String[]}
-     */
-    _clipboardWhitelistAttr: function () {
-        return ['class', 'href', 'src'];
-    },
-    /**
-     * Fill up empty block elements with BR elements so the carret can enter them.
-     *
-     * @private
-     * @param {JQuery} $els
-     */
-    _fillEmptyBlocks: function ($els) {
-        var self = this;
-
-        $els.filter(function (i, n) {
-            return self.context.invoke('HelperPlugin.isNodeBlockType', n) && !n.childNodes;
-        }).append(this.document.createElement('br'));
-    },
-    /**
-     * Get all non-whitelisted or blacklisted elements from clipboard data.
-     *
-     * @private
-     * @param {JQuery} $clipboardData
-     * @returns {JQuery}
-     */
-    _filterIllegalClipboardElements: function ($clipboardData) {
-        return $clipboardData.find('*').addBack()
-                .not(this._clipboardWhitelist().join(','))
-                .addBack(this._clipboardBlacklist().join(','))
-                .filter(function () {
-                    return !dom.isText(this);
-                });
-    },
-    /**
-     * Get a legal point to paste at, from the current range's start point.
-     *
-     * @private
-     * @returns {Object} {node: Node, offset: Number}
-     */
-    _getPastePoint: function () {
-        var point = this.context.invoke('editor.createRange').getStartPoint();
-        var offsetChild = point.node.childNodes[point.offset];
-        point = offsetChild ? this.context.invoke('HelperPlugin.makePoint', offsetChild, 0) : point;
-        return dom.nextPointUntil(point, this._isPastePointLegal.bind(this));
-    },
-    /**
-     * Insert nodes at a point. Insert them inline if the first node is inline
-     * and pasting inline is legal at that point.
-     *
-     * @private
-     * @param {Node[]} nodes
-     * @param {Object} point {node: Node, offset: Number}
-     */
-    _insertNodesAt: function (nodes, point) {
-        var canInsertInline = dom.isText(point.node) || point.node.tagName === 'BR' || dom.isMedia(point.node);
-        var $fakeParent = $(this.document.createElement('div'));
-        $fakeParent.append(nodes);
-        if (dom.isInline(nodes[0]) && canInsertInline) {
-            point.node = point.node.tagName ? point.node : point.node.splitText(point.offset);
-            $(point.node).before($fakeParent.contents());
-        } else {
-            this.context.invoke('HelperPlugin.insertBlockNode', $fakeParent[0]);
-        }
-        $fakeParent.contents().unwrap();
-    },
-    /**
-     * Return true if the parent of the given node is a removeFormat candidate:
-     * - It is a removeFormat candidate as defined by W3C
-     * - It is contained within the editable area
-     * - It is not unbreakable
-     *
-     * @see formatTags the list of removeFormat candidates as defined by W3C
-     *
-     * @private
-     * @param {Node} node
-     */
-    _isParentRemoveFormatCandidate: function (node) {
-        var parent = node.parentNode;
-        if (!parent) {
-            return false;
-        }
-        var isEditableOrAbove = parent && (parent === this.editable || $.contains(parent, this.editable));
-        var isUnbreakable = parent && this.options.isUnbreakableNode(parent);
-        var isRemoveFormatCandidate = parent && parent.tagName && this.formatTags.indexOf(parent.tagName.toLowerCase()) !== -1;
-        return parent && !isEditableOrAbove && !isUnbreakable && isRemoveFormatCandidate;
-    },
-    /**
-     * Return true if it's legal to paste nodes at the given point:
-     * if the point is not within a void node and the point is not unbreakable.
-     *
-     * @private
-     * @param {Object} point {node: Node, offset: Number}
-     * @returns {Boolean}
-     */
-    _isPastePointLegal: function (point) {
-        var node = point.node;
-        var isWithinVoid = false;
-        if (node.parentNode) {
-            isWithinVoid = dom.isVoid(node.parentNode) || $(node.parentNode).filter('.fa').length;
-        }
-        return !isWithinVoid && !this.options.isUnbreakableNode(point.node);
-    },
-    /**
-     * @private
-     * @param {Object} point {node: Node, offset: Number}
-     * @returns {Boolean}
-     */
-    _isPointInAnchor: function (point) {
-        var ancestor = dom.ancestor(point.node, dom.isAnchor);
-        return !ancestor || ancestor === this.editable;
-    },
-    /**
-     * Check a list of nodes and merges all adjacent ULs together:
-     * [ul, ul, p, ul, ul] will return [ul, p, ul], with the li's of
-     * nodes[1] and nodes[4] appended to nodes[0] and nodes[3].
-     *
-     * @private
-     * @param {Node[]} nodes
-     * @return {Node[]} the remaining, merged nodes
-     */
-    _mergeAdjacentULs: function (nodes) {
-        var res = [];
-        var prevNode;
-        _.each(nodes, function (node) {
-            prevNode = res[res.length - 1];
-            if (prevNode && node.tagName === 'UL' && prevNode.tagName === 'UL') {
-                $(prevNode).append(node.childNodes);
-            } else {
-                res.push(node);
-            }
-        });
-        return res;
-    },
-    /**
-     * Remove an icon's format (colors, font size).
-     *
-     * @private
-     * @param {Node} icon
-     */
-    _removeIconFormat: function (icon) {
-        $(icon).css({
-            color: '',
-            backgroundColor: '',
-            fontSize: '',
-        });
-        var reColorClasses = /(^|\s+)(bg|text)-\S*|/g;
-        icon.className = icon.className.replace(reColorClasses, '').trim();
-    },
-    /**
-     * Remove non-whitelisted attributes from clipboard.
-     *
-     * @private
-     * @param {JQuery} $els
-     */
-    _removeIllegalClipboardAttributes: function ($els) {
-        var self = this;
-        $els.each(function () {
-            var $node = $(this);
-            _.each(_.pluck(this.attributes, 'name'), function (attribute) {
-                if (self._clipboardWhitelistAttr().indexOf(attribute) === -1) {
-                    $node.removeAttr(attribute);
-                }
-            });
-        }).removeClass('o_editable o_not_editable');
-    },
-    /**
-     * Remove non-whitelisted and blacklisted elements from clipboard data.
-     *
-     * @private
-     * @param {JQuery} $clipboardData
-     * @returns {JQuery}
-     */
-    _removeIllegalClipboardElements: function ($clipboardData) {
-        var root = true;
-        $clipboardData = $clipboardData.not('meta').not('style').not('script');
-        var $badNodes = this._filterIllegalClipboardElements($clipboardData);
-
-        do {
-            if (root) {
-                root = false;
-                var cleanData = this._cleanClipboardRoot($clipboardData);
-                $clipboardData = cleanData.$clipboardData;
-                root = cleanData.didRemoveNodes;
-            } else {
-                this._removeNodesPreserveContents($badNodes);
-            }
-
-            $badNodes = this._filterIllegalClipboardElements($clipboardData);
-        } while ($badNodes.length);
-        return $clipboardData;
-    },
-    /**
-     * Remove nodes from the DOM while preserving their contents if any.
-     *
-     * @private
-     * @param {JQuery} $nodes
-     */
-    _removeNodesPreserveContents: function ($nodes) {
-        var $contents = $nodes.contents();
-        if ($contents.length) {
-            $contents.unwrap();
-        } else {
-            $nodes.remove();
-        }
-    },
-    /**
-     * Remove a text node's format: remove its style parents (b, i, u, ...).
-     *
-     * @private
-     * @param {Node} textNode
-     */
-    _removeTextFormat: function (textNode) {
-        var node = textNode;
-        while (this._isParentRemoveFormatCandidate(node)) {
-            this.context.invoke('HelperPlugin.splitAtNodeEnds', node);
-            $(node.parentNode).before(node).remove();
-        }
-    },
-    /**
-     * Select the whole current node if the range is collapsed
-     *
-     * @private
-     */
-    _selectCurrentIfCollapsed: function () {
-        var range = this.context.invoke('editor.createRange');
-        if (!range.isCollapsed()) {
-            return;
-        }
-        this.context.invoke('editor.setRange', range.sc, 0, range.sc, dom.nodeLength(range.sc)).select();
-        this.context.invoke('editor.saveRange');
-    },
-    /**
-     * Prevent inline nodes directly in TDs by wrapping them in P elements.
-     *
-     * @private
-     * @param {JQuery} $tds
-     */
-    _wrapTDContents: function ($tds) {
-        var self = this;
-        var $inlinesInTD = $tds.contents().filter(function () {
-            return !self.context.invoke('HelperPlugin.isNodeBlockType', this);
-        });
-        var parentsOfInlinesInTD = [];
-        _.each($inlinesInTD, function (n) {
-            parentsOfInlinesInTD.push(self.context.invoke('HelperPlugin.firstBlockAncestor', n));
-        });
-        $($.unique(parentsOfInlinesInTD)).wrapInner(this.document.createElement('p'));
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Handle paste events to permit cleaning/sorting of the data before pasting.
-     *
-     * @private
-     * @param {SummernoteEvent} se
-     * @param {jQueryEvent} e
-     */
-    _onPaste: function (se, e) {
-        var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        var iPhone = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-        if (isSafari && !iPhone) {
-            return;
-        }
-        se.preventDefault();
-        se.stopImmediatePropagation();
-        e.preventDefault();
-        e.stopImmediatePropagation();
-
-        this.context.invoke('editor.beforeCommand');
-
-        // Clean up
-        var clipboardData = e.originalEvent.clipboardData.getData('text/html');
-        if (clipboardData) {
-            clipboardData = this.prepareClipboardData(clipboardData);
-        } else {
-            clipboardData = e.originalEvent.clipboardData.getData('text/plain');
-            // get that text as an array of text nodes separated by <br> where needed
-            var allNewlines = /\n/g;
-            clipboardData = _.str.trim(clipboardData)
-                .replace(/</g, '&lt;').replace(/>/g, '&gt;')
-                .replace(allNewlines, '<br>');
-            clipboardData = $('<p>' + clipboardData + '</p>').contents().toArray();
-        }
-
-        // Delete selection
-        this.context.invoke('HelperPlugin.deleteSelection');
-
-        // Insert the nodes
-        this.pasteNodes(clipboardData);
-        this.context.invoke('HelperPlugin.normalize');
-        this.context.invoke('editor.saveRange');
-
-        this.context.invoke('editor.afterCommand');
-    },
-});
-
-registry.add('TextPlugin', TextPlugin);
-
-return TextPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/toolbar.js

@@ -1,57 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.toolbar', function (require) {
-'use strict';
-
-var Plugins = require('web_editor.wysiwyg.plugins');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var dom = $.summernote.dom;
-
-
-var ToolbarPlugin = Plugins.toolbar.extend({
-    events: {
-        'summernote.mouseup': 'update',
-        'summernote.keyup': 'update',
-        'summernote.change': 'update',
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    initialize: function () {
-        this._super();
-        this.update();
-    },
-    /**
-     * Update the toolbar (enabled/disabled).
-     */
-    update: function () {
-        var $btn = this.$toolbar.children().not('.note-history, .note-view').find('button');
-        var target = this.context.invoke('editor.restoreTarget') || this.context.invoke('editor.createRange').sc;
-
-        if (!target || !$.contains(this.editable, target) || !this.options.isEditableNode(target)) {
-            $btn.addClass('o_disabled');
-            return;
-        }
-
-        $btn.removeClass('o_disabled');
-
-        if (!target || !this.options.displayPopover(target)) {
-            $btn.addClass('o_disabled');
-        }
-
-        if (dom.ancestor(target, dom.isMedia)) {
-            this.$toolbar.children('.note-style, .note-font, .note-para, .note-table').addClass('o_disabled');
-
-            $btn.find('.fa-file-image-o').parent().removeClass('o_disabled');
-            if (dom.ancestor(target, dom.isFont)) {
-                this.$toolbar.children('.note-color').removeClass('o_disabled');
-
-            }
-        }
-    },
-});
-
-registry.add('toolbar', ToolbarPlugin);
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/transform.js

@@ -1,85 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.transform', function (require) {
-'use strict';
-
-var core = require('web.core');
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-var wysiwygTranslation = require('web_editor.wysiwyg.translation');
-var wysiwygOptions = require('web_editor.wysiwyg.options');
-
-var _t = core._t;
-
-
-var TransformPlugin = AbstractPlugin.extend({
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Manages transformations on a media.
-     */
-    transform: function () {
-        var $image = $(this.context.invoke('editor.restoreTarget'));
-
-        if ($image.data('transfo-destroy')) {
-            $image.removeData('transfo-destroy');
-            return;
-        }
-
-        $image.transfo(); // see web_editor/static/lib/jQuery.transfo.js
-
-        var mouseup = function () {
-            $('.note-popover button[data-event="transform"]').toggleClass('active', $image.is('[style*="transform"]'));
-        };
-        $(document).on('mouseup', mouseup);
-
-        var mousedown = this._wrapCommand(function (event) {
-            if (!$(event.target).closest('.transfo-container').length) {
-                $image.transfo('destroy');
-                $(document).off('mousedown', mousedown).off('mouseup', mouseup);
-            }
-            if ($(event.target).closest('.note-popover').length) {
-                var transformStyles = self.context.invoke('HelperPlugin.getRegex', '', 'g', '[^;]*transform[\\w:]*;?');
-                $image.data('transfo-destroy', true).attr('style', ($image.attr('style') || '').replace(transformStyles, ''));
-            }
-        });
-        $(document).on('mousedown', mousedown);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Adds the transform buttons.
-     *
-     * @override
-     */
-    _addButtons: function () {
-        var self = this;
-        this._super();
-
-        this.context.memo('button.transform', function () {
-            return self.context.invoke('buttons.button', {
-                contents: self.ui.icon(self.options.icons.transform),
-                tooltip: self.lang.image.transform,
-                click: self.context.createInvokeHandler('TransformPlugin.transform'),
-            }).render();
-        });
-    },
-
-});
-
-
-_.extend(wysiwygOptions.icons, {
-    transform: 'fa fa-object-ungroup',
-});
-_.extend(wysiwygTranslation.image, {
-    transform: _t('Transform the picture (click twice to reset transformation)'),
-});
-
-registry.add('TransformPlugin', TransformPlugin);
-
-return TransformPlugin;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin/unbreakable.js

@@ -1,364 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.unbreakable', function (require) {
-'use strict';
-
-var AbstractPlugin = require('web_editor.wysiwyg.plugin.abstract');
-var registry = require('web_editor.wysiwyg.plugin.registry');
-
-var dom = $.summernote.dom;
-
-//--------------------------------------------------------------------------
-// unbreakable node preventing editing
-//--------------------------------------------------------------------------
-
-var Unbreakable = AbstractPlugin.extend({
-    events: {
-        'wysiwyg.range .note-editable': '_onRange',
-        'summernote.mouseup': '_onMouseUp',
-        'summernote.keyup': '_onKeyup',
-        'summernote.keydown': '_onKeydown',
-        // 'summernote.focusnode': '_onFocusnode', => add this event to summernote.
-    },
-
-    initialize: function () {
-        var self = this;
-        this._super.apply(this, arguments);
-        setTimeout(function () {
-            self.secureArea();
-            self.context.invoke('HistoryPlugin.clear');
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Change the selection if it breaks an unbreakable node:
-     *
-     * .. code-block:: xml
-     *
-        <unbreakable id="a">
-            content_1
-            <unbreakable id="b">content_2</unbreakable>
-            <allow id="c">
-                content_3
-                <unbreakable id="d">content_4</unbreakable>
-                <unbreakable id="e">
-                    content_5
-                    <allow id="f">content_6</allow>
-                    content_7
-                </unbreakable>
-                content_8
-            </allow>
-            <unbreakable id="f">content_9</unbreakable>
-            <allow id="g">
-                content_10
-                <unbreakable id="h">content_11</unbreakable>
-                content_12
-            </allow>
-        </unbreakable>
-
-     * .. code-block: none
-
-        START            END            RESIZE START     RESIZE END
-
-        content_1       content_1       content_3       content_3   (find the first allowed node)
-        content_1       content_2       content_3       content_3
-        content_1       content_3       content_3       -
-        content_3       content_3       -               -           (nothing to do)
-        content_3       content_8       -               -           (can remove unbreakable node)
-        content_3       content_4       -               content_3
-        content_3       content_5       -               #d          (can select the entire unbreakable node)
-        content_5       content_8       content_6       content_6
-        content_5       content_7       #e              #e          (select the entire unbreakable node)
-        content_6       content_8       -               content_6
-        content_7       content_8       -               content_8
-        content_9       content_12      content_10      -
-     *
-     * @returns {WrappedRange}
-     */
-    secureRange: function () {
-        var self = this;
-        var range = this.context.invoke('editor.createRange');
-        var isCollapsed = range.isCollapsed();
-        var needReselect = false;
-        var startPoint = range.getStartPoint();
-        var endPoint = range.getEndPoint();
-
-        // don't change the selection if the carret is just after a media in editable area
-        var prev;
-        if (
-            isCollapsed && startPoint.node.tagName && startPoint.node.childNodes[startPoint.offset] &&
-            (prev = dom.prevPoint(startPoint)) && dom.isMedia(prev.node) &&
-            this.options.isEditableNode(prev.node.parentNode)
-        ) {
-            return range;
-        }
-
-        // move the start selection to an allowed node
-        var target = startPoint.node.childNodes[startPoint.offset] || startPoint.node;
-        if (startPoint.offset && startPoint.offset === dom.nodeLength(startPoint.node)) {
-            startPoint.node = this.context.invoke('HelperPlugin.lastLeaf', startPoint.node);
-            startPoint.offset = dom.nodeLength(startPoint.node);
-        }
-        if (!dom.isMedia(target) || !this.options.isEditableNode(target)) {
-            var afterEnd = false;
-            startPoint = dom.nextPointUntil(startPoint, function (point) {
-                if (point.node === endPoint.node && point.offset === endPoint.offset) {
-                    afterEnd = true;
-                }
-                return self.options.isEditableNode(point.node) && dom.isVisiblePoint(point) || !point.node;
-            });
-            if (!startPoint || !startPoint.node) { // no allowed node, search the other way
-                afterEnd = false;
-                startPoint = dom.prevPointUntil(range.getStartPoint(), function (point) {
-                    return self.options.isEditableNode(point.node) && dom.isVisiblePoint(point) || !point.node;
-                });
-            }
-            if (startPoint && !startPoint.node) {
-                startPoint = null;
-            }
-            if (afterEnd) {
-                isCollapsed = true;
-            }
-        }
-
-        if (startPoint && (startPoint.node !== range.sc || startPoint.offset !== range.so)) {
-            needReselect = true;
-            range.sc = startPoint.node;
-            range.so = startPoint.offset;
-            if (isCollapsed) {
-                range.ec = range.sc;
-                range.eo = range.so;
-            }
-        }
-
-        if (startPoint && !isCollapsed) { // mouse selection or key selection with shiftKey
-            var point = endPoint;
-            endPoint = false;
-
-            // if the start point was moved after the end point
-            var toCollapse = !dom.prevPointUntil(point, function (point) {
-                return point.node === range.sc && point.offset === range.so;
-            });
-
-            if (!toCollapse) {
-                // find the first allowed ancestor
-                var commonUnbreakableParent = dom.ancestor(range.sc, function (node) {
-                    return !dom.isMedia(node) && self.options.isUnbreakableNode(node);
-                });
-                if (!commonUnbreakableParent) {
-                    commonUnbreakableParent = this.editable;
-                }
-
-                var lastCheckedNode;
-                if (point.offset === dom.nodeLength(point.node)) {
-                    point = dom.nextPoint(point);
-                }
-
-                // move the end selection to an allowed node in the first allowed ancestor
-                endPoint = dom.prevPointUntil(point, function (point) {
-                    if (point.node === range.sc && point.offset === range.so) {
-                        return true;
-                    }
-                    if (lastCheckedNode === point.node) {
-                        return false;
-                    }
-
-                    // select the entirety of the unbreakable node
-                    if (
-                        point.node.tagName && point.offset &&
-                        $.contains(commonUnbreakableParent, point.node) &&
-                        self.options.isUnbreakableNode(point.node)
-                    ) {
-                        return true;
-                    }
-
-                    var unbreakableParent = dom.ancestor(point.node, function (node) {
-                        return !dom.isMedia(node) && self.options.isUnbreakableNode(node);
-                    });
-                    if (!unbreakableParent) {
-                        unbreakableParent = self.editable;
-                    }
-
-                    if (commonUnbreakableParent !== unbreakableParent) {
-                        lastCheckedNode = point.node;
-                        return false;
-                    }
-                    lastCheckedNode = point.node;
-                    if (!self.options.isEditableNode(point.node)) {
-                        return false;
-                    }
-                    if (
-                        (/\S|\u200B|\u00A0/.test(point.node.textContent) ||
-                            dom.isMedia(point.node)) &&
-                        dom.isVisiblePoint(point)
-                    ) {
-                        return true;
-                    }
-                    if (dom.isText(point.node)) {
-                        lastCheckedNode = point.node;
-                    }
-                    return false;
-                });
-            }
-
-            if (!endPoint) {
-                endPoint = range.getStartPoint();
-            }
-
-            if (endPoint.node !== range.ec || endPoint.offset !== range.eo) {
-                needReselect = true;
-                range.ec = endPoint.node;
-                range.eo = endPoint.offset;
-            }
-        }
-
-        if (needReselect) {
-            range = range.select();
-            this.context.invoke('editor.saveRange');
-        }
-        return range;
-    },
-    /**
-     * Apply contentEditable false on all media.
-     *
-     * @param {DOM} [node] default is editable area
-     */
-    secureArea: function (node) {
-        this.$editable.find('o_not_editable').attr('contentEditable', 'false');
-
-        var medias = (function findMedia(node) {
-            var medias = [];
-            if (node.tagName !== 'IMG' && dom.isMedia(node)) {
-                medias.push(node);
-            } else {
-                $(node.childNodes).each(function () {
-                    if (this.tagName) {
-                        medias.push.apply(medias, findMedia(this));
-                    }
-                });
-            }
-            return medias;
-        })(node || this.editable);
-        $(medias).addClass('o_fake_not_editable').attr('contentEditable', 'false');
-
-        $(medias).each(function () {
-            if (dom.isVideo(this) && !$(this).children('.o_fake_editable').length) {
-                // allow char insertion
-                $(this).prepend('<div class="o_fake_editable o_wysiwyg_to_remove" style="position: absolute;" contentEditable="true"/>');
-                $(this).append('<div class="o_fake_editable o_wysiwyg_to_remove" style="position: absolute;" contentEditable="true"/>');
-            }
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Trigger a focusnode event when the focus enters another node.
-     *
-     * @param {DOM} node
-     */
-    _focusNode: function (node) {
-        if (!node.tagName) {
-            node = node.parentNode;
-        }
-        if (this._focusedNode !== node) {
-            this._focusedNode = node;
-            this.context.triggerEvent('focusnode', node);
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Handler
-    //--------------------------------------------------------------------------
-
-    /**
-     * Method called on wysiwyg.range event on the editable: secures the range, refocuses.
-     */
-    _onRange: function () {
-        var range = this.secureRange();
-        this._focusNode(range.sc);
-    },
-    /**
-     * Method called on mouseup event: secures the range, refocuses.
-     */
-    _onMouseUp: function () {
-        var range = this.secureRange();
-        this._focusNode(range.ec);
-    },
-    /**
-     * Method called on keydown event: prevents changes to unbreakable nodes.
-     *
-     * @param {SummernoteEvent} se
-     * @param {jQueryEvent} e
-     */
-    _onKeydown: function (se, e) {
-        if (!e.key || (e.key.length !== 1 && e.keyCode !== 8 && e.keyCode !== 46)) {
-            return;
-        }
-        var range;
-        // for test tour, to trigger Keydown on target (instead of use Wysiwyg.setRange)
-        if (
-            e.target !== this._focusedNode &&
-            (this.editable === e.target || $.contains(this.editable, e.target))
-        ) {
-            range = this.context.invoke('editor.createRange');
-            if (!$.contains(e.target, range.sc) && !$.contains(e.target, range.ec)) {
-                range = this.context.invoke('editor.setRange', e.target, 0);
-                range = range.normalize().select();
-                this.context.invoke('editor.saveRange');
-                this._focusNode(range.ec);
-            }
-        }
-
-        // rerange to prevent some edition.
-        // eg: if the user select with arraw and shifKey and keypress an other char
-        range = this.secureRange();
-        var target = range.getStartPoint();
-
-        if (e.keyCode === 8) { // backspace
-            if (!target || this.options.isUnbreakableNode(target.node)) {
-                e.preventDefault();
-            }
-        } else if (e.keyCode === 46) { // delete
-            target = dom.nextPointUntil(dom.nextPoint(target), dom.isVisiblePoint);
-            if (!target || this.options.isUnbreakableNode(target.node)) {
-                e.preventDefault();
-            }
-        }
-    },
-    /**
-     * Method called on keyup event: prevents selection of unbreakable nodes.
-     *
-     * @param {SummernoteEvent} se
-     * @param {jQueryEvent} se
-     */
-    _onKeyup: function (se, e) {
-        if (e.keyCode < 37 || e.keyCode > 40) {
-            return;
-        }
-        var range;
-        if (e.keyCode === 37) { // left
-            range = this.secureRange();
-            this._focusNode(range.sc);
-        } else if (e.keyCode === 39) { // right
-            range = this.secureRange();
-            this._focusNode(range.ec);
-        } else if (e.keyCode === 38) { // up
-            range = this.secureRange();
-            this._focusNode(range.sc);
-        } else { // down
-            range = this.secureRange();
-            this._focusNode(range.ec);
-        }
-    },
-});
-
-registry.add('UnbreakablePlugin', Unbreakable);
-
-return Unbreakable;
-
-});

addons/web_editor/static/src/js/wysiwyg/plugin_registry.js

@@ -1,43 +0,0 @@
-odoo.define('web_editor.wysiwyg.plugin.registry', function (require) {
-"use strict";
-
-var ajax = require('web.ajax');
-var core = require('web.core');
-var Registry = require('web.Registry');
-
-
-var WysiwygRegistry = Registry.extend({
-    init: function () {
-        this._super();
-        this._jobs = [];
-        this._xmlDependencies = [];
-        this._loadingDef = Promise.resolve();
-    },
-    start: function (wysiwyg) {
-        var fn;
-        var defs = [this._loadingDef];
-        while ((fn = this._jobs.shift())) {
-            defs.push(fn(wysiwyg));
-        }
-
-        var xmlPath;
-        while ((xmlPath = this._xmlDependencies.shift())) {
-            defs.push(ajax.loadXML(xmlPath, core.qweb));
-        }
-
-        this._loadingDef = Promise.all(defs);
-        return this._loadingDef;
-    },
-    addJob: function (job) {
-        this._jobs.push(job);
-    },
-    addXmlDependency: function (xmlDependency) {
-        this._xmlDependencies.push(xmlDependency);
-    },
-    plugins: function () {
-        return _.clone(this.map);
-    },
-});
-
-return new WysiwygRegistry();
-});

addons/web_editor/static/src/js/wysiwyg/translation.js

@@ -1,161 +0,0 @@
-odoo.define('web_editor.wysiwyg.translation', function (require) {
-'use strict';
-
-var core = require('web.core');
-var _t = core._t;
-
-$.summernote.lang.odoo = {
-    font: {
-        bold: _t('Bold'),
-        italic: _t('Italic'),
-        underline: _t('Underline'),
-        clear: _t('Remove Font Style'),
-        height: _t('Line Height'),
-        name: _t('Font Family'),
-        strikethrough: _t('Strikethrough'),
-        subscript: _t('Subscript'),
-        superscript: _t('Superscript'),
-        size: _t('Font Size')
-    },
-    image: {
-        image: _t('Picture'),
-        insert: _t('Insert Image'),
-        resizeFull: _t('Resize Full'),
-        resizeHalf: _t('Resize Half'),
-        resizeQuarter: _t('Resize Quarter'),
-        floatLeft: _t('Float Left'),
-        floatRight: _t('Float Right'),
-        floatNone: _t('Float None'),
-        shapeRounded: _t('Shape: Rounded'),
-        shapeCircle: _t('Shape: Circle'),
-        shapeThumbnail: _t('Shape: Thumbnail'),
-        shapeNone: _t('Shape: None'),
-        dragImageHere: _t('Drag image or text here'),
-        dropImage: _t('Drop image or Text'),
-        selectFromFiles: _t('Select from files'),
-        maximumFileSize: _t('Maximum file size'),
-        maximumFileSizeError: _t('Maximum file size exceeded.'),
-        url: _t('Image URL'),
-        remove: _t('Remove Image'),
-        original: _t('Original')
-    },
-    video: {
-        video: _t('Video'),
-        videoLink: _t('Video Link'),
-        insert: _t('Insert Video'),
-        url: _t('Video URL'),
-        providers: _t('(YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku)')
-    },
-    link: {
-        link: _t('Link'),
-        insert: _t('Insert Link'),
-        unlink: _t('Unlink'),
-        edit: _t('Edit'),
-        textToDisplay: _t('Text to display'),
-        url: _t('To what URL should this link go?'),
-        openInNewWindow: _t('Open in new window')
-    },
-    table: {
-        table: _t('Table'),
-        addRowAbove: _t('Add row above'),
-        addRowBelow: _t('Add row below'),
-        addColLeft: _t('Add column left'),
-        addColRight: _t('Add column right'),
-        delRow: _t('Delete row'),
-        delCol: _t('Delete column'),
-        delTable: _t('Delete table')
-    },
-    hr: {
-        insert: _t('Insert Horizontal Rule')
-    },
-    style: {
-        style: _t('Style'),
-        p: _t('Normal'),
-        blockquote: _t('Quote'),
-        pre: _t('Code'),
-        h1: _t('Header 1'),
-        h2: _t('Header 2'),
-        h3: _t('Header 3'),
-        h4: _t('Header 4'),
-        h5: _t('Header 5'),
-        h6: _t('Header 6')
-    },
-    lists: {
-        unordered: _t('Unordered list'),
-        ordered: _t('Ordered list')
-    },
-    options: {
-        help: _t('Help'),
-        fullscreen: _t('Full Screen'),
-        codeview: _t('Code View')
-    },
-    paragraph: {
-        paragraph: _t('Paragraph'),
-        outdent: _t('Outdent'),
-        indent: _t('Indent'),
-        left: _t('Align left'),
-        center: _t('Align center'),
-        right: _t('Align right'),
-        justify: _t('Justify full')
-    },
-    color: {
-        recent: _t('Recent Color'),
-        more: _t('More Color'),
-        background: _t('Background Color'),
-        foreground: _t('Foreground Color'),
-        transparent: _t('Transparent'),
-        setTransparent: _t('Set transparent'),
-        reset: _t('Reset'),
-        resetToDefault: _t('Reset to default')
-    },
-    shortcut: {
-        shortcuts: _t('Keyboard shortcuts'),
-        close: _t('Close'),
-        textFormatting: _t('Text formatting'),
-        action: _t('Action'),
-        paragraphFormatting: _t('Paragraph formatting'),
-        documentStyle: _t('Document Style'),
-        extraKeys: _t('Extra keys')
-    },
-    help: {
-        insertParagraph: _t('Insert Paragraph'),
-        undo: _t('Undoes the last command'),
-        redo: _t('Redoes the last command'),
-        tab: _t('Tab'),
-        untab: _t('Outdent (when at the start of a line)'),
-        bold: _t('Set a bold style'),
-        italic: _t('Set a italic style'),
-        underline: _t('Set a underline style'),
-        strikethrough: _t('Set a strikethrough style'),
-        removeFormat: _t('Clean a style'),
-        justifyLeft: _t('Set left align'),
-        justifyCenter: _t('Set center align'),
-        justifyRight: _t('Set right align'),
-        justifyFull: _t('Set full align'),
-        insertUnorderedList: _t('Toggle unordered list'),
-        insertOrderedList: _t('Toggle ordered list'),
-        outdent: _t('Outdent current paragraph'),
-        indent: _t('Indent current paragraph'),
-        formatPara: _t('Change current block\'s format as a paragraph(P tag)'),
-        formatH1: _t('Change current block\'s format as H1'),
-        formatH2: _t('Change current block\'s format as H2'),
-        formatH3: _t('Change current block\'s format as H3'),
-        formatH4: _t('Change current block\'s format as H4'),
-        formatH5: _t('Change current block\'s format as H5'),
-        formatH6: _t('Change current block\'s format as H6'),
-        insertHorizontalRule: _t('Insert horizontal rule'),
-        'linkDialog.show': _t('Show Link Dialog')
-    },
-    history: {
-        undo: _t('Undo'),
-        redo: _t('Redo')
-    },
-    specialChar: {
-        specialChar: _t('SPECIAL CHARACTERS'),
-        select: _t('Select Special characters')
-    }
-};
-
-return $.summernote.lang.odoo;
-
-});

addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js

@@ -1,234 +0,0 @@
-odoo.define('web_editor.wysiwyg.iframe', function (require) {
-'use strict';
-
-var Wysiwyg = require('web_editor.wysiwyg');
-var ajax = require('web.ajax');
-var core = require('web.core');
-
-var qweb = core.qweb;
-
-var _fnSummernoteMaster = $.fn.summernote;
-var _summernoteMaster = $.summernote;
-$.fn.summernote = function () {
-    var summernote = this[0].ownerDocument.defaultView._fnSummenoteSlave || _fnSummernoteMaster;
-    return summernote.apply(this, arguments);
-};
-window._fnSummernoteMaster = $.fn.summernote;
-window._summernoteMaster = _summernoteMaster;
-
-/**
- * Add option (inIframe) to load Wysiwyg in an iframe.
- **/
-Wysiwyg.include({
-    /**
-     * Add options to load Wysiwyg in an iframe.
-     *
-     * @override
-     * @param {boolean} options.inIframe
-     **/
-    init: function (parent, options) {
-        this._super.apply(this, arguments);
-        if (this.options.inIframe) {
-            if (!this.options.iframeCssAssets) {
-                this.options.iframeCssAssets = 'web_editor.wysiwyg_iframe_css_assets';
-            }
-            this._onUpdateIframeId = 'onLoad_' + this.id;
-        }
-    },
-    /**
-     * Load assets to inject into iframe.
-     *
-     * @override
-     **/
-    willStart: function () {
-        if (!this.options.inIframe) {
-            return this._super();
-        }
-        if (this.options.iframeCssAssets) {
-            this.defAsset = ajax.loadAsset(this.options.iframeCssAssets);
-        } else {
-            this.defAsset = Promise.resolve({cssLibs: [], cssContents: []});
-        }
-        this.$target = this.$el;
-        return this.defAsset
-            .then(this._loadIframe.bind(this))
-            .then(this._super.bind(this)).then(function () {
-                var _summernoteMaster = $.summernote;
-                var _summernoteSlave = this.$iframe[0].contentWindow._summernoteSlave;
-                _summernoteSlave.options = _.extend({}, _summernoteMaster.options, {modules: _summernoteSlave.options.modules});
-                this._enableBootstrapInIframe();
-            }.bind(this));
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        if (!this.options.inIframe) {
-            return this._super();
-        }
-        $(document.body).off('.' + this.id);
-
-        this.$iframe.parents().removeClass('o_wysiwyg_no_transform');
-
-        this.$target.insertBefore(this.$iframe);
-
-        delete window.top[this._onUpdateIframeId];
-        if (this.$iframeTarget) {
-            this.$iframeTarget.remove();
-        }
-        if (this.$iframe) {
-            this.$iframe.remove();
-        }
-        this._super();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Change fullsreen feature.
-     *
-     * @override
-     * @returns {Object} modules list to load
-     */
-    _getPlugins: function () {
-        var self = this;
-        var plugins = this._super();
-        plugins.fullscreen = plugins.fullscreen.extend({
-            toggle: function () {
-                if (!self.$iframe) {
-                    return this._super();
-                }
-                self.$iframe.toggleClass('o_fullscreen');
-                self.$iframe.contents().find('body').toggleClass('o_fullscreen');
-
-                // Hack to avoid a parent of the fullscreen iframe to have a
-                // transform (otherwise the position: fixed won't work)
-                self.$iframe.parents().toggleClass('o_wysiwyg_no_transform');
-            },
-            isFullscreen: function () {
-                if (!self.$iframe) {
-                    return this._super();
-                }
-                return self.$iframe.hasClass('o_fullscreen');
-            },
-        });
-        return plugins;
-    },
-    /**
-     * This method is called after the iframe is loaded with the editor. This is
-     * to activate the bootstrap features that out of the iframe would launch
-     * automatically when changing the dom.
-     *
-     * @private
-     */
-    _enableBootstrapInIframe: function () {
-        var body = this.$iframe[0].contentWindow.document.body;
-        var $toolbarButtons = this._summernote.layoutInfo.toolbar.find('[data-toggle="dropdown"]').dropdown({
-            boundary: body,
-        });
-
-        function hideDrowpdown() {
-            var $expended = $toolbarButtons.filter('[aria-expanded="true"]').parent();
-            $expended.children().removeAttr('aria-expanded').removeClass('show');
-            $expended.removeClass('show');
-        }
-        $(body).on('mouseup.' + this.id, hideDrowpdown);
-        $(document.body).on('click.' + this.id, hideDrowpdown);
-    },
-    /**
-     * Create iframe, inject css and create a link with the content,
-     * then inject the target inside.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _loadIframe: function () {
-        var self = this;
-        this.$iframe = $('<iframe class="wysiwyg_iframe">').css({
-            'min-height': '400px',
-            width: '100%'
-        });
-        var avoidDoubleLoad = 0; // this bug only appears on some configurations.
-
-        // resolve deferred on load
-        var def = new Promise(function (resolve) {
-            window.top[self._onUpdateIframeId] = function (_avoidDoubleLoad) {
-                if (_avoidDoubleLoad !== avoidDoubleLoad) {
-                    console.warn('Wysiwyg iframe double load detected');
-                    return;
-                }
-                delete window.top[self._onUpdateIframeId];
-                var $iframeTarget = self.$iframe.contents().find('#iframe_target');
-                $iframeTarget.append(self.$target);
-                resolve();
-            };
-        });
-        this.$iframe.data('loadDef', def);  // for unit test
-
-        // inject content in iframe
-
-        this.$iframe.on('load', function onLoad (ev) {
-            var _avoidDoubleLoad = ++avoidDoubleLoad;
-            this.defAsset.then(function (asset) {
-                if (_avoidDoubleLoad !== avoidDoubleLoad) {
-                    console.warn('Wysiwyg immediate iframe double load detected');
-                    return;
-                }
-                var iframeContent = qweb.render('wysiwyg.iframeContent', {
-                    asset: asset,
-                    updateIframeId: this._onUpdateIframeId,
-                    avoidDoubleLoad: _avoidDoubleLoad
-                });
-                this.$iframe[0].contentWindow.document
-                    .open("text/html", "replace")
-                    .write(iframeContent);
-            }.bind(this));
-        }.bind(this));
-
-        this.$iframe.insertAfter(this.$target);
-
-        return def;
-    },
-});
-
-//--------------------------------------------------------------------------
-// Public helper
-//--------------------------------------------------------------------------
-
-/**
- * Get the current range from Summernote.
- *
- * @param {Node} [DOM]
- * @returns {Object}
-*/
-Wysiwyg.getRange = function (DOM) {
-    var summernote = (DOM.defaultView || DOM.ownerDocument.defaultView)._summernoteSlave || _summernoteMaster;
-    var range = summernote.range.create();
-    return range && {
-        sc: range.sc,
-        so: range.so,
-        ec: range.ec,
-        eo: range.eo,
-    };
-};
-/**
- * @param {Node} sc - start container
- * @param {Number} so - start offset
- * @param {Node} ec - end container
- * @param {Number} eo - end offset
-*/
-Wysiwyg.setRange = function (sc, so, ec, eo) {
-    var summernote = sc.ownerDocument.defaultView._summernoteSlave || _summernoteMaster;
-    $(sc).focus();
-    if (ec) {
-        summernote.range.create(sc, so, ec, eo).select();
-    } else {
-        summernote.range.create(sc, so).select();
-    }
-    // trigger for Unbreakable
-    $(sc.tagName ? sc : sc.parentNode).trigger('wysiwyg.range');
-};
-
-});

addons/web_editor/static/src/js/wysiwyg_snippets/wysiwyg_snippets.js

@@ -1,291 +0,0 @@
-odoo.define('web_editor.wysiwyg.snippets', function (require) {
-'use strict';
-
-var Wysiwyg = require('web_editor.wysiwyg');
-var snippetsEditor = require('web_editor.snippet.editor');
-
-Wysiwyg.include({
-    events: _.extend({}, Wysiwyg.prototype.events, {
-        'content_changed .o_editable': '_onContentChange',
-        'content_changed .note-editable': '_onContentChange',
-    }),
-    custom_events: _.extend({}, Wysiwyg.prototype.custom_events, {
-        request_history_undo_record: '_onHistoryUndoRecordRequest',
-        cover_will_change: '_onCoverWillChange',
-        snippet_cloned: '_onSnippetCloned',
-        snippet_dropped: '_onSnippetDropped',
-        snippet_focused: '_onSnippetFocused',
-        reload_snippet_dropzones: '_onReloadSnippetDropzones',
-    }),
-
-    selectorEditableArea: '.note-editable',
-
-    init: function (parent, options) {
-        this._super.apply(this, arguments);
-
-        options = _.clone(this.options);
-        if (!options.snippets) {
-            return;
-        }
-        if (options.snippets === true) {
-            options.snippets = 'web_editor.snippets';
-        }
-        options.isUnbreakableNode = this.isUnbreakableNode.bind(this);
-        options.isEditableNode = this.isEditableNode.bind(this);
-        this.snippets = new snippetsEditor.Class(this, options);
-    },
-    /**
-     * Preload snippets.
-     *
-     * @override
-     **/
-    willStart: function () {
-        if (this.snippets) {
-            this.snippets.loadSnippets(); // don't use the deferred
-        }
-        return this._super();
-    },
-    /**
-     * Add options (snippets) to load snippet building block
-     * snippets can by url begin with '/' or an view xml_id.
-     *
-     * @override
-     */
-    start: function () {
-        var self = this;
-        return this._super().then(function () {
-            if (!self.snippets) {
-                return;
-            }
-            var $editable = $(self._summernote.layoutInfo.editable);
-            self.snippets.setSelectorEditableArea(self.$el, self.selectorEditableArea);
-            self.snippets.insertBefore(self.$el).then(function () {
-                self.$el.before(self.snippets.$el);
-                var $wrap = $('<div class="o_wrap_editable_snippets"/>');
-                $wrap.on('scroll', function (event) {
-                    self._summernote.triggerEvent('scroll', event);
-                });
-                var $contents = self.snippets.$el.siblings('#oe_manipulators')
-                    .addClass('o_wysiwyg_to_remove').attr('contentEditable', false);
-                $wrap.append($contents);
-                $editable.before($wrap);
-                $wrap.append($editable);
-                setTimeout(function () { // add a set timeout for the transition
-                    self.snippets.$el.addClass('o_loaded');
-                    self.$el.addClass('o_snippets_loaded');
-                    self.trigger_up('snippets_loaded', self.snippets.$el);
-                });
-            });
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    isUnbreakableNode: function (node) {
-        if (!this.snippets) {
-            return this._super(node);
-        }
-        return this._super(node) || node.tagName === 'DIV' || snippetsEditor.globalSelector.is($(node));
-    },
-    /**
-     * @override
-     */
-    isEditableNode: function (node) {
-        if (!this._super(node)) {
-            return false;
-        }
-        if (this.snippets && node.tagName === 'DIV' && !node.contentEditable) {
-            if ($(node).parent('.row').length) {
-                return true;
-            }
-            if (!_.find(node.childNodes, function (node) {
-                var char = this.context.invoke('HelperPlugin.getRegex', 'char');
-                return node.tagName !== 'DIV' && (node.tagName || node.textContent.match(char));
-            })) {
-                return false;
-            }
-        }
-        return true;
-    },
-    /**
-     * @override
-     */
-    save: function () {
-        if (!this.snippets) {
-            return this._super();
-        }
-        var defs = [];
-        this.trigger_up('ready_to_save', {defs: defs});
-        return Promise.all(defs)
-            .then(this.snippets.cleanForSave.bind(this.snippets))
-            .then(this._super.bind(this));
-    },
-
-    //--------------------------------------------------------------------------
-    // Handler
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onContentChange: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        if (this.snippets) {
-            this.addHistoryStep();
-        }
-        this._onChange();
-    },
-    /**
-     * @private
-     * @override
-     */
-    _onChange: function () {
-        if (this.snippets) {
-            this.snippets.updateCurrentSnippetEditorOverlay();
-        }
-        this._summernote.invoke('toolbar.update', true);
-        this._super.apply(this, arguments);
-    },
-    /**
-     * Called when an element askes to record an history undo -> records it.
-     *
-     * @private
-     */
-    _onHistoryUndoRecordRequest: function () {
-        this.addHistoryStep();
-    },
-    /**
-     * Triggered when the user click on the snippet to drag&drop, remove or clone
-     * (hide the popover)
-     *
-     * @private
-     */
-    _onCoverWillChange: function () {
-        var context = this._summernote;
-        var target = context.invoke('editor.restoreTarget', target);
-        context.invoke('MediaPlugin.hidePopovers');
-    },
-    /**
-     * trigger reload_snippet_dropzones on snippets
-     *
-     * @private
-     */
-    _onReloadSnippetDropzones: function () {
-        this.snippets.trigger('reload_snippet_dropzones');
-    },
-    /**
-     * Triggered when a snippet is cloned in the editable area
-     *
-     * @private
-     * @param {OdooEvent} ev
-     * @param {Object} ev.data
-     * @param {Object} ev.data.$target
-     */
-    _onSnippetCloned: function (ev) {
-        this._summernote.invoke('UnbreakablePlugin.secureArea', ev.data.$target[0]);
-    },
-    /**
-     * Triggered when a snippet is dropped in the editable area
-     *
-     * @private
-     * @param {OdooEvent} ev
-     * @param {Object} ev.data
-     * @param {Object} ev.data.$target
-     */
-    _onSnippetDropped: function (ev) {
-        this._summernote.invoke('UnbreakablePlugin.secureArea', ev.data.$target[0]);
-    },
-    /**
-     * Triggered when the user focuses on a snippet: hides the popover.
-     *
-     * @private
-     */
-    _onSnippetFocused: function () {
-        var context = this._summernote;
-        var target = context.invoke('editor.restoreTarget', target);
-        context.invoke('MediaPlugin.hidePopovers');
-        context.invoke('MediaPlugin.update', target);
-    },
-});
-
-//--------------------------------------------------------------------------
-// jQuery extensions
-//--------------------------------------------------------------------------
-
-$.fn.extend({
-    /**
-     * Set the range and focus at the start of the first found node.
-     *
-     * @returns {JQuery}
-     */
-    focusIn: function () {
-        if (this.length) {
-            Wysiwyg.setRangeFromNode(this[0], {begin: true});
-            $(this).trigger('mouseup');
-        }
-        return this;
-    },
-    /**
-     * Set the range and focus at the end of the first found node.
-     *
-     * @returns {JQuery}
-     */
-    focusInEnd: function () {
-        if (this.length) {
-            Wysiwyg.setRangeFromNode(this[0], {end: true});
-            $(this).trigger('mouseup');
-        }
-        return this;
-    },
-    /**
-     * Set the range and focus on a selection, accounting for zero-width spaces.
-     *
-     * @returns {JQuery}
-     */
-    selectContent: function () {
-        if (this.length) {
-            Wysiwyg.setRangeFromNode(this[0]);
-            var range = $.summernote.range.create();
-
-            try {
-                range.so;
-            } catch (e) {
-                /* Under certain unknown conditions, the range cannot be
-                applied and triggered an error. In order to allow the user to
-                keep editing, we need to prevent the dialog from showing, hence
-                the use of `console.error`.
-                If this error appears, the carret is moved to the beginning
-                of the focused node.*/
-                console.error(e);
-                console.error('Informations for debugging', [
-                    ['elements', this],
-                    ['outerHTML', this[0].outerHTML],
-                    ['textContent', this[0].textContent],
-                    ['html', this.html()],
-                    ['previous selection', this.end().html()],
-                ]);
-            }
-
-            if (!range.sc.tagName && range.so === 0 && range.sc.textContent[range.so] === '\u200B') {
-                range.so += 1;
-            }
-            if (!range.ec.tagName && range.eo === range.ec.textContent.length && range.ec.textContent[range.eo - 1] === '\u200B') {
-                range.eo -= 1;
-            }
-            range.select();
-            $(this).trigger('mouseup');
-        }
-        return this;
-    },
-});
-
-return Wysiwyg;
-
-});

addons/web_editor/views/editor.xml

@@ -13,10 +13,9 @@
 <template id="assets_wysiwyg" name="Wysiwyg Editor Assets">
     <!-- lib -->
 
-    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/summernote.css"/>
-    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/cropper/css/cropper.css"/>
+    <t t-call-assets="web_editor.summernote"/>
 
-    <script type="text/javascript" src="/web_editor/static/lib/summernote/summernote.js"/>
+    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/cropper/css/cropper.css"/>
     <script type="text/javascript" src="/web_editor/static/lib/cropper/js/cropper.js"/>
     <script type="text/javascript" src="/web_editor/static/lib/jQuery.transfo.js"/>
 
@@ -24,6 +23,7 @@
 
     <t t-call="web._assets_helpers">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_variables.scss"/>
     </t>
 
     <!-- integration -->
@@ -31,12 +31,13 @@
     <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg.scss"/>
     <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_iframe.scss"/>
 
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin_registry.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/options.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/translation.js"/>
     <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/fonts.js"/>
+    <script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/base.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/editor.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/rte.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/rte.summernote.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/tours/rte.js"/>
 
     <!-- widgets & plugins -->
 
@@ -49,40 +50,70 @@
     <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js"/>
     <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/widgets/widgets.js"/>
 
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/abstract.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/plugins.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/helper.js"/>
+    <!-- Launcher -->
 
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/toolbar.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/dropzone.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/history.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/table.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/text.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/editor.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/media.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/buttons.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/link.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/font.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/font_buttons.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/keyboard.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/unbreakable.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/transform.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/hint.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/bullet.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/codeview.js"/>
-    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/plugin/help_dialog.js"/>
+    <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg/wysiwyg.js"/>
+</template>
+
+<template id="summernote" name="Summernote">
+    <script type="text/javascript">
+        (function () {
+            "use strict";
+            odoo.define('jquery', function () {return $;});
+
+            var uniqId = 0;
+            odoo.__define__ = window.define;
+            window.define = function (id) {
+                var args = Array.prototype.slice.call(arguments);
+                var factorie = args.pop();
+                var id = args[0];
+
+                if (id instanceof Array) {
+                    var name = "summernote_factorie_" + (++uniqId);
+                    odoo[name] = factorie;
+
+                    var head = '';
+                    var fn = 'var fn = odoo.'+name+';\ndelete odoo.'+name+';\n';
+                    fn += 'return fn(';
+                    for (var k=0; k&lt;id.length; k++) {
+                        head += 'var a'+(++uniqId)+' = require("'+id[k]+'");\n';
+                        fn += 'a'+uniqId+', ';
+                    }
+                    fn += 'null);';
+
+                    odoo.define(odoo.website_next_define, new Function('require', head + fn));
+                } else {
+                    odoo.define(id, factorie);
+                }
+            };
+        })();
+    </script>
+    <t t-set="summer_js_files" t-value="['core/async', 'core/func', 'core/agent', 'core/list',
+        'core/dom', 'core/key', 'core/range', 'editing/Bullet', 'editing/History', 'editing/Style',
+        'editing/Table', 'editing/Typing', 'module/Editor', 'module/Button', 'module/Clipboard',
+        'module/Codeview', 'module/DragAndDrop', 'module/Fullscreen', 'module/Handle',
+        'module/HelpDialog', 'module/ImageDialog', 'module/LinkDialog', 'module/Popover',
+        'module/Statusbar', 'module/Toolbar', 'Renderer', 'EventHandler', 'defaults', 'summernote']" />
+    <t t-foreach="summer_js_files" t-as="file">
+        <script>odoo.website_next_define = 'summernote/<t t-esc="file" />';</script>
+        <script type="text/javascript" t-attf-src="/web_editor/static/lib/summernote/src/js/{{ file }}.js"></script>
+    </t>
+    <script type="text/javascript" src="/web_editor/static/src/js/editor/summernote.js" />
+    <script type="text/javascript">
+        window.define = odoo.__define__;
+        delete odoo.__define__;
+        delete odoo.website_next_define;
+    </script>
+    <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/src/css/summernote.css"/>
 </template>
 
 <template id="wysiwyg_snippets" inherit_id="web_editor.assets_wysiwyg" name="Wysiwyg Editor additional snippets">
-    <xpath expr="." position="inside">
-        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_variables.scss"/>
+    <xpath expr="script[@src='/web_editor/static/src/js/editor/rte.summernote.js']" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_snippets.scss"/>
 
         <script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
-
-        <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/wysiwyg_snippets.js"/>
-        <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/snippets.editor.js"/>
-        <script type="text/javascript" src="/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.editor.js"/>
+        <script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.options.js"/>
     </xpath>
 </template>
 
@@ -121,7 +152,6 @@
     </xpath>
     <xpath expr="script[last()]" position="after">
         <script type="text/javascript" src="/web_editor/static/src/js/backend/field_html.js" />
-        <script type="text/javascript" src="/web_editor/static/src/js/backend/convert_inline.js"/>
     </xpath>
 </template>
 

addons/website/static/src/js/editor/editor.js

@@ -0,0 +1,18 @@
+odoo.define('website.editor', function (require) {
+'use strict';
+
+var weWidgets = require('web_editor.widget');
+var wUtils = require('website.utils');
+
+weWidgets.LinkDialog.include({
+    /**
+     * Allows the URL input to propose existing website pages.
+     *
+     * @override
+     */
+    start: function () {
+        wUtils.autocompleteWithPages(this, this.$('input[name="url"]'));
+        return this._super.apply(this, arguments);
+    },
+});
+});

addons/website/static/src/js/editor/rte.summernote.js

@@ -0,0 +1,59 @@
+odoo.define('website.rte.summernote', function (require) {
+'use strict';
+
+var core = require('web.core');
+require('web_editor.rte.summernote');
+
+var eventHandler = $.summernote.eventHandler;
+var renderer = $.summernote.renderer;
+var tplIconButton = renderer.getTemplate().iconButton;
+var _t = core._t;
+
+var fn_tplPopovers = renderer.tplPopovers;
+renderer.tplPopovers = function (lang, options) {
+    var $popover = $(fn_tplPopovers.call(this, lang, options));
+    $popover.find('.note-image-popover .btn-group:has([data-value="img-thumbnail"])').append(
+        tplIconButton('fa fa-object-ungroup', {
+            title: _t('Transform the picture (click twice to reset transformation)'),
+            event: 'transform',
+        }));
+    return $popover;
+};
+
+$.summernote.pluginEvents.transform = function (event, editor, layoutInfo, sorted) {
+    var $selection = layoutInfo.handle().find('.note-control-selection');
+    var $image = $($selection.data('target'));
+
+    if ($image.data('transfo-destroy')) {
+        $image.removeData('transfo-destroy');
+        return;
+    }
+
+    $image.transfo();
+
+    var mouseup = function (event) {
+        $('.note-popover button[data-event="transform"]').toggleClass('active', $image.is('[style*="transform"]'));
+    };
+    $(document).on('mouseup', mouseup);
+
+    var mousedown = function (event) {
+        if (!$(event.target).closest('.transfo-container').length) {
+            $image.transfo('destroy');
+            $(document).off('mousedown', mousedown).off('mouseup', mouseup);
+        }
+        if ($(event.target).closest('.note-popover').length) {
+            $image.data('transfo-destroy', true).attr('style', ($image.attr('style') || '').replace(/[^;]*transform[\w:]*;?/g, ''));
+        }
+        $image.trigger('content_changed');
+    };
+    $(document).on('mousedown', mousedown);
+};
+
+var fn_boutton_update = eventHandler.modules.popover.button.update;
+eventHandler.modules.popover.button.update = function ($container, oStyle) {
+    fn_boutton_update.call(this, $container, oStyle);
+    $container.find('button[data-event="transform"]')
+        .toggleClass('active', $(oStyle.image).is('[style*="transform"]'))
+        .toggleClass('d-none', !$(oStyle.image).is('img'));
+};
+});

addons/website/views/website_templates.xml

@@ -94,8 +94,13 @@
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/wysiwyg_variables.scss"/>
     </t>
     <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.wysiwyg.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.edit_mode.scss"/>
 
+    <script type="text/javascript" src="/website/static/src/js/editor/editor.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/rte.summernote.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/snippets.options.js"/>
+
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/widget_link.js"/>
@@ -104,9 +109,6 @@
 <template id="website.assets_editor" name="Website Editor Assets (used in website editor)">
     <t t-call="web._assets_helpers"/>
 
-    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
-    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.edit_mode.scss"/>
-
     <script type="text/javascript" src="/website/static/src/js/editor/editor_menu.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/editor_menu_translate.js"/>