EZP-29802: Inline custom tags support

src/bundle/Resources/encore/ez.js.config.js

@@ -63,6 +63,9 @@ const alloyEditor = [
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-customtag.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-customtag-edit.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-customtag-update.js'),
+    path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag.js'),
+    path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag-edit.js'),
+    path.resolve(__dirname, '../public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag-update.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/ez-add.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/plugins/ez-add-content.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/plugins/ez-move-element.js'),
@@ -83,6 +86,7 @@ const alloyEditor = [
     path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/config/ez-image.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/config/ez-image-link.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/config/ez-custom-tag.js'),
+    path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/config/ez-inline-custom-tag.js'),
     path.resolve(__dirname, '../public/js/alloyeditor/src/toolbars/config/ez-custom-style.js'),
 ];
 const fieldTypes = [];

src/bundle/Resources/public/js/alloyeditor/src/base/ez-blocktextalign.js

@@ -59,10 +59,9 @@ export default class EzBlockTextAlign extends Component {
         const icon = '/bundles/ezplatformadminui/img/ez-icons.svg#' + this.props.iconName;
 
         return (
-            <button className={cssClass} onClick={this.applyStyle.bind(this)}
-                tabIndex={this.props.tabIndex} title={this.props.label}>
-                <svg className='ez-icon ez-btn-ae__icon'>
-                    <use xlinkHref={icon}></use>
+            <button className={cssClass} onClick={this.applyStyle.bind(this)} tabIndex={this.props.tabIndex} title={this.props.label}>
+                <svg className="ez-icon ez-btn-ae__icon">
+                    <use xlinkHref={icon} />
                 </svg>
             </button>
         );

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-customtag-edit.js

@@ -24,6 +24,10 @@ export default class EzBtnCustomTagEdit extends EzWidgetButton {
         }, {});
     }
 
+    getUpdateBtnName() {
+        return `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+    }
+
     /**
      * Lifecycle. Renders the UI of the button.
      *
@@ -32,7 +36,7 @@ export default class EzBtnCustomTagEdit extends EzWidgetButton {
      */
     render() {
         if (this.props.renderExclusive) {
-            const buttonName = `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+            const buttonName = this.getUpdateBtnName();
             const ButtonComponent = AlloyEditor[buttonName];
 
             return <ButtonComponent values={this.getValues()} {...this.props} />;

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-customtag-update.js

@@ -16,6 +16,12 @@ export default class EzBtnCustomTagUpdate extends EzWidgetButton {
         };
     }
 
+    componentDidMount() {
+        if (!Object.keys(this.attributes).length) {
+            this.saveCustomTag();
+        }
+    }
+
     /**
      * Renders the text input.
      *

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-customtag.js

@@ -4,6 +4,10 @@ import AlloyEditor from 'alloyeditor';
 import EzWidgetButton from '../base/ez-widgetbutton';
 
 export default class EzBtnCustomTag extends EzWidgetButton {
+    getUpdateBtnName() {
+        return `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+    }
+
     /**
      * Lifecycle. Renders the UI of the button.
      *
@@ -12,7 +16,7 @@ export default class EzBtnCustomTag extends EzWidgetButton {
      */
     render() {
         if (this.props.renderExclusive) {
-            const buttonName = `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+            const buttonName = this.getUpdateBtnName();
             const ButtonComponent = AlloyEditor[buttonName];
 
             return <ButtonComponent createNewTag="true" values={this.values} {...this.props} />;

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-embedinline.js

@@ -15,7 +15,7 @@ export default class EzBtnEmbedInline extends EzBtnEmbed {
      * @return {Object} The content which should be rendered.
      */
     render() {
-        const css = 'ae-button ez-btn-ae ez-btn-ae--embed';
+        const css = 'ae-button ez-btn-ae ez-btn-ae--embed-inline';
         const label = Translator.trans(/*@Desc("Embed")*/ 'embed_btn.label', {}, 'alloy_editor');
 
         return (

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag-edit.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import EzBtnCustomTagEdit from './ez-btn-customtag-edit';
+
+export default class EzBtnInlineCustomTagEdit extends EzBtnCustomTagEdit {
+    getUpdateBtnName() {
+        return `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+    }
+}
+
+eZ.addConfig('ezAlloyEditor.ezBtnInlineCustomTagEdit', EzBtnInlineCustomTagEdit);
+
+EzBtnInlineCustomTagEdit.propTypes = {
+    editor: PropTypes.object.isRequired,
+    label: PropTypes.string.isRequired,
+    tabIndex: PropTypes.number.isRequired,
+};

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag-update.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import EzBtnCustomTagUpdate from './ez-btn-customtag-update';
+
+export default class EzBtnInlineCustomTagUpdate extends EzBtnCustomTagUpdate {
+    /**
+     * Creates the custom tag in AlloyEditor.
+     *
+     * @method saveCustomTag
+     */
+    saveCustomTag() {
+        const { createNewTag, editor } = this.props;
+        const nativeEditor = editor.get('nativeEditor');
+        const selection = nativeEditor.getSelectedHtml();
+
+        nativeEditor.unlockSelection(true);
+
+        if (createNewTag) {
+            this.execCommand();
+        }
+
+        const widget = this.getWidget() || this.widget;
+        const configValues = Object.assign({}, this.state.values);
+
+        widget.setFocused(true);
+
+        if (createNewTag) {
+            widget.setName(this.customTagName);
+            widget.setWidgetContent(selection.getHtml());
+            widget.renderIcon();
+        }
+
+        widget.clearConfig();
+
+        Object.keys(this.attributes).forEach((key) => {
+            widget.setConfig(key, configValues[key].value);
+        });
+    }
+}
+
+eZ.addConfig('ezAlloyEditor.ezBtnInlineCustomTagUpdate', EzBtnInlineCustomTagUpdate);
+
+EzBtnInlineCustomTagUpdate.defaultProps = {
+    command: 'ezinlinecustomtag',
+    modifiesSelection: true,
+};
+
+EzBtnInlineCustomTagUpdate.propTypes = {
+    editor: PropTypes.object.isRequired,
+    label: PropTypes.string.isRequired,
+    tabIndex: PropTypes.number.isRequired,
+};

src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-inlinecustomtag.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import EzBtnCustomTag from './ez-btn-customtag';
+
+export default class EzBtnInlineCustomTag extends EzBtnCustomTag {
+    getUpdateBtnName() {
+        return `ezBtn${this.customTagName.charAt(0).toUpperCase() + this.customTagName.slice(1)}Update`;
+    }
+}
+
+eZ.addConfig('ezAlloyEditor.ezBtnInlineCustomTag', EzBtnInlineCustomTag);
+
+EzBtnInlineCustomTag.propTypes = {
+    editor: PropTypes.object.isRequired,
+    label: PropTypes.string.isRequired,
+    tabIndex: PropTypes.number.isRequired,
+};