Merge pull request #287 from ezsystems/ezp-24532_richtext_create_toolbar

EZP-24532: As an editor, I want to be able to add some elements to the RichText editor with a dedicated toolbar

Gruntfile.js

@@ -4,55 +4,44 @@ module.exports = function(grunt) {
     var reportDir = "./Tests/report",
         instrumentDir = "./Tests/instrument",
         environment = process.env,
-        sourceFiles = [ // Syntax "!<whatever>" means - exclude whatever from the result set
-            "./Resources/public/js/apps/*.js", "!./Resources/public/js/apps/*-min.js",
-            "./Resources/public/js/apps/extensions/*.js", "!./Resources/public/js/apps/extensions/*-min.js",
-            "./Resources/public/js/apps/plugins/*.js", "!./Resources/public/js/apps/plugins/*-min.js",
-            "./Resources/public/js/views/*.js", "!./Resources/public/js/views/*-min.js",
-            "./Resources/public/js/views/fields/*.js", "!./Resources/public/js/views/fields/*-min.js",
-            "./Resources/public/js/views/universaldiscovery/*.js", "!./Resources/public/js/views/universaldiscovery/*-min.js",
-            "./Resources/public/js/views/actions/*.js", "!./Resources/public/js/views/actions/*-min.js",
-            "./Resources/public/js/views/tabs/*.js", "!./Resources/public/js/views/actions/*-min.js",
-            "./Resources/public/js/views/navigation/*.js", "!./Resources/public/js/views/navigation/*-min.js",
-            "./Resources/public/js/views/serverside/*.js", "!./Resources/public/js/views/serverside/*-min.js",
-            "./Resources/public/js/views/services/*.js", "!./Resources/public/js/views/services/*-min.js",
-            "./Resources/public/js/views/services/plugins/*.js", "!./Resources/public/js/views/services/plugins/*-min.js",
-            "./Resources/public/js/models/*.js", "!./Resources/public/js/models/*-min.js",
-            "./Resources/public/js/models/structs/*.js", "!./Resources/public/js/models/structs/*-min.js",
-            "./Resources/public/js/extensions/*.js", "!./Resources/public/js/extensions/*-min.js",
-            "./Resources/public/js/external/*.js", "!./Resources/public/js/external/*-min.js",
-            "./Resources/public/js/services/*.js", "!./Resources/public/js/services/*-min.js",
-            "./Resources/public/js/helpers/*.js", "!./Resources/public/js/helpers/*-min.js"
+        sourceFiles = [
+            "./Resources/public/js/apps/*.js",
+            "./Resources/public/js/apps/extensions/*.js",
+            "./Resources/public/js/apps/plugins/*.js",
+            "./Resources/public/js/views/*.js",
+            "./Resources/public/js/views/fields/*.js",
+            "./Resources/public/js/views/universaldiscovery/*.js",
+            "./Resources/public/js/views/actions/*.js",
+            "./Resources/public/js/views/tabs/*.js",
+            "./Resources/public/js/views/navigation/*.js",
+            "./Resources/public/js/views/serverside/*.js",
+            "./Resources/public/js/views/services/*.js",
+            "./Resources/public/js/views/services/plugins/*.js",
+            "./Resources/public/js/models/*.js",
+            "./Resources/public/js/models/structs/*.js",
+            "./Resources/public/js/extensions/*.js",
+            "./Resources/public/js/external/*.js",
+            "./Resources/public/js/services/*.js",
+            "./Resources/public/js/helpers/*.js",
+            "./Resources/public/js/alloyeditor/toolbars/*.js",
+            "./Resources/public/js/alloyeditor/buttons/*.js",
+            "./Resources/public/js/alloyeditor/plugins/*.js",
         ],
         testFiles = [
             "./Tests/js/**/*.js",
         ],
         trashFiles = [
-            "./Resources/public/js/apps/*-min.js",
-            "./Resources/public/js/apps/extensions/*-min.js",
-            "./Resources/public/js/apps/plugins/*-min.js",
-            "./Resources/public/js/views/*-min.js",
-            "./Resources/public/js/views/fields/*-min.js",
-            "./Resources/public/js/views/navigation/*-min.js",
-            "./Resources/public/js/views/services/*-min.js",
-            "./Resources/public/js/views/services/plugins/*-min.js",
-            "./Resources/public/js/models/*-min.js",
-            "./Resources/public/js/models/structs/*-min.js",
-            "./Resources/public/js/extensions/*-min.js",
-            "./Resources/public/js/external/*-min.js",
-            "./Resources/public/js/services/*-min.js",
-            "./Resources/public/js/helpers/*-min.js",
-            "./Resources/public/js/views/actions/*-min.js",
-            "./Resources/public/js/views/tabs/*-min.js",
             instrumentDir,
             reportDir
         ],
         fontsDir = "Resources/public/fonts/",
         alloyBase = "vendor/ezsystems/platform-ui-assets-bundle/Resources/public/vendors/alloy-editor/",
         alloyDistAssets = alloyBase + "dist/alloy-editor/assets/",
         alloySkinBasePath = alloyBase + "src/ui/react/src/assets/sass/skin/",
-        alloySkinCSS =alloyDistAssets + "alloy-editor-ez.css",
-        fixFontsUrl;
+        alloySkinCSS = alloyDistAssets + "alloy-editor-ez.css",
+        fixFontsUrl,
+        alloyPluginsDir = "Resources/public/js/alloyeditor/",
+        alloyPluginsTestDir = "Tests/js/alloyeditor/";
 
     fixFontsUrl = function (url) {
         if ( url.indexOf("fonts/") !== 0 ) {
@@ -71,17 +60,6 @@ module.exports = function(grunt) {
             },
             all: [sourceFiles, testFiles]
         },
-        uglify: {
-            all: {
-                files: [
-                    {
-                        expand: true,     // Enable dynamic expansion.
-                        src: sourceFiles,
-                        ext: '-min.js'   // Dest filepaths will have this extension.
-                    }
-                ]
-            }
-        },
         clean: {
             all: {
                 src: trashFiles
@@ -109,7 +87,8 @@ module.exports = function(grunt) {
                         "./Resources/public/js/extensions",
                         "./Resources/public/js/external",
                         "./Resources/public/js/services",
-                        "./Resources/public/js/helpers"
+                        "./Resources/public/js/helpers",
+                        "./Resources/public/js/alloyeditor"
                     ],
                     outdir: 'api/'
                 }
@@ -186,6 +165,41 @@ module.exports = function(grunt) {
                 },
             }
         },
+        react: {
+            alloyplugins: {
+                files: [{
+                    expand: true,
+                    cwd: alloyPluginsDir,
+                    src: ['**/*.jsx'],
+                    dest: alloyPluginsDir,
+                    ext: '.js',
+                }, {
+                    expand: true,
+                    cwd: alloyPluginsTestDir,
+                    src: ['**/*.jsx'],
+                    dest: alloyPluginsTestDir,
+                    ext: '.js',
+                }],
+            },
+        },
+        replace: {
+            autogeneratedfiles: {
+                src: [alloyPluginsDir + '/toolbars/*.js', alloyPluginsDir + '/buttons/*.js'],
+                overwrite: true,
+                replacements: [{
+                    from: 'YUI.add(',
+                    to: function (matched) {
+                        var notice = "// **NOTICE:**\n";
+
+                        notice += "// THIS IS AN AUTO-GENERATED FILE\n";
+                        notice += "// DO YOUR MODIFICATIONS IN THE CORRESPONDING .jsx FILE\n";
+                        notice += "// AND REGENERATE IT WITH: grunt jsx\n";
+                        notice += "// END OF NOTICE\n";
+                        return notice + matched;
+                    },
+                }],
+            },
+        },
         watch: {
             options: {
                 atBegin: true
@@ -194,27 +208,32 @@ module.exports = function(grunt) {
                 files: [sourceFiles, testFiles, "Tests/js/**/*.html"],
                 tasks: ["shell:grover"]
             },
+            jsx: {
+                files: [alloyPluginsDir + "/**/*.jsx", alloyPluginsTestDir + "/**/*.jsx"],
+                tasks: ["jsx"],
+            },
         },
     });
 
     grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-istanbul');
     grunt.loadNpmTasks('grunt-contrib-yuidoc');
     grunt.loadNpmTasks('grunt-shell');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-rework');
+    grunt.loadNpmTasks('grunt-react');
+    grunt.loadNpmTasks('grunt-text-replace');
 
     grunt.registerTask('lint', ['jshint']);
-    grunt.registerTask('ugly', ['jshint', 'uglify']);
-    grunt.registerTask('test', ['jshint', 'shell:grover'] );
-    grunt.registerTask('coverage', ['jshint', 'clean', 'instrument', 'shell:groverCoverage'] );
+    grunt.registerTask('test', ['jshint', 'jsx', 'shell:grover'] );
+    grunt.registerTask('coverage', ['jshint', 'clean', 'jsx', 'instrument', 'shell:groverCoverage'] );
     grunt.registerTask('doc', ['yuidoc'] );
     grunt.registerTask('livedoc', ['shell:livedoc'] );
     grunt.registerTask('alloy-css', [
         'copy:alloy-skin', 'copy:alloy-override', 'shell:alloy-generateskin',
         'copy:alloy-font', 'rework:alloy-fontpath'
     ]);
+    grunt.registerTask('jsx', ['react:alloyplugins', 'replace:autogeneratedfiles']);
 };

