From 6f460dd660e77921d04825958bab271154a284a8 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 26 Mar 2024 13:14:07 +0200
Subject: [PATCH 1/5] fix: [AXIMST-719] fixed xblock problems

---
 src/course-unit/course-xblock/xblock-content/XBlockContent.jsx | 2 +-
 .../xblock-content/iframe-wrapper/iframe-wrapper.js            | 3 +++
 src/course-unit/data/api.js                                    | 2 +-
 src/course-unit/data/thunk.js                                  | 1 -
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
index 39ec9e569c..8774b2a18f 100644
--- a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
+++ b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
@@ -111,7 +111,7 @@ const XBlockContent = ({
           referrerPolicy="origin"
           frameBorder={0}
           scrolling="no"
-          onLoad={() => setIsLoading(!isLoading)}
+          onLoad={() => setIsLoading(false)}
           sandbox={[
             'allow-forms',
             'allow-modals',
diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
index 08482d7693..77e7f2d45b 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
@@ -62,6 +62,9 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/debug_toolbar/css/toolbar.css">
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/vendor/html5-input-polyfills/number-polyfill.css">
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/WordCloudBlockDisplay.css">
+      <link rel="stylesheet" href="${studioBaseUrl}/assets/courseware/v1/911f0d1ac424861100db6c65e2504841/asset-v1:edx+1245+2024+type@asset+block/cm_style_guide_demox.css">
+      <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/vendor/normalize.css">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
       <link rel="stylesheet" href="XBlockIFrame.css">
 
       <!-- JS scripts that can be used by XBlocks -->
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index d4b49e7455..b7b6c6127e 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -172,7 +172,7 @@ export async function setXBlockOrderList(blockId, children) {
 export async function getXBlockIFrameData(itemId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getXBlockContainerPreview(itemId));
-
+  console.log('DATA ===>', data);
   return camelCaseObject(data);
 }
 
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
index 8dca7e9c73..45ff791e35 100644
--- a/src/course-unit/data/thunk.js
+++ b/src/course-unit/data/thunk.js
@@ -273,7 +273,6 @@ export function setXBlockOrderListQuery(blockId, xblockListIds, restoreCallback)
 export function fetchXBlockIFrameHtmlAndResourcesQuery(xblockId) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));
 
     try {
       const xblockIFrameData = await getXBlockIFrameData(xblockId);

From ea82d85974a7626e25377a577c130feedcd6133d Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 26 Mar 2024 15:57:59 +0200
Subject: [PATCH 2/5] fix: added asset and static replacer

---
 .../xblock-content/iframe-wrapper/iframe-wrapper.js         | 6 +++---
 .../xblock-content/iframe-wrapper/static/XBlockIFrame.css   | 4 ++++
 src/course-unit/data/api.js                                 | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
index 77e7f2d45b..53691603c5 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
@@ -249,13 +249,13 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
   modifiedHtml = modifyVoidHrefToPreventDefault(html);
   // Due to the use of edx-platform scripts in MFE, it is necessary to ensure that the paths for static files
   // and important data-attributes are correct.
-  modifiedHtml = modifiedHtml.replace(/url\(&#39;\/assets/g, `url('${studioBaseUrl}/assets`);
+  modifiedHtml = modifiedHtml.replace(/url\(&#39;\/asset/g, `url('${studioBaseUrl}/asset`);
   modifiedHtml = modifiedHtml.replace(/src="\/asset/g, `src="${studioBaseUrl}/asset`);
   modifiedHtml = modifiedHtml.replace(/src=&#34;\/asset/g, `src=&#34;${studioBaseUrl}/asset`);
   modifiedHtml = modifiedHtml.replace(/href="\/asset/g, `href="${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replace(/src=&#34;\/static\/studio/g, `src=&#34;${studioBaseUrl}/static/studio`);
+  modifiedHtml = modifiedHtml.replace(/src=&#34;\/static/g, `src=&#34;${studioBaseUrl}/static`);
   modifiedHtml = modifiedHtml.replace(/src="\/static/g, `src="${studioBaseUrl}/static`);
-  modifiedHtml = modifiedHtml.replace(/data-target="\/preview\/xblock/g, `data-target="${studioBaseUrl}/preview/xblock`);
+  modifiedHtml = modifiedHtml.replace(/data-target="\/preview/g, `data-target="${studioBaseUrl}/preview`);
   modifiedHtml = modifiedHtml.replace(/data-url="\/preview/g, `data-url="${studioBaseUrl}/preview`);
   modifiedHtml = modifiedHtml.replace(/src="\/media/g, `src="${studioBaseUrl}/media`);
 
diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/static/XBlockIFrame.css b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/static/XBlockIFrame.css
index 9a2dcfb34e..da5fdc2ffd 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/static/XBlockIFrame.css
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/static/XBlockIFrame.css
@@ -5,3 +5,7 @@
 .wrapper-xblock {
   border: none;
 }
+
+body .poll-block-form-wrapper {
+  display: block;
+}
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index b7b6c6127e..f93377467b 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -179,5 +179,5 @@ export async function getXBlockIFrameData(itemId) {
 export const getHandlerUrl = async (blockId) => {
   const baseUrl = getConfig().STUDIO_BASE_URL;
 
-  return `${baseUrl}/xblock/${blockId}/handler/handler_name`;
+  return `${baseUrl}/preview/xblock/${blockId}/handler/handler_name`;
 };

From dcbe89590cdba7126a988dc2e3538b528051c4d7 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Wed, 27 Mar 2024 13:35:39 +0200
Subject: [PATCH 3/5] feat: added style extractor

---
 .../course-xblock/CourseXBlock.jsx            | 19 ++++++++
 .../xblock-content/XBlockContent.jsx          |  5 +-
 .../iframe-wrapper/iframe-wrapper.js          | 47 +++++++++++++++----
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
index eb774aef4b..81383554dd 100644
--- a/src/course-unit/course-xblock/CourseXBlock.jsx
+++ b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -59,6 +59,24 @@ const CourseXBlock = ({
     ? intl.formatMessage(messages.visibilityMessage, { selectedGroupsLabel: userPartitionInfo.selectedGroupsLabel })
     : null;
 
+  const styleTagPattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+
+  function extractStylesWithContent(htmlString) {
+    const matches = [];
+    let match = styleTagPattern.exec(htmlString);
+
+    while (match !== null) {
+      matches.push(match[1]); // Pushing content of <style> tag
+      match = styleTagPattern.exec(htmlString);
+    }
+
+    return matches;
+  }
+
+  const stylesWithContent = xblockIFrameHtmlAndResources
+    .map(item => extractStylesWithContent(item.html))
+    .filter(styles => styles.length > 0);
+
   useEffect(() => {
     dispatch(fetchXBlockIFrameHtmlAndResourcesQuery(id));
   }, []);
@@ -189,6 +207,7 @@ const CourseXBlock = ({
                   getHandlerUrl={getHandlerUrl}
                   view={xblockInstanceHtmlAndResources}
                   type={type}
+                  stylesWithContent={stylesWithContent}
                 />
               )}
             </>
diff --git a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
index 8774b2a18f..af4f69a62c 100644
--- a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
+++ b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
@@ -10,7 +10,7 @@ import { wrapBlockHtmlForIFrame } from './iframe-wrapper';
 ensureConfig(['STUDIO_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'studio xblock component');
 
 const XBlockContent = ({
-  view, type, getHandlerUrl, onBlockNotification,
+  view, type, getHandlerUrl, onBlockNotification, stylesWithContent,
 }) => {
   const iframeRef = useRef(null);
   const [html, setHtml] = useState(null);
@@ -26,6 +26,7 @@ const XBlockContent = ({
           view.resources,
           getConfig().STUDIO_BASE_URL,
           type,
+          stylesWithContent,
         );
 
         // Load the XBlock HTML into the IFrame:
@@ -37,7 +38,7 @@ const XBlockContent = ({
 
     // Process the XBlock view:
     processView();
-  }, [view, type]);
+  }, [view, type, stylesWithContent]);
 
   useEffect(() => {
     // Handle any messages we receive from the XBlock Runtime code in the IFrame.
diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
index 53691603c5..9f68dc0210 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
@@ -18,13 +18,23 @@ import {
  *                   JS and CSS dependencies properly.
  * @param type The XBlock's type (openassessment, discussion, video, etc.)
  */
-export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBaseUrl, type) {
+export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBaseUrl, type, stylesWithContent) {
   const resources = normalizeResources(sourceResources);
 
   /* Extract CSS resources. */
   const cssUrls = filterAndExtractResources(resources, 'url', 'text/css');
   const sheets = filterAndExtractResources(resources, 'text', 'text/css');
 
+  let additionalCSSTags = '';
+  additionalCSSTags += stylesWithContent
+    .map(sheet => {
+      if (Array.isArray(sheet)) {
+        return sheet.map(subSheet => `<style>${subSheet}</style>`).join('\n');
+      }
+      return `<style>${sheet}</style>`;
+    })
+    .join('\n');
+
   let cssTags = generateResourceTags(cssUrls, studioBaseUrl, type);
   cssTags += sheets.map(sheet => `<style>${sheet}</style>`).join('\n');
 
@@ -249,15 +259,29 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
   modifiedHtml = modifyVoidHrefToPreventDefault(html);
   // Due to the use of edx-platform scripts in MFE, it is necessary to ensure that the paths for static files
   // and important data-attributes are correct.
-  modifiedHtml = modifiedHtml.replace(/url\(&#39;\/asset/g, `url('${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replace(/src="\/asset/g, `src="${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replace(/src=&#34;\/asset/g, `src=&#34;${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replace(/href="\/asset/g, `href="${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replace(/src=&#34;\/static/g, `src=&#34;${studioBaseUrl}/static`);
-  modifiedHtml = modifiedHtml.replace(/src="\/static/g, `src="${studioBaseUrl}/static`);
-  modifiedHtml = modifiedHtml.replace(/data-target="\/preview/g, `data-target="${studioBaseUrl}/preview`);
-  modifiedHtml = modifiedHtml.replace(/data-url="\/preview/g, `data-url="${studioBaseUrl}/preview`);
-  modifiedHtml = modifiedHtml.replace(/src="\/media/g, `src="${studioBaseUrl}/media`);
+  modifiedHtml = modifiedHtml.replaceAll('url(&#39;/asset', `url('${studioBaseUrl}/asset`);
+  modifiedHtml = modifiedHtml.replaceAll('src="/asset', `src="${studioBaseUrl}/asset`);
+  modifiedHtml = modifiedHtml.replaceAll('src=&#34;/asset', `src=&#34;${studioBaseUrl}/asset`);
+  modifiedHtml = modifiedHtml.replaceAll('href="/asset', `href="${studioBaseUrl}/asset`);
+  modifiedHtml = modifiedHtml.replaceAll('src=&#34;/static', `src=&#34;${studioBaseUrl}/static`);
+  modifiedHtml = modifiedHtml.replaceAll('src="/static', `src="${studioBaseUrl}/static`);
+  modifiedHtml = modifiedHtml.replaceAll('data-target="/preview', `data-target="${studioBaseUrl}/preview`);
+  modifiedHtml = modifiedHtml.replaceAll('data-url="/preview', `data-url="${studioBaseUrl}/preview`);
+  modifiedHtml = modifiedHtml.replaceAll('src="/preview', `src="${studioBaseUrl}/preview`);
+  modifiedHtml = modifiedHtml.replaceAll('src="/media', `src="${studioBaseUrl}/media`);
+  modifiedHtml = modifiedHtml.replaceAll(': "/asset', `: "${studioBaseUrl}/asset`);
+  modifiedHtml = modifiedHtml.replaceAll(': "/xblock', `: "${studioBaseUrl}/xblock`);
+
+  // modifiedHtml = modifiedHtml.replaceAll('url(&#39;/asset', `url('${studioBaseUrl}/asset`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="/asset', `src="${studioBaseUrl}/asset`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="&#34;/asset', `src="&#34;${studioBaseUrl}/asset`);
+  // modifiedHtml = modifiedHtml.replaceAll('href="/asset', `href="${studioBaseUrl}/asset`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="&#34;/static', `src="&#34;${studioBaseUrl}/static`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="/static', `src="${studioBaseUrl}/static`);
+  // modifiedHtml = modifiedHtml.replaceAll('data-target="/preview', `data-target="${studioBaseUrl}/preview`);
+  // modifiedHtml = modifiedHtml.replaceAll('data-url="/preview', `data-url="${studioBaseUrl}/preview`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="/preview', `src="${studioBaseUrl}/preview`);
+  // modifiedHtml = modifiedHtml.replaceAll('src="/media', `src="${studioBaseUrl}/media`);
 
   if (
     type === COMPONENT_TYPES.discussion
@@ -272,6 +296,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
+      ${additionalCSSTags}
     </head>
     <body class="wrapper-xblock level-page studio-xblock-wrapper">
         <article class="xblock-render">
@@ -301,6 +326,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
+      ${additionalCSSTags}
     </head>
     <body class="wrapper-xblock level-page studio-xblock-wrapper">
       <section class="wrapper-xblock is-collapsible level-element">
@@ -324,6 +350,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
+      ${additionalCSSTags}
     </head>
     <body>
       ${modifiedHtml}

From 4aee493bd816ef744a1d57533b46d2d310e9d62e Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Thu, 28 Mar 2024 12:12:58 +0200
Subject: [PATCH 4/5] refactor: code refactoring

---
 .../course-xblock/CourseXBlock.jsx            | 17 ++--------------
 src/course-unit/course-xblock/constants.js    |  2 ++
 src/course-unit/course-xblock/utils.js        | 19 ++++++++++++++++++
 .../xblock-content/XBlockContent.jsx          |  3 +++
 .../iframe-wrapper/iframe-wrapper.js          | 20 ++++++++-----------
 src/course-unit/data/api.js                   |  2 +-
 6 files changed, 35 insertions(+), 28 deletions(-)
 create mode 100644 src/course-unit/course-xblock/utils.js

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
index 81383554dd..3775de90ae 100644
--- a/src/course-unit/course-xblock/CourseXBlock.jsx
+++ b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -33,6 +33,7 @@ import XBlockMessages from './xblock-messages/XBlockMessages';
 import RenderErrorAlert from './render-error-alert';
 import { XBlockContent } from './xblock-content';
 import messages from './messages';
+import { extractStylesWithContent } from './utils';
 
 const CourseXBlock = ({
   id, title, type, unitXBlockActions, shouldScroll, userPartitionInfo,
@@ -59,22 +60,8 @@ const CourseXBlock = ({
     ? intl.formatMessage(messages.visibilityMessage, { selectedGroupsLabel: userPartitionInfo.selectedGroupsLabel })
     : null;
 
-  const styleTagPattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-
-  function extractStylesWithContent(htmlString) {
-    const matches = [];
-    let match = styleTagPattern.exec(htmlString);
-
-    while (match !== null) {
-      matches.push(match[1]); // Pushing content of <style> tag
-      match = styleTagPattern.exec(htmlString);
-    }
-
-    return matches;
-  }
-
   const stylesWithContent = xblockIFrameHtmlAndResources
-    .map(item => extractStylesWithContent(item.html))
+    ?.map(item => extractStylesWithContent(item.html))
     .filter(styles => styles.length > 0);
 
   useEffect(() => {
diff --git a/src/course-unit/course-xblock/constants.js b/src/course-unit/course-xblock/constants.js
index 0d4c76f030..dc38965c64 100644
--- a/src/course-unit/course-xblock/constants.js
+++ b/src/course-unit/course-xblock/constants.js
@@ -27,3 +27,5 @@ export const blockViewShape = PropTypes.shape({
   content: PropTypes.string.isRequired,
   resources: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 });
+
+export const STYLE_TAG_PATTERN = /<style[^>]*>([\s\S]*?)<\/style>/gi;
diff --git a/src/course-unit/course-xblock/utils.js b/src/course-unit/course-xblock/utils.js
new file mode 100644
index 0000000000..7d0617daee
--- /dev/null
+++ b/src/course-unit/course-xblock/utils.js
@@ -0,0 +1,19 @@
+import { STYLE_TAG_PATTERN } from './constants';
+
+/**
+ * Extracts content of <style> tags from the given HTML string.
+ * @param {string} htmlString - The HTML string to extract styles from.
+ * @returns {string[]} An array containing the content of <style> tags.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function extractStylesWithContent(htmlString) {
+  const matches = [];
+  let match = STYLE_TAG_PATTERN.exec(htmlString);
+
+  while (match !== null) {
+    matches.push(match[1]); // Pushing content of <style> tag
+    match = STYLE_TAG_PATTERN.exec(htmlString);
+  }
+
+  return matches;
+}
diff --git a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
index af4f69a62c..5120fafd23 100644
--- a/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
+++ b/src/course-unit/course-xblock/xblock-content/XBlockContent.jsx
@@ -136,10 +136,13 @@ XBlockContent.propTypes = {
   onBlockNotification: PropTypes.func,
   view: fetchable(blockViewShape).isRequired,
   type: PropTypes.oneOfType(Object.values(COMPONENT_TYPES)).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  stylesWithContent: PropTypes.array,
 };
 
 XBlockContent.defaultProps = {
   onBlockNotification: null,
+  stylesWithContent: null,
 };
 
 export default XBlockContent;
diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
index 9f68dc0210..23cf7f0bbc 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
@@ -17,8 +17,15 @@ import {
  *                   Only required for legacy XBlocks that don't declare their
  *                   JS and CSS dependencies properly.
  * @param type The XBlock's type (openassessment, discussion, video, etc.)
+ * @param stylesWithContent Custom CSS global for all XBlock's.
  */
-export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBaseUrl, type, stylesWithContent) {
+export default function wrapBlockHtmlForIFrame(
+  html,
+  sourceResources,
+  studioBaseUrl,
+  type,
+  stylesWithContent,
+) {
   const resources = normalizeResources(sourceResources);
 
   /* Extract CSS resources. */
@@ -272,17 +279,6 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
   modifiedHtml = modifiedHtml.replaceAll(': "/asset', `: "${studioBaseUrl}/asset`);
   modifiedHtml = modifiedHtml.replaceAll(': "/xblock', `: "${studioBaseUrl}/xblock`);
 
-  // modifiedHtml = modifiedHtml.replaceAll('url(&#39;/asset', `url('${studioBaseUrl}/asset`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="/asset', `src="${studioBaseUrl}/asset`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="&#34;/asset', `src="&#34;${studioBaseUrl}/asset`);
-  // modifiedHtml = modifiedHtml.replaceAll('href="/asset', `href="${studioBaseUrl}/asset`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="&#34;/static', `src="&#34;${studioBaseUrl}/static`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="/static', `src="${studioBaseUrl}/static`);
-  // modifiedHtml = modifiedHtml.replaceAll('data-target="/preview', `data-target="${studioBaseUrl}/preview`);
-  // modifiedHtml = modifiedHtml.replaceAll('data-url="/preview', `data-url="${studioBaseUrl}/preview`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="/preview', `src="${studioBaseUrl}/preview`);
-  // modifiedHtml = modifiedHtml.replaceAll('src="/media', `src="${studioBaseUrl}/media`);
-
   if (
     type === COMPONENT_TYPES.discussion
     || type === COMPONENT_TYPES.dragAndDrop
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index f93377467b..1ed85b7cdc 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -172,7 +172,7 @@ export async function setXBlockOrderList(blockId, children) {
 export async function getXBlockIFrameData(itemId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getXBlockContainerPreview(itemId));
-  console.log('DATA ===>', data);
+
   return camelCaseObject(data);
 }
 

From a044959f2a837e52eb9227e14d2652413e8c6bc9 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Thu, 28 Mar 2024 17:43:08 +0200
Subject: [PATCH 5/5] refactor: after review

---
 .../iframe-wrapper/iframe-wrapper.js          | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
index 23cf7f0bbc..7756db9649 100644
--- a/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
+++ b/src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js
@@ -32,15 +32,7 @@ export default function wrapBlockHtmlForIFrame(
   const cssUrls = filterAndExtractResources(resources, 'url', 'text/css');
   const sheets = filterAndExtractResources(resources, 'text', 'text/css');
 
-  let additionalCSSTags = '';
-  additionalCSSTags += stylesWithContent
-    .map(sheet => {
-      if (Array.isArray(sheet)) {
-        return sheet.map(subSheet => `<style>${subSheet}</style>`).join('\n');
-      }
-      return `<style>${sheet}</style>`;
-    })
-    .join('\n');
+  const additionalCssTags = stylesWithContent.flatMap(sheet => `<style>${sheet}</style>`).join('\n');
 
   let cssTags = generateResourceTags(cssUrls, studioBaseUrl, type);
   cssTags += sheets.map(sheet => `<style>${sheet}</style>`).join('\n');
@@ -263,21 +255,29 @@ export default function wrapBlockHtmlForIFrame(
   let result = '';
   let modifiedHtml = '';
 
-  modifiedHtml = modifyVoidHrefToPreventDefault(html);
   // Due to the use of edx-platform scripts in MFE, it is necessary to ensure that the paths for static files
   // and important data-attributes are correct.
-  modifiedHtml = modifiedHtml.replaceAll('url(&#39;/asset', `url('${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replaceAll('src="/asset', `src="${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replaceAll('src=&#34;/asset', `src=&#34;${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replaceAll('href="/asset', `href="${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replaceAll('src=&#34;/static', `src=&#34;${studioBaseUrl}/static`);
-  modifiedHtml = modifiedHtml.replaceAll('src="/static', `src="${studioBaseUrl}/static`);
-  modifiedHtml = modifiedHtml.replaceAll('data-target="/preview', `data-target="${studioBaseUrl}/preview`);
-  modifiedHtml = modifiedHtml.replaceAll('data-url="/preview', `data-url="${studioBaseUrl}/preview`);
-  modifiedHtml = modifiedHtml.replaceAll('src="/preview', `src="${studioBaseUrl}/preview`);
-  modifiedHtml = modifiedHtml.replaceAll('src="/media', `src="${studioBaseUrl}/media`);
-  modifiedHtml = modifiedHtml.replaceAll(': "/asset', `: "${studioBaseUrl}/asset`);
-  modifiedHtml = modifiedHtml.replaceAll(': "/xblock', `: "${studioBaseUrl}/xblock`);
+  const relativeToAbsoluteXBlocksUrls = {
+    'url(&#39;/asset': `url('${studioBaseUrl}/asset`,
+    'src="/asset': `src="${studioBaseUrl}/asset`,
+    'src=&#34;/asset': `src=&#34;${studioBaseUrl}/asset`,
+    'href="/asset': `href="${studioBaseUrl}/asset`,
+    'src=&#34;/static': `src=&#34;${studioBaseUrl}/static`,
+    'src="/static': `src="${studioBaseUrl}/static`,
+    'data-target="/preview': `data-target="${studioBaseUrl}/preview`,
+    'data-url="/preview': `data-url="${studioBaseUrl}/preview`,
+    'src="/preview': `src="${studioBaseUrl}/preview`,
+    'src="/media': `src="${studioBaseUrl}/media`,
+    ': "/asset': `: "${studioBaseUrl}/asset`,
+    ': "/xblock': `: "${studioBaseUrl}/xblock`,
+  };
+
+  modifiedHtml = modifyVoidHrefToPreventDefault(html);
+
+  // Block that replaces relative urls with absolute urls
+  Object.entries(relativeToAbsoluteXBlocksUrls).forEach(([key, value]) => {
+    modifiedHtml = modifiedHtml.replaceAll(key, value);
+  });
 
   if (
     type === COMPONENT_TYPES.discussion
@@ -292,7 +292,7 @@ export default function wrapBlockHtmlForIFrame(
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
-      ${additionalCSSTags}
+      ${additionalCssTags}
     </head>
     <body class="wrapper-xblock level-page studio-xblock-wrapper">
         <article class="xblock-render">
@@ -322,7 +322,7 @@ export default function wrapBlockHtmlForIFrame(
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
-      ${additionalCSSTags}
+      ${additionalCssTags}
     </head>
     <body class="wrapper-xblock level-page studio-xblock-wrapper">
       <section class="wrapper-xblock is-collapsible level-element">
@@ -346,7 +346,7 @@ export default function wrapBlockHtmlForIFrame(
       <meta charset="UTF-8">
       ${legacyIncludes}
       ${cssTags}
-      ${additionalCSSTags}
+      ${additionalCssTags}
     </head>
     <body>
       ${modifiedHtml}