MC-3735: Allow inline WYSIWYG editing of slides

- Add textarea as fallback
- Add test that cover all appearances
- Activate inline mode on slide container click

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml

@@ -163,8 +163,8 @@
         <element name="slideBorderRadiusStyle" type="button" selector="div[style*='border-radius: {{arg1}}']" parameterized="true"/>
         <element name="editFormBackgroundImagePreview" type="button" selector="//input[@name='background_image']/ancestor::div[@class='admin__field-control']/descendant::img"/>
         <element name="editFormBackgroundMobileImagePreview" type="button" selector="//input[@name='mobile_image']/ancestor::div[@class='admin__field-control']/descendant::img"/>
-        <element name="tinymce" type="button" selector="(//div[contains(@class,'pagebuilder-slide-wrapper')])[{{arg1}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
-        <element name="tinymcePanel" type="button" selector="(//div[contains(@class,'pagebuilder-slide-wrapper')])[{{arg1}}]//div[contains(@class, 'mce-tinymce-inline')]" parameterized="true"/>
+        <element name="tinymce" type="button" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg1}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
+        <element name="tinymcePanel" type="button" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg1}}]//div[contains(@class, 'mce-tinymce-inline')]" parameterized="true"/>
     </section>
     <section name="SlideOnConfigurationPanel">
         <element name="tinyMCEIFrame" type="text" selector="pagebuilder_slide_form_content_ifr"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideCommonTest.xml

@@ -521,9 +521,11 @@
                     <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/wysiwyg/tinymce4</item>
                     <item name="component_initializers" xsi:type="array">
                         <item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/component-initializer</item>
+                        <item name="slide" xsi:type="string">Magento_PageBuilder/js/content-type/slide/wysiwyg/tinymce4/component-initializer</item>
                     </item>
                     <item name="config_modifiers" xsi:type="array">
                         <item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/config-modifier</item>
+                        <item name="slide" xsi:type="string">Magento_PageBuilder/js/content-type/slide/wysiwyg/tinymce4/config-modifier</item>
                     </item>
                     <item name="mode" xsi:type="string">inline</item>
                     <item name="minToolbarWidth" xsi:type="number">360</item>

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

@@ -9,6 +9,7 @@
 
 .pagebuilder-slide {
     background-color: @color-gray98;
+    cursor: text;
 
     .pagebuilder-empty-slide {
         color: @color-gray65-lighten;
@@ -67,4 +68,17 @@
             box-shadow: 0 0 0 1px rgb(153, 153, 153);
         }
     }
+
+    .inline-wysiwyg-textarea {
+        border: 0;
+        margin: 2px 0;
+        min-height: 50px;
+        min-width: 100%;
+        padding: 5px;
+        resize: none;
+
+        &:focus {
+            resize: vertical;
+        }
+    }
 }