feat: Changes in xblock_v2 to support studio_view [FC-0076] (#36029)

Updates to support studio_view (editors) in xblock_v2 iframe.

- Send a message when cancel button is clicked on xblock_v2 iframe only in studio_view
- Send a message when save.end event is notified on xblock_v2 iframe.
- Send notify function in runtime. This is to avoid errors when saving the Xblock

common/templates/xblock_v2/xblock_iframe.html

@@ -215,6 +215,16 @@
                 }
                 return url;
             },
+            notify: (eventName, data) => {
+                /** 
+                 * Used in `studio_view` to notify events and errors
+                 **/
+                window.parent.postMessage({
+                    type: 'xblock-event',
+                    eventName,
+                    data,
+                }, '*');
+            }
         };
 
         /**
@@ -258,6 +268,25 @@
                 const blockJS = { element };
                 callback(blockJS);
             }
+
+            if ('{{ view_name | safe }}' === 'studio_view') {
+              // Used when rendering the `studio_view`, in order to avoid open a new tab on click cancel or save
+              const selectors = [
+                  '.cancel-button',
+                  '.save-button',
+                  '.action-cancel',
+                  '.action-save',
+              ];
+
+              for (const selector of selectors) {
+                  const queryObject = document.querySelector(selector);
+                  if (queryObject) {
+                      queryObject.addEventListener('click', function() {
+                          event.preventDefault();
+                      });
+                  }
+              }
+            }
         }
 
         // Recursively initialize the JavaScript code of each XBlock:

openedx/core/djangoapps/xblock/rest_api/views.py

@@ -122,6 +122,7 @@ def embed_block_view(request, usage_key: UsageKeyV2, view_name: str):
         'fragment': fragment,
         'handler_urls_json': json.dumps(handler_urls),
         'lms_root_url': lms_root_url,
+        'view_name': view_name,
         'is_development': settings.DEBUG,
     }
     response = render(request, 'xblock_v2/xblock_iframe.html', context, content_type='text/html')
@@ -322,10 +323,6 @@ def post(self, request, usage_key, version: LatestVersion | int = LatestVersion.
         # Save after the callback so any changes made in the callback will get persisted.
         block.save()
 
-        # Signal that we've modified this block
-        context_impl = get_learning_context_impl(usage_key)
-        context_impl.send_block_updated_event(usage_key)
-
         block_dict = {
             "id": str(block.usage_key),
             "display_name": get_block_display_name(block),  # note this is also present in metadata

openedx/core/djangoapps/xblock/runtime/learning_core_runtime.py

@@ -314,6 +314,10 @@ def save_block(self, block):
             )
         self.authored_data_store.mark_unchanged(block)
 
+        # Signal that we've modified this block
+        learning_context = get_learning_context_impl(usage_key)
+        learning_context.send_block_updated_event(usage_key)
+
     def _get_component_from_usage_key(self, usage_key):
         """
         Note that Components aren't ever really truly deleted, so this will