Merge lp:~therp-nl/web-addons/web-ckeditor4 into lp:~webaddons-core-editors/web-addons/6.1

[Holger Brunn (Therp)]

[ADD] web_ckeditor

I've been unhappy with the few existing HTML editing widgets for 6.1, so here an approach to improve on that.

Concerning the name: As ckeditor is not API compatible across major versions and OpenERP has no concept of versioned dependencies, I think we have to encode the version in the module's name. For addons that just need something to display/edit html without messing with the editor we could add a module web_ckeditor that depends on the current version.

I'm still pondering if the base version of this module should do any HTML filtering at all. I see this as a serverside task, because sometimes you actually want to do stuff with possibly malicious HTML, say from a function field where the HTML is generated by your own code. Let's discuss that in the MP.

Then even after a lot of tinkering, it doesn't go perfectly well with jQuery dialogs, so you'll have error popups after editing an HTML field in a popup (x2m dialogs). But it's only a nuisance, the content is properly saved. Any pointers on that issue are more than welcome.

For convenience in review, this branch sits on top of another one that adds stock ckeditor. To review that, have a look at the prerequsite branch.

[lp:~therp-nl/web-addons/web-ckeditor4]

14. By Holger Brunn (Therp) on 2013-04-13

[IMP] adjust css

[Stefan Rijnhart (Opener) (stefan-opener)]

Shouldn't client side filtering be the default if it is easy to do, with the option to disable it with something like a context value?

[Holger Brunn (Therp) (hbrunn)]

something like
if context.get('use_raw_html_yes_i_know_what_im_doing')
{
return value;
}
else
{
return filter(value);
}

?

Seems to be a very good point, thanks!

[lp:~therp-nl/web-addons/web-ckeditor4]

15. By Holger Brunn (Therp) on 2013-04-14

[FIX] introduce widget text_ckeditor4_raw to display unfiltered html
[IMP] filter html in text_ckeditor4
[FIX] only detach textarea on stop to circumvent issues with jquery
dialog

[Holger Brunn (Therp) (hbrunn)]

now I added another widget type to request unfiltered html. That seems to be the most convenient option for users of this addon

[lp:~therp-nl/web-addons/web-ckeditor4]

16. By Holger Brunn (Therp) on 2013-04-15

[ADD] uploader that injects a data uri into the html code

17. By Holger Brunn (Therp) on 2013-04-15

[FIX] allow all styles and classes in default filter

[Holger Brunn (Therp) (hbrunn)]

Now with the uploader and proper filtering of the HTML-code I'm pretty contend with this addon. What do the reviewers think?

[Stefan Rijnhart (Opener) (stefan-opener)]

It looks good but I need a chance to try it out and see about the x2m popup error.

[lp:~therp-nl/web-addons/web-ckeditor4]

18. By Holger Brunn (Therp) on 2013-04-17

[FIX] really fix errors in popup dialogs
[IMP] also mark the form as dirty the second time we adit an object

19. By Holger Brunn (Therp) on 2013-04-18

[ADD] make source debugging ckeditor painless

20. By Holger Brunn (Therp) on 2013-04-24

[FIX] finally fix problems with popups in chrome

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

Seems fine!

Thanks

review: Approve (no test)

[Stefan Rijnhart (Opener) (stefan-opener)]

Very nicely done! One thing: I understand that the module is versioned according to the ckeditor, but maybe the widget title should not carry this versioning. If you change the widget name to 'text_ckeditor' then the addons that apply the widget need not bother which version is installed. What do you think?

Also, it would be helpful just to state the obvious and mention that you can use the module by setting the widget on selected text fields to 'web_ckeditor' in the module description.

review: Needs Information (testing, functional)

[Holger Brunn (Therp) (hbrunn)]

Thanks, I updated the description.

This also explains my thinking about the widget names: I would rather keep them versioned too, as you will very likely have to adapt things when stepping to web_ckeditor5 if you found it necessary to use the versioned widget name in the first place.

[lp:~therp-nl/web-addons/web-ckeditor4]

21. By Holger Brunn (Therp) on 2013-05-29

[IMP] mention which widget names when to use

[Stefan Rijnhart (Opener) (stefan-opener)]

Makes me curious to know, as a user of the widget what kind of adaptions to expect when I upgrade the version of the widget? I'd think that the changes would be in the integration module that provides the widget.

review: Needs Information

[Holger Brunn (Therp) (hbrunn)]

Imagine you write a module that is supposed to generate HTML for an email. Then you have to dig deep into the internals of the editor to make it generate code that most mail clients display. So, your mail body field will be widget="ckeditor4".

Your next module needs some old HTML, but also needs to change some toolbars due to customer demand, so you fiddle around with ckeditor's options which are not stable across versions, ergo widget="ckeditor4".