Resources/config/css.yml

@@ -80,6 +80,7 @@ system:
                 - 'bundles/ezplatformui/css/modules/table-data.css'
                 - 'bundles/ezplatformui/css/modules/breadcrumbs.css'
                 - 'bundles/ezplatformui/css/modules/yui-calendar.css'
+                - 'bundles/ezplatformui/css/alloyeditor/toolbars/appendcontent.css'
             # theme stylesheets
                 - 'bundles/ezplatformui/css/theme/app.css'
                 - 'bundles/ezplatformui/css/theme/views/error.css'
@@ -142,3 +143,4 @@ system:
                 - 'bundles/ezplatformui/css/theme/modules/selection-table.css'
                 - 'bundles/ezplatformui/css/theme/modules/breadcrumbs.css'
                 - 'bundles/ezplatformui/css/theme/modules/yui-calendar.css'
+                - 'bundles/ezplatformui/css/theme/alloyeditor/toolbars/appendcontent.css'

Resources/config/yui.yml

@@ -13,6 +13,15 @@ system:
                 ez-alloyeditor:
                     requires: ['alloyeditor']
                     path: %ez_platformui.public_dir%/js/external/ez-alloyeditor.js
+                ez-alloyeditor-plugin-appendcontent:
+                    requires: ['ez-alloyeditor']
+                    path: %ez_platformui.public_dir%/js/alloyeditor/plugins/appendcontent.js
+                ez-alloyeditor-toolbar-appendcontent:
+                    requires: ['ez-alloyeditor']
+                    path: %ez_platformui.public_dir%/js/alloyeditor/toolbars/appendcontent.js
+                ez-alloyeditor-button-heading:
+                    requires: ['ez-alloyeditor']
+                    path: %ez_platformui.public_dir%/js/alloyeditor/buttons/heading.js
                 ez-platformuiapp:
                     requires:
                         - 'app'
