From f38f8930f0436a40f675fa1d054a9d46f550d440 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@odoo.com>
Date: Mon, 13 Jun 2016 11:37:09 +0200
Subject: [PATCH] [FIX] web_editor: test jinja content to load editor in
 codeview

The preview change the content because the browser try to fix the dom.
If a user use jinja and activate the preview, the jinja code is (re)moved by the browser and broke the template.
---
 .../static/src/js/mass_mailing_editor.js      |  12 +-
 .../mass_mailing/views/editor_field_html.xml  |   6 +-
 addons/web/static/src/less/notification.less  |   2 +-
 .../lib/summernote/src/js/EventHandler.js     |   2 +-
 .../lib/summernote/src/js/summernote.js       |   1 +
 addons/web_editor/static/src/js/backend.js    |  90 ++++++++--
 addons/web_editor/static/src/js/iframe.js     |  50 +++++-
 addons/web_editor/static/src/js/inline.js     |  70 ++++----
 .../static/src/js/rte.summernote.js           | 159 ++++++++++++------
 addons/web_editor/static/src/js/tour.rte.js   |   4 +-
 10 files changed, 293 insertions(+), 103 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 7b312373e8d..95e7bc648b0 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -239,9 +239,9 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
         delete odoo_top[callback+"_updown"];
         return;
     }
-
+    var se = snippets_editor.instance;
     var $editable = $("#editable_area");
-    var _val = $editable.prop("innerHTML");
+    var _val = se.get_codesource();
     var editor_enable = $('body').hasClass('editor_enable');
     value = value || "";
     
@@ -250,12 +250,16 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name
             if (value !== fields_values[field_name]) {
                 rte.history.recordUndo($editable);
             }