The last one just wants to display and edit some HTML, doesn't really matter what the specifics are: widget="text_html". (And that's the use case I'd mostly expect)

[Stefan Rijnhart (Opener) (stefan-opener)]

Then I should have read the module description that you just added because that answers my question as good as your last reply. Thanks!

review: Approve

=== added file 'web_ckeditor4/__init__.py'
--- web_ckeditor4/__init__.py	1970-01-01 00:00:00 +0000
+++ web_ckeditor4/__init__.py	2013-05-29 19:33:26 +0000
@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    This module copyright (C) 2013 Therp BV (<http://therp.nl>)
+#    All Rights Reserved
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+

=== added file 'web_ckeditor4/__openerp__.py'
--- web_ckeditor4/__openerp__.py	1970-01-01 00:00:00 +0000
+++ web_ckeditor4/__openerp__.py	2013-05-29 19:33:26 +0000
@@ -0,0 +1,114 @@
+# -*- encoding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    This module copyright (C) 2013 Therp BV (<http://therp.nl>)
+#    All Rights Reserved
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    'name': 'CKEditor 4.x widget',
+    'version': '1.0',
+    'description': """
+    This addon provides a widget for editing html fields via CKEditor 4.x
+
+    Use widget="text_html" if you need just html display. In the unlikely case
+    you need specific features of ckeditor, use widget="text_ckeditor4".
+    """,
+    'author': 'Therp BV',
+    'website': 'http://www.therp.nl',
+    "category": "Tools",
+    "depends": [
+        'web',
+        ],
+    'css': [
+        'static/src/css/web_ckeditor4.css',
+        ],
+    'data': [
+        ],
+    'js': [
+        'static/src/js/ckeditor_basepath.js',
+        'static/lib/ckeditor/ckeditor.js',
+        'static/lib/ckeditor/config.js',
+        #to debug ckeditor, comment the lines above,
+        #do a
+        #cd static/lib
+        #git clone https://github.com/ckeditor/ckeditor-dev.git trunk
+        #cd trunk
+        #git checkout remotes/origin/release/4.1.x
+        #and uncomment the lines below
+#        'static/lib/trunk/ckeditor.js',
+#        'static/lib/trunk/core/event.js',
+#        'static/lib/trunk/core/editor_basic.js',
+#        'static/lib/trunk/core/env.js',
+#        'static/lib/trunk/core/ckeditor_basic.js',
+#        'static/lib/trunk/core/dom.js',
+#        'static/lib/trunk/core/tools.js',
+#        'static/lib/trunk/core/dtd.js',
+#        'static/lib/trunk/core/dom/event.js',
+#        'static/lib/trunk/core/dom/domobject.js',
+#        'static/lib/trunk/core/dom/node.js',
+#        'static/lib/trunk/core/dom/window.js',
+#        'static/lib/trunk/core/dom/document.js',
+#        'static/lib/trunk/core/dom/nodelist.js',
+#        'static/lib/trunk/core/dom/element.js',
+#        'static/lib/trunk/core/dom/documentfragment.js',
+#        'static/lib/trunk/core/dom/walker.js',
+#        'static/lib/trunk/core/dom/range.js',
+#        'static/lib/trunk/core/dom/iterator.js',
+#        'static/lib/trunk/core/command.js',
+#        'static/lib/trunk/core/ckeditor_base.js',
+#        'static/lib/trunk/core/config.js',
+#        'static/lib/trunk/core/filter.js',
+#        'static/lib/trunk/core/focusmanager.js',
+#        'static/lib/trunk/core/keystrokehandler.js',
+#        'static/lib/trunk/core/lang.js',
+#        'static/lib/trunk/core/scriptloader.js',
+#        'static/lib/trunk/core/resourcemanager.js',
+#        'static/lib/trunk/core/plugins.js',
+#        'static/lib/trunk/core/ui.js',
+#        'static/lib/trunk/core/editor.js',
+#        'static/lib/trunk/core/htmlparser.js',
+#        'static/lib/trunk/core/htmlparser/basicwriter.js',
+#        'static/lib/trunk/core/htmlparser/node.js',
+#        'static/lib/trunk/core/htmlparser/comment.js',
+#        'static/lib/trunk/core/htmlparser/text.js',
+#        'static/lib/trunk/core/htmlparser/cdata.js',
+#        'static/lib/trunk/core/htmlparser/fragment.js',
+#        'static/lib/trunk/core/htmlparser/filter.js',
+#        'static/lib/trunk/core/htmldataprocessor.js',
+#        'static/lib/trunk/core/htmlparser/element.js',
+#        'static/lib/trunk/core/template.js',
+#        'static/lib/trunk/core/ckeditor.js',
+#        'static/lib/trunk/core/creators/inline.js',
+#        'static/lib/trunk/core/creators/themedui.js',
+#        'static/lib/trunk/core/editable.js',
+#        'static/lib/trunk/core/selection.js',
+#        'static/lib/trunk/core/style.js',
+#        'static/lib/trunk/core/dom/comment.js',
+#        'static/lib/trunk/core/dom/elementpath.js',
+#        'static/lib/trunk/core/dom/text.js',
+#        'static/lib/trunk/core/dom/rangelist.js',
+#        'static/lib/trunk/core/skin.js',
+#        'static/lib/trunk/core/_bootstrap.js', 
+        #end of ckeditor debug
+        'static/src/js/web_ckeditor4.js',
+        ],
+    'installable': True,
+    'active': False,
+    'certificate': '',
+}