@@ -401,7 +410,14 @@ system:
                     requires: ['ez-barview', 'ez-buttonactionview']
                     path: %ez_platformui.public_dir%/js/views/ez-richtextfocusmodebarview.js
                 ez-richtext-editview:
-                    requires: ['ez-fieldeditview', 'ez-alloyeditor', 'ez-richtextfocusmodebarview', 'richtexteditview-ez-template']
+                    requires:
+                        - 'ez-fieldeditview'
+                        - 'ez-alloyeditor'
+                        - 'ez-richtextfocusmodebarview'
+                        - 'ez-alloyeditor-plugin-appendcontent'
+                        - 'ez-alloyeditor-toolbar-appendcontent'
+                        - 'ez-alloyeditor-button-heading'
+                        - 'richtexteditview-ez-template'
                     path: %ez_platformui.public_dir%/js/views/fields/ez-richtext-editview.js
                 richtexteditview-ez-template:
                     type: 'template'

Resources/public/css/alloyeditor/toolbars/appendcontent.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ae-ui .ez-ae-appendcontent .ez-ae-labeled-button {
+    width: auto;
+    height: auto;
+}
+
+.ae-ui .ez-ae-appendcontent .ez-ae-label {
+    margin: 0;
+}

Resources/public/css/theme/alloyeditor/toolbars/appendcontent.css

