Fix EZP-26884: Pasted table transformed into paragraph

(cherry picked from commit ca2f1f4)

Resources/config/css.yml

@@ -110,6 +110,7 @@ system:
                 - 'bundles/ezplatformui/css/modules/yui-calendar.css'
                 - 'bundles/ezplatformui/css/modules/pure-grid.css'
                 - 'bundles/ezplatformui/css/modules/embed.css'
+                - 'bundles/ezplatformui/css/modules/richtext.css'
                 - 'bundles/ezplatformui/css/modules/loadmorepagination.css'
                 - 'bundles/ezplatformui/css/alloyeditor/general.css'
                 - 'bundles/ezplatformui/css/alloyeditor/buttons/labeled-button.css'
@@ -200,6 +201,7 @@ system:
                 - 'bundles/ezplatformui/css/theme/modules/selection-table.css'
                 - 'bundles/ezplatformui/css/theme/modules/yui-calendar.css'
                 - 'bundles/ezplatformui/css/theme/modules/embed.css'
+                - 'bundles/ezplatformui/css/theme/modules/richtext.css'
                 - 'bundles/ezplatformui/css/theme/modules/collapsetoggle.css'
                 - 'bundles/ezplatformui/css/theme/modules/loadmorepagination.css'
                 - 'bundles/ezplatformui/css/theme/alloyeditor/general.css'

Resources/public/css/modules/richtext.css

@@ -0,0 +1,9 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-richtext-content table {
+    margin: 1em 0;
+    line-height: 1.4;
+}

Resources/public/css/theme/modules/richtext.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-richtext-content table:not([border]),
+.ez-richtext-content table:not([border]) tr,
+.ez-richtext-content table:not([border]) td,
+.ez-richtext-content table:not([border]) th {
+    border: 1px dotted #888;
+}

Resources/public/js/alloyeditor/plugins/paste.js

@@ -72,7 +72,10 @@ YUI.add('ez-alloyeditor-plugin-paste', function (Y) {
         requires: 'clipboard',
         init: function (editor) {
             editor.pasteFilter = new CKEDITOR.filter({
-                'p h1 h2 h3 h4 h5 h6 ul li ol': true,
+                'p h1 h2 h3 h4 h5 h6 ul li ol thead tbody th td tr': true,
+                'table': {
+                    attributes: 'border',
+                },
                 'strong b i em u': true,
                 'a': {
                     attributes: '!href',

Resources/public/templates/fields/edit/richtext.hbt

@@ -18,7 +18,7 @@
             <div class="ez-richtext-toolbar">
                 <button class="pure-button ez-button ez-richtext-switch-focus ez-font-icon ez-button-focus">{{translate "richtext.focus" "fieldedit"}}</button>
             </div>
-            <div class="ez-validated-input ez-richtext-editor {{ editableClass }}"
+            <div class="ez-validated-input ez-richtext-editor ez-richtext-content {{ editableClass }}"
                     contenteditable="false"
                     id="ez-field-{{ content.contentId }}-{{ fieldDefinition.identifier }}">
                 {{{ xhtml }}}

Tests/js/alloyeditor/plugins/assets/ez-alloyeditor-plugin-paste-tests.js

@@ -230,11 +230,18 @@ YUI.add('ez-alloyeditor-plugin-paste-tests', function (Y) {
             this._testPaste(code, expected, "The div should be transformed into paragraph");
         },
 
-        "Should transform table into paragraphs": function () {
+        "Should keep the table": function () {
             var code = '<table><tr><td>Led Zeppelin</td></tr><tr><td>Over the hill and far away</td></tr></table>',
-                expected = '<p>Led Zeppelin</p><p>Over the hill and far away</p>';
+                expected = '<table><tbody><tr><td>Led Zeppelin</td></tr><tr><td>Over the hill and far away</td></tr></tbody></table>';
 
-            this._testPaste(code, expected, "The table should be transformed into paragraphs");
+            this._testPaste(code, expected, "The table should have been kept");
+        },
+
+        "Should keep the border attribute on table": function () {
+            var code = '<table border="1"><tr><td>Led Zeppelin</td></tr></table>',
+                expected = '<table border="1"><tbody><tr><td>Led Zeppelin</td></tr></tbody></table>';
+
+            this._testPaste(code, expected, "The table border attribute should have been kept");
         },
 
         "Should apply the paste filter after pastefromword cleanup": function () {