-            snippets_editor.instance.make_active(false);
+            se.make_active(false);
         }
         
         if (value.indexOf('on_change_model_and_list') === -1) {
 
-            $editable.html(value);
+            if (!$editable.hasClass('codeview')) {
+                $('.note-popover button[data-name="codeview"]').click();
+            }
+            $('textarea.codesource').val(value).data('indexOfnit', value);
+            $('.note-popover button[data-name="codeview"]').click();
 
             if (editor_enable) {
                 web_editor.editor_bar.display_theme_from_html();
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index 11224aa4fbb..a1938d83d0b 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -24,8 +24,8 @@
 
     <t t-call="web_editor.layout">
         <div>
-            <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html"><t t-raw="content"/></div>
-            <div t-if="edit_translations" id="editable_area"><t t-raw="content"/></div>
+            <div t-if="not edit_translations" id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html" t-att-data-content="content"><t t-raw="content"/></div>
+            <div t-if="edit_translations" id="editable_area" t-att-data-content="content"><t t-raw="content"/></div>
         </div>
         <div id="templates" class="o_not_editable o_css_editor hidden" t-if="enable_editor">
             <h1 class="page-header mt16 email_head panel-primary">
@@ -66,7 +66,7 @@
             <div class="modal-content o_popup_modal_content">
                 <div class="o_popup_modal_body text-center">
                     <div class="o_popup_content_dev">
-                        <div id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
+                        <div id="editable_area" class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html" t-att-data-content="content">
                             <!-- Can be removed once default values are ok for the editor -->
                             <t t-raw="content">
                             </t>
diff --git a/addons/web/static/src/less/notification.less b/addons/web/static/src/less/notification.less
index 0c910dbc5c5..9c24c2be096 100644
--- a/addons/web/static/src/less/notification.less
+++ b/addons/web/static/src/less/notification.less
@@ -5,7 +5,7 @@
     max-width: 100%;
 
     .o-position-absolute(@navbar-height, 0px);
-    z-index: 50;  // same as debug manager. Fixme: expose a variable
+    z-index: 1050;  // above the modals. Fixme: expose a variable
 
     .o_notification {
         padding: 0;
diff --git a/addons/web_editor/static/lib/summernote/src/js/EventHandler.js b/addons/web_editor/static/lib/summernote/src/js/EventHandler.js
index 09a7b00082a..bc605228f54 100644
--- a/addons/web_editor/static/lib/summernote/src/js/EventHandler.js
+++ b/addons/web_editor/static/lib/summernote/src/js/EventHandler.js
@@ -234,7 +234,7 @@ define([
     var hToolbarAndPopoverClick = function (event) {
       var $btn = $(event.target).closest('[data-event]');
 
-      if (!$btn.length) {
+      if (!$btn.length || $btn.hasClass('disabled')) {
         return;
       }
 
diff --git a/addons/web_editor/static/lib/summernote/src/js/summernote.js b/addons/web_editor/static/lib/summernote/src/js/summernote.js
index 329ba7fa126..f6b4277ac83 100644
--- a/addons/web_editor/static/lib/summernote/src/js/summernote.js
+++ b/addons/web_editor/static/lib/summernote/src/js/summernote.js
@@ -221,6 +221,7 @@ define([
 
           var layoutInfo = renderer.layoutInfoFromHolder($holder);
           $holder.data('layoutInfo', layoutInfo);
+          layoutInfo.editable().data('options', options);
 
           eventHandler.attach(layoutInfo, options);
           eventHandler.attachCustomEvent(layoutInfo, options);
diff --git a/addons/web_editor/static/src/js/backend.js b/addons/web_editor/static/src/js/backend.js
index fa962cfd75f..9491c283ef3 100644
--- a/addons/web_editor/static/src/js/backend.js
+++ b/addons/web_editor/static/src/js/backend.js
@@ -8,8 +8,11 @@ var common = require('web.form_common');
 var base = require('web_editor.base');
 var editor = require('web_editor.editor');
 var summernote = require('web_editor.summernote');
+require('web_editor.rte.summernote');
 var transcoder = require('web_editor.transcoder');
 
+var form_widgets = require('web.form_widgets');
+
 var QWeb = core.qweb;
 var _t = core._t;
 
@@ -20,6 +23,43 @@ var _t = core._t;
  */
 
 var widget = common.AbstractField.extend(common.ReinitializeFieldMixin);
+var dom = $.summernote.core.dom;
+
+var _html = dom.html;
+dom.html = function ($dom, prettifyHtml) {
+    if (prettifyHtml) {
+        transcoder.font_to_img($dom);
+        transcoder.class_to_style($dom);
+
+        // fix outlook image rendering bug
+        _.each(['width', 'height'], function(attribute) {
+            $dom.find('img[style*="width"], img[style*="height"]').attr(attribute, function(){
+                return $(this)[attribute]();
+            }).css(attribute, function(){
+                return $(this).get(0).style[attribute] || 'auto';
+            });
+        });
+    }
+    return _html($dom, prettifyHtml);
+};
+
+var _value = dom.value;
+dom.value = function ($dom, stripLinebreaks, $editable) {
+    var value = _value($dom, stripLinebreaks);
+    if (stripLinebreaks) {
+        $editable = $editable || $('<div/>');
+        $editable.html(value);
+        transcoder.img_to_font($editable);
+        transcoder.style_to_class($editable);
+
+        // fix outlook image rendering bug
+        $editable.find('img[style*="width"], img[style*="height"]').removeAttr('height width');
+
+        value = $editable.html();
+    }
+    return value;
+};
+
 
 var FieldTextHtmlSimple = widget.extend({
     template: 'web_editor.FieldTextHtmlSimple',
@@ -38,13 +78,12 @@ var FieldTextHtmlSimple = widget.extend({
                 ['insert', ['link', 'picture']],
                 ['history', ['undo', 'redo']]
             ],
-            'prettifyHtml': false,
+            'prettifyHtml': !!this.options['style-inline'],
             'styleWithSpan': false,
             'inlinemedia': ['p'],
             'lang': "odoo",
             'onChange': function (value) {
                 self.internal_set_value(value);
-                self.trigger('changed_value');
             }
         };
         if (session.debug) {
@@ -53,6 +92,7 @@ var FieldTextHtmlSimple = widget.extend({
         return config;
     },
     start: function() {
+        var self = this;
         var def = this._super.apply(this, arguments);
         this.$translate.remove();
         this.$translate = $();
@@ -94,9 +134,22 @@ var FieldTextHtmlSimple = widget.extend({
             setTimeout(reset, 0);
 
             this.$content = this.$('.note-editable:first');
-            if (this.options['style-inline']) {
-                transcoder.style_to_class(this.$content);
-            }
+            this.$content.html(dom.value(this.$textarea, this.options['style-inline'], this.$content));
+
+            var layoutInfo = this.$textarea.data('layoutInfo');
+            var $codable = layoutInfo.codable();
+            var $toolbar = layoutInfo.toolbar();
+            $toolbar.find('button[data-event="codeview"]').on('click', function (event) {
+                if ($codable.is(':visible')) {
+                    if (dom.check_unvalid_preview($codable.val())) {
+                        event.preventDefault();
+                        self.do_notify(_t("You can't use html preview when you use non html code (like jinja)"));
+                    }
+                }
+            });
+            $codable.on('input', function () {
+                self.internal_set_value($codable.val());
+            });
         }
 
         $(".oe-view-manager-content").on("scroll", function () {
@@ -115,11 +168,11 @@ var FieldTextHtmlSimple = widget.extend({
         var value = text || "";
         if (value.match(/^\s*$/)) {
             value = '<p><br/></p>';
-        } else {
+        } else if (!value.match(/<(a|span|font|strong|u|i|strong|b|td|p)[^>]*>/i)) {
             value = "<p>"+value.split(/<br\/?>/).join("<br/></p><p>")+"</p>";
-            value = value.replace(/<p><\/p>/g, '').replace('<p><p>', '<p>').replace('<p><p ', '<p ').replace('</p></p>', '</p>');
+            value = value.replace(/<p[^>]*><p([^>]*)>/g, '<p\$1>').replace('</p></p>', '</p>');
         }
-        return value;
+        return value.replace(/<p[^>]*><\/p>/g, '');
     },
     focus: function() {
         if (this.get("effective_readonly")) {
@@ -139,10 +192,22 @@ var FieldTextHtmlSimple = widget.extend({
         var value = this.get('value');
         this.$textarea.val(value || '');
         this.$content.html(this.text_to_html(value));
+
+        var layoutInfo = this.$textarea.data('layoutInfo');
+        if (layoutInfo) {
+            var $codable = layoutInfo.codable();
+            $codable.val(value);
+            var $toolbar = layoutInfo.toolbar();
+            if ($codable.is(':visible') != !!dom.check_unvalid_preview(value)) {
+                $toolbar.find('button[data-event="codeview"]').trigger('click');
+            }
+        }
+
         if (this.get("effective_readonly")) {
             this.resize();
         } else {
             transcoder.style_to_class(this.$content);
+            transcoder.img_to_font(this.$content);
         }
         if (this.$content.is(document.activeElement)) {
             this.focus();
@@ -156,6 +221,11 @@ var FieldTextHtmlSimple = widget.extend({
         return !this.get('value') || this.get('value') === "<p><br/></p>" || !this.get('value').match(/\S/);
     },
     commit_value: function() {
+        var layoutInfo = this.$textarea.data('layoutInfo');
+        if (layoutInfo && layoutInfo.codable().is(':visible')) {
+            return this.internal_set_value(layoutInfo.codable().val());
+        }
+
         if (this.options['style-inline']) {
             transcoder.class_to_style(this.$content);
             transcoder.font_to_img(this.$content);
@@ -169,6 +239,7 @@ var FieldTextHtmlSimple = widget.extend({
     }
 });
 
+
 var FieldTextHtml = widget.extend({
     template: 'web_editor.FieldTextHtml',
     willStart: function () {
@@ -367,8 +438,7 @@ var FieldTextHtml = widget.extend({
             this._dirty_flag = false;
             return this.editor.save();
         } else if (this._dirty_flag && this.editor && this.editor.buildingBlock) {
-            this.editor.buildingBlock.clean_for_save();
-            this.internal_set_value( this.$content.html() );
+            this.internal_set_value( this.editor.buildingBlock.get_codesource() );
         }
     },
     destroy: function () {
diff --git a/addons/web_editor/static/src/js/iframe.js b/addons/web_editor/static/src/js/iframe.js
index 2f494cd041c..ecfea86bc10 100644
--- a/addons/web_editor/static/src/js/iframe.js
+++ b/addons/web_editor/static/src/js/iframe.js
@@ -5,18 +5,26 @@ var editor = require('web_editor.editor');
 var translator = require('web_editor.translate');
 var rte = require('web_editor.rte');
 var snippet_editor = require('web_editor.snippet.editor');
+var summernote = require('web_editor.rte.summernote');
+var dom = summernote.core.dom;
+var pluginEvents = summernote.pluginEvents;
 
 window.top.odoo[callback+"_updown"] = function (value, fields_values, field_name) {
+    var se = snippet_editor.instance;
     var $editable = $("#editable_area");
-    if(value !== $editable.prop("innerHTML")) {
+    if(value !== se.get_codesource()) {
         if ($('body').hasClass('editor_enable')) {
             if (value !== fields_values[field_name]) {
                 rte.history.recordUndo($editable);
             }
-            snippet_editor.instance.make_active(false);
+            se.make_active(false);
         }
         
-        $editable.html(value);
+        if (!$editable.hasClass('codeview')) {
+            $('.note-popover button[data-name="codeview"]').click();
+        }
+        $('textarea.codesource').val(value).data('indexOfnit', value);
+        $('.note-popover button[data-name="codeview"]').click();
 
         if ($('body').hasClass('editor_enable') && value !== fields_values[field_name]) {
             $editable.trigger("content_changed");
@@ -49,11 +57,35 @@ editor.Class.include({
         this.on("snippets:ready", this, function () {
             $(window.top).trigger("resize");
         });
+
         return this._super();
-    }
+    },
 });
 
 snippet_editor.Class.include({
+    start: function () {
+        // overwrite dom.html for codeview
+        var self = this;
+        var _html = dom.html;
+        dom.html = function ($dom, prettifyHtml) {
+            if (prettifyHtml) {
+                self.clean_for_save();
+            }
+            return _html($dom, prettifyHtml);
+        };
+
+        var _codeview = pluginEvents.codeview;
+        pluginEvents.codeview = function (event, editor, layoutInfo) {
+            self.make_active(false);
+            _codeview(event, editor, layoutInfo);
+            self.$el.toggle(!$("#editable_area").hasClass('codeview'));
+        };
+
+        return this._super();
+    },
+    get_codesource: function () {
+        return $("#editable_area").data('codesource')();
+    },
     _get_snippet_url: function () {
         return snippets_url;
     }
@@ -66,6 +98,16 @@ rte.Class.include({
             config.airPopover.splice(7, 0, ['view', ['codeview']]);
         }
         return config;
+    },
+    onEnableEditableArea: function () {
+        var $editable = $("#editable_area");
+        if ($editable.data('content') != null) {
+            $editable.html('');
+            $('.note-popover button[data-name="codeview"]').click();
+            $('textarea.codesource').val($editable.data('content'));
+            $editable.data('content', null);
+            $('.note-popover button[data-name="codeview"]').click();
+        }
     }
 });
 
diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js
index 2b6ee1c6595..6e047537262 100644
--- a/addons/web_editor/static/src/js/inline.js
+++ b/addons/web_editor/static/src/js/inline.js
@@ -6,6 +6,45 @@ var rte = require('web_editor.rte');
 var widget = require('web_editor.widget');
 var transcoder = require('web_editor.transcoder');
 var snippet_editor = require('web_editor.snippet.editor');
+var summernote = require('web_editor.rte.summernote');
+var pluginEvents = summernote.pluginEvents;
+var dom = summernote.core.dom;
+
+var _html = dom.html;
+dom.html = function ($dom, prettifyHtml) {
+    if (prettifyHtml) {
+        transcoder.font_to_img($dom);
+        transcoder.class_to_style($dom);
+
+        // fix outlook image rendering bug
+        _.each(['width', 'height'], function(attribute) {
+            $dom.find('img[style*="width"], img[style*="height"]').attr(attribute, function(){
+                return $(this)[attribute]();
+            }).css(attribute, function(){
+                return $(this).get(0).style[attribute] || 'auto';
+            });
+        });
+    }
+    return _html($dom, prettifyHtml);
+};
+
+var _value = dom.value;
+dom.value = function ($dom, stripLinebreaks, $editable) {
+    var value = _value($dom, stripLinebreaks);
+    if (stripLinebreaks) {
+        $editable = $editable || $('<div/>');
+        $editable.html(value);
+        transcoder.img_to_font($editable);
+        transcoder.style_to_class($editable);
+
+        // fix outlook image rendering bug
+        $editable.find('img[style*="width"], img[style*="height"]').removeAttr('height width');
+
+        value = $editable.html();
+    }
+    return value;
+};
+
 
 widget.MediaDialog.include({
     start: function () {
@@ -37,37 +76,6 @@ editor.Class.include({
     },
 });
 
-snippet_editor.Class.include({
-    start: function () {
-        var self = this;
-        this._super();
-        setTimeout(function () {
-            var $editable = $("#editable_area");
-            transcoder.img_to_font($editable);
-            transcoder.style_to_class($editable);
-
-            // fix outlook image rendering bug
-            $editable.find('img[style*="width"], img[style*="height"]').removeAttr('height width');
-        });
-    },
-    clean_for_save: function () {
-        this._super();
-        var $editable = $("#editable_area");
-        transcoder.font_to_img($editable);
-        transcoder.class_to_style($editable);
-
-        // fix outlook image rendering bug
-        _.each(['width', 'height'], function(attribute) {
-            $editable.find('img[style*="width"], img[style*="height"]').attr(attribute, function(){
-                return $(this)[attribute]();
-            }).css(attribute, function(){
-                return $(this).get(0).style[attribute] || 'auto';
-            });
-        });
-    },
-
-});
-
 window.top.odoo[callback+"_updown"] = function (value, fields_values) {
     var $editable = $("#editable_area");
     value = value || "";
diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index 8cbb80583b7..b4accfa647c 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -28,6 +28,7 @@ var range = $.summernote.core.range;
 var eventHandler = $.summernote.eventHandler;
 var renderer = $.summernote.renderer;
 var options = $.summernote.options;
+var pluginEvents = $.summernote.pluginEvents;
 
 var tplButton = renderer.getTemplate().button;
 var tplIconButton = renderer.getTemplate().iconButton;
@@ -370,7 +371,7 @@ eventHandler.modules.imageDialog.showImageDialog = function ($editable) {
     editor.appendTo(document.body);
     return new $.Deferred().reject();
 };
-$.summernote.pluginEvents.alt = function (event, editor, layoutInfo, sorted) {
+pluginEvents.alt = function (event, editor, layoutInfo, sorted) {
     var $editable = layoutInfo.editable();
     var $selection = layoutInfo.handle().find('.note-control-selection');
     var media = $selection.data('target');
@@ -411,8 +412,8 @@ dom.isFont = function (node) {
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-var fn_visible = $.summernote.pluginEvents.visible;
-$.summernote.pluginEvents.visible = function (event, editor, layoutInfo) {
+var fn_visible = pluginEvents.visible;
+pluginEvents.visible = function (event, editor, layoutInfo) {
     var res = fn_visible.call(this, event, editor, layoutInfo);
     var rng = range.create();
     if(!rng) return res;
@@ -428,8 +429,12 @@ $.summernote.pluginEvents.visible = function (event, editor, layoutInfo) {
     return res;
 };
 
-function prettify_html(html) {
-    html = html.trim();
+
+dom.check_unvalid_preview = function(value) {
+    return /\n\s*(%|\{%)\s*\S+/.test(value); // jinja test
+};
+dom.html = function ($dom, prettifyHtml) {
+    var html = $dom.html().trim();
     var result = '',
         level = 0,
         get_space = function (level) {
@@ -437,7 +442,7 @@ function prettify_html(html) {
             while (i--) space += '  ';
             return space;
         },
-        reg = /^<\/?(a|span|font|strong|u|i|strong|b)(\s|>)/i,
+        reg = /^<\/?(a|span|font|strong|u|i|strong|b|td|p)(\s|>)/i,
         inline_level = Infinity,
         tokens = _.compact(_.flatten(_.map(html.split(/</), function (value) {
             value = value.replace(/\s+/g, ' ').split(/>/);
@@ -484,17 +489,53 @@ function prettify_html(html) {
         }
     }
     return result;
-}
-$.summernote.pluginEvents.codeview = function (event, editor, layoutInfo) {
+};
+dom.value = function ($node, stripLinebreaks) {
+  var val = dom.isTextarea($node[0]) ? $node.val() : $node.html();
+  if (stripLinebreaks) {
+    return val.replace(/\s*[\n\r]+\s*/g, '');
+  }
+  return val;
+};
+pluginEvents.codeview = function (event, editor, layoutInfo) {
+    if (event.isDefaultPrevented()) {
+        return;
+    }
+    var $editor = layoutInfo.editable();
+    var $codable = layoutInfo.codable ? layoutInfo.codable() : $editor.prev('textarea');
+
+    $codable.prev('.check_unvalid_preview').remove();
+    if ($editor.hasClass('codeview') && dom.check_unvalid_preview($codable.val())) {
+        var $unvalid = $('<div class="check_unvalid_preview" style="color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: 15px; border-radius: 4px;"/>');
+        $codable.before($unvalid.text(_t("You can't use html preview when you use non html code (like jinja)")));
+        setTimeout(function () {
+            $unvalid.fadeOut();
+        }, 1000);
+        return;
+    }
+
+    var prettifyHtml = $editor.data('options').prettifyHtml;
+
+    // getter
+    $editor.data('codesource', function () {
+        return $editor.hasClass('codeview') ?
+            (layoutInfo.codable ? layoutInfo.codable() : $editor.prev('textarea')).val() :
+            dom.html($editor, prettifyHtml);
+    });
+
     if (layoutInfo.toolbar) {
-        return eventHandler.modules.codeview.toggle(layoutInfo);
+        var codeview = eventHandler.modules.codeview.toggle(layoutInfo);
+        if (codeview) {
+            $codable.val(dom.html($editor, prettifyHtml));
+        } else {
+            $editor.html(dom.value($codable, prettifyHtml, $editor));
+            $editor.trigger('content_changed');
+        }
     } else {
-        var $editor = layoutInfo.editor();
-        var $textarea = $editor.prev('textarea');
+        var $textarea = $editor.prev('textarea.codesource');
 
         if (!$textarea.length) {
             // init and create texarea
-            var html = prettify_html($editor.prop("innerHTML"));
             $editor.parent().css({
                 'position': 'absolute',
                 'top': 0,
@@ -502,7 +543,7 @@ $.summernote.pluginEvents.codeview = function (event, editor, layoutInfo) {
                 'left': 0,
                 'right': 0
             });
-            $textarea = $('<textarea/>').css({
+            $textarea = $('<textarea class="codesource"/>').css({
                 'margin': '0 -4px',
                 'padding': '0 4px',
                 'border': 0,
@@ -513,15 +554,30 @@ $.summernote.pluginEvents.codeview = function (event, editor, layoutInfo) {
                 'font-size': '13px',
                 'height': '98%',
                 'white-space': 'pre',
-                'word-wrap': 'normal'
-            }).val(html).data('init', html);
+                'word-wrap': 'normal',
+                'display': 'none',
+            });
             $editor.before($textarea);
-            $editor.hide();
+        }
+
+        if (!$editor.hasClass('codeview')) {
+            setTimeout(function () {
+                layoutInfo.popover().find('button:not([data-event="codeview"])').addClass('hidden');
+            }, 10);
+            var html = dom.html($editor, prettifyHtml);
+            $textarea.val(html).data('indexOfnit', html);
+            $textarea.show();
+            $editor.addClass('codeview').hide();
         } else {
+            layoutInfo.popover().find('button:not([data-event="codeview"])').removeClass('hidden');
             // save changes
-            $editor.prop('innerHTML', $textarea.val().replace(/\s*\n\s*/g, '')).trigger('content_changed');
-            $textarea.remove();
-            $editor.show();
+            $editor.html(dom.value($textarea, prettifyHtml, $editor));
+            $textarea.hide();
+            $editor.removeClass('codeview').show();
+            if ($textarea.data('indexOfnit') != $textarea.val()) {
+                $editor.trigger('content_changed');
+
+            }
         }
     }
 };
@@ -695,17 +751,19 @@ function summernote_ie_fix (event, pred) {
 var fn_attach = eventHandler.attach;
 eventHandler.attach = function (oLayoutInfo, options) {
     fn_attach.call(this, oLayoutInfo, options);
-    oLayoutInfo.editor().on('dragstart', 'img', function (e) { e.preventDefault(); });
+    var $editor = oLayoutInfo.editor();
+
+    $editor.on('dragstart', 'img', function (e) { e.preventDefault(); });
     $(document).on('mousedown', summernote_mousedown);
     $(document).on('mouseup', summernote_mouseup);
-    oLayoutInfo.editor().off('click').on('click', function (e) {e.preventDefault();}); // if the content editable is a link
-    oLayoutInfo.editor().on('dblclick', 'img, .media_iframe_video, span.fa, i.fa, span.fa, a.o_image', function (event) {
+    $editor.off('click').on('click', function (e) {e.preventDefault();}); // if the content editable is a link
+    $editor.on('dblclick', 'img, .media_iframe_video, span.fa, i.fa, span.fa, a.o_image', function (event) {
         if (!$(event.target).closest(".note-toolbar").length) { // prevent icon edition of top bar for default summernote
-            new widgets.MediaDialog(oLayoutInfo.editor(), event.target).appendTo(document.body);
+            new widgets.MediaDialog($editor, event.target).appendTo(document.body);
         }
     });
-    if(oLayoutInfo.editor().is('[data-oe-model][data-oe-type="image"]')) {
-        oLayoutInfo.editor().on('click', 'img', function (event) {
+    if($editor.is('[data-oe-model][data-oe-type="image"]')) {
+        $editor.on('click', 'img', function (event) {
             $(event.target).trigger("dblclick");
         });
     }
@@ -716,36 +774,41 @@ eventHandler.attach = function (oLayoutInfo, options) {
     });
     $(document).on("keyup", reRangeSelectKey);
     var clone_data = false;
-    var $node = oLayoutInfo.editor();
-    if ($node.data('oe-model') || $node.data('oe-translation-id')) {
-        $node.on('content_changed', function () {
+
+    // getter
+    $editor.data('codesource', function () {
+        return dom.html($editor, true);
+    });
+
+    if ($editor.data('oe-model') || $editor.data('oe-translation-id')) {
+        $editor.on('content_changed', function () {
             var $nodes = $('[data-oe-model], [data-oe-translation-id]')
-                .filter(function () { return this != $node[0];});
+                .filter(function () { return this != $editor[0];});
 
-            if ($node.data('oe-model')) {
-                $nodes = $nodes.filter('[data-oe-model="'+$node.data('oe-model')+'"]')
-                    .filter('[data-oe-id="'+$node.data('oe-id')+'"]')
-                    .filter('[data-oe-field="'+$node.data('oe-field')+'"]');
+            if ($editor.data('oe-model')) {
+                $nodes = $nodes.filter('[data-oe-model="'+$editor.data('oe-model')+'"]')
+                    .filter('[data-oe-id="'+$editor.data('oe-id')+'"]')
+                    .filter('[data-oe-field="'+$editor.data('oe-field')+'"]');
             }
-            if ($node.data('oe-translation-id')) $nodes = $nodes.filter('[data-oe-translation-id="'+$node.data('oe-translation-id')+'"]');
-            if ($node.data('oe-type')) $nodes = $nodes.filter('[data-oe-type="'+$node.data('oe-type')+'"]');
-            if ($node.data('oe-expression')) $nodes = $nodes.filter('[data-oe-expression="'+$node.data('oe-expression')+'"]');
-            if ($node.data('oe-xpath')) $nodes = $nodes.filter('[data-oe-xpath="'+$node.data('oe-xpath')+'"]');
-            if ($node.data('oe-contact-options')) $nodes = $nodes.filter('[data-oe-contact-options="'+$node.data('oe-contact-options')+'"]');
+            if ($editor.data('oe-translation-id')) $nodes = $nodes.filter('[data-oe-translation-id="'+$editor.data('oe-translation-id')+'"]');
+            if ($editor.data('oe-type')) $nodes = $nodes.filter('[data-oe-type="'+$editor.data('oe-type')+'"]');
+            if ($editor.data('oe-expression')) $nodes = $nodes.filter('[data-oe-expression="'+$editor.data('oe-expression')+'"]');
+            if ($editor.data('oe-xpath')) $nodes = $nodes.filter('[data-oe-xpath="'+$editor.data('oe-xpath')+'"]');
+            if ($editor.data('oe-contact-options')) $nodes = $nodes.filter('[data-oe-contact-options="'+$editor.data('oe-contact-options')+'"]');
 
-            var nodes = $node.get();
+            var nodes = $editor.get();
 
-            if ($node.data('oe-type') === "many2one") {
+            if ($editor.data('oe-type') === "many2one") {
                 $nodes = $nodes.add($('[data-oe-model]')
-                    .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
-                    .filter('[data-oe-many2one-model="'+$node.data('oe-many2one-model')+'"]')
-                    .filter('[data-oe-many2one-id="'+$node.data('oe-many2one-id')+'"]')
+                    .filter(function () { return this != $editor[0] && nodes.indexOf(this) === -1; })
+                    .filter('[data-oe-many2one-model="'+$editor.data('oe-many2one-model')+'"]')
+                    .filter('[data-oe-many2one-id="'+$editor.data('oe-many2one-id')+'"]')
                     .filter('[data-oe-type="many2one"]'));
 
                 $nodes = $nodes.add($('[data-oe-model]')
-                    .filter(function () { return this != $node[0] && nodes.indexOf(this) === -1; })
-                    .filter('[data-oe-model="'+$node.data('oe-many2one-model')+'"]')
-                    .filter('[data-oe-id="'+$node.data('oe-many2one-id')+'"]')
+                    .filter(function () { return this != $editor[0] && nodes.indexOf(this) === -1; })
+                    .filter('[data-oe-model="'+$editor.data('oe-many2one-model')+'"]')
+                    .filter('[data-oe-id="'+$editor.data('oe-many2one-id')+'"]')
                     .filter('[data-oe-field="name"]'));
             }
 
@@ -761,7 +824,7 @@ eventHandler.attach = function (oLayoutInfo, options) {
     var $toolbar = $(oLayoutInfo.popover()).add(custom_toolbar);
     $('button[data-event="undo"], button[data-event="redo"]', $toolbar).attr('disabled', true);
 
-    $(oLayoutInfo.editor())
+    $($editor)
         .add(oLayoutInfo.handle())
         .add(oLayoutInfo.popover())
         .add(custom_toolbar)
@@ -888,4 +951,6 @@ $.summernote.lang.odoo = {
     }
 };
 
+return $.summernote;
+
 });
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 8c3c494a73f..e71c9cc5124 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -340,7 +340,7 @@ Tour.register({
     id:   'rte_inline',
     name: "Test RTE Inline",
     mode: 'test',
-    path: '/web_editor/field/html/inline?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+    path: '/web_editor/field/html/inline?debug=assets&callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
     steps: [
         {
             title:     "Change html for this test",
@@ -369,7 +369,7 @@ Tour.register({
             title:     "call clean for save",
             element:   '#wrapwrap table',
             onload: function () {
-                snippet_editor.instance.clean_for_save();
+                $("#editable_area").html($("#editable_area").data('codesource'));
             }
         },
         {