@@ -0,0 +1,12 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-ae-appendcontent {
+    opacity: 0;
+}
+
+.ae-ui .ez-ae-appendcontent .ez-ae-label {
+    font-size: 85%;
+}

Resources/public/css/theme/views/fields/edit/richtext.css

@@ -3,12 +3,12 @@
  * For full copyright and license information view LICENSE file distributed with this source code.
  */
 
-.ez-view-richtexteditview .ez-richtext-editable {
+.ez-view-richtexteditview .ez-richtext-editor {
     outline: 1px solid #ccc;
     background: #fdfdfd;
 }
 
-.ez-view-richtexteditview .ez-richtext-editable,
+.ez-view-richtexteditview .ez-richtext-editor,
 .ez-view-richtexteditview .ez-editfield-row,
 .ez-view-richtexteditview .ez-editfield-input-area {
     transition: all 0.3s ease;
@@ -21,12 +21,16 @@
     transition: background,width,height 0.3s ease;
 }
 
-.ez-view-richtexteditview .ez-richtext-editable:focus {
+.ez-view-richtexteditview.is-editor-focused .ez-richtext-editor {
     outline: 1px solid #aaa;
     box-shadow: inset 0 0 6px #CCC;
     background: #fff;
 }
 
+.ez-view-richtexteditview .ez-richtext-editable:focus {
+    outline: 0;
+}
+
 .ez-view-richtexteditview.is-focused .ez-editfield-row,
 .ez-view-richtexteditview.is-focused .ez-editfield-input-area {
     background: #f3f3f3;
@@ -47,3 +51,24 @@
     -webkit-transform: translateX(0);
             transform: translateX(0);
 }
+
+.ez-view-richtexteditview .ez-richtext-add-content {
+    color: #999;
+    background: transparent;
+    border: 0;
+}
+
+.ez-view-richtexteditview .ez-richtext-add-content:focus {
+    outline: 0;
+}
+
+.ez-view-richtexteditview .ez-richtext-add-content:before {
+    color: #aaa;
+    margin: 0 auto;
+    display: block;
+    content: "+";
+    font-size: 450%;
+    width: 0.8em;
+    height: 0.8em;
+    text-align: center;
+}

Resources/public/css/views/fields/edit/richtext.css

@@ -17,7 +17,7 @@
     vertical-align: top;
 }
 
-.ez-view-richtexteditview .ez-richtext-editable {
+.ez-view-richtexteditview .ez-richtext-editor {
     display: inline-block;
     width: 100%;
     padding: 0 0.4em;
@@ -90,3 +90,11 @@
 .ez-view-richtexteditview.is-focused .ez-focusmodeactionbar-container {
     display: block;
 }
+
+.ez-view-richtexteditview .ez-ae-static-toolbar {
+    text-align: center;
+}
+
+.ez-view-richtexteditview .ez-richtext-add-content {
+    margin-bottom: 0.3em;
+}