diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js
index 54b64c949cf..9a7f914edad 100644
--- a/addons/website_mail/static/src/js/follow.js
+++ b/addons/website_mail/static/src/js/follow.js
@@ -1,71 +1,73 @@
-(function () {
-    'use strict';
+odoo.define('website_mail.follow', ['web.ajax', 'website.snippets.animation'], function (require) {
+'use strict';
 
-    var website = openerp.website;
+var ajax = require('web.ajax');
+var animation = require('website.snippets.animation');
 
-    website.snippet.animationRegistry.follow = website.snippet.Animation.extend({
-        selector: ".js_follow",
-        start: function (editable_mode) {
-            var self = this;
-            this.is_user = false;
+animation.registry.follow = animation.Animation.extend({
+    selector: ".js_follow",
+    start: function (editable_mode) {
+        var self = this;
+        this.is_user = false;
 
-            openerp.jsonRpc('/website_mail/is_follower', 'call', {
-                model: this.$target.data('object'),
-                id: this.$target.data('id'),
-            }).always(function (data) {
-                self.is_user = data.is_user;
-                self.email = data.email;
-                self.toggle_subscription(data.is_follower, data.email);
-                self.$target.removeClass("hidden");
+        ajax.jsonRpc('/website_mail/is_follower', 'call', {
+            model: this.$target.data('object'),
+            id: this.$target.data('id'),
+        }).always(function (data) {
+            self.is_user = data.is_user;
+            self.email = data.email;
+            self.toggle_subscription(data.is_follower, data.email);
+            self.$target.removeClass("hidden");
+        });
+
+        // not if editable mode to allow designer to edit alert field
+        if (!editable_mode) {
+            $('.js_follow > .alert').addClass("hidden");
+            $('.js_follow > .input-group-btn.hidden').removeClass("hidden");
+            this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
+                event.preventDefault();
+                self.on_click();
             });
+        }
+        return;
+    },
+    on_click: function () {
+        var self = this;
+        var $email = this.$target.find(".js_follow_email");
 
-            // not if editable mode to allow designer to edit alert field
-            if (!editable_mode) {
-                $('.js_follow > .alert').addClass("hidden");
-                $('.js_follow > .input-group-btn.hidden').removeClass("hidden");
-                this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
-                    event.preventDefault();
-                    self.on_click();
-                });
-            }
-            return;
-        },
-        on_click: function () {
-            var self = this;
-            var $email = this.$target.find(".js_follow_email");
+        if ($email.length && !$email.val().match(/.+@.+/)) {
+            this.$target.addClass('has-error');
+            return false;
+        }
+        this.$target.removeClass('has-error');
 
-            if ($email.length && !$email.val().match(/.+@.+/)) {
-                this.$target.addClass('has-error');
-                return false;
-            }
-            this.$target.removeClass('has-error');
+        var email = $email.length ? $email.val() : false;
+        if (email || this.is_user) {
+            ajax.jsonRpc('/website_mail/follow', 'call', {
+                'id': +this.$target.data('id'),
+                'object': this.$target.data('object'),
+                'message_is_follower': this.$target.attr("data-follow") || "off",
+                'email': email,
+            }).then(function (follow) {
+                self.toggle_subscription(follow, email);
+            });
+        }
+    },
+    toggle_subscription: function(follow, email) {
+        follow = follow || (!email && this.$target.attr('data-unsubscribe'));
+        if (follow) {
+            this.$target.find(".js_follow_btn").addClass("hidden");
+            this.$target.find(".js_unfollow_btn").removeClass("hidden");
+        }
+        else {
+            this.$target.find(".js_follow_btn").removeClass("hidden");
+            this.$target.find(".js_unfollow_btn").addClass("hidden");
+        }
+        this.$target.find('input.js_follow_email')
+            .val(email || "")
+            .attr("disabled", email && (follow || this.is_user) ? "disabled" : false);
+        this.$target.attr("data-follow", follow ? 'on' : 'off');
+    },
+});
 
-            var email = $email.length ? $email.val() : false;
-            if (email || this.is_user) {
-                openerp.jsonRpc('/website_mail/follow', 'call', {
-                    'id': +this.$target.data('id'),
-                    'object': this.$target.data('object'),
-                    'message_is_follower': this.$target.attr("data-follow") || "off",
-                    'email': email,
-                }).then(function (follow) {
-                    self.toggle_subscription(follow, email);
-                });
-            }
-        },
-        toggle_subscription: function(follow, email) {
-            follow = follow || (!email && this.$target.attr('data-unsubscribe'));
-            if (follow) {
-                this.$target.find(".js_follow_btn").addClass("hidden");
-                this.$target.find(".js_unfollow_btn").removeClass("hidden");
-            }
-            else {
-                this.$target.find(".js_follow_btn").removeClass("hidden");
-                this.$target.find(".js_unfollow_btn").addClass("hidden");
-            }
-            this.$target.find('input.js_follow_email')
-                .val(email || "")
-                .attr("disabled", email && (follow || this.is_user) ? "disabled" : false);
-            this.$target.attr("data-follow", follow ? 'on' : 'off');
-        },
-    });
-})();
+});
diff --git a/addons/website_mail/static/src/js/website_email_designer.js b/addons/website_mail/static/src/js/website_email_designer.js
index b2ce7286281..ad8e7440b7d 100644
--- a/addons/website_mail/static/src/js/website_email_designer.js
+++ b/addons/website_mail/static/src/js/website_email_designer.js
@@ -1,437 +1,444 @@
-(function () {
-    'use strict';
+odoo.define('website_mail.website_mail', ['web.Model', 'website.editor', 'website.snippets.editor'], function (require) {
+"use strict";
 
-    var website = openerp.website;
-    var session = new openerp.Session();
+var Model = require('web.Model');
+var editor = require('website.editor');
+var snippets_editor = require('website.snippets.editor');
 
-    // Snippet option for resizing  image and column width inline like excel
-    website.snippet.options["width-x"] = website.snippet.Option.extend({
-        start: function () {
-            this.container_width = 600;
-            var parent = this.$target.closest('[data-max-width]');
-            if( parent.length ){
-                this.container_width = parseInt(parent.attr('data-max-width'));
-            } 
-            var self = this;
-            var offset, sib_offset, target_width, sib_width;
-            this.is_image = false;
-            this._super();
 
-            this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
-            if( this.$target.is('img')){
-                this.$overlay.find(".oe_handle.w").addClass("readonly");
-                this.$overlay.find(".oe_snippet_remove, .oe_snippet_move, .oe_snippet_clone").addClass("hidden");
-                this.is_image=true;
-            }
+// Snippet option for resizing  image and column width inline like excel
+snippets_editor.options["width-x"] = snippets_editor.Option.extend({
+    start: function () {
+        this.container_width = 600;
+        var parent = this.$target.closest('[data-max-width]');
+        if( parent.length ){
+            this.container_width = parseInt(parent.attr('data-max-width'));
+        }
+        var self = this;
+        var offset, sib_offset, target_width, sib_width;
+        this.is_image = false;
+        this._super();
 
-            this.$overlay.find(".oe_handle").on('mousedown', function (event){
+        this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
+        if( this.$target.is('img')){
+            this.$overlay.find(".oe_handle.w").addClass("readonly");
+            this.$overlay.find(".oe_snippet_remove, .oe_snippet_move, .oe_snippet_clone").addClass("hidden");
+            this.is_image=true;
+        }
+
+        this.$overlay.find(".oe_handle").on('mousedown', function (event){
+            event.preventDefault();
+            var $handle = $(this);
+            var compass = false;
+
+            _.each(['n', 's', 'e', 'w' ], function(handler) {
+                if ($handle.hasClass(handler)) { compass = handler; }
+            });
+            if(self.is_image){ compass = "image"; }
+            self.BuildingBlock.editor_busy = true;
+
+            var $body = $(document.body);
+
+            var body_mousemove = function (event){
                 event.preventDefault();
-                var $handle = $(this);
-                var compass = false;
-
-                _.each(['n', 's', 'e', 'w' ], function(handler) {
-                    if ($handle.hasClass(handler)) { compass = handler; }
-                });
-                if(self.is_image){ compass = "image"; }
-                self.BuildingBlock.editor_busy = true;
-
-                var $body = $(document.body);
-
-                var body_mousemove = function (event){
-                    event.preventDefault();
-                    offset = self.$target.offset().left;
-                    target_width = self.get_max_width(self.$target);
-                    if (compass === 'e' && self.$target.next().offset()) {
-                        sib_width = self.get_max_width(self.$target.next());
-                        sib_offset = self.$target.next().offset().left;
-                        self.change_width(event, self.$target, target_width, offset ,'plus');
-                        self.change_width(event, self.$target.next(), sib_width, sib_offset ,'minus');
-                    }
-                    if (compass === 'w' && self.$target.prev().offset()) {
-                        sib_width = self.get_max_width(self.$target.prev());
-                        sib_offset = self.$target.prev().offset().left;
-                        self.change_width(event, self.$target, target_width, offset ,'minus');
-                        self.change_width(event, self.$target.prev(), sib_width, sib_offset, 'plus');
-                    }
-                    if (compass === 'image'){
-                        self.change_width(event, self.$target, target_width, offset ,'plus');
-                    }
+                offset = self.$target.offset().left;
+                target_width = self.get_max_width(self.$target);
+                if (compass === 'e' && self.$target.next().offset()) {
+                    sib_width = self.get_max_width(self.$target.next());
+                    sib_offset = self.$target.next().offset().left;
+                    self.change_width(event, self.$target, target_width, offset ,'plus');
+                    self.change_width(event, self.$target.next(), sib_width, sib_offset ,'minus');
                 }
-                var body_mouseup = function(){
-                    $body.unbind('mousemove', body_mousemove);
-                    $body.unbind('mouseup', body_mouseup);
-                    self.BuildingBlock.editor_busy = false;
-                    self.$target.removeClass("resize_editor_busy");
-                };
-                $body.mousemove(body_mousemove);
-                $body.mouseup(body_mouseup);
-            });
-        },
-        change_width:function(event, target ,target_width, offset, type){
-            var self = this;
-            if(type == 'plus'){
-                var width = event.pageX-offset;
-            }else{
-                var width = offset + target_width - event.pageX;
-            }
-            target.css("width", width + "px");
-            self.BuildingBlock.cover_target(self.$overlay, self.$target);
-            return;
-        },
-        get_int_width: function ($el) {
-            var el_width = $el.css('width');
-            return parseInt(el_width);
-        },
-        get_max_width: function ($el) {
-            var max_width = 0;
-            var self = this;
-            _.each($el.siblings(),function(sib){
-                max_width +=  self.get_int_width($(sib));
-            })
-            return this.container_width - max_width;
-        },
-        on_clone: function ($clone) {
-            var clone_index = $(this.$target).index();
-            var $table = this.$target.parents('table[data-max-width]');
-            if($table.length == 1){
-                _.each($table.find('tbody>tr'),function(row){
-                    var clone_selector = 'td:eq(' + clone_index + ')';
-                    var $col_to_clone = $(row).find(clone_selector);
-                    if($col_to_clone.length != 0){
-                        $col_to_clone.after($col_to_clone.clone());
-                    }
-                });
-            }
-            this._super($clone);
-            this.BuildingBlock.cover_target(this.$overlay, this.$target);
-        },
-        on_remove: function () {
-            var remove_index = $(this.$target).index();
-            var $table = this.$target.parents('table[data-max-width]');
-            if($table.length == 1){
-                _.each($table.find('tbody>tr'),function(row){
-                    var remove_selector = 'td:eq(' + remove_index + ')';
-                    $(row).find(remove_selector).remove();
-                });
-            }
-            this._super();
-            this.BuildingBlock.cover_target(this.$overlay, this.$target);
-        },
-    });
-
-
-    var fn_popover_update = $.summernote.eventHandler.popover.update;
-    $.summernote.eventHandler.popover.update = function ($popover, oStyle, isAirMode) {
-        fn_popover_update.call(this, $popover, oStyle, isAirMode);
-        $("span.o_table_handler, div.note-table").remove();
-    };
-    
-    website.EditorBar.include({
-        start: function () {
-            var self = this;
-            if (location.search.indexOf("enable_editor") !== -1) {
-                this.on('rte:ready', this, function () {
-                    $("#choose_template").off("click").on("click", _.bind(self.on_choose_template, self));
-                    $(".theme_thumbnail [data-snippet-theme]").off("click").on("click", _.bind(self.on_set_snippet_theme, self));
-                    $("#wrapwrap").on('click', function (event) {
-                        if ($(event.target).is("#wrapwrap")) {
-                            setTimeout(function () {
-                                var node = $("#wrapwrap .o_editable:first *")
-                                    .filter(function () { return this.textContent.match(/\S|\u00A0/); })
-                                    .add($("#wrapwrap .o_editable:first"))
-                                    .last()[0];
-                                $.summernote.core.range.create(node, $.summernote.core.dom.nodeLength(node)).select();
-                            },0);
-                        }
-                    });
-                });
-                this.on("snippets:ready", this, _.bind(self.display_theme_from_html, self));
-            }
-            return this._super.apply(this, arguments);
-        },
-        display_theme_from_html: function () {
-            var theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").data("snippet-theme");
-            if (theme) {
-                $("#choose_template").show();
-                this.set_snippet_theme(theme);
-            } else {
-                $("#choose_template").hide();
-                this.on_choose_template();
-            }
-            var mailing_model = JSON.parse($.deparam(location.search).datarecord).mailing_model;
-            if (mailing_model) {
-                this.get_snippet_template( mailing_model );
-            }
-        },
-
-        on_choose_template: function (event) {
-            if (event) {
-                $("#choose_template").show();
-            }
-            var $editable = $("#wrapwrap .o_editable:first");
-            $(".o_table_handler").remove();
-            $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
-            $("#choose_template").children().toggleClass("hidden");
-            $("body").trigger("resize");
-            $(window.top).trigger('resize');
-        },
-        on_set_snippet_template: function (event) {
-            var $editable = $("#wrapwrap .o_editable:first");
-            this.rte.historyRecordUndo($editable);
-            $editable.html( $(event.target).closest(".theme_thumbnail").find(".js_content").html() );
-            $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
-            $("#choose_template").children().toggleClass("hidden");
-            setTimeout(function () {
-                $("body").trigger("resize");
-                $("body")[0].scrollTop = 0;
-            },0);
-            event.preventDefault();
-        },
-        on_set_snippet_theme: function (event) {
-            this.set_snippet_theme($(event.target).data("snippet-theme"));
-            this.on_choose_template(event);
-            event.preventDefault();
-        },
-        set_snippet_theme: function (theme) {
-            $("#o_left_bar .o_panel_body > div").addClass("hidden");
-            $("#o_left_bar .o_panel_body > div."+theme).removeClass("hidden");
-        },
-        get_snippet_template: function (mailing_model) {
-            var self = this;
-            var domain = [['model', '=', mailing_model]];
-            session.model('mail.template').call('search_read', [domain]).then(function (datas) {
-                var $template = $("#templates > div:last").addClass("hidden");
-                var $tclone = $template.find("> div > div:first");
-                $tclone.siblings().remove();
-                _.each(datas, function (data) {
-                    if (!data.body_html) {
-                        return;
-                    }
-                    $template.removeClass("hidden");
-                    var $clone = $tclone.clone().removeClass("hidden");
-                    $clone.find("p:first").html(data.name);
-                    $clone.find(".template_preview").html(data.body_html);
-                    $tclone.after($clone);
-                });
-
-                $(".js_template_set").off("click").on("click", _.bind(self.on_set_snippet_template, self));
-            });
-        }
-    });
-
-    var cache = {};
-    var rulesCache = [];
-    website.getMatchedCSSRules = function getMatchedCSSRules(a) {
-        if(cache[a.tagName + "." +a.className]) {
-            return cache[a.tagName + "." +a.className];
-        }
-        if (!rulesCache.length) {
-            var sheets = document.styleSheets;
-            for(var i = 0; i < sheets.length; i++) {
-                var rules = sheets[i].rules || sheets[i].cssRules;
-                if (rules) {
-                    for(var r = 0; r < rules.length; r++) {
-                        var selectorText = rules[r].selectorText;
-                        if (selectorText &&
-                                rules[r].cssText &&
-                                selectorText.indexOf(".") !== -1 &&
-                                selectorText.indexOf(":hover") === -1 &&
-                                selectorText.indexOf(":before") === -1 &&
-                                selectorText.indexOf(":after") === -1 &&
-                                selectorText.indexOf(":active") === -1 &&
-                                selectorText.indexOf(":link") === -1 &&
-                                selectorText.indexOf("::") === -1) {
-                            var st = selectorText.split(/\s*,\s*/);
-                            for (var k=0; k<st.length; k++) {
-                                rulesCache.push({
-                                    'selector': st[k],
-                                    'style': rules[r].style,
-                                    'point': st[k].split(/\s+/).length
-                                });
-                            }
-                        }
-                    }
+                if (compass === 'w' && self.$target.prev().offset()) {
+                    sib_width = self.get_max_width(self.$target.prev());
+                    sib_offset = self.$target.prev().offset().left;
+                    self.change_width(event, self.$target, target_width, offset ,'minus');
+                    self.change_width(event, self.$target.prev(), sib_width, sib_offset, 'plus');
                 }
-            }
-
-            rulesCache.sort(function (a,b) {
-                return a.point-b.point;
-            });
-        }
-
-        var css = [];
-        a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
-        for(var r = 0; r < rulesCache.length; r++) {
-            if (a.matches(rulesCache[r].selector)) {
-                var style = rulesCache[r].style;
-                if (style.parentRule) {
-                    var style_obj = {};
-                    for (var k=0, len=style.length; k<len; k++) {
-                        style_obj[style[k]] = style[style[k]];
-                    }
-                    rulesCache[r].style = style = style_obj;
+                if (compass === 'image'){
+                    self.change_width(event, self.$target, target_width, offset ,'plus');
                 }
-                css.push(style);
-            }
-        }
-
-        var style = {};
-        _.each(css, function (v,k) {
-            _.each(v, function (v,k) {
-                if (!style[k] || style[k].indexOf('important') === -1 || v.indexOf('important') !== -1) {
-                    style[k] = v;
-                }
-            });
+            };
+            var body_mouseup = function(){
+                $body.unbind('mousemove', body_mousemove);
+                $body.unbind('mouseup', body_mouseup);
+                self.BuildingBlock.editor_busy = false;
+                self.$target.removeClass("resize_editor_busy");
+            };
+            $body.mousemove(body_mousemove);
+            $body.mouseup(body_mouseup);
         });
-        
-        return cache[a.tagName + "." +a.className] = style;
-    };
-
-    $.fn.bindFirst = function(name, fn) {
-        this.bind(name, fn);
-        var handlers = $._data($(this).get(0), 'events')[name.split('.')[0]];
-        var handler = handlers.pop();
-        handlers.splice(0, 0, handler);
-    };
-
-    website.snippet.BuildingBlock.include({
-        start: function () {
-            var self = this;
-            this._super();
-            setTimeout(function () {
-                self.img_to_font();
-                self.style_to_class();
-            });
-        },
-
-        _get_snippet_url: function () {
-            return snippets_url;
-        },
-        clean_for_save: function () {
-            this._super();
-            this.class_to_style();
-            this.font_to_img();
-            var $editable = $("#wrapwrap .o_editable:first");
-            var theme = ($("#o_left_bar .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, '');
-            var $theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme");
-            $editable.children().first().attr("data-snippet-theme", theme);
-            $editable.find(":hidden").remove();
-        },
-        // convert font awsome into image
-        font_to_img: function () {
-            $("#wrapwrap .fa").each(function () {
-                var $font = $(this);
-                var content;
-                _.find(website.editor.fontIcons, function (font) {
-                    return _.find(website.editor.getCssSelectors(font.parser), function (css) {
-                        if ($font.is(css[0].replace(/::?before$/, ''))) {
-                            content = css[1].match(/content:\s*['"](.)['"]/)[1];
-                            return true;
-                        }
-                    });
-                });
-                if (content) {
-                    var size = parseInt(parseFloat($font.css("font-size"))/parseFloat($font.parent().css("font-size")),10);
-                    var src = _.str.sprintf('/website_mail/font_to_img/%s/%s/'+$font.width(), window.encodeURI(content), window.encodeURI($font.css("color")));
-                    var $img = $("<img/>").attr("src", src)
-                        .attr("data-class", $font.attr("class"))
-                        .attr("style", $font.attr("style"))
-                        .css({"height": size+"em"}).css("font-size", "");
-                    $font.replaceWith($img);
-                } else {
-                    $font.remove();
+    },
+    change_width:function(event, target ,target_width, offset, type){
+        var self = this;
+        if(type == 'plus'){
+            var width = event.pageX-offset;
+        }else{
+            var width = offset + target_width - event.pageX;
+        }
+        target.css("width", width + "px");
+        self.BuildingBlock.cover_target(self.$overlay, self.$target);
+        return;
+    },
+    get_int_width: function ($el) {
+        var el_width = $el.css('width');
+        return parseInt(el_width);
+    },
+    get_max_width: function ($el) {
+        var max_width = 0;
+        var self = this;
+        _.each($el.siblings(),function(sib){
+            max_width +=  self.get_int_width($(sib));
+        });
+        return this.container_width - max_width;
+    },
+    on_clone: function ($clone) {
+        var clone_index = $(this.$target).index();
+        var $table = this.$target.parents('table[data-max-width]');
+        if($table.length == 1){
+            _.each($table.find('tbody>tr'),function(row){
+                var clone_selector = 'td:eq(' + clone_index + ')';
+                var $col_to_clone = $(row).find(clone_selector);
+                if($col_to_clone.length !== 0){
+                    $col_to_clone.after($col_to_clone.clone());
                 }
             });
-        },
-        // convert image into font awsome
-        img_to_font: function () {
-            $("#wrapwrap img[src*='/website_mail/font_to_img/']").each(function () {
-                var $img = $(this);
-                var $font = $("<span/>").attr("class", $img.data("class")).attr("style", $img.attr("style")).css("height", "");
-                $img.replaceWith($font);
-            });
-        },
-
-        class_to_style: function () {
-            var $editable = $("#wrapwrap .o_editable:first");
-            var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
-            $editable.find(selector).each(function () {
-                var $target = $(this);
-                var css = website.getMatchedCSSRules(this);
-                var style = $target.attr("style") || "";
-                _.each(css, function (v,k) {
-                    if (style.indexOf(k) === -1) {
-                        style = k+":"+v+";"+style;
-                    }
-                });
-                $target.attr("style", style);
-            });
-        },
-
-        style_to_class: function () {
-            var cache = {};
-            var $editable = $("#wrapwrap .o_editable:first");
-            website.getMatchedCSSRules($editable[0]);
-            var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
-            var $c = $('<span/>').appendTo("body");
-            $editable.find(selector).each(function () {
-                var $target = $(this);
-                var css = website.getMatchedCSSRules(this);
-                var style = "";
-                _.each(css, function (v,k) {
-                    if (style.indexOf(k) === -1) {
-                        style = k+":"+v+";"+style;
-                    }
-                });
-                css = $c.attr("style", style).attr("style").split(/\s*;\s*/);
-                style = $target.attr("style") || "";
-                _.each(css, function (v) {
-                    style = style.replace(v, '');
-                });
-                $target.attr("style", style.replace(/;+(\s;)*/g, ';').replace(/^;/g, ''));
-            });
-            $c.remove();
         }
+        this._super($clone);
+        this.BuildingBlock.cover_target(this.$overlay, this.$target);
+    },
+    on_remove: function () {
+        var remove_index = $(this.$target).index();
+        var $table = this.$target.parents('table[data-max-width]');
+        if($table.length == 1){
+            _.each($table.find('tbody>tr'),function(row){
+                var remove_selector = 'td:eq(' + remove_index + ')';
+                $(row).find(remove_selector).remove();
+            });
+        }
+        this._super();
+        this.BuildingBlock.cover_target(this.$overlay, this.$target);
+    },
+});
+
+
+var fn_popover_update = $.summernote.eventHandler.popover.update;
+$.summernote.eventHandler.popover.update = function ($popover, oStyle, isAirMode) {
+    fn_popover_update.call(this, $popover, oStyle, isAirMode);
+    $("span.o_table_handler, div.note-table").remove();
+};
+
+editor.EditorBar.include({
+    start: function () {
+        var self = this;
+        if (location.search.indexOf("enable_editor") !== -1) {
+            this.on('rte:ready', this, function () {
+                $("#choose_template").off("click").on("click", _.bind(self.on_choose_template, self));
+                $(".theme_thumbnail [data-snippet-theme]").off("click").on("click", _.bind(self.on_set_snippet_theme, self));
+                $("#wrapwrap").on('click', function (event) {
+                    if ($(event.target).is("#wrapwrap")) {
+                        setTimeout(function () {
+                            var node = $("#wrapwrap .o_editable:first *")
+                                .filter(function () { return this.textContent.match(/\S|\u00A0/); })
+                                .add($("#wrapwrap .o_editable:first"))
+                                .last()[0];
+                            $.summernote.core.range.create(node, $.summernote.core.dom.nodeLength(node)).select();
+                        },0);
+                    }
+                });
+            });
+            this.on("snippets:ready", this, _.bind(self.display_theme_from_html, self));
+        }
+        return this._super.apply(this, arguments);
+    },
+    display_theme_from_html: function () {
+        var theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").data("snippet-theme");
+        if (theme) {
+            $("#choose_template").show();
+            this.set_snippet_theme(theme);
+        } else {
+            $("#choose_template").hide();
+            this.on_choose_template();
+        }
+        var mailing_model = JSON.parse($.deparam(location.search).datarecord).mailing_model;
+        if (mailing_model) {
+            this.get_snippet_template( mailing_model );
+        }
+    },
+
+    on_choose_template: function (event) {
+        if (event) {
+            $("#choose_template").show();
+        }
+        var $editable = $("#wrapwrap .o_editable:first");
+        $(".o_table_handler").remove();
+        $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
+        $("#choose_template").children().toggleClass("hidden");
+        $("body").trigger("resize");
+        $(window.top).trigger('resize');
+    },
+    on_set_snippet_template: function (event) {
+        var $editable = $("#wrapwrap .o_editable:first");
+        this.rte.historyRecordUndo($editable);
+        $editable.html( $(event.target).closest(".theme_thumbnail").find(".js_content").html() );
+        $editable.parent().add("#oe_snippets, #templates, .note-popover").toggleClass("hidden");
+        $("#choose_template").children().toggleClass("hidden");
+        setTimeout(function () {
+            $("body").trigger("resize");
+            $("body")[0].scrollTop = 0;
+        },0);
+        event.preventDefault();
+    },
+    on_set_snippet_theme: function (event) {
+        this.set_snippet_theme($(event.target).data("snippet-theme"));
+        this.on_choose_template(event);
+        event.preventDefault();
+    },
+    set_snippet_theme: function (theme) {
+        $("#o_left_bar .o_panel_body > div").addClass("hidden");
+        $("#o_left_bar .o_panel_body > div."+theme).removeClass("hidden");
+    },
+    get_snippet_template: function (mailing_model) {
+        var self = this;
+        var domain = [['model', '=', mailing_model]];
+        new Model('mail.template').call('search_read', [domain]).then(function (datas) {
+            var $template = $("#templates > div:last").addClass("hidden");
+            var $tclone = $template.find("> div > div:first");
+            $tclone.siblings().remove();
+            _.each(datas, function (data) {
+                if (!data.body_html) {
+                    return;
+                }
+                $template.removeClass("hidden");
+                var $clone = $tclone.clone().removeClass("hidden");
+                $clone.find("p:first").html(data.name);
+                $clone.find(".template_preview").html(data.body_html);
+                $tclone.after($clone);
+            });
+
+            $(".js_template_set").off("click").on("click", _.bind(self.on_set_snippet_template, self));
+        });
+    }
+});
+
+var cache = {};
+var rulesCache = [];
+function getMatchedCSSRules(a) {
+    if(cache[a.tagName + "." +a.className]) {
+        return cache[a.tagName + "." +a.className];
+    }
+    if (!rulesCache.length) {
+        var sheets = document.styleSheets;
+        for(var i = 0; i < sheets.length; i++) {
+            var rules = sheets[i].rules || sheets[i].cssRules;
+            if (rules) {
+                for(var r = 0; r < rules.length; r++) {
+                    var selectorText = rules[r].selectorText;
+                    if (selectorText &&
+                            rules[r].cssText &&
+                            selectorText.indexOf(".") !== -1 &&
+                            selectorText.indexOf(":hover") === -1 &&
+                            selectorText.indexOf(":before") === -1 &&
+                            selectorText.indexOf(":after") === -1 &&
+                            selectorText.indexOf(":active") === -1 &&
+                            selectorText.indexOf(":link") === -1 &&
+                            selectorText.indexOf("::") === -1) {
+                        var st = selectorText.split(/\s*,\s*/);
+                        for (var k=0; k<st.length; k++) {
+                            rulesCache.push({
+                                'selector': st[k],
+                                'style': rules[r].style,
+                                'point': st[k].split(/\s+/).length
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
+        rulesCache.sort(function (a,b) {
+            return a.point-b.point;
+        });
+    }
+
+    var css = [];
+    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
+    for(var r = 0; r < rulesCache.length; r++) {
+        if (a.matches(rulesCache[r].selector)) {
+            var style = rulesCache[r].style;
+            if (style.parentRule) {
+                var style_obj = {};
+                for (var k=0, len=style.length; k<len; k++) {
+                    style_obj[style[k]] = style[style[k]];
+                }
+                rulesCache[r].style = style = style_obj;
+            }
+            css.push(style);
+        }
+    }
+
+    var style = {};
+    _.each(css, function (v,k) {
+        _.each(v, function (v,k) {
+            if (!style[k] || style[k].indexOf('important') === -1 || v.indexOf('important') !== -1) {
+                style[k] = v;
+            }
+        });
     });
 
-    window.top.openerp[callback+"_set_value"] = function (value, fields_values, field_name) {
+    return cache[a.tagName + "." +a.className] = style;
+}
+
+$.fn.bindFirst = function(name, fn) {
+    this.bind(name, fn);
+    var handlers = $._data($(this).get(0), 'events')[name.split('.')[0]];
+    var handler = handlers.pop();
+    handlers.splice(0, 0, handler);
+};
+
+snippets_editor.BuildingBlock.include({
+    start: function () {
+        var self = this;
+        this._super();
+        setTimeout(function () {
+            self.img_to_font();
+            self.style_to_class();
+        });
+    },
+
+    _get_snippet_url: function () {
+        return snippets_url;
+    },
+    clean_for_save: function () {
+        this._super();
+        this.class_to_style();
+        this.font_to_img();
         var $editable = $("#wrapwrap .o_editable:first");
-        var editor_enable = $('body').hasClass('editor_enable');
-        var _val = $editable.prop("innerHTML");
-        value = value || "";
+        var theme = ($("#o_left_bar .o_panel_body > div:not(.hidden)").attr("class") || "").replace(/^\s*|\s*o_mail_block[^\s]+\s*|\s*oe_snippet\s*|\s*ui-draggable\s*|\s*$/g, '');
+        var $theme = $("#wrapwrap .o_editable:first [data-snippet-theme]").removeAttr("data-snippet-theme").removeData("snippet-theme");
+        $editable.children().first().attr("data-snippet-theme", theme);
+        $editable.find(":hidden").remove();
+    },
+    // convert font awsome into image
+    font_to_img: function () {
+        $("#wrapwrap .fa").each(function () {
+            var $font = $(this);
+            var content;
+            _.find(editor.fontIcons, function (font) {
+                return _.find(editor.getCssSelectors(font.parser), function (css) {
+                    if ($font.is(css[0].replace(/::?before$/, ''))) {
+                        content = css[1].match(/content:\s*['"](.)['"]/)[1];
+                        return true;
+                    }
+                });
+            });
+            if (content) {
+                var size = parseInt(parseFloat($font.css("font-size"))/parseFloat($font.parent().css("font-size")),10);
+                var src = _.str.sprintf('/website_mail/font_to_img/%s/%s/'+$font.width(), window.encodeURI(content), window.encodeURI($font.css("color")));
+                var $img = $("<img/>").attr("src", src)
+                    .attr("data-class", $font.attr("class"))
+                    .attr("style", $font.attr("style"))
+                    .css({"height": size+"em"}).css("font-size", "");
+                $font.replaceWith($img);
+            } else {
+                $font.remove();
+            }
+        });
+    },
+    // convert image into font awsome
+    img_to_font: function () {
+        $("#wrapwrap img[src*='/website_mail/font_to_img/']").each(function () {
+            var $img = $(this);
+            var $font = $("<span/>").attr("class", $img.data("class")).attr("style", $img.attr("style")).css("height", "");
+            $img.replaceWith($font);
+        });
+    },
+
+    class_to_style: function () {
+        var $editable = $("#wrapwrap .o_editable:first");
+        var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
+        $editable.find(selector).each(function () {
+            var $target = $(this);
+            var css = getMatchedCSSRules(this);
+            var style = $target.attr("style") || "";
+            _.each(css, function (v,k) {
+                if (style.indexOf(k) === -1) {
+                    style = k+":"+v+";"+style;
+                }
+            });
+            $target.attr("style", style);
+        });
+    },
+
+    style_to_class: function () {
+        var $editable = $("#wrapwrap .o_editable:first");
+        getMatchedCSSRules($editable[0]);
+        var selector = _.map(rulesCache, function (a) { return a.selector;}).join(",");
+        var $c = $('<span/>').appendTo("body");
+        $editable.find(selector).each(function () {
+            var $target = $(this);
+            var css = getMatchedCSSRules(this);
+            var style = "";
+            _.each(css, function (v,k) {
+                if (style.indexOf(k) === -1) {
+                    style = k+":"+v+";"+style;
+                }
+            });
+            css = $c.attr("style", style).attr("style").split(/\s*;\s*/);
+            style = $target.attr("style") || "";
+            _.each(css, function (v) {
+                style = style.replace(v, '');
+            });
+            $target.attr("style", style.replace(/;+(\s;)*/g, ';').replace(/^;/g, ''));
+        });
+        $c.remove();
+    }
+});
+
+
+window.top.odoo[callback+"_set_value"] = function (value, fields_values, field_name) {
+    var $editable = $("#wrapwrap .o_editable:first");
+    var editor_enable = $('body').hasClass('editor_enable');
+    var _val = $editable.prop("innerHTML");
+    value = value || "";
+
+    if(value !== _val) {
+        if (editor_enable) {
+            if (value !== fields_values[field_name]) {
+                editor.editor_bar.rte.historyRecordUndo($editable, true);
+            }
+            editor.editor_bar.snippets.make_active(false);
+        }
+        
+        if (value.indexOf('on_change_model_and_list') === -1) {
+
+            $editable.html(value);
 
-        if(value !== _val) {
             if (editor_enable) {
+                editor.editor_bar.snippets.img_to_font();
+                editor.editor_bar.snippets.style_to_class();
+                if (fields_values.mailing_model) {
+                    editor.editor_bar.display_theme_from_html();
+                }
+
                 if (value !== fields_values[field_name]) {
-                    openerp.website.editor_bar.rte.historyRecordUndo($editable, true);
-                }
-                openerp.website.editor_bar.snippets.make_active(false);
-            }
-            
-            if (value.indexOf('on_change_model_and_list') === -1) {
-
-                $editable.html(value);
-
-                if (editor_enable) {
-                    openerp.website.editor_bar.snippets.img_to_font();
-                    openerp.website.editor_bar.snippets.style_to_class();
-                    if (fields_values.mailing_model) {
-                        openerp.website.editor_bar.display_theme_from_html();
-                    }
-
-                    if (value !== fields_values[field_name]) {
-                        $editable.trigger("content_changed");
-                    }
+                    $editable.trigger("content_changed");
                 }
             }
         }
+    }
 
-        if (fields_values.mailing_model) {
-            openerp.website.editor_bar.get_snippet_template(fields_values.mailing_model);
-            if (value.indexOf('on_change_model_and_list') !== -1) {
-                window.top.openerp[callback+"_downup"](_val);
-            }
+    if (fields_values.mailing_model) {
+        editor.editor_bar.get_snippet_template(fields_values.mailing_model);
+        if (value.indexOf('on_change_model_and_list') !== -1) {
+            window.top.odoo[callback+"_downup"](_val);
         }
-    };
+    }
+};
 
-})();
\ No newline at end of file
+
+return {
+    getMatchedCSSRules: getMatchedCSSRules
+};
+
+});
diff --git a/addons/website_mail_group/static/src/js/website_mail_group.editor.js b/addons/website_mail_group/static/src/js/website_mail_group.editor.js
index 420afb736af..1295818186e 100644
--- a/addons/website_mail_group/static/src/js/website_mail_group.editor.js
+++ b/addons/website_mail_group/static/src/js/website_mail_group.editor.js
@@ -1,36 +1,39 @@
-(function () {
-    'use strict';
+odoo.define('website_mail_group.editor', ['web.core', 'web.Model', 'website.snippets.editor', 'website.website'], function (require) {
+'use strict';
 
-    var website = openerp.website;
-    var _t = openerp._t;
+var core = require('web.core');
+var Model = require('web.Model');
+var snippet_editor = require('website.snippets.editor');
+var website = require('website.website');
 
-    website.snippet.options.subscribe = website.snippet.Option.extend({
-        choose_mailing_list: function (type, value) {
-            var self = this;
-            if (type !== "click") return;
-            return website.prompt({
-                id: "editor_new_subscribe_button",
-                window_title: _t("Add a Subscribe Button"),
-                select: _t("Discussion List"),
-                init: function (field) {
-                    return website.session.model('mail.group')
-                            .call('name_search', ['', [['public','=','public']]], { context: website.get_context() });
-                },
-            }).then(function (mail_group_id) {
-                self.$target.attr("data-id", mail_group_id);
-            });
-        },
-        drop_and_build_snippet: function() {
-            var self = this;
-            this._super();
-            this.choose_mailing_list("click").fail(function () {
-                self.editor.on_remove();
-            });
-        },
-        clean_for_save: function () {
-            this.$target.addClass("hidden");
-        },
-    });
-})();
+var _t = core._t;
 
 
+snippet_editor.options.subscribe = snippet_editor.Option.extend({
+    choose_mailing_list: function (type, value) {
+        var self = this;
+        if (type !== "click") return;
+        return website.prompt({
+            id: "editor_new_subscribe_button",
+            window_title: _t("Add a Subscribe Button"),
+            select: _t("Discussion List"),
+            init: function (field) {
+                return new Model('mail.group')
+                        .call('name_search', ['', [['public','=','public']]], { context: website.get_context() });
+            },
+        }).then(function (mail_group_id) {
+            self.$target.attr("data-id", mail_group_id);
+        });
+    },
+    drop_and_build_snippet: function() {
+        var self = this;
+        this._super();
+        this.choose_mailing_list("click").fail(function () {
+            self.editor.on_remove();
+        });
+    },
+    clean_for_save: function () {
+        this.$target.addClass("hidden");
+    },
+});
+});
diff --git a/addons/website_mail_group/static/src/js/website_mail_group.js b/addons/website_mail_group/static/src/js/website_mail_group.js
index c9b8ae797ed..30f9e43f60c 100644
--- a/addons/website_mail_group/static/src/js/website_mail_group.js
+++ b/addons/website_mail_group/static/src/js/website_mail_group.js
@@ -1,3 +1,8 @@
+odoo.define('website_mail_group', ['web.ajax'], function (require) {
+"use strict";
+
+var ajax = require('web.ajax');
+
 $(document).ready(function () {
 
     $('.o_mg_link_hide').on('click', function (ev) {
@@ -22,7 +27,7 @@ $(document).ready(function () {
 
     $('body').on('click', 'button.o_mg_read_more', function (ev) {
         var $link = $(ev.target);
-        return openerp.jsonRpc($link.data('href'), 'call', {
+        return ajax.jsonRpc($link.data('href'), 'call', {
             'last_displayed_id': $link.data('msg-id'),
         }).then(function (data) {
             if (! data) {
@@ -39,4 +44,6 @@ $(document).ready(function () {
             return true;
         });
     });
-});
\ No newline at end of file
+});
+
+});
diff --git a/addons/website_mail_group/static/src/js/website_mail_group.snippet.js b/addons/website_mail_group/static/src/js/website_mail_group.snippet.js
index 8ad4f9ba796..0cf1050c4d5 100644
--- a/addons/website_mail_group/static/src/js/website_mail_group.snippet.js
+++ b/addons/website_mail_group/static/src/js/website_mail_group.snippet.js
@@ -1,93 +1,95 @@
-(function () {
-    'use strict';
+odoo.define('website_mail_group.snippet', ['web.ajax', 'website.snippets.animation'], function (require) {
+'use strict';
 
-    var website = openerp.website;
+var ajax = require('web.ajax');
+var animation = require('website.snippets.animation');
 
-    website.snippet.animationRegistry.follow_alias = website.snippet.Animation.extend({
-        selector: ".js_follow_alias",
-        start: function (editable_mode) {
-            var self = this;
-            this.is_user = false;
+animation.registry.follow_alias = animation.Animation.extend({
+    selector: ".js_follow_alias",
+    start: function (editable_mode) {
+        var self = this;
+        this.is_user = false;
 
-            openerp.jsonRpc('/website_mail/is_follower', 'call', {
-                model: this.$target.data('object'),
-                id: this.$target.data('id'),
-                get_alias_info: true,
-            }).always(function (data) {
-                self.is_user = data.is_user;
-                self.email = data.email;
-                self.$target.find('.js_mg_link').attr('href', '/groups/' + self.$target.data('id'));
-                self.toggle_subscription(data.is_follower, data.email);
-                self.$target.removeClass("hidden");
-            });
+        ajax.jsonRpc('/website_mail/is_follower', 'call', {
+            model: this.$target.data('object'),
+            id: this.$target.data('id'),
+            get_alias_info: true,
+        }).always(function (data) {
+            self.is_user = data.is_user;
+            self.email = data.email;
+            self.$target.find('.js_mg_link').attr('href', '/groups/' + self.$target.data('id'));
+            self.toggle_subscription(data.is_follower, data.email);
+            self.$target.removeClass("hidden");
+        });
 
-            // not if editable mode to allow designer to edit alert field
-            if (!editable_mode) {
-                $('.js_follow_alias > .alert').addClass("hidden");
-                $('.js_follow_alias > .input-group-btn.hidden').removeClass("hidden");
-                this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
-                    event.preventDefault();
-                    self.on_click();
-                });
-            }
-            return;
-        },
-        on_click: function () {
-            var self = this;
-            var $email = this.$target.find(".js_follow_email");
-
-            if ($email.length && !$email.val().match(/.+@.+/)) {
-                this.$target.addClass('has-error');
-                return false;
-            }
-            this.$target.removeClass('has-error');
-
-            openerp.jsonRpc('/website_mail/follow', 'call', {
-                'id': +this.$target.data('id'),
-                'object': this.$target.data('object'),
-                'message_is_follower': this.$target.attr("data-follow") || "off",
-                'email': $email.length ? $email.val() : false,
-            }).then(function (follow) {
-                self.toggle_subscription(follow, self.email);
-            });
-        },
-        toggle_subscription: function(follow, email) {
-            var alias_done = this.get_alias_info();
-            if (follow) {
-                this.$target.find(".js_mg_follow_form").addClass("hidden");
-                this.$target.find(".js_mg_details").removeClass("hidden");
-            }
-            else {
-                this.$target.find(".js_mg_follow_form").removeClass("hidden");
-                this.$target.find(".js_mg_details").addClass("hidden");
-            }
-            this.$target.find('input.js_follow_email')
-                .val(email ? email : "")
-                .attr("disabled", follow || (email.length && this.is_user) ? "disabled" : false);
-            this.$target.attr("data-follow", follow ? 'on' : 'off');
-            return $.when(alias_done);
-        },
-        get_alias_info: function() {
-            var self = this;
-            if (! this.$target.data('id')) {
-                return $.Deferred().resolve();
-            }
-            return openerp.jsonRpc('/groups/' + this.$target.data('id') + '/get_alias_info', 'call', {}).then(function (data) {
-                if (data.alias_name) {
-                    self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
-                    self.$target.find('.js_mg_email').removeClass('hidden');
-                }
-                else {
-                    self.$target.find('.js_mg_email').addClass('hidden');
-                }
+        // not if editable mode to allow designer to edit alert field
+        if (!editable_mode) {
+            $('.js_follow_alias > .alert').addClass("hidden");
+            $('.js_follow_alias > .input-group-btn.hidden').removeClass("hidden");
+            this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
+                event.preventDefault();
+                self.on_click();
             });
         }
-    });
+        return;
+    },
+    on_click: function () {
+        var self = this;
+        var $email = this.$target.find(".js_follow_email");
 
-    $(document).ready(function () {
-        $('.js_follow_btn').on('click', function (ev) {
-            var email = $(ev.currentTarget).parents('.js_mg_follow_form').first().find('.js_follow_email').val();
-            $(document).find('.js_follow_email').val(email);
+        if ($email.length && !$email.val().match(/.+@.+/)) {
+            this.$target.addClass('has-error');
+            return false;
+        }
+        this.$target.removeClass('has-error');
+
+        ajax.jsonRpc('/website_mail/follow', 'call', {
+            'id': +this.$target.data('id'),
+            'object': this.$target.data('object'),
+            'message_is_follower': this.$target.attr("data-follow") || "off",
+            'email': $email.length ? $email.val() : false,
+        }).then(function (follow) {
+            self.toggle_subscription(follow, self.email);
         });
+    },
+    toggle_subscription: function(follow, email) {
+        var alias_done = this.get_alias_info();
+        if (follow) {
+            this.$target.find(".js_mg_follow_form").addClass("hidden");
+            this.$target.find(".js_mg_details").removeClass("hidden");
+        }
+        else {
+            this.$target.find(".js_mg_follow_form").removeClass("hidden");
+            this.$target.find(".js_mg_details").addClass("hidden");
+        }
+        this.$target.find('input.js_follow_email')
+            .val(email ? email : "")
+            .attr("disabled", follow || (email.length && this.is_user) ? "disabled" : false);
+        this.$target.attr("data-follow", follow ? 'on' : 'off');
+        return $.when(alias_done);
+    },
+    get_alias_info: function() {
+        var self = this;
+        if (! this.$target.data('id')) {
+            return $.Deferred().resolve();
+        }
+        return ajax.jsonRpc('/groups/' + this.$target.data('id') + '/get_alias_info', 'call', {}).then(function (data) {
+            if (data.alias_name) {
+                self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
+                self.$target.find('.js_mg_email').removeClass('hidden');
+            }
+            else {
+                self.$target.find('.js_mg_email').addClass('hidden');
+            }
+        });
+    }
+});
+
+$(document).ready(function () {
+    $('.js_follow_btn').on('click', function (ev) {
+        var email = $(ev.currentTarget).parents('.js_mg_follow_form').first().find('.js_follow_email').val();
+        $(document).find('.js_follow_email').val(email);
     });
-})();
+});
+
+});