feat: Listen to xBlock interaction events

refactor: some refactoring

feat: post msg for new editor

cms/static/js/views/container.js

@@ -70,6 +70,16 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView)
                     newParent = undefined;
                 },
                 update: function(event, ui) {
+                    try {
+                        window.parent.postMessage(
+                            {
+                                type: 'refreshPositions',
+                                payload: {}
+                            }, document.referrer
+                        );
+                    } catch (e) {
+                        console.error(e);
+                    }
                     // When dragging from one ol to another, this method
                     // will be called twice (once for each list). ui.sender will
                     // be null if the change is related to the list the element

cms/static/js/views/pages/container.js

@@ -126,6 +126,12 @@ function($, _, Backbone, gettext, BasePage,
 
             }
 
+            window.addEventListener('message', (event) => {
+                if (event.data && event.data.type === 'refreshXBlock') {
+                    this.render();
+                }
+            });
+
             this.listenTo(Backbone, 'move:onXBlockMoved', this.onXBlockMoved);
         },
 
@@ -380,11 +386,14 @@ function($, _, Backbone, gettext, BasePage,
         editXBlock: function(event, options) {
             event.preventDefault();
             try {
-                if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
+                if (this.options.isIframeEmbed && event.currentTarget.className === 'access-button') {
+                    return window.parent.postMessage(
                         {
-                            type: 'editXBlock',
-                            payload: {}
+                            type: 'manageXBlockAccess',
+                            payload: {
+                                id: this.findXBlockElement(event.target).data('locator'),
+                                targetElementClassName: event.currentTarget.className,
+                            }
                         }, document.referrer
                     );
                 }
@@ -404,7 +413,23 @@ function($, _, Backbone, gettext, BasePage,
                         || (useNewVideoEditor === 'True' && blockType === 'video')
                         || (useNewProblemEditor === 'True' && blockType === 'problem')
                 ) {
-                    var destinationUrl = primaryHeader.attr('authoring_MFE_base_url') + '/' + blockType + '/' + encodeURI(primaryHeader.attr('data-usage-id'));
+                    var pathToNewXBlockEditor = `/${blockType}/${encodeURI(primaryHeader.attr('data-usage-id'))}`;
+                    var destinationUrl = `${primaryHeader.attr('authoring_MFE_base_url')}${pathToNewXBlockEditor}`;
+
+                    try {
+                        if (this.options.isIframeEmbed) {
+                            return window.parent.postMessage(
+                                {
+                                    type: 'newXBlockEditor',
+                                    payload: {
+                                        url: pathToNewXBlockEditor,
+                                    }
+                                }, document.referrer
+                            );
+                        }
+                    } catch (e) {
+                        console.error(e);
+                    }
                     window.location.href = destinationUrl;
                     return;
                 }
@@ -497,10 +522,12 @@ function($, _, Backbone, gettext, BasePage,
             event.preventDefault();
             try {
                 if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
+                    return window.parent.postMessage(
                         {
                             type: 'copyXBlock',
-                            payload: {}
+                            payload: {
+                                id: this.findXBlockElement(event.target).data('locator')
+                            }
                         }, document.referrer
                     );
                 }
@@ -554,10 +581,12 @@ function($, _, Backbone, gettext, BasePage,
             event.preventDefault();
             try {
                 if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
+                    return window.parent.postMessage(
                         {
                             type: 'duplicateXBlock',
-                            payload: {}
+                            payload: {
+                                id: this.findXBlockElement(event.target).data('locator')
+                            }
                         }, document.referrer
                     );
                 }
@@ -597,10 +626,12 @@ function($, _, Backbone, gettext, BasePage,
             event.preventDefault();
             try {
                 if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
+                    return window.parent.postMessage(
                         {
                             type: 'deleteXBlock',
-                            payload: {}
+                            payload: {
+                                id: this.findXBlockElement(event.target).data('locator')
+                            }
                         }, document.referrer
                     );
                 }

cms/static/sass/course-unit-mfe-iframe-bundle.scss

@@ -52,6 +52,7 @@
       &:hover {
         background-color: $primary;
         border-color: $transparent;
+        color: $white;
       }
 
       &:focus {
@@ -649,3 +650,7 @@ select {
 .wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
   margin-top: 0;
 }
+
+.wrapper-xblock .xblock-header-primary .header-actions .wrapper-nav-sub {
+  z-index: 15;
+}