From ec988d412187877c086e01ea007c1ce07d7b1860 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Tue, 11 Apr 2017 16:23:18 +0200
Subject: [PATCH] [FIX] web(_editor): field widget html

The field widget html wasn't implemented yet in the new views. A
very basic implementation was done in addon web. It only handled
the readonly mode so that the field were displayed in studio.

This commit removes this basic implementation from web, and re-
introduced the old one, converted, in addon web_editor.
---
 .../static/src/js/fields/abstract_field.js    |  10 +
 .../web/static/src/js/fields/basic_fields.js  |  18 --
 .../static/src/js/fields/field_registry.js    |   1 -
 .../src/js/views/form/form_controller.js      |   5 +
 .../static/src/js/views/form/form_renderer.js |   8 +
 addons/web_editor/static/src/js/backend.js    | 180 +++++++++++++++++-
 addons/web_editor/static/src/xml/backend.xml  |   6 -
 .../static/tests/web_editor_tests.js          |  66 ++++++-
 8 files changed, 263 insertions(+), 31 deletions(-)

diff --git a/addons/web/static/src/js/fields/abstract_field.js b/addons/web/static/src/js/fields/abstract_field.js
index 66bf2aaabe7..f36418e3b8b 100644
--- a/addons/web/static/src/js/fields/abstract_field.js
+++ b/addons/web/static/src/js/fields/abstract_field.js
@@ -191,6 +191,16 @@ var AbstractField = Widget.extend({
      */
     activate: function () {
     },
+    /**
+     * This function should be implemented by widgets that are not able to
+     * notify their environment when their value changes (maybe because their
+     * are not aware of the changes). It is called before saving, and should
+     * call _setValue() to notify the environment if the value changed.
+     *
+     * @abstract
+     */
+    commitChanges: function () {
+    },
     /**
      * this method is used to determine if the field value is set to a meaningful
      * value.  This is useful to determine if a field should be displayed as empty
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 15b8b3930df..af5d9bcf233 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -702,23 +702,6 @@ var FieldText = DebouncedField.extend({
     },
 });
 
-var FieldHtml = InputField.extend({
-    supportedFieldTypes: ['html'],
-    text_to_html: function (text) {
-        var value = text || "";
-        if (value.match(/^\s*$/)) {
-            value = '<p><br/></p>';
-        } else {
-            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>');
-        }
-        return value;
-    },
-    _render: function () {
-        this.$el.html(this.text_to_html(this.value));
-    },
-});
-
 /**
  * Displays a handle to modify the sequence.
  */
@@ -2068,7 +2051,6 @@ return {
     FieldDomain: FieldDomain,
     FieldFloat: FieldFloat,
     FieldFloatTime: FieldFloatTime,
-    FieldHtml: FieldHtml,
     FieldInteger: FieldInteger,
     FieldMonetary: FieldMonetary,
     FieldPercentPie: FieldPercentPie,
diff --git a/addons/web/static/src/js/fields/field_registry.js b/addons/web/static/src/js/fields/field_registry.js
index 83d28c1649f..00423d670fb 100644
--- a/addons/web/static/src/js/fields/field_registry.js
+++ b/addons/web/static/src/js/fields/field_registry.js
@@ -20,7 +20,6 @@ registry
     .add('abstract', AbstractField)
     .add('input', basic_fields.InputField)
     .add('integer', basic_fields.FieldInteger)
-    .add('html', basic_fields.FieldHtml)
     .add('boolean', basic_fields.FieldBoolean)
     .add('date', basic_fields.FieldDate)
     .add('datetime', basic_fields.FieldDateTime)
diff --git a/addons/web/static/src/js/views/form/form_controller.js b/addons/web/static/src/js/views/form/form_controller.js
index 7435332ecf4..f97a93e14e8 100644
--- a/addons/web/static/src/js/views/form/form_controller.js
+++ b/addons/web/static/src/js/views/form/form_controller.js
@@ -214,6 +214,11 @@ var FormController = BasicController.extend({
     saveRecord: function (options) {
         var self = this;
         options = options || {};
+
+        // some field widgets (e.g. 'html') can't detect (all) their changes, so
+        // we ask them to commit their current value before saving
+        this.renderer.commitChanges();
+
         var stayInEdit = 'stayInEdit' in options ? options.stayInEdit : false;
         var shouldReload = 'reload' in options ? options.reload : true;
         if (!this.model.isDirty(this.handle) && !this.model.isNew(this.handle)) {
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 23ed3a08ad3..e2ec7b3de70 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -76,6 +76,14 @@ return BasicRenderer.extend({
             }
         });
     },
+    /**
+     * Calls 'commitChanges' on all field widgets, so that they can notify the
+     * environment with their current value (useful for widgets that can't
+     * detect when their value changes, e.g. field 'html').
+     */
+    commitChanges: function () {
+        _.invoke(this.widgets, 'commitChanges');
+    },
     /**
      * returns the active tab pages for each notebook
      *
diff --git a/addons/web_editor/static/src/js/backend.js b/addons/web_editor/static/src/js/backend.js
index f7d50e1a6dd..7642588ca26 100644
--- a/addons/web_editor/static/src/js/backend.js
+++ b/addons/web_editor/static/src/js/backend.js
@@ -2,18 +2,188 @@ odoo.define('web_editor.backend', function (require) {
 'use strict';
 
 var AbstractField = require('web.AbstractField');
+var basic_fields = require('web.basic_fields');
 var core = require('web.core');
 var session = require('web.session');
 var field_registry = require('web.field_registry');
 
+var transcoder = require('web_editor.transcoder');
+
+var DebouncedField = basic_fields.DebouncedField;
 var QWeb = core.qweb;
 
 
 /**
- * FieldTextHtml Widget
- * Intended for FieldText widgets meant to display HTML content. This
- * widget will instantiate an iframe with the editor summernote improved by odoo
+ * FieldTextHtmlSimple Widget
+ * Intended to display HTML content. This widget uses the summernote editor
+ * improved by odoo.
+ *
+ * FIXME: this field has a custom handling of the translation feature, which
+ * hasn't been re-introduced yet (because this feature hasn't been introduced
+ * yet in the fields in general)
  */
+var FieldTextHtmlSimple = DebouncedField.extend({
+    className: 'oe_form_field oe_form_field_html_text',
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Summernote doesn't notify for all changes (e.g. changing the background
+     * color). Moreover, we can't detect that this field looses the focus, so
+     * we can't notify the environment that the value may have changed at that
+     * moment. So we always send the current value before saving.
+     *
+     * @override
+     */
+    commitChanges: function () {
+        this._setValue(this._getValue());
+    },
+    /**
+     * @override
+     */
+    isSet: function () {
+        return this.value && this.value !== "<p><br/></p>" && this.value.match(/\S/);
+    },
+    /**
+     * Do not re-render this field if it was the origin of the onchange call.
+     *
+     * @override
+     */
+    reset: function (record, event) {
+        this._reset(record, event);
+        if (!event || event.target !== this) {
+            if (this.mode === 'edit') {
+                this.$content.html(this._textToHtml(this.value));
+            } else {
+                this._renderReadonly();
+            }
+        }
+        return $.when();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @returns {Object} the summernote configuration
+     */
+    _getSummernoteConfig: function () {
+        var config = {
+            focus: false,
+            height: 180,
+            toolbar: [
+                ['style', ['style']],
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['para', ['ul', 'ol', 'paragraph']],
+                ['table', ['table']],
+                ['insert', ['link', 'picture']],
+                ['history', ['undo', 'redo']]
+            ],
+            prettifyHtml: false,
+            styleWithSpan: false,
+            inlinemedia: ['p'],
+            lang: "odoo",
+            onChange: this._onInput.bind(this),
+        };
+        if (this.getSession().debug) {
+            config.toolbar.splice(7, 0, ['view', ['codeview']]);
+        }
+        return config;
+    },
+    /**
+     * @override
+     * @private
+     */
+    _getValue: function () {
+        if (this.nodeOptions['style-inline']) {
+            transcoder.class_to_style(this.$content);
+            transcoder.font_to_img(this.$content);
+        }
+        return this.$content.html();
+    },
+    /**
+     * @override
+     * @private
+     */
+    _renderEdit: function () {
+        this.$textarea = $('<textarea>');
+        this.$textarea.appendTo(this.$el);
+        this.$textarea.summernote(this._getSummernoteConfig());
+        this.$content = this.$('.note-editable:first');
+        this.$content.html(this._textToHtml(this.value));
+        // trigger a mouseup to refresh the editor toolbar
+        this.$content.trigger('mouseup');
+        if (this.nodeOptions['style-inline']) {
+            transcoder.style_to_class(this.$content);
+        }
+        // reset the history (otherwise clicking on undo before editing the
+        // value will empty the editor)
+        var history = this.$content.data('NoteHistory');
+        if (history) {
+            history.reset();
+        }
+    },
+    /**
+     * @override
+     * @private
+     */
+    _renderReadonly: function () {
+        var self = this;
+        this.$el.empty();
+        if (this.nodeOptions['style-inline']) {
+            var $iframe = $('<iframe class="o_readonly"/>');
+            $iframe.on('load', function () {
+                self.$content = $($iframe.contents()[0]).find("body");
+                self.$content.html(self._textToHtml(self.value));
+                self._resize();
+            });
+            $iframe.appendTo(this.$el);
+        } else {
+            this.$content = $('<div class="o_readonly"/>');
+            this.$content.html(this._textToHtml(this.value));
+            this.$content.appendTo(this.$el);
+        }
+    },
+    /**
+     * Sets the height of the iframe.
+     *
+     * @private
+     */
+    _resize: function () {
+        var height = this.$content[0] ? this.$content[0].scrollHeight : 0;
+        this.$('iframe').css('height', Math.max(30, Math.min(height, 500)) + 'px');
+    },
+    /**
+     * @private
+     * @param {string} text
+     * @returns {string} the text converted to html
+     */
+    _textToHtml: function (text) {
+        var value = text || "";
+        try {
+            $(text)[0].innerHTML; // crashes if text isn't html
+        } catch (e) {
+            if (value.match(/^\s*$/)) {
+                value = '<p><br/></p>';
+            } else {
+                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>');
+            }
+        }
+        return value;
+    },
+});
+
 var FieldTextHtml = AbstractField.extend({
     template: 'web_editor.FieldTextHtml',
     supportedFieldTypes: ['html'],
@@ -234,11 +404,11 @@ var FieldTextHtml = AbstractField.extend({
 });
 
 field_registry
-    .add('html', AbstractField) // TODO
+    .add('html', FieldTextHtmlSimple)
     .add('html_frame', FieldTextHtml);
 
 return {
-    FieldTextHtmlSimple: AbstractField,
+    FieldTextHtmlSimple: FieldTextHtmlSimple,
     FieldTextHtml: FieldTextHtml,
 };
 
diff --git a/addons/web_editor/static/src/xml/backend.xml b/addons/web_editor/static/src/xml/backend.xml
index d592357358f..69f6e53d6de 100644
--- a/addons/web_editor/static/src/xml/backend.xml
+++ b/addons/web_editor/static/src/xml/backend.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="web_editor.FieldTextHtmlSimple">
-        <div class="oe_form_field oe_form_field_html_text" t-att-style="widget.node.attrs.style">
-            <textarea readonly="readonly"/>
-        </div>
-    </t>
-
     <t t-name="web_editor.FieldTextHtml">
         <div class="oe_form_field oe_form_field_html oe_form_embedded_html" t-att-style="widget.attrs.style">
             <iframe/>
diff --git a/addons/web_editor/static/tests/web_editor_tests.js b/addons/web_editor/static/tests/web_editor_tests.js
index 8d80ad2a73a..6a18566af2b 100644
--- a/addons/web_editor/static/tests/web_editor_tests.js
+++ b/addons/web_editor/static/tests/web_editor_tests.js
@@ -15,7 +15,7 @@ QUnit.module('web_editor', {
                 records: [{
                     id: 1,
                     display_name: "first record",
-                    body: "<div>yep</div>"
+                    body: "<div class='field_body'>yep</div>",
                 }],
                 onchanges: {},
             },
@@ -24,6 +24,70 @@ QUnit.module('web_editor', {
 });
 
 QUnit.test('field html widget', function (assert) {
+    var done = assert.async();
+    assert.expect(3);
+
+    var form = testUtils.createView({
+        View: FormView,
+        model: 'mass.mailing',
+        data: this.data,
+        arch: '<form string="Partners">' +
+                '<field name="body" widget="html" style="height: 100px"/>' +
+            '</form>',
+        res_id: 1,
+    });
+
+    assert.strictEqual(form.$('.field_body').text(), 'yep',
+        "should have rendered a div with correct content in readonly");
+    assert.strictEqual(form.$('div[name=body]').attr('style'), 'height: 100px',
+        "should have applied the style correctly");
+
+    form.$buttons.find('.o_form_button_edit').click();
+
+    assert.strictEqual(form.$('.note-editable').html(), '<div class="field_body">yep</div>',
+            "should have rendered the field correctly in edit");
+
+    // summernote invokes handlers after a setTimeout, so we must wait as well
+    // before destroying the widget (otherwise we'll have a crash later on)
+    setTimeout(function () {
+        form.destroy();
+        done();
+    }, 0);
+});
+
+QUnit.test('field html widget (with options inline-style)', function (assert) {
+    var done = assert.async();
+    assert.expect(3);
+
+    var form = testUtils.createView({
+        View: FormView,
+        model: 'mass.mailing',
+        data: this.data,
+        arch: '<form string="Partners">' +
+                '<field name="body" widget="html" style="height: 100px" options="{\'style-inline\': true}"/>' +
+            '</form>',
+        res_id: 1,
+    });
+
+    assert.strictEqual(form.$('iframe').length, 1,
+        "should have rendered an iframe without crashing in readonly");
+    assert.strictEqual(form.$('div[name=body]').attr('style'), 'height: 100px',
+        "should have applied the style correctly");
+
+    form.$buttons.find('.o_form_button_edit').click();
+
+    assert.strictEqual(form.$('.note-editable').html(), '<div class="field_body">yep</div>',
+            "should have rendered the field correctly in edit");
+
+    // summernote invokes handlers after a setTimeout, so we must wait as well
+    // before destroying the widget (otherwise we'll have a crash later on)
+    setTimeout(function () {
+        form.destroy();
+        done();
+    }, 0);
+});
+
+QUnit.test('field html_frame widget', function (assert) {
     assert.expect(6);
 
     var form = testUtils.createView({