=== added directory 'web_ckeditor4/static/src'
=== added directory 'web_ckeditor4/static/src/css'
=== added file 'web_ckeditor4/static/src/css/web_ckeditor4.css'
--- web_ckeditor4/static/src/css/web_ckeditor4.css	1970-01-01 00:00:00 +0000
+++ web_ckeditor4/static/src/css/web_ckeditor4.css	2013-05-29 19:33:26 +0000
@@ -0,0 +1,6 @@
+.openerp .oe_form_field_text_ckeditor4.disabled, .openerp td.oe_form_field_text_ckeditor4, .openerp .oe_form_field_text_ckeditor4_raw.disabled.openerp, .openerp td.oe_form_field_text_ckeditor4_raw {
+    /* here we need to reset openerp's styles to
+     * have the HTML display as (probably) intended
+     */
+    white-space: normal;
+}

=== added directory 'web_ckeditor4/static/src/js'
=== added file 'web_ckeditor4/static/src/js/ckeditor_basepath.js'
--- web_ckeditor4/static/src/js/ckeditor_basepath.js	1970-01-01 00:00:00 +0000
+++ web_ckeditor4/static/src/js/ckeditor_basepath.js	2013-05-29 19:33:26 +0000
@@ -0,0 +1,1 @@
+CKEDITOR_BASEPATH='/web_ckeditor4/static/lib/ckeditor/'

