PB-265: Video background for Banner

- fix tinymce zindex overlapping sibling banner

Author: omiroshnichenko

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

@@ -117,22 +117,23 @@
     .pagebuilder-overlay {
         padding: 30px;
         position: relative;
+        z-index: 2;
     }
 
     .video-overlay {
-        z-index: auto;
+        z-index: 1;
     }
 
     &.jarallax {
-        position: unset!important;
+        z-index: auto!important;
     }
 
     [id*='jarallax-container'] {
-        z-index: auto!important;
+        z-index: 0!important;
 
         > iframe,
         > video {
-            z-index: auto!important;
+            z-index: 0!important;
         }
     }
 }

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

@@ -78,6 +78,21 @@ export default class Preview extends BasePreview {
         "video_source",
     ];
 
+    /**
+     * Selector for banner overlay
+     */
+    private bannerOverlaySelector = ".pagebuilder-overlay";
+
+    /**
+     * Default banner overlay z-index
+     */
+    private defaultOverlayZIndex = 2;
+
+    /**
+     * Banner overlay z-index with active editor
+     */
+    private activeEditorOverlayZIndex = 3;
+
     /**
      * Debounce and defer the init of Jarallax
      *
@@ -114,9 +129,6 @@ export default class Preview extends BasePreview {
                         speed: 1,
                         videoPlayOnlyVisible: (this.contentType.dataStore.get("video_play_only_visible") as string) === "true",
                         videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
-                        onInit() {
-                            $(this.image.$container).prependTo($(this.image.$container).parent());
-                        },
                     },
                 );
                 // @ts-ignore
@@ -237,7 +249,13 @@ export default class Preview extends BasePreview {
 
         if (focus) {
             wysiwygConfig.adapter.settings.auto_focus = this.element.id;
-            wysiwygConfig.adapter.settings.init_instance_callback = () => {
+            wysiwygConfig.adapter.settings.init_instance_callback = (editor) => {
+                editor.on("focus", () => {
+                    $(this.element).parents(this.bannerOverlaySelector).zIndex(this.activeEditorOverlayZIndex);
+                });
+                editor.on("blur", () => {
+                    $(this.element).parents(this.bannerOverlaySelector).zIndex(this.defaultOverlayZIndex);
+                });
                 _.defer(() => {
                     this.element.blur();
                     this.element.focus();