From 60f81897a8a6463dd540bb26b408903af9bb2ccd Mon Sep 17 00:00:00 2001
From: Ihor Romaniuk <ihor.romaniuk@raccoongang.com>
Date: Tue, 27 Sep 2022 18:21:14 +0300
Subject: [PATCH] fix: add ability to observe iframe content height on content
 load and change (#30942)

These changes allow the ability to adapt to update/resize the unit content after loading and interaction. Main cases were with Open Response Assessment (ORA) and Discussion blocks.
---
 lms/templates/courseware/courseware-chromeless.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html
index b99a41807e..071295d6e3 100644
--- a/lms/templates/courseware/courseware-chromeless.html
+++ b/lms/templates/courseware/courseware-chromeless.html
@@ -118,7 +118,7 @@ ${HTML(fragment.foot_html())}
   (function() {
     // If this view is rendered in an iframe within the learning microfrontend app
     // it will report the height of its contents to the parent window when the
-    // document loads, window resizes, or DOM resizes.
+    // document loads, window resizes, or DOM mutates.
     if (window !== window.parent) {
       document.body.className += ' view-in-mfe';
       var lastHeight = window.offsetHeight;
@@ -126,7 +126,7 @@ ${HTML(fragment.foot_html())}
       var contentElement = document.getElementById('content');
 
       function dispatchResizeMessage(event) {
-        // Note: event is actually an Array of ResizeObserverEntry objects when fired from the ResizeObserver
+        // Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
         var isLoadEvent = event.type === 'load';
         var newHeight = contentElement.offsetHeight;
         var newWidth = contentElement.offsetWidth;
@@ -189,8 +189,11 @@ ${HTML(fragment.foot_html())}
         window.scrollTo(0, 0);
       }
 
-      const observer = new ResizeObserver(dispatchResizeMessage);
-      observer.observe(document.body);
+      // Create an observer instance linked to the callback function
+      const observer = new MutationObserver(dispatchResizeMessage);
+
+      // Start observing the target node for configured mutations
+      observer.observe(document.body, { attributes: true, childList: true, subtree: true });
 
       window.addEventListener('load', dispatchResizeMessage);
       window.addEventListener('resize', dispatchResizeMessage);