=== added file 'web_ckeditor4/static/src/js/web_ckeditor4.js'
--- web_ckeditor4/static/src/js/web_ckeditor4.js	1970-01-01 00:00:00 +0000
+++ web_ckeditor4/static/src/js/web_ckeditor4.js	2013-05-29 19:33:26 +0000
@@ -0,0 +1,233 @@
+/* -*- encoding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    This module copyright (C) 2013 Therp BV (<http://therp.nl>)
+#    All Rights Reserved
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+############################################################################*/
+
+openerp.web_ckeditor4 = function(openerp)
+{
+    var ckeditor_addFunction_org = CKEDITOR.tools.addFunction;
+    //this is a quite complicated way to kind of monkey patch the private
+    //method onDomReady of ckeditor's plugin wysiwigarea, which causes problems
+    //when the editor is about to be destroyed but because of OpenERP's
+    //architecture updated one last time with its current value
+    CKEDITOR.tools.addFunction = function(fn, scope)
+    {
+        if(scope && scope._ && scope._.attrChanges && scope._.detach)
+        {
+            var scope_reference = scope;
+            return ckeditor_addFunction_org(function()
+                    {
+                        var self = this,
+                            self_arguments=arguments;
+                        setTimeout(function()
+                        {
+                            if(CKEDITOR.instances[self.editor.name])
+                            {
+                                fn.apply(self, self_arguments);
+                            }
+                        }, 0);
+                    }, scope);
+        }
+        return ckeditor_addFunction_org(fn, scope);
+    };
+
+    CKEDITOR.lang.load(openerp.connection.user_context.lang.split('_')[0], 'en', function() {});
+
+    CKEDITOR.on('dialogDefinition', function(e)
+        {
+            _.each(e.data.definition.contents, function(element)
+            {
+                if(element.filebrowser!='uploadButton')
+                {
+                    return
+                }
+                _.each(element.elements, function(element)
+                {
+                    if(!element.onClick || element.type!='fileButton')
+                    {
+                        return
+                    }
+                    var onClick_org = element.onClick;
+                    element.onClick = function(e1)
+                    {
+                        onClick_org.apply(this, arguments);
+                        _.each(jQuery('#'+this.domId).closest('table')
+                            .find('iframe').contents().find(':file')
+                            .get(0).files,
+                            function(file)
+                            {
+                                var reader = new FileReader();
+                                reader.onload = function(load_event)
+                                {
+                                    CKEDITOR.tools.callFunction(
+                                        e.editor._.filebrowserFn,
+                                        load_event.target.result,
+                                        '');
+                                }
+                                reader.readAsDataURL(file);
+                            });
+                        return false;
+                    }
+                });
+            });
+        });
+
+    openerp.web.form.widgets.add('text_ckeditor4',
+            'openerp.web_ckeditor4.FieldCKEditor4');
+    openerp.web.page.readonly.add('text_ckeditor4',
+            'openerp.web_ckeditor4.FieldCKEditor4Readonly');
+    openerp.web.form.widgets.add('text_ckeditor4_raw',
+            'openerp.web_ckeditor4.FieldCKEditor4Raw');
+    openerp.web.page.readonly.add('text_ckeditor4_raw',
+            'openerp.web_ckeditor4.FieldCKEditor4ReadonlyRaw');
+    openerp.web.form.widgets.add('text_html',
+            'openerp.web_ckeditor4.FieldCKEditor4');
+    openerp.web.page.readonly.add('text_html',
+            'openerp.web_ckeditor4.FieldCKEditor4Readonly');
+
+    function filter_html(value, ckeditor_filter, ckeditor_writer)
+    {
+        var fragment = CKEDITOR.htmlParser.fragment.fromHtml(value);
+        ckeditor_filter.applyTo(fragment);
+        ckeditor_writer.reset();
+        fragment.writeHtml(ckeditor_writer);
+        return ckeditor_writer.getHtml();
+    };
+
+    default_ckeditor_filter = new CKEDITOR.filter(
+            {
+                '*':
+                {
+                    attributes: 'href,src,style,alt,width,height',
+                    styles: '*',
+                    classes: '*',
+                },
+                'html head title meta style body p div span a h1 h2 h3 h4 h5 img br hr table tr th td ul ol li dd dt': true,
+            });
+    default_ckeditor_writer = new CKEDITOR.htmlParser.basicWriter();
+
+    openerp.web_ckeditor4.FieldCKEditor4 = openerp.web.form.FieldText.extend({
+        ckeditor_config: {
+            removePlugins: 'iframe,flash,forms,smiley,pagebreak,stylescombo',
+            filebrowserImageUploadUrl: 'dummy',
+            extraPlugins: 'filebrowser',
+        },
+        ckeditor_filter: default_ckeditor_filter,
+        ckeditor_writer: default_ckeditor_writer,
+        start: function()
+        {
+            var self = this;
+            this._super.apply(this, arguments);
+
+            if(this.modifiers.readonly)
+            {
+                return;
+            }
+
+            self.editor = CKEDITOR.replace(this.$element.find('textarea').get(0),
+                _.extend(
+                    {
+                        language: openerp.connection.user_context.lang.split('_')[0],
+                        on:
+                        {
+                            'beforeUndoImage': function()
+                            {
+                                self.on_ui_change();
+                            },
+                        },
+                    }, 
+                    this.ckeditor_config));
+        },
+        get_value: function()
+        {
+            return this.editor ? openerp.web.parse_value(this.editor.getData(), this) : this.value;
+        },
+        filter_html: function(value)
+        {
+            return filter_html(value, this.ckeditor_filter, this.ckeditor_writer);
+        },
+        set_value: function(value)
+        {
+            if(this.modifiers.readonly)
+            {
+                this._super.apply(this, [value]);
+
+                this.$element.html(this.filter_html(value));
+                return value;
+            }
+            else
+            {
+                if(this.editor)
+                {
+                    var self = this;
+                    if(this.editor.status != 'ready')
+                    {
+                        this.editor.on('instanceReady',
+                            function()
+                            {
+                                self.editor.setData(value || '');
+                            });
+                    }
+                    else
+                    {
+                        self.editor.setData(value || '');
+                    }
+                }
+                this._super.apply(this, arguments);
+            }
+        },
+
+        stop: function()
+        {
+            if(this.editor)
+            {
+                CKEDITOR.remove(this.editor);
+            }
+            return this._super.apply(this, arguments);
+        }
+    });
+    openerp.web_ckeditor4.FieldCKEditor4Raw = openerp.web_ckeditor4.FieldCKEditor4.extend({
+        filter_html: function(value)
+        {
+            return value;
+        }
+    });
+
+
+    openerp.web_ckeditor4.FieldCKEditor4ReadonlyRaw = openerp.web.page.FieldCharReadonly.extend({
+        set_value: function (value)
+        {
+            this._super.apply(this, arguments);
+            this.$element.find('div').html(value);
+            return value;
+        }
+    });
+    openerp.web_ckeditor4.FieldCKEditor4Readonly = openerp.web.page.FieldCharReadonly.extend({
+        ckeditor_filter: default_ckeditor_filter,
+        ckeditor_writer: default_ckeditor_writer,
+        set_value: function (value)
+        {
+            this._super.apply(this, arguments);
+            this.$element.find('div').html(filter_html(value, this.ckeditor_filter, this.ckeditor_writer));
+            return value;
+        }
+    });
+}
+