EZP-28030: Alloy editor add support for more builtin buttons (#905)

* Add buttons to the text.js configuration * Add numbered list to Rich Text * Regnerate js files
ezsystems · Oct 10, 2017 · 47de3d3 · 47de3d3
1 parent f1117aa
commit 47de3d3
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 5 deletions.
diff --git a/Resources/public/js/alloyeditor/buttons/list.js b/Resources/public/js/alloyeditor/buttons/list.js
@@ -12,7 +12,7 @@ YUI.add('ez-alloyeditor-button-list', function (Y) {
 
     var AlloyEditor = Y.eZ.AlloyEditor,
         React = Y.eZ.React,
-        ButtonList;
+        ButtonList, ButtonListIndexed;
 
     /**
      * The ButtonList component represents a button to add an unordered list (ul).
@@ -66,5 +66,58 @@ YUI.add('ez-alloyeditor-button-list', function (Y) {
         },
     });
 
+    /**
+     * The ButtonListIndexed component represents a button to add an ordered list (ol).
+     *
+     * @uses AlloyEditor.ButtonCommand
+     * @uses AlloyEditor.ButtonStateClasses
+     *
+     * @class eZ.AlloyEditor.ButtonList
+     */
+    ButtonListIndexed = React.createClass({displayName: "ButtonListIndexed",
+        mixins: [
+            AlloyEditor.ButtonCommand,
+            AlloyEditor.ButtonStateClasses,
+        ],
+
+        statics: {
+            key: 'ezlistindexed'
+        },
+
+        getDefaultProps: function () {
+            return {
+                command: 'eZAddContent',
+                modifiesSelection: true,
+            };
+        },
+
+        /**
+         * Executes the eZAppendContent command to add an unordered list containing
+         * an empty list item.
+         *
+         * @method _addList
+         * @protected
+         */
+        _addList: function () {
+            this.execCommand({
+                tagName: 'ol',
+                content: '<li></li>',
+                focusElement: 'li',
+            });
+        },
+
+        render: function () {
+            var css = "ae-button ez-ae-labeled-button" + this.getStateClasses();
+
+            return (
+                React.createElement("button", {className: css, onClick: this._addList, tabIndex: this.props.tabIndex}, 
+                    React.createElement("span", {className: "ez-ae-icon ae-icon-numbered-list"}), 
+                    React.createElement("p", {className: "ez-ae-label"}, Y.eZ.trans('list', {}, 'onlineeditor'))
+                )
+            );
+        },
+    });
+
     AlloyEditor.Buttons[ButtonList.key] = AlloyEditor.ButtonList = ButtonList;
+    AlloyEditor.Buttons[ButtonListIndexed.key] = AlloyEditor.ButtonListIndexed = ButtonListIndexed;
 });
diff --git a/Resources/public/js/alloyeditor/buttons/list.jsx b/Resources/public/js/alloyeditor/buttons/list.jsx
@@ -7,7 +7,7 @@ YUI.add('ez-alloyeditor-button-list', function (Y) {
 
     var AlloyEditor = Y.eZ.AlloyEditor,
         React = Y.eZ.React,
-        ButtonList;
+        ButtonList, ButtonListIndexed;
 
     /**
      * The ButtonList component represents a button to add an unordered list (ul).
@@ -61,5 +61,58 @@ YUI.add('ez-alloyeditor-button-list', function (Y) {
         },
     });
 
+    /**
+     * The ButtonListIndexed component represents a button to add an ordered list (ol).
+     *
+     * @uses AlloyEditor.ButtonCommand
+     * @uses AlloyEditor.ButtonStateClasses
+     *
+     * @class eZ.AlloyEditor.ButtonList
+     */
+    ButtonListIndexed = React.createClass({
+        mixins: [
+            AlloyEditor.ButtonCommand,
+            AlloyEditor.ButtonStateClasses,
+        ],
+
+        statics: {
+            key: 'ezlistindexed'
+        },
+
+        getDefaultProps: function () {
+            return {
+                command: 'eZAddContent',
+                modifiesSelection: true,
+            };
+        },
+
+        /**
+         * Executes the eZAppendContent command to add an unordered list containing
+         * an empty list item.
+         *
+         * @method _addList
+         * @protected
+         */
+        _addList: function () {
+            this.execCommand({
+                tagName: 'ol',
+                content: '<li></li>',
+                focusElement: 'li',
+            });
+        },
+
+        render: function () {
+            var css = "ae-button ez-ae-labeled-button" + this.getStateClasses();
+
+            return (
+                <button className={css} onClick={this._addList} tabIndex={this.props.tabIndex}>
+                    <span className="ez-ae-icon ae-icon-numbered-list"></span>
+                    <p className="ez-ae-label">{Y.eZ.trans('list', {}, 'onlineeditor')}</p>
+                </button>
+            );
+        },
+    });
+
     AlloyEditor.Buttons[ButtonList.key] = AlloyEditor.ButtonList = ButtonList;
+    AlloyEditor.Buttons[ButtonListIndexed.key] = AlloyEditor.ButtonListIndexed = ButtonListIndexed;
 });
diff --git a/Resources/public/js/alloyeditor/toolbars/config/text.js b/Resources/public/js/alloyeditor/toolbars/config/text.js
@@ -21,8 +21,7 @@ YUI.add('ez-alloyeditor-toolbar-config-text', function (Y) {
      */
     Y.eZ.AlloyEditorToolbarConfig.Text = {
         name: 'text',
-        buttons: ['bold', 'italic', 'underline', 'link'],
+        buttons: ['bold', 'italic', 'underline', 'subscript', 'superscript', 'quote', 'strike', 'link'],
         test: AlloyEditor.SelectionTest.text
     };
 });
-
diff --git a/Resources/public/js/views/fields/ez-richtext-editview.js b/Resources/public/js/views/fields/ez-richtext-editview.js
@@ -450,7 +450,7 @@ YUI.add('ez-richtext-editview', function (Y) {
                             tabIndex: 1
                         },
                         ezadd: {
-                            buttons: ['ezheading', 'ezparagraph', 'ezlist', 'ezimage', 'ezembed', 'eztable'],
+                            buttons: ['ezheading', 'ezparagraph', 'ezlist', 'ezlistindexed', 'ezimage', 'ezembed', 'eztable'],
                             tabIndex: 2,
                         },
                     };