EZEE-2914: Custom inline style does not update textarea after click on (

#1192)
ezsystems · Jan 21, 2020 · 8728a0b · 8728a0b
1 parent d12bdeb
commit 8728a0b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/src/bundle/Resources/encore/ez.js.config.js b/src/bundle/Resources/encore/ez.js.config.js
@@ -46,6 +46,7 @@ const alloyEditor = [
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-underline.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-subscript.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-superscript.js'),
+    path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-styleslistitem.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-quote.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-strike.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-link.js'),

diff --git a/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-styleslistitem.js b/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-styleslistitem.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import AlloyEditor from 'alloyeditor';
+
+export default class EzBtnStylesListItem extends AlloyEditor.ButtonStylesListItem {
+    /**
+     * Lifecycle. Renders the UI of the button.
+     *
+     * @instance
+     * @memberof ButtonStylesListItem
+     * @method render
+     * @return {Object} The content which should be rendered.
+     */
+    render() {
+        const className = this.props.name === this.props.activeStyle ? 'ae-toolbar-element active' : 'ae-toolbar-element';
+
+        return (
+            <button
+                className={className}
+                dangerouslySetInnerHTML={{ __html: this._preview }}
+                onClick={() => {
+                    this._onClick();
+                    this.fireCustomUpdateEvent();
+                }}
+                tabIndex={this.props.tabIndex}
+            />
+        );
+    }
+
+    fireCustomUpdateEvent() {
+        const nativeEditor = this.props.editor.get('nativeEditor');
+
+        nativeEditor.fire('customUpdate');
+    }
+}
+
+AlloyEditor.ButtonStylesListItem = AlloyEditor.EzBtnStylesListItem = EzBtnStylesListItem;
+eZ.addConfig('ezAlloyEditor.ezBtnStylesListItem', EzBtnStylesListItem);
diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,7 @@ module.exports = {
         ezBtnUnderline: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-underline.js',
         ezBtnSubscript: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-subscript.js',
         ezBtnSuperscript: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-superscript.js',
+        ezBtnStylesListItem: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-styleslistitem.js',
         ezBtnQuote: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-quote.js',
         ezBtnStrike: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-strike.js',
         ezBtnLink: './src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-link.js',