MAGETWO-90441: Allow inline editing of Heading from stage

- set default text align value to empty
- extend select component to allow options with empty values

Author: anthoula

app/code/Magento/PageBuilder/etc/adminhtml/di.xml

@@ -107,7 +107,7 @@
             <argument name="optionsSize" xsi:type="string">small</argument>
             <argument name="optionsData" xsi:type="array">
                 <item name="0" xsi:type="array">
-                    <item name="value" xsi:type="string">default</item>
+                    <item name="value" xsi:type="string"/>
                     <item name="title" xsi:type="string" translate="true">Default</item>
                 </item>
                 <item name="1" xsi:type="array">

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form.xml

@@ -23,7 +23,7 @@
             <label translate="true">Advanced</label>
             <collapsible>true</collapsible>
         </settings>
-        <field name="text_align" sortOrder="10" formElement="select">
+        <field name="text_align" sortOrder="10" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/visual-select.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'underscore',
+    'Magento_Ui/js/form/element/select'
+], function (_, Select) {
+    'use strict';
+
+    return Select.extend({
+
+        /**
+         * Parses incoming options, considers options with undefined value property
+         *     as caption
+         *
+         * @param  {Array} nodes
+         * @return {Object} captionValue
+         */
+        parseOptions: function (nodes, captionValue) {
+            var caption,
+                value;
+
+            nodes = _.map(nodes, function (node) {
+                value = node.value;
+
+                if (value === null || value === captionValue) {
+                    if (_.isUndefined(caption)) {
+                        caption = node.label;
+                    }
+                    // Allow nodes with empty values to return
+                    return node;
+                } else {
+                    return node;
+                }
+            });
+
+            return {
+                options: _.compact(nodes),
+                caption: _.isString(caption) ? caption : false
+            };
+        },
+
+        /**
+         * Recursively set to object item like value and item.value like key.
+         *
+         * @param {Array} data
+         * @param {Object} result
+         * @returns {Object}
+         */
+        indexOptions: function (data, result) {
+            var value;
+
+            result = result || {};
+
+            data.forEach(function (item) {
+                value = item.value;
+
+                if (Array.isArray(value)) {
+                    indexOptions(value, result);
+                } else {
+                    result[value] = item;
+                }
+            });
+
+            return result;
+        },
+
+        /**
+         * Sets 'data' to 'options' observable array, if instance has
+         * 'customEntry' property set to true, calls 'setHidden' method
+         *  passing !options.length as a parameter
+         *
+         * @param {Array} data
+         * @returns {Object} Chainable
+         */
+        setOptions: function (data) {
+            var captionValue = this.captionValue || '',
+                result = this.parseOptions(data, captionValue),
+                isVisible;
+
+            this.indexedOptions = this.indexOptions(result.options);
+
+            this.options(result.options);
+
+            if (!this.caption()) {
+                this.caption(result.caption);
+            }
+
+            if (this.customEntry) {
+                isVisible = !!result.options.length;
+
+                this.setVisible(isVisible);
+                this.toggleInput(!isVisible);
+            }
+
+            return this;
+        }
+    });
+});