MC-3735: Allow inline WYSIWYG editing of slides

- On small width (less than 410px) do not show the "Upload Image | Select from Gallery" buttons on hover

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -30,6 +30,14 @@
                 width: 100%;
             }
         }
+
+        .slider-small-width {
+            .pagebuilder-image-uploader-container {
+                .pagebuilder-options {
+                    display: none;
+                }
+            }
+        }
     }
 
     &.pagebuilder-content-type-active {

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js

@@ -40,7 +40,7 @@ export default class Preview extends PreviewCollection {
     protected events: DataObject = {
         columnWidthChangeAfter: "onColumnResize",
     };
-    private element: Element;
+    private element: HTMLElement;
     private childSubscribe: KnockoutSubscription;
     private contentTypeHeightReset: boolean;
 
@@ -177,7 +177,7 @@ export default class Preview extends PreviewCollection {
      */
     public onFocusOut(data: PreviewCollection, event: JQueryEventObject) {
         if (_.isNull(event.relatedTarget) ||
-            event.relatedTarget && !$.contains(event.currentTarget as Element, event.relatedTarget)
+            event.relatedTarget && !$.contains(event.currentTarget as HTMLElement, event.relatedTarget)
         ) {
             this.setFocusedSlide(null);
         }
@@ -199,11 +199,12 @@ export default class Preview extends PreviewCollection {
     /**
      * After child render record element
      *
-     * @param {Element} element
+     * @param {HTMLElement} element
      */
-    public afterChildrenRender(element: Element): void {
+    public afterChildrenRender(element: HTMLElement): void {
         super.afterChildrenRender(element);
         this.element = element;
+        this.checkWidth();
     }
 
     /**
@@ -418,6 +419,18 @@ export default class Preview extends PreviewCollection {
     private onColumnResize(params: any) {
         setTimeout(() => {
             $(this.element).slick("setPosition");
+            this.checkWidth();
         }, 250);
     }
+
+    /**
+     * Check width and add class that marks element as small
+     */
+    private checkWidth() {
+        if (this.element.offsetWidth < 410) {
+            this.element.classList.add("slider-small-width");
+        } else {
+            this.element.classList.remove("slider-small-width");
+        }
+    }
 }