From 2a03de9e5746c59e11f001c04f8821c5644b41a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 29 Aug 2024 21:43:02 -0300
Subject: [PATCH 01/15] feat: add component preview to library authoring

---
 .../LibraryBlock/LibraryBlock.tsx             | 144 +++++++
 src/library-authoring/LibraryBlock/index.ts   |   2 +
 src/library-authoring/LibraryBlock/wrap.js    | 391 ++++++++++++++++++
 .../LibraryBlock/xblock-bootstrap.html        |  66 +++
 .../component-info/ComponentInfo.tsx          |   5 +-
 .../component-info/ComponentPreview.tsx       |  25 ++
 src/library-authoring/data/api.ts             |  44 ++
 src/library-authoring/data/apiHooks.ts        |  39 +-
 8 files changed, 712 insertions(+), 4 deletions(-)
 create mode 100644 src/library-authoring/LibraryBlock/LibraryBlock.tsx
 create mode 100644 src/library-authoring/LibraryBlock/index.ts
 create mode 100644 src/library-authoring/LibraryBlock/wrap.js
 create mode 100644 src/library-authoring/LibraryBlock/xblock-bootstrap.html
 create mode 100644 src/library-authoring/component-info/ComponentPreview.tsx

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
new file mode 100644
index 0000000000..017422deee
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -0,0 +1,144 @@
+import React, {
+  useCallback, useEffect, useRef, useState,
+} from 'react';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+
+import wrapBlockHtmlForIFrame from './wrap';
+
+// FixMe: We need this?
+ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'library block component');
+
+/**
+ * React component that displays an XBlock in a sandboxed IFrame.
+ *
+ * The IFrame is resized responsively so that it fits the content height.
+ *
+ * We use an IFrame so that the XBlock code, including user-authored HTML,
+ * cannot access things like the user's cookies, nor can it make GET/POST
+ * requests as the user. However, it is allowed to call any XBlock handlers.
+ */
+const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [html, setHtml] = useState<string | null>(null);
+  const [iFrameHeight, setIFrameHeight] = useState(400);
+  const [iFrameKey, setIFrameKey] = useState(0);
+
+  /**
+   * Handle any messages we receive from the XBlock Runtime code in the IFrame.
+   * See wrap.ts to see the code that sends these messages.
+   */
+  const receivedWindowMessage = useCallback(async (event) => {
+    if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
+      return; // This is some other random message.
+    }
+
+    const { method, replyKey, ...args } = event.data;
+    const frame = iframeRef.current.contentWindow;
+    const sendReply = async (data) => {
+      frame?.postMessage({ ...data, replyKey }, '*');
+    };
+
+    if (method === 'bootstrap') {
+      sendReply({ initialHtml: html });
+    } else if (method === 'get_handler_url') {
+      const handlerUrl = await getHandlerUrl(args.usageId);
+      sendReply({ handlerUrl });
+    } else if (method === 'update_frame_height') {
+      setIFrameHeight(args.height);
+    } else if (method?.indexOf('xblock:') === 0) {
+      // This is a notification from the XBlock's frontend via 'runtime.notify(event, args)'
+      if (onBlockNotification) {
+        onBlockNotification({
+          eventType: method.substr(7), // Remove the 'xblock:' prefix that we added in wrap.ts
+          ...args,
+        });
+      }
+    }
+  }, [html]);
+
+  const processView = useCallback(() => {
+    if (!view) {
+      return;
+    }
+
+    const newHtml = wrapBlockHtmlForIFrame(
+      view.content,
+      view.resources,
+      getConfig().LMS_BASE_URL,
+    );
+
+    // Load the XBlock HTML into the IFrame:
+    //   iframe will only re-render in react when its property changes (key here)
+    setHtml(newHtml);
+    setIFrameKey(prevValue => prevValue + 1);
+  }, [view]);
+
+  /**
+   * Load the XBlock data from the LMS and then inject it into our IFrame.
+   */
+  useEffect(() => {
+    // Prepare to receive messages from the IFrame.
+    // Messages are the only way that the code in the IFrame can communicate
+    // with the surrounding UI.
+    window.addEventListener('message', receivedWindowMessage);
+
+    processView();
+
+    return () => {
+      window.removeEventListener('message', receivedWindowMessage);
+    };
+  }, [view, html]);
+
+  /* Only draw the iframe if the HTML has already been set.  This is because xblock-bootstrap.html will only request
+   * HTML once, upon being rendered. */
+  if (!html) {
+    return null;
+  }
+
+  return (
+    <div style={{
+      height: `${iFrameHeight}px`,
+      boxSizing: 'content-box',
+      position: 'relative',
+      overflow: 'hidden',
+      minHeight: '200px',
+      margin: '12px',
+      border: '1px solid #ccc',
+    }}
+    >
+      <iframe
+        key={iFrameKey}
+        ref={iframeRef}
+        title="block"
+        src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL || 'https://metadata-test233.s3.amazonaws.com/xblock-bootstrap.html'}
+        data-testid="block-preview"
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: '100%',
+          height: '100%',
+          minHeight: '200px',
+          border: '0 none',
+          backgroundColor: 'white',
+        }}
+        // allowing 'autoplay' is required to allow the video XBlock to control the YouTube iframe it has.
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        sandbox={[
+          'allow-forms',
+          'allow-modals',
+          'allow-popups',
+          'allow-popups-to-escape-sandbox',
+          'allow-presentation',
+          'allow-same-origin', // This is only secure IF the IFrame source
+          // is served from a completely different domain name
+          // e.g. labxchange-xblocks.net vs www.labxchange.org
+          'allow-scripts',
+          'allow-top-navigation-by-user-activation',
+        ].join(' ')}
+      />
+    </div>
+  );
+};
+
+export default LibraryBlock;
diff --git a/src/library-authoring/LibraryBlock/index.ts b/src/library-authoring/LibraryBlock/index.ts
new file mode 100644
index 0000000000..a6bb1665df
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/index.ts
@@ -0,0 +1,2 @@
+/* eslint-disable-next-line import/prefer-default-export */
+export { default as LibraryBlock } from './LibraryBlock';
diff --git a/src/library-authoring/LibraryBlock/wrap.js b/src/library-authoring/LibraryBlock/wrap.js
new file mode 100644
index 0000000000..82c1f28285
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/wrap.js
@@ -0,0 +1,391 @@
+/* eslint-disable no-param-reassign */
+/**
+ * Code to wrap an XBlock so that we can embed it in an IFrame
+ */
+
+/**
+ * The JavaScript code which runs inside our IFrame and is responsible
+ * for communicating with the parent window.
+ *
+ * This cannot use any imported functions because it runs in the IFrame,
+ * not in our app webpack bundle.
+ */
+function blockFrameJS() {
+  const CHILDREN_KEY = '_jsrt_xb_children'; // JavaScript RunTime XBlock children
+  const USAGE_ID_KEY = '_jsrt_xb_usage_id';
+  const HANDLER_URL = '_jsrt_xb_handler_url';
+
+  const uniqueKeyPrefix = `k${+Date.now()}-${Math.floor(Math.random() * 1e10)}-`;
+  let messageCount = 0;
+  /**
+   * A helper method for sending messages to the parent window of this IFrame
+   * and getting a reply, even when the IFrame is securely sandboxed.
+   * @param messageData The message to send. Must be an object, as we add a key/value pair to it.
+   * @param callback The callback to call when the parent window replies
+   */
+  function postMessageToParent(messageData, callback) {
+    messageCount += 1;
+    const messageReplyKey = uniqueKeyPrefix + messageCount;
+    messageData.replyKey = messageReplyKey;
+    if (callback !== undefined) {
+      const handleResponse = (event) => {
+        if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
+          callback(event.data);
+          window.removeEventListener('message', handleResponse);
+        }
+      };
+      window.addEventListener('message', handleResponse);
+    }
+    window.parent.postMessage(messageData, '*');
+  }
+
+  /**
+   * The JavaScript runtime for any XBlock in the IFrame
+   */
+  const runtime = {
+    /**
+     * An obscure and little-used API that retrieves a particular
+     * XBlock child using its 'data-name' attribute
+     * @param block The root DIV element of the XBlock calling this method
+     * @param childName The value of the 'data-name' attribute of the root
+     *    DIV element of the XBlock child in question.
+     */
+    childMap: (block, childName) => runtime.children(block).find((child) => child.element.getAttribute('data-name') === childName),
+    children: (block) => block[CHILDREN_KEY],
+    /**
+     * Get the URL for the specified handler. This method must be synchronous, so
+     * cannot make HTTP requests.
+     */
+    handlerUrl: (block, handlerName, suffix, query) => {
+      let url = block[HANDLER_URL].replace('handler_name', handlerName);
+      if (suffix) {
+        url += `${suffix}/`;
+      }
+      if (query) {
+        url += `?${query}`;
+      }
+      return url;
+    },
+    /**
+     * Pass an arbitrary message from the XBlock to the parent application.
+     * This is mostly used by the studio_view to inform the user of save events.
+     * Standard events are as follows:
+     *
+     * save: {state: 'start'|'end', message: string}
+     * -> Displays a "Saving..." style message + animation to the user until called
+     *    again with {state: 'end'}. Then closes the modal holding the studio_view.
+     *
+     * error: {title: string, message: string}
+     * -> Displays an error message to the user
+     *
+     * cancel: {}
+     * -> Close the modal holding the studio_view
+     */
+    notify: (eventType, params) => {
+      params.method = `xblock:${eventType}`;
+      postMessageToParent(params);
+    },
+  };
+
+  /**
+   * Initialize an XBlock. This function should only be called by initializeXBlockAndChildren
+   * because it assumes that function has already run.
+   */
+  function initializeXBlock(element, callback) {
+    const usageId = element[USAGE_ID_KEY];
+    // Check if the XBlock has an initialization function:
+    const initFunctionName = element.getAttribute('data-init');
+    if (initFunctionName !== null) {
+      // Since this block has an init function, it may need to call handlers,
+      // so we first have to generate a secure handler URL for it:
+      postMessageToParent({ method: 'get_handler_url', usageId }, (handlerData) => {
+        element[HANDLER_URL] = handlerData.handlerUrl;
+        // Now proceed with initializing the block's JavaScript:
+        const InitFunction = (window)[initFunctionName];
+        // Does the XBlock HTML contain arguments to pass to the InitFunction?
+        let data = {};
+        [].forEach.call(element.children, (childNode) => {
+          // The newer/pure/Blockstore runtime uses 'xblock_json_init_args'
+          // while the LMS runtime uses 'xblock-json-init-args'.
+          if (
+            childNode.matches('script.xblock_json_init_args')
+            || childNode.matches('script.xblock-json-init-args')
+          ) {
+            data = JSON.parse(childNode.textContent);
+          }
+        });
+        // An unfortunate inconsistency is that the old Studio runtime used
+        // to pass 'element' as a jQuery-wrapped DOM element, whereas the LMS
+        // runtime used to pass 'element' as the pure DOM node. In order not to
+        // break backwards compatibility, we would need to maintain that.
+        // However, this is currently disabled as it causes issues (need to
+        // modify the runtime methods like handlerUrl too), and we decided not
+        // to maintain support for legacy studio_view in this runtime.
+        // const isStudioView = element.className.indexOf('studio_view') !== -1;
+        // const passElement = isStudioView && (window as any).$ ? (window as any).$(element) : element;
+
+        const blockJS = new InitFunction(runtime, element, data) || {};
+        blockJS.element = element;
+        callback(blockJS);
+      });
+    } else {
+      const blockJS = { element };
+      callback(blockJS);
+    }
+  }
+
+  // Recursively initialize the JavaScript code of each XBlock:
+  function initializeXBlockAndChildren(element, callback) {
+    // The newer/pure/Blockstore runtime uses the 'data-usage' attribute, while the LMS uses 'data-usage-id'
+    const usageId = element.getAttribute('data-usage') || element.getAttribute('data-usage-id');
+    if (usageId !== null) {
+      element[USAGE_ID_KEY] = usageId;
+    } else {
+      throw new Error('XBlock is missing a usage ID attribute on its root HTML node.');
+    }
+
+    const version = element.getAttribute('data-runtime-version');
+    if (version != null && version !== '1') {
+      throw new Error('Unsupported XBlock runtime version requirement.');
+    }
+
+    // Recursively initialize any children first:
+    // We need to find all div.xblock-v1 children, unless they're grandchilden
+    // So we build a list of all div.xblock-v1 descendants that aren't descendants
+    // of an already-found descendant:
+    const childNodesFound = [];
+    [].forEach.call(element.querySelectorAll('.xblock, .xblock-v1'), (childNode) => {
+      if (!childNodesFound.find((el) => el.contains(childNode))) {
+        childNodesFound.push(childNode);
+      }
+    });
+
+    // This code is awkward because we can't use promises (IE11 etc.)
+    let childrenInitialized = -1;
+    function initNextChild() {
+      childrenInitialized += 1;
+      if (childrenInitialized < childNodesFound.length) {
+        const childNode = childNodesFound[childrenInitialized];
+        initializeXBlockAndChildren(childNode, initNextChild);
+      } else {
+        // All children are initialized:
+        initializeXBlock(element, callback);
+      }
+    }
+    initNextChild();
+  }
+
+  // Find the root XBlock node.
+  // The newer/pure/Blockstore runtime uses '.xblock-v1' while the LMS runtime uses '.xblock'.
+  const rootNode = document.querySelector('.xblock, .xblock-v1'); // will always return the first matching element
+  initializeXBlockAndChildren(rootNode, () => {
+    // When done, tell the parent window the size of this block:
+    postMessageToParent({
+      height: document.body.scrollHeight,
+      method: 'update_frame_height',
+    });
+    postMessageToParent({ method: 'init_done' });
+  });
+
+  let lastHeight = -1;
+  function checkFrameHeight() {
+    const newHeight = document.documentElement.scrollHeight;
+    if (newHeight !== lastHeight) {
+      postMessageToParent({ method: 'update_frame_height', height: newHeight });
+      lastHeight = newHeight;
+    }
+  }
+  // Check the size whenever the DOM changes:
+  new MutationObserver(checkFrameHeight).observe(document.body, { attributes: true, childList: true, subtree: true });
+  // And whenever the IFrame is resized
+  window.addEventListener('resize', checkFrameHeight);
+}
+
+/**
+ * Given an XBlock's fragment data (HTML plus CSS and JS URLs), return the
+ * inner HTML that should go into an IFrame in order to display that XBlock
+ * and interact with the surrounding LabXchange UI and with the LMS.
+ * @param html The XBlock's HTML (Fragment.content)
+ * @param jsUrls A list of any JavaScript URLs the XBlock may require
+ * @param cssUrls A list of any CSS URLs the XBlock may require
+ * @param lmsBaseUrl The absolute URL of the LMS, e.g. http://localhost:18000
+ *                   Only required for legacy XBlocks that don't declare their
+ *                   JS and CSS dependencies properly.
+ */
+export default function wrapBlockHtmlForIFrame(html, resources, lmsBaseUrl) {
+  /* Separate resources by kind. */
+  const urlResources = resources.filter((r) => r.kind === 'url');
+  const textResources = resources.filter((r) => r.kind === 'text');
+
+  /* Extract CSS resources. */
+  const cssUrls = urlResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
+  const sheets = textResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
+  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${url}">`).join('\n');
+  cssTags += sheets.map((sheet) => `<style>${sheet}</style>`).join('\n');
+
+  /* Extract JS resources. */
+  const jsUrls = urlResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
+  const scripts = textResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
+  let jsTags = jsUrls.map((url) => `<script src="${url}"></script>`).join('\n');
+  jsTags += scripts.map((script) => `<script>${script}</script>`).join('\n');
+
+  // Most older XModules/XBlocks have a ton of undeclared dependencies on various JavaScript in the global scope.
+  // ALL XBlocks should be re-written to fully provide their own JS dependencies.
+  // We use 'learn_view' and 'edit_view' to declare a new, global-free, iframe JS environment for those new XBlocks
+  // that want full control over their JavaScript environment.
+  //
+  // Otherwise, if the XBlock uses 'student_view', 'author_view', or 'studio_view', include known required globals:
+  let legacyIncludes = '';
+  if (
+    html.indexOf('xblock-v1-student_view') !== -1
+    || html.indexOf('xblock-v1-public_view') !== -1
+    || html.indexOf('xblock-v1-studio_view') !== -1
+    || html.indexOf('xblock-v1-author_view') !== -1
+  ) {
+    legacyIncludes += `
+      <!-- gettext & XBlock JS i18n code -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/js/i18n/en/djangojs.js"></script>
+      <!-- Most XBlocks require jQuery: -->
+      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+      <!-- The Video XBlock requires "ajaxWithPrefix" -->
+      <script type="text/javascript">
+          $.postWithPrefix = $.post;
+          $.getWithPrefix = $.get;
+          $.ajaxWithPrefix = $.ajax;
+      </script>
+      <!-- The Video XBlock requires "Slider" from jQuery-UI: -->
+      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+      <!-- The video XBlock depends on Underscore.JS -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/underscore.js"></script>
+      <!-- The video XBlock depends on jquery-cookie -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/js/vendor/jquery.cookie.js"></script>
+      <!--The Video XBlock has an undeclared dependency on 'Logger' -->
+      <script>
+          window.Logger = { log: function() { } };
+      </script>
+      <!-- Builtin XBlock types depend on RequireJS -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/require.js"></script>
+      <script type="text/javascript" src="${lmsBaseUrl}/static/js/RequireJS-namespace-undefine.js"></script>
+      <script>
+          // The minimal RequireJS configuration required for common LMS building XBlock types to work:
+          (function (require, define) {
+              require.config({
+                  baseUrl: "${lmsBaseUrl}/static/",
+                  paths: {
+                      accessibility: 'js/src/accessibility_tools',
+                      draggabilly: 'js/vendor/draggabilly',
+                      hls: 'common/js/vendor/hls',
+                      moment: 'common/js/vendor/moment-with-locales',
+                      HtmlUtils: 'edx-ui-toolkit/js/utils/html-utils',
+                  },
+              });
+              define('gettext', [], function() { return window.gettext; });
+              define('jquery', [], function() { return window.jQuery; });
+              define('jquery-migrate', [], function() { return window.jQuery; });
+              define('underscore', [], function() { return window._; });
+          }).call(this, require || RequireJS.require, define || RequireJS.define);
+      </script>
+      <!-- edX HTML Utils requires GlobalLoader -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/edx-ui-toolkit/js/utils/global-loader.js"></script>
+      <script>
+      // The video XBlock has an undeclared dependency on edX HTML Utils
+      RequireJS.require(['HtmlUtils'], function (HtmlUtils) {
+          window.edx.HtmlUtils = HtmlUtils;
+          // The problem XBlock depends on window.SR, though 'accessibility_tools' has an undeclared dependency on HtmlUtils:
+          RequireJS.require(['accessibility']);
+      });
+      RequireJS.require(['edx-ui-toolkit/js/utils/string-utils'], function (StringUtils) {
+          window.edx.StringUtils = StringUtils;
+      });
+      </script>
+      <!-- 
+          commons.js: this file produced by webpack contains many shared chunks of code.
+          By including this, you have only to also import any of the smaller entrypoint
+          files (defined in webpack.common.config.js) to get that entry point and all
+          of its dependencies.
+      -->
+      <script type="text/javascript" src="${lmsBaseUrl}/static/bundles/commons.js"></script>
+      <!-- The video XBlock (and perhaps others?) expect this global: -->
+      <script>
+      window.onTouchBasedDevice = function() { return navigator.userAgent.match(/iPhone|iPod|iPad|Android/i); };
+      </script>
+      <!-- At least one XBlock (drag and drop v2) expects Font Awesome -->
+      <link rel="stylesheet"
+          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+      <!-- Capa Problem Editing requires CodeMirror -->
+      <link rel="stylesheet" href="${lmsBaseUrl}/static/js/vendor/CodeMirror/codemirror.css">
+      <!-- Built-in XBlocks (and some plugins) depends on LMS CSS -->
+      <link rel="stylesheet" href="${lmsBaseUrl}/static/css/lms-course.css">
+      <!-- Configure and load MathJax -->
+      <script type="text/x-mathjax-config">
+        MathJax.Hub.Config({
+          tex2jax: {
+            inlineMath: [
+              ['\\\\(','\\\\)'],
+              ['[mathjaxinline]','[/mathjaxinline]']
+            ],
+            displayMath: [
+              ['\\\\[','\\\\]'],
+              ['[mathjax]','[/mathjax]']
+            ]
+          }
+        });
+      </script>
+      <script type="text/x-mathjax-config">
+        MathJax.Hub.signal.Interest(function(message) {
+          if(message[0] === "End Math") {
+              set_mathjax_display_div_settings();
+          }
+        });
+        function set_mathjax_display_div_settings() {
+          $('.MathJax_Display').each(function( index ) {
+            this.setAttribute('tabindex', '0');
+            this.setAttribute('aria-live', 'off');
+            this.removeAttribute('role');
+            this.removeAttribute('aria-readonly');
+          });
+        }
+      </script>
+      <script type="text/javascript">
+          // Activating Mathjax accessibility files
+          window.MathJax = {
+              menuSettings: {
+                  collapsible: true,
+                  autocollapse: false,
+                  explorer: true
+              }
+          };
+      </script>
+      <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.
+           It can't be run through static.url because MathJax uses crazy url introspection to do lazy loading of
+           MathJax extension libraries -->
+      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG"></script>
+    `;
+  }
+
+  const result = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <!-- Open links in a new tab, not this iframe -->
+      <base target="_blank">
+      <meta charset="UTF-8">
+      <meta http-equiv="cache-control" content="no-cache">
+      ${legacyIncludes}
+      ${cssTags}
+    </head>
+    <!-- A Studio-served stylesheet will set the body min-height to 100% (a common strategy to allow for background
+    images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the
+    onResize event listeners in certain situations.  Resetting it to the default "auto" skirts the problem. -->
+    <body style="min-height: auto; background-color: white">
+      ${html}
+      ${jsTags}
+      <script>
+        window.addEventListener('load', (${blockFrameJS.toString()}));
+      </script>
+    </body>
+    </html>
+  `;
+
+  return result;
+}
diff --git a/src/library-authoring/LibraryBlock/xblock-bootstrap.html b/src/library-authoring/LibraryBlock/xblock-bootstrap.html
new file mode 100644
index 0000000000..01afd0f55d
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/xblock-bootstrap.html
@@ -0,0 +1,66 @@
+<!--
+  This file is meant to be hosted on a completely separate domain name
+  from the LMS / frontend that is hosting the Open edX content (XBlocks).
+
+  Doing so allows us to enable features like cookies in the sandboxed
+  IFrame while keeping the XBlock content on a distinct origin, so that
+  the XBlock cannot access user data from the host application (like
+  cookies nor call APIs as the user).
+
+  This particular sandboxing code uses the secure message passing API
+  to request the XBlock HTML from the host application and then replaces
+  its content with that HTML.
+-->
+<!DOCTYPE html>
+<html dir="auto">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="cache-control" content="no-cache">
+  </head>
+  <body>
+    <script>
+      const uniqueKeyPrefix = "k" + +Date.now() + "-" + Math.floor(Math.random() * 1e10) + "-";
+      var messageCount = 0;
+      function postMessageToParent(messageData, callback) {
+        const messageReplyKey = uniqueKeyPrefix + (messageCount++);
+        messageData.replyKey = messageReplyKey;
+        if (callback !== undefined) {
+          const handleResponse = function (event) {
+            if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
+              callback(event.data);
+              window.removeEventListener('message', handleResponse);
+            }
+          };
+          window.addEventListener('message', handleResponse);
+        }
+        window.parent.postMessage(messageData, '*');
+      }
+      /**
+       * Replace the entire current document with a new document that has the specified HTML.
+       */
+      function replaceAllHtml(newHtml) {
+        if(navigator.userAgent.indexOf('MSIE') !==-1 || navigator.appVersion.indexOf('Trident/') > -1) {
+          // Can't use document.open/close on IE11, it replaces this with an empty page.
+          // Thank god for StackOverflow and this crazy-ass hack that somehow works.
+          // https://stackoverflow.com/a/18262905
+          window.contents = newHtml;
+          location.replace('javascript:window["contents"]');
+        } else {
+          document.open();
+          document.write(newHtml);
+          document.close();
+        }
+      }
+
+      if (window.parent === window) {
+        document.write("This XBlock sandbox launch tool must be embedded in an IFrame.");
+      } else {
+        // Request the HTML from the parent and then completely replace this entire
+        // HTML document with the resulting HTML
+        postMessageToParent({method: 'bootstrap'}, function(data) {
+          replaceAllHtml(data.initialHtml || 'Error: Missing XBlock HTML.');
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index 4234722687..999554380b 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -8,13 +8,14 @@ import {
 } from '@openedx/paragon';
 
 import { ComponentMenu } from '../components';
+import ComponentPreview from './ComponentPreview';
 import messages from './messages';
 
 interface ComponentInfoProps {
   usageKey: string;
 }
 
-const ComponentInfo = ({ usageKey } : ComponentInfoProps) => {
+const ComponentInfo= ({ usageKey }: ComponentInfoProps) => {
   const intl = useIntl();
 
   return (
@@ -34,7 +35,7 @@ const ComponentInfo = ({ usageKey } : ComponentInfoProps) => {
         defaultActiveKey="preview"
       >
         <Tab eventKey="preview" title={intl.formatMessage(messages.previewTabTitle)}>
-          Preview tab placeholder
+          <ComponentPreview usageKey={usageKey} />
         </Tab>
         <Tab eventKey="manage" title={intl.formatMessage(messages.manageTabTitle)}>
           Manage tab placeholder
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
new file mode 100644
index 0000000000..ad06e173f6
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { useXBlockRender } from '../data/apiHooks';
+import { getXBlockHandlerUrl } from '../data/api';
+import { LibraryBlock } from '../LibraryBlock';
+
+interface ComponentPreviewProps {
+  usageKey: string;
+}
+
+const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
+  const { data: view } = useXBlockRender(usageKey);
+
+  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey, 'handler_name');
+
+  return (
+    <div>
+      Hi, I am a component preview
+      { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
+    </div>
+
+  );
+};
+
+export default ComponentPreview;
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index e622e6addf..1c83f749dd 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -7,28 +7,44 @@ const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
  * Get the URL for the content library API.
  */
 export const getContentLibraryApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
+
 /**
  * Get the URL for get block types of library.
  */
 export const getLibraryBlockTypesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/block_types/`;
+
 /**
  * Get the URL for create content in library.
  */
 export const getCreateLibraryBlockUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/blocks/`;
+
 export const getContentLibraryV2ListApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
+
 /**
  * Get the URL for commit/revert changes in library.
  */
 export const getCommitLibraryChangesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/commit/`;
+
 /**
  * Get the URL for paste clipboard content into library.
  */
 export const getLibraryPasteClipboardUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/paste_clipboard/`;
+
 /**
   * Get the URL for the xblock metadata API.
   */
 export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/fields/`;
 
+/**
+  * Get the URL that render the XBlock in the LMS.
+  */
+export const getXBlockRenderUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/view/student_view/`;
+
+/**
+ * Get the URL for the xblock handler API.
+ */
+export const getXBlockHandlerUrlUrl = (usageKey: string, handlerName: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/${handlerName}/`;
+
 export interface ContentLibrary {
   id: string;
   type: string;
@@ -127,6 +143,18 @@ export interface UpdateXBlockFieldsRequest {
   };
 }
 
+export interface XBlockRenderResource {
+  data: string;
+  kind: 'url';
+  mimetype: string;
+  placement: 'head' | 'foot';
+}
+
+export interface XBlockRenderResponse {
+  content: string;
+  resources: XBlockRenderResource[];
+}
+
 /**
  * Fetch block types of a library
  */
@@ -244,3 +272,19 @@ export async function updateXBlockFields(usageKey:string, xblockData: UpdateXBlo
   const client = getAuthenticatedHttpClient();
   await client.post(getXBlockFieldsApiUrl(usageKey), xblockData);
 }
+
+/**
+  * Get rendered xblock
+ */
+export async function getXBlockRender(usageKey: string): Promise<XBlockRenderResponse> {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockRenderUrl(usageKey));
+  return camelCaseObject(data);
+}
+
+/**
+  * Get the URL of the xblock handler.
+ */
+export const getXBlockHandlerUrl = async (usageKey: string, handlerName: string): Promise<string> => {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey, handlerName));
+  return data.handler_url;
+};
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 2ebed19ff9..4f4535d409 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -18,6 +18,8 @@ import {
   libraryPasteClipboard,
   getXBlockFields,
   updateXBlockFields,
+  getXBlockRender,
+  getXBlockHandlerUrl,
 } from './api';
 
 const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -52,12 +54,29 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
+  // FixMe: Move to xblockQueryKeys
   xblockFields: (contentLibraryId: string, usageKey: string) => [
-    ...libraryAuthoringQueryKeys.all,
     ...libraryAuthoringQueryKeys.contentLibrary(contentLibraryId),
     'content',
-    'xblockFields',
     usageKey,
+    'xblockFields',
+  ],
+};
+
+export const xblockQueryKeys = {
+  all: ['xblock'],
+  /**
+   * Base key for data specific to a xblock
+   */
+  xblock: (usageKey?: string) => [...xblockQueryKeys.all, usageKey],
+  render: (usageKey: string) => [
+    ...xblockQueryKeys.xblock(usageKey),
+    'render',
+  ],
+  handlerUrl: (usageKey: string, handlerName: string) => [
+    ...xblockQueryKeys.xblock(usageKey),
+    'handlerUrl',
+    handlerName,
   ],
 };
 
@@ -209,3 +228,19 @@ export const useUpdateXBlockFields = (contentLibraryId: string, usageKey: string
     },
   });
 };
+
+export const useXBlockRender = (usageKey: string) => (
+  useQuery({
+    queryKey: xblockQueryKeys.render(usageKey),
+    queryFn: () => getXBlockRender(usageKey),
+    enabled: !!usageKey,
+  })
+);
+
+export const useXBlockHandlerUrl = (usageKey: string, handlerName: string) => (
+  useQuery({
+    queryKey: xblockQueryKeys.handlerUrl(usageKey, handlerName),
+    queryFn: () => getXBlockHandlerUrl(usageKey, handlerName),
+    enabled: !!usageKey,
+  })
+);

From a9023ba4e20377f00ccee7894f0de55fa641b768 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Fri, 30 Aug 2024 17:16:00 -0300
Subject: [PATCH 02/15] fix: change view shape

---
 .../LibraryBlock/LibraryBlock.tsx             | 43 ++++++++-----------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 017422deee..8aef8e836f 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useRef, useState,
+  useEffect, useMemo, useRef, useState,
 } from 'react';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 
@@ -19,15 +19,25 @@ ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'libra
  */
 const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [html, setHtml] = useState<string | null>(null);
   const [iFrameHeight, setIFrameHeight] = useState(400);
-  const [iFrameKey, setIFrameKey] = useState(0);
+
+  const html = useMemo(() => {
+    if (!view) {
+      return null;
+    }
+
+    return wrapBlockHtmlForIFrame(
+      view.content,
+      view.resources,
+      getConfig().LMS_BASE_URL,
+    );
+  }, [view]);
 
   /**
    * Handle any messages we receive from the XBlock Runtime code in the IFrame.
    * See wrap.ts to see the code that sends these messages.
    */
-  const receivedWindowMessage = useCallback(async (event) => {
+  const receivedWindowMessage = async (event) => {
     if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
       return; // This is some other random message.
     }
@@ -54,24 +64,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
         });
       }
     }
-  }, [html]);
-
-  const processView = useCallback(() => {
-    if (!view) {
-      return;
-    }
-
-    const newHtml = wrapBlockHtmlForIFrame(
-      view.content,
-      view.resources,
-      getConfig().LMS_BASE_URL,
-    );
-
-    // Load the XBlock HTML into the IFrame:
-    //   iframe will only re-render in react when its property changes (key here)
-    setHtml(newHtml);
-    setIFrameKey(prevValue => prevValue + 1);
-  }, [view]);
+  };
 
   /**
    * Load the XBlock data from the LMS and then inject it into our IFrame.
@@ -82,12 +75,10 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
     // with the surrounding UI.
     window.addEventListener('message', receivedWindowMessage);
 
-    processView();
-
     return () => {
       window.removeEventListener('message', receivedWindowMessage);
     };
-  }, [view, html]);
+  }, [view]);
 
   /* Only draw the iframe if the HTML has already been set.  This is because xblock-bootstrap.html will only request
    * HTML once, upon being rendered. */
@@ -107,7 +98,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
     }}
     >
       <iframe
-        key={iFrameKey}
+        key={view.content}
         ref={iframeRef}
         title="block"
         src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL || 'https://metadata-test233.s3.amazonaws.com/xblock-bootstrap.html'}

From 70cd2eff1124ea589e9dc33e8c71593b4e18d283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Fri, 30 Aug 2024 17:33:09 -0300
Subject: [PATCH 03/15] fix: types and cleanup

---
 .../LibraryBlock/LibraryBlock.tsx                 |  8 +++++++-
 .../component-info/ComponentPreview.tsx           |  6 +++---
 src/library-authoring/data/api.ts                 |  7 ++++---
 src/library-authoring/data/apiHooks.ts            | 15 +--------------
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 8aef8e836f..a7a8f83e33 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -3,11 +3,17 @@ import React, {
 } from 'react';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 
+import type { XBlockRenderResponse } from '../data/api';
 import wrapBlockHtmlForIFrame from './wrap';
 
 // FixMe: We need this?
 ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'library block component');
 
+interface LibraryBlockProps {
+  getHandlerUrl: (usageId: string) => Promise<string>;
+  onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
+  view: XBlockRenderResponse
+}
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
  *
@@ -17,7 +23,7 @@ ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'libra
  * cannot access things like the user's cookies, nor can it make GET/POST
  * requests as the user. However, it is allowed to call any XBlock handlers.
  */
-const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
+const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(400);
 
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index ad06e173f6..f49cd63e60 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { useXBlockRender } from '../data/apiHooks';
-import { getXBlockHandlerUrl } from '../data/api';
 import { LibraryBlock } from '../LibraryBlock';
+import { getXBlockHandlerUrl } from '../data/api';
+import { useXBlockRender } from '../data/apiHooks';
 
 interface ComponentPreviewProps {
   usageKey: string;
@@ -11,7 +11,7 @@ interface ComponentPreviewProps {
 const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
   const { data: view } = useXBlockRender(usageKey);
 
-  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey, 'handler_name');
+  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
 
   return (
     <div>
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 1c83f749dd..516649764d 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -42,8 +42,9 @@ export const getXBlockRenderUrl = (usageKey: string) => `${getApiBaseUrl()}/api/
 
 /**
  * Get the URL for the xblock handler API.
+ * The string `handler_name` is a placeholder for the name of the handler.
  */
-export const getXBlockHandlerUrlUrl = (usageKey: string, handlerName: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/${handlerName}/`;
+export const getXBlockHandlerUrlUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/handler_name/`;
 
 export interface ContentLibrary {
   id: string;
@@ -284,7 +285,7 @@ export async function getXBlockRender(usageKey: string): Promise<XBlockRenderRes
 /**
   * Get the URL of the xblock handler.
  */
-export const getXBlockHandlerUrl = async (usageKey: string, handlerName: string): Promise<string> => {
-  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey, handlerName));
+export const getXBlockHandlerUrl = async (usageKey: string): Promise<string> => {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey));
   return data.handler_url;
 };
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 4f4535d409..cdaf183498 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -54,7 +54,7 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
-  // FixMe: Move to xblockQueryKeys
+  // ToDo: Move to xblockQueryKeys
   xblockFields: (contentLibraryId: string, usageKey: string) => [
     ...libraryAuthoringQueryKeys.contentLibrary(contentLibraryId),
     'content',
@@ -73,11 +73,6 @@ export const xblockQueryKeys = {
     ...xblockQueryKeys.xblock(usageKey),
     'render',
   ],
-  handlerUrl: (usageKey: string, handlerName: string) => [
-    ...xblockQueryKeys.xblock(usageKey),
-    'handlerUrl',
-    handlerName,
-  ],
 };
 
 /**
@@ -236,11 +231,3 @@ export const useXBlockRender = (usageKey: string) => (
     enabled: !!usageKey,
   })
 );
-
-export const useXBlockHandlerUrl = (usageKey: string, handlerName: string) => (
-  useQuery({
-    queryKey: xblockQueryKeys.handlerUrl(usageKey, handlerName),
-    queryFn: () => getXBlockHandlerUrl(usageKey, handlerName),
-    enabled: !!usageKey,
-  })
-);

From 1c509b603bb321ee4ace6837c05e3748e459362e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Fri, 30 Aug 2024 17:38:13 -0300
Subject: [PATCH 04/15] fix: eslint

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx    | 1 +
 src/library-authoring/component-info/ComponentInfo.tsx | 2 +-
 src/library-authoring/data/apiHooks.ts                 | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index a7a8f83e33..ec961cca9f 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import React, {
   useEffect, useMemo, useRef, useState,
 } from 'react';
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index 999554380b..22ca4d5a04 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -15,7 +15,7 @@ interface ComponentInfoProps {
   usageKey: string;
 }
 
-const ComponentInfo= ({ usageKey }: ComponentInfoProps) => {
+const ComponentInfo = ({ usageKey }: ComponentInfoProps) => {
   const intl = useIntl();
 
   return (
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index cdaf183498..651fd3a18d 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -19,7 +19,6 @@ import {
   getXBlockFields,
   updateXBlockFields,
   getXBlockRender,
-  getXBlockHandlerUrl,
 } from './api';
 
 const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {

From ab56de40780ef6d8b2261f9ab06de6bc3c3d5785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Tue, 3 Sep 2024 16:38:52 -0300
Subject: [PATCH 05/15] feat: add expand button and modal

---
 .../LibraryBlock/LibraryBlock.tsx             |  2 +-
 .../component-info/ComponentPreview.tsx       | 63 +++++++++++++++++--
 .../component-info/messages.ts                | 15 +++++
 3 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index ec961cca9f..f6b3fc7f50 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -100,7 +100,6 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
       position: 'relative',
       overflow: 'hidden',
       minHeight: '200px',
-      margin: '12px',
       border: '1px solid #ccc',
     }}
     >
@@ -108,6 +107,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
         key={view.content}
         ref={iframeRef}
         title="block"
+        /* FixMe: Remove hardcoded URL */
         src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL || 'https://metadata-test233.s3.amazonaws.com/xblock-bootstrap.html'}
         data-testid="block-preview"
         style={{
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index f49cd63e60..44471648ab 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -1,24 +1,77 @@
 import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, StandardModal, useToggle } from '@openedx/paragon';
+import { OpenInFull } from '@openedx/paragon/icons';
 
 import { LibraryBlock } from '../LibraryBlock';
 import { getXBlockHandlerUrl } from '../data/api';
 import { useXBlockRender } from '../data/apiHooks';
+import messages from './messages';
 
-interface ComponentPreviewProps {
+// This is a simple overlay to prevent interaction with the preview
+const PreviewOverlay = () => (
+  <div className="position-absolute w-100 h-100 zindex-9" />
+);
+
+interface ModalComponentPreviewProps {
+  isOpen: boolean;
+  close: () => void;
   usageKey: string;
 }
 
-const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
+const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPreviewProps) => {
+  const intl = useIntl();
   const { data: view } = useXBlockRender(usageKey);
 
   const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
 
   return (
-    <div>
-      Hi, I am a component preview
+    <StandardModal
+      title={intl.formatMessage(messages.previewModalTitle)}
+      isOpen={isOpen}
+      onClose={close}
+      footerNode={(
+        <Button variant="tertiary" onClick={close}>
+          {intl.formatMessage(messages.previewModalCloseButtonTitle)}
+        </Button>
+      )}
+    >
+      <PreviewOverlay />
       { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
-    </div>
+    </StandardModal>
+  );
+};
+
+interface ComponentPreviewProps {
+  usageKey: string;
+}
+
+const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
+  const intl = useIntl();
+  const { data: view } = useXBlockRender(usageKey);
 
+  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
+
+  const [isModalOpen, openModal, closeModal] = useToggle();
+
+  return (
+    <>
+      <div className="position-relative m-2">
+        <PreviewOverlay />
+        <Button
+          size="sm"
+          variant="light"
+          iconBefore={OpenInFull}
+          onClick={openModal}
+          className="position-absolute top-0 right-0 zindex-10 m-1"
+          style={{ right: '0' }}
+        >
+          {intl.formatMessage(messages.previewExpandButtonTitle)}
+        </Button>
+        { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
+      </div>
+      <ModalComponentPreview isOpen={isModalOpen} close={closeModal} usageKey={usageKey} />
+    </>
   );
 };
 
diff --git a/src/library-authoring/component-info/messages.ts b/src/library-authoring/component-info/messages.ts
index 32251fce3c..a14927c68c 100644
--- a/src/library-authoring/component-info/messages.ts
+++ b/src/library-authoring/component-info/messages.ts
@@ -45,6 +45,21 @@ const messages = defineMessages({
     defaultMessage: 'Details',
     description: 'Title for details tab',
   },
+  previewExpandButtonTitle: {
+    id: 'course-authoring.library-authoring.component.preview.expand.title',
+    defaultMessage: 'Expand',
+    description: 'Title for expand preview button',
+  },
+  previewModalTitle: {
+    id: 'course-authoring.library-authoring.component.preview.modal.title',
+    defaultMessage: 'Component Preview',
+    description: 'Title for preview modal',
+  },
+  previewModalCloseButtonTitle: {
+    id: 'course-authoring.library-authoring.component.preview.modal.close.title',
+    defaultMessage: 'Close',
+    description: 'Title for close preview modal button',
+  },
 });
 
 export default messages;

From 68de1a15722fb7e2b1eb6b7d159869afb64c8ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Fri, 6 Sep 2024 18:23:25 -0300
Subject: [PATCH 06/15] fix: minor style adjust

---
 src/assets/scss/_utilities.scss                           | 4 ++++
 src/library-authoring/component-info/ComponentPreview.tsx | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
index 1cdaf84bab..2caa9558e5 100644
--- a/src/assets/scss/_utilities.scss
+++ b/src/assets/scss/_utilities.scss
@@ -9,3 +9,7 @@
 .mw-300px {
   max-width: 300px;
 }
+
+.right-0 {
+  right: 0;
+}
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 44471648ab..1690f3422f 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -63,8 +63,7 @@ const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
           variant="light"
           iconBefore={OpenInFull}
           onClick={openModal}
-          className="position-absolute top-0 right-0 zindex-10 m-1"
-          style={{ right: '0' }}
+          className="position-absolute right-0 zindex-10 m-1"
         >
           {intl.formatMessage(messages.previewExpandButtonTitle)}
         </Button>

From 31c6ccbd78e86ac8f415330da1d3eb8dccc63330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Sat, 7 Sep 2024 11:31:41 -0300
Subject: [PATCH 07/15] fix: adjust style and remove hardcoded url

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx        | 4 +---
 src/library-authoring/LibraryBlock/wrap.js                 | 1 +
 src/library-authoring/component-info/ComponentPreview.scss | 3 +++
 src/library-authoring/component-info/ComponentPreview.tsx  | 1 +
 src/library-authoring/index.scss                           | 1 +
 5 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 src/library-authoring/component-info/ComponentPreview.scss

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index f6b3fc7f50..dc446d4ea7 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -7,7 +7,6 @@ import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import type { XBlockRenderResponse } from '../data/api';
 import wrapBlockHtmlForIFrame from './wrap';
 
-// FixMe: We need this?
 ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'library block component');
 
 interface LibraryBlockProps {
@@ -107,8 +106,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
         key={view.content}
         ref={iframeRef}
         title="block"
-        /* FixMe: Remove hardcoded URL */
-        src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL || 'https://metadata-test233.s3.amazonaws.com/xblock-bootstrap.html'}
+        src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL}
         data-testid="block-preview"
         style={{
           position: 'absolute',
diff --git a/src/library-authoring/LibraryBlock/wrap.js b/src/library-authoring/LibraryBlock/wrap.js
index 82c1f28285..fc3f2aa48c 100644
--- a/src/library-authoring/LibraryBlock/wrap.js
+++ b/src/library-authoring/LibraryBlock/wrap.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+/* istanbul ignore file */
 /**
  * Code to wrap an XBlock so that we can embed it in an IFrame
  */
diff --git a/src/library-authoring/component-info/ComponentPreview.scss b/src/library-authoring/component-info/ComponentPreview.scss
new file mode 100644
index 0000000000..b4ff4b1fad
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentPreview.scss
@@ -0,0 +1,3 @@
+.component-preview-modal {
+  min-width: map-get($grid-breakpoints, "lg");
+}
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 1690f3422f..1a7953e4c7 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -35,6 +35,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
           {intl.formatMessage(messages.previewModalCloseButtonTitle)}
         </Button>
       )}
+      className="component-preview-modal"
     >
       <PreviewOverlay />
       { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
index a2acbe2a81..a82de4942f 100644
--- a/src/library-authoring/index.scss
+++ b/src/library-authoring/index.scss
@@ -1,3 +1,4 @@
+@import "library-authoring/component-info/ComponentPreview";
 @import "library-authoring/components/ComponentCard";
 @import "library-authoring/library-info/LibraryPublishStatus";
 @import "library-authoring/LibraryAuthoringPage";

From ffa566fefcda986048953d99394110dc126c8530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Sat, 7 Sep 2024 11:34:31 -0300
Subject: [PATCH 08/15] fix: add istanbul ignore in the code that depends on
 the frame

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index dc446d4ea7..88da5cbce7 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -43,6 +43,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
    * Handle any messages we receive from the XBlock Runtime code in the IFrame.
    * See wrap.ts to see the code that sends these messages.
    */
+   /* istanbul ignore next */
   const receivedWindowMessage = async (event) => {
     if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
       return; // This is some other random message.

From 30f60cfdc33757b9fd286e5b065a760152bb6e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Sat, 7 Sep 2024 11:47:50 -0300
Subject: [PATCH 09/15] fix: eslint

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 88da5cbce7..ff6f9cd0f0 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -43,7 +43,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
    * Handle any messages we receive from the XBlock Runtime code in the IFrame.
    * See wrap.ts to see the code that sends these messages.
    */
-   /* istanbul ignore next */
+  /* istanbul ignore next */
   const receivedWindowMessage = async (event) => {
     if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
       return; // This is some other random message.

From 990815ce3759480fc015db3e97ca43189d946bba Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Tue, 10 Sep 2024 17:23:14 -0700
Subject: [PATCH 10/15] feat: simpler xblock embedding

---
 .../LibraryBlock/LibraryBlock.tsx             |  70 +---
 src/library-authoring/LibraryBlock/wrap.js    | 392 ------------------
 .../LibraryBlock/xblock-bootstrap.html        |  66 ---
 .../component-info/ComponentPreview.tsx       |  10 +-
 4 files changed, 16 insertions(+), 522 deletions(-)
 delete mode 100644 src/library-authoring/LibraryBlock/wrap.js
 delete mode 100644 src/library-authoring/LibraryBlock/xblock-bootstrap.html

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index ff6f9cd0f0..3928dfefb7 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -1,18 +1,10 @@
 /* eslint-disable react/require-default-props */
-import React, {
-  useEffect, useMemo, useRef, useState,
-} from 'react';
-import { ensureConfig, getConfig } from '@edx/frontend-platform';
-
-import type { XBlockRenderResponse } from '../data/api';
-import wrapBlockHtmlForIFrame from './wrap';
-
-ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'library block component');
+import React, { useEffect, useRef, useState } from 'react';
+import { getConfig } from '@edx/frontend-platform';
 
 interface LibraryBlockProps {
-  getHandlerUrl: (usageId: string) => Promise<string>;
   onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
-  view: XBlockRenderResponse
+  usageKey: string;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -23,21 +15,10 @@ interface LibraryBlockProps {
  * cannot access things like the user's cookies, nor can it make GET/POST
  * requests as the user. However, it is allowed to call any XBlock handlers.
  */
-const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlockProps) => {
+const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(400);
-
-  const html = useMemo(() => {
-    if (!view) {
-      return null;
-    }
-
-    return wrapBlockHtmlForIFrame(
-      view.content,
-      view.resources,
-      getConfig().LMS_BASE_URL,
-    );
-  }, [view]);
+  const lmsBaseUrl = getConfig().LMS_BASE_URL;
 
   /**
    * Handle any messages we receive from the XBlock Runtime code in the IFrame.
@@ -50,17 +31,12 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
     }
 
     const { method, replyKey, ...args } = event.data;
-    const frame = iframeRef.current.contentWindow;
-    const sendReply = async (data) => {
-      frame?.postMessage({ ...data, replyKey }, '*');
-    };
+    // const frame = iframeRef.current.contentWindow;
+    // const sendReply = async (data) => {
+    //   frame?.postMessage({ ...data, replyKey }, '*');
+    // };
 
-    if (method === 'bootstrap') {
-      sendReply({ initialHtml: html });
-    } else if (method === 'get_handler_url') {
-      const handlerUrl = await getHandlerUrl(args.usageId);
-      sendReply({ handlerUrl });
-    } else if (method === 'update_frame_height') {
+    if (method === 'update_frame_height') {
       setIFrameHeight(args.height);
     } else if (method?.indexOf('xblock:') === 0) {
       // This is a notification from the XBlock's frontend via 'runtime.notify(event, args)'
@@ -85,13 +61,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
     return () => {
       window.removeEventListener('message', receivedWindowMessage);
     };
-  }, [view]);
-
-  /* Only draw the iframe if the HTML has already been set.  This is because xblock-bootstrap.html will only request
-   * HTML once, upon being rendered. */
-  if (!html) {
-    return null;
-  }
+  }, []);
 
   return (
     <div style={{
@@ -104,10 +74,9 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
     }}
     >
       <iframe
-        key={view.content}
         ref={iframeRef}
-        title="block"
-        src={getConfig().SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL}
+        title="preview" // FIXME: i18n needed
+        src={`${lmsBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
         data-testid="block-preview"
         style={{
           position: 'absolute',
@@ -121,18 +90,7 @@ const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlock
         }}
         // allowing 'autoplay' is required to allow the video XBlock to control the YouTube iframe it has.
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        sandbox={[
-          'allow-forms',
-          'allow-modals',
-          'allow-popups',
-          'allow-popups-to-escape-sandbox',
-          'allow-presentation',
-          'allow-same-origin', // This is only secure IF the IFrame source
-          // is served from a completely different domain name
-          // e.g. labxchange-xblocks.net vs www.labxchange.org
-          'allow-scripts',
-          'allow-top-navigation-by-user-activation',
-        ].join(' ')}
+
       />
     </div>
   );
diff --git a/src/library-authoring/LibraryBlock/wrap.js b/src/library-authoring/LibraryBlock/wrap.js
deleted file mode 100644
index fc3f2aa48c..0000000000
--- a/src/library-authoring/LibraryBlock/wrap.js
+++ /dev/null
@@ -1,392 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* istanbul ignore file */
-/**
- * Code to wrap an XBlock so that we can embed it in an IFrame
- */
-
-/**
- * The JavaScript code which runs inside our IFrame and is responsible
- * for communicating with the parent window.
- *
- * This cannot use any imported functions because it runs in the IFrame,
- * not in our app webpack bundle.
- */
-function blockFrameJS() {
-  const CHILDREN_KEY = '_jsrt_xb_children'; // JavaScript RunTime XBlock children
-  const USAGE_ID_KEY = '_jsrt_xb_usage_id';
-  const HANDLER_URL = '_jsrt_xb_handler_url';
-
-  const uniqueKeyPrefix = `k${+Date.now()}-${Math.floor(Math.random() * 1e10)}-`;
-  let messageCount = 0;
-  /**
-   * A helper method for sending messages to the parent window of this IFrame
-   * and getting a reply, even when the IFrame is securely sandboxed.
-   * @param messageData The message to send. Must be an object, as we add a key/value pair to it.
-   * @param callback The callback to call when the parent window replies
-   */
-  function postMessageToParent(messageData, callback) {
-    messageCount += 1;
-    const messageReplyKey = uniqueKeyPrefix + messageCount;
-    messageData.replyKey = messageReplyKey;
-    if (callback !== undefined) {
-      const handleResponse = (event) => {
-        if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
-          callback(event.data);
-          window.removeEventListener('message', handleResponse);
-        }
-      };
-      window.addEventListener('message', handleResponse);
-    }
-    window.parent.postMessage(messageData, '*');
-  }
-
-  /**
-   * The JavaScript runtime for any XBlock in the IFrame
-   */
-  const runtime = {
-    /**
-     * An obscure and little-used API that retrieves a particular
-     * XBlock child using its 'data-name' attribute
-     * @param block The root DIV element of the XBlock calling this method
-     * @param childName The value of the 'data-name' attribute of the root
-     *    DIV element of the XBlock child in question.
-     */
-    childMap: (block, childName) => runtime.children(block).find((child) => child.element.getAttribute('data-name') === childName),
-    children: (block) => block[CHILDREN_KEY],
-    /**
-     * Get the URL for the specified handler. This method must be synchronous, so
-     * cannot make HTTP requests.
-     */
-    handlerUrl: (block, handlerName, suffix, query) => {
-      let url = block[HANDLER_URL].replace('handler_name', handlerName);
-      if (suffix) {
-        url += `${suffix}/`;
-      }
-      if (query) {
-        url += `?${query}`;
-      }
-      return url;
-    },
-    /**
-     * Pass an arbitrary message from the XBlock to the parent application.
-     * This is mostly used by the studio_view to inform the user of save events.
-     * Standard events are as follows:
-     *
-     * save: {state: 'start'|'end', message: string}
-     * -> Displays a "Saving..." style message + animation to the user until called
-     *    again with {state: 'end'}. Then closes the modal holding the studio_view.
-     *
-     * error: {title: string, message: string}
-     * -> Displays an error message to the user
-     *
-     * cancel: {}
-     * -> Close the modal holding the studio_view
-     */
-    notify: (eventType, params) => {
-      params.method = `xblock:${eventType}`;
-      postMessageToParent(params);
-    },
-  };
-
-  /**
-   * Initialize an XBlock. This function should only be called by initializeXBlockAndChildren
-   * because it assumes that function has already run.
-   */
-  function initializeXBlock(element, callback) {
-    const usageId = element[USAGE_ID_KEY];
-    // Check if the XBlock has an initialization function:
-    const initFunctionName = element.getAttribute('data-init');
-    if (initFunctionName !== null) {
-      // Since this block has an init function, it may need to call handlers,
-      // so we first have to generate a secure handler URL for it:
-      postMessageToParent({ method: 'get_handler_url', usageId }, (handlerData) => {
-        element[HANDLER_URL] = handlerData.handlerUrl;
-        // Now proceed with initializing the block's JavaScript:
-        const InitFunction = (window)[initFunctionName];
-        // Does the XBlock HTML contain arguments to pass to the InitFunction?
-        let data = {};
-        [].forEach.call(element.children, (childNode) => {
-          // The newer/pure/Blockstore runtime uses 'xblock_json_init_args'
-          // while the LMS runtime uses 'xblock-json-init-args'.
-          if (
-            childNode.matches('script.xblock_json_init_args')
-            || childNode.matches('script.xblock-json-init-args')
-          ) {
-            data = JSON.parse(childNode.textContent);
-          }
-        });
-        // An unfortunate inconsistency is that the old Studio runtime used
-        // to pass 'element' as a jQuery-wrapped DOM element, whereas the LMS
-        // runtime used to pass 'element' as the pure DOM node. In order not to
-        // break backwards compatibility, we would need to maintain that.
-        // However, this is currently disabled as it causes issues (need to
-        // modify the runtime methods like handlerUrl too), and we decided not
-        // to maintain support for legacy studio_view in this runtime.
-        // const isStudioView = element.className.indexOf('studio_view') !== -1;
-        // const passElement = isStudioView && (window as any).$ ? (window as any).$(element) : element;
-
-        const blockJS = new InitFunction(runtime, element, data) || {};
-        blockJS.element = element;
-        callback(blockJS);
-      });
-    } else {
-      const blockJS = { element };
-      callback(blockJS);
-    }
-  }
-
-  // Recursively initialize the JavaScript code of each XBlock:
-  function initializeXBlockAndChildren(element, callback) {
-    // The newer/pure/Blockstore runtime uses the 'data-usage' attribute, while the LMS uses 'data-usage-id'
-    const usageId = element.getAttribute('data-usage') || element.getAttribute('data-usage-id');
-    if (usageId !== null) {
-      element[USAGE_ID_KEY] = usageId;
-    } else {
-      throw new Error('XBlock is missing a usage ID attribute on its root HTML node.');
-    }
-
-    const version = element.getAttribute('data-runtime-version');
-    if (version != null && version !== '1') {
-      throw new Error('Unsupported XBlock runtime version requirement.');
-    }
-
-    // Recursively initialize any children first:
-    // We need to find all div.xblock-v1 children, unless they're grandchilden
-    // So we build a list of all div.xblock-v1 descendants that aren't descendants
-    // of an already-found descendant:
-    const childNodesFound = [];
-    [].forEach.call(element.querySelectorAll('.xblock, .xblock-v1'), (childNode) => {
-      if (!childNodesFound.find((el) => el.contains(childNode))) {
-        childNodesFound.push(childNode);
-      }
-    });
-
-    // This code is awkward because we can't use promises (IE11 etc.)
-    let childrenInitialized = -1;
-    function initNextChild() {
-      childrenInitialized += 1;
-      if (childrenInitialized < childNodesFound.length) {
-        const childNode = childNodesFound[childrenInitialized];
-        initializeXBlockAndChildren(childNode, initNextChild);
-      } else {
-        // All children are initialized:
-        initializeXBlock(element, callback);
-      }
-    }
-    initNextChild();
-  }
-
-  // Find the root XBlock node.
-  // The newer/pure/Blockstore runtime uses '.xblock-v1' while the LMS runtime uses '.xblock'.
-  const rootNode = document.querySelector('.xblock, .xblock-v1'); // will always return the first matching element
-  initializeXBlockAndChildren(rootNode, () => {
-    // When done, tell the parent window the size of this block:
-    postMessageToParent({
-      height: document.body.scrollHeight,
-      method: 'update_frame_height',
-    });
-    postMessageToParent({ method: 'init_done' });
-  });
-
-  let lastHeight = -1;
-  function checkFrameHeight() {
-    const newHeight = document.documentElement.scrollHeight;
-    if (newHeight !== lastHeight) {
-      postMessageToParent({ method: 'update_frame_height', height: newHeight });
-      lastHeight = newHeight;
-    }
-  }
-  // Check the size whenever the DOM changes:
-  new MutationObserver(checkFrameHeight).observe(document.body, { attributes: true, childList: true, subtree: true });
-  // And whenever the IFrame is resized
-  window.addEventListener('resize', checkFrameHeight);
-}
-
-/**
- * Given an XBlock's fragment data (HTML plus CSS and JS URLs), return the
- * inner HTML that should go into an IFrame in order to display that XBlock
- * and interact with the surrounding LabXchange UI and with the LMS.
- * @param html The XBlock's HTML (Fragment.content)
- * @param jsUrls A list of any JavaScript URLs the XBlock may require
- * @param cssUrls A list of any CSS URLs the XBlock may require
- * @param lmsBaseUrl The absolute URL of the LMS, e.g. http://localhost:18000
- *                   Only required for legacy XBlocks that don't declare their
- *                   JS and CSS dependencies properly.
- */
-export default function wrapBlockHtmlForIFrame(html, resources, lmsBaseUrl) {
-  /* Separate resources by kind. */
-  const urlResources = resources.filter((r) => r.kind === 'url');
-  const textResources = resources.filter((r) => r.kind === 'text');
-
-  /* Extract CSS resources. */
-  const cssUrls = urlResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
-  const sheets = textResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
-  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${url}">`).join('\n');
-  cssTags += sheets.map((sheet) => `<style>${sheet}</style>`).join('\n');
-
-  /* Extract JS resources. */
-  const jsUrls = urlResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
-  const scripts = textResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
-  let jsTags = jsUrls.map((url) => `<script src="${url}"></script>`).join('\n');
-  jsTags += scripts.map((script) => `<script>${script}</script>`).join('\n');
-
-  // Most older XModules/XBlocks have a ton of undeclared dependencies on various JavaScript in the global scope.
-  // ALL XBlocks should be re-written to fully provide their own JS dependencies.
-  // We use 'learn_view' and 'edit_view' to declare a new, global-free, iframe JS environment for those new XBlocks
-  // that want full control over their JavaScript environment.
-  //
-  // Otherwise, if the XBlock uses 'student_view', 'author_view', or 'studio_view', include known required globals:
-  let legacyIncludes = '';
-  if (
-    html.indexOf('xblock-v1-student_view') !== -1
-    || html.indexOf('xblock-v1-public_view') !== -1
-    || html.indexOf('xblock-v1-studio_view') !== -1
-    || html.indexOf('xblock-v1-author_view') !== -1
-  ) {
-    legacyIncludes += `
-      <!-- gettext & XBlock JS i18n code -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/i18n/en/djangojs.js"></script>
-      <!-- Most XBlocks require jQuery: -->
-      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
-      <!-- The Video XBlock requires "ajaxWithPrefix" -->
-      <script type="text/javascript">
-          $.postWithPrefix = $.post;
-          $.getWithPrefix = $.get;
-          $.ajaxWithPrefix = $.ajax;
-      </script>
-      <!-- The Video XBlock requires "Slider" from jQuery-UI: -->
-      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
-      <!-- The video XBlock depends on Underscore.JS -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/underscore.js"></script>
-      <!-- The video XBlock depends on jquery-cookie -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/vendor/jquery.cookie.js"></script>
-      <!--The Video XBlock has an undeclared dependency on 'Logger' -->
-      <script>
-          window.Logger = { log: function() { } };
-      </script>
-      <!-- Builtin XBlock types depend on RequireJS -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/common/js/vendor/require.js"></script>
-      <script type="text/javascript" src="${lmsBaseUrl}/static/js/RequireJS-namespace-undefine.js"></script>
-      <script>
-          // The minimal RequireJS configuration required for common LMS building XBlock types to work:
-          (function (require, define) {
-              require.config({
-                  baseUrl: "${lmsBaseUrl}/static/",
-                  paths: {
-                      accessibility: 'js/src/accessibility_tools',
-                      draggabilly: 'js/vendor/draggabilly',
-                      hls: 'common/js/vendor/hls',
-                      moment: 'common/js/vendor/moment-with-locales',
-                      HtmlUtils: 'edx-ui-toolkit/js/utils/html-utils',
-                  },
-              });
-              define('gettext', [], function() { return window.gettext; });
-              define('jquery', [], function() { return window.jQuery; });
-              define('jquery-migrate', [], function() { return window.jQuery; });
-              define('underscore', [], function() { return window._; });
-          }).call(this, require || RequireJS.require, define || RequireJS.define);
-      </script>
-      <!-- edX HTML Utils requires GlobalLoader -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/edx-ui-toolkit/js/utils/global-loader.js"></script>
-      <script>
-      // The video XBlock has an undeclared dependency on edX HTML Utils
-      RequireJS.require(['HtmlUtils'], function (HtmlUtils) {
-          window.edx.HtmlUtils = HtmlUtils;
-          // The problem XBlock depends on window.SR, though 'accessibility_tools' has an undeclared dependency on HtmlUtils:
-          RequireJS.require(['accessibility']);
-      });
-      RequireJS.require(['edx-ui-toolkit/js/utils/string-utils'], function (StringUtils) {
-          window.edx.StringUtils = StringUtils;
-      });
-      </script>
-      <!-- 
-          commons.js: this file produced by webpack contains many shared chunks of code.
-          By including this, you have only to also import any of the smaller entrypoint
-          files (defined in webpack.common.config.js) to get that entry point and all
-          of its dependencies.
-      -->
-      <script type="text/javascript" src="${lmsBaseUrl}/static/bundles/commons.js"></script>
-      <!-- The video XBlock (and perhaps others?) expect this global: -->
-      <script>
-      window.onTouchBasedDevice = function() { return navigator.userAgent.match(/iPhone|iPod|iPad|Android/i); };
-      </script>
-      <!-- At least one XBlock (drag and drop v2) expects Font Awesome -->
-      <link rel="stylesheet"
-          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-      <!-- Capa Problem Editing requires CodeMirror -->
-      <link rel="stylesheet" href="${lmsBaseUrl}/static/js/vendor/CodeMirror/codemirror.css">
-      <!-- Built-in XBlocks (and some plugins) depends on LMS CSS -->
-      <link rel="stylesheet" href="${lmsBaseUrl}/static/css/lms-course.css">
-      <!-- Configure and load MathJax -->
-      <script type="text/x-mathjax-config">
-        MathJax.Hub.Config({
-          tex2jax: {
-            inlineMath: [
-              ['\\\\(','\\\\)'],
-              ['[mathjaxinline]','[/mathjaxinline]']
-            ],
-            displayMath: [
-              ['\\\\[','\\\\]'],
-              ['[mathjax]','[/mathjax]']
-            ]
-          }
-        });
-      </script>
-      <script type="text/x-mathjax-config">
-        MathJax.Hub.signal.Interest(function(message) {
-          if(message[0] === "End Math") {
-              set_mathjax_display_div_settings();
-          }
-        });
-        function set_mathjax_display_div_settings() {
-          $('.MathJax_Display').each(function( index ) {
-            this.setAttribute('tabindex', '0');
-            this.setAttribute('aria-live', 'off');
-            this.removeAttribute('role');
-            this.removeAttribute('aria-readonly');
-          });
-        }
-      </script>
-      <script type="text/javascript">
-          // Activating Mathjax accessibility files
-          window.MathJax = {
-              menuSettings: {
-                  collapsible: true,
-                  autocollapse: false,
-                  explorer: true
-              }
-          };
-      </script>
-      <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.
-           It can't be run through static.url because MathJax uses crazy url introspection to do lazy loading of
-           MathJax extension libraries -->
-      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG"></script>
-    `;
-  }
-
-  const result = `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <!-- Open links in a new tab, not this iframe -->
-      <base target="_blank">
-      <meta charset="UTF-8">
-      <meta http-equiv="cache-control" content="no-cache">
-      ${legacyIncludes}
-      ${cssTags}
-    </head>
-    <!-- A Studio-served stylesheet will set the body min-height to 100% (a common strategy to allow for background
-    images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the
-    onResize event listeners in certain situations.  Resetting it to the default "auto" skirts the problem. -->
-    <body style="min-height: auto; background-color: white">
-      ${html}
-      ${jsTags}
-      <script>
-        window.addEventListener('load', (${blockFrameJS.toString()}));
-      </script>
-    </body>
-    </html>
-  `;
-
-  return result;
-}
diff --git a/src/library-authoring/LibraryBlock/xblock-bootstrap.html b/src/library-authoring/LibraryBlock/xblock-bootstrap.html
deleted file mode 100644
index 01afd0f55d..0000000000
--- a/src/library-authoring/LibraryBlock/xblock-bootstrap.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-  This file is meant to be hosted on a completely separate domain name
-  from the LMS / frontend that is hosting the Open edX content (XBlocks).
-
-  Doing so allows us to enable features like cookies in the sandboxed
-  IFrame while keeping the XBlock content on a distinct origin, so that
-  the XBlock cannot access user data from the host application (like
-  cookies nor call APIs as the user).
-
-  This particular sandboxing code uses the secure message passing API
-  to request the XBlock HTML from the host application and then replaces
-  its content with that HTML.
--->
-<!DOCTYPE html>
-<html dir="auto">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="cache-control" content="no-cache">
-  </head>
-  <body>
-    <script>
-      const uniqueKeyPrefix = "k" + +Date.now() + "-" + Math.floor(Math.random() * 1e10) + "-";
-      var messageCount = 0;
-      function postMessageToParent(messageData, callback) {
-        const messageReplyKey = uniqueKeyPrefix + (messageCount++);
-        messageData.replyKey = messageReplyKey;
-        if (callback !== undefined) {
-          const handleResponse = function (event) {
-            if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
-              callback(event.data);
-              window.removeEventListener('message', handleResponse);
-            }
-          };
-          window.addEventListener('message', handleResponse);
-        }
-        window.parent.postMessage(messageData, '*');
-      }
-      /**
-       * Replace the entire current document with a new document that has the specified HTML.
-       */
-      function replaceAllHtml(newHtml) {
-        if(navigator.userAgent.indexOf('MSIE') !==-1 || navigator.appVersion.indexOf('Trident/') > -1) {
-          // Can't use document.open/close on IE11, it replaces this with an empty page.
-          // Thank god for StackOverflow and this crazy-ass hack that somehow works.
-          // https://stackoverflow.com/a/18262905
-          window.contents = newHtml;
-          location.replace('javascript:window["contents"]');
-        } else {
-          document.open();
-          document.write(newHtml);
-          document.close();
-        }
-      }
-
-      if (window.parent === window) {
-        document.write("This XBlock sandbox launch tool must be embedded in an IFrame.");
-      } else {
-        // Request the HTML from the parent and then completely replace this entire
-        // HTML document with the resulting HTML
-        postMessageToParent({method: 'bootstrap'}, function(data) {
-          replaceAllHtml(data.initialHtml || 'Error: Missing XBlock HTML.');
-        });
-      }
-    </script>
-  </body>
-</html>
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 1a7953e4c7..7f67a44f10 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -21,9 +21,6 @@ interface ModalComponentPreviewProps {
 
 const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPreviewProps) => {
   const intl = useIntl();
-  const { data: view } = useXBlockRender(usageKey);
-
-  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
 
   return (
     <StandardModal
@@ -38,7 +35,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
       className="component-preview-modal"
     >
       <PreviewOverlay />
-      { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
+      <LibraryBlock usageKey={usageKey} />
     </StandardModal>
   );
 };
@@ -49,9 +46,6 @@ interface ComponentPreviewProps {
 
 const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
   const intl = useIntl();
-  const { data: view } = useXBlockRender(usageKey);
-
-  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
 
   const [isModalOpen, openModal, closeModal] = useToggle();
 
@@ -68,7 +62,7 @@ const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
         >
           {intl.formatMessage(messages.previewExpandButtonTitle)}
         </Button>
-        { view && <LibraryBlock getHandlerUrl={getHandlerUrl} view={view} /> }
+        <LibraryBlock usageKey={usageKey} />
       </div>
       <ModalComponentPreview isOpen={isModalOpen} close={closeModal} usageKey={usageKey} />
     </>

From 395e6f69f502fd0c443bced1458c018002428118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Wed, 11 Sep 2024 15:23:17 -0300
Subject: [PATCH 11/15] fix: design issues and removing overlay from modal
 overview

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx        | 7 +------
 src/library-authoring/component-info/ComponentPreview.scss | 2 +-
 src/library-authoring/component-info/ComponentPreview.tsx  | 1 -
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 3928dfefb7..5982c14c38 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -17,7 +17,7 @@ interface LibraryBlockProps {
  */
 const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [iFrameHeight, setIFrameHeight] = useState(400);
+  const [iFrameHeight, setIFrameHeight] = useState(600);
   const lmsBaseUrl = getConfig().LMS_BASE_URL;
 
   /**
@@ -70,7 +70,6 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
       position: 'relative',
       overflow: 'hidden',
       minHeight: '200px',
-      border: '1px solid #ccc',
     }}
     >
       <iframe
@@ -79,14 +78,10 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
         src={`${lmsBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
         data-testid="block-preview"
         style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
           width: '100%',
           height: '100%',
           minHeight: '200px',
           border: '0 none',
-          backgroundColor: 'white',
         }}
         // allowing 'autoplay' is required to allow the video XBlock to control the YouTube iframe it has.
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
diff --git a/src/library-authoring/component-info/ComponentPreview.scss b/src/library-authoring/component-info/ComponentPreview.scss
index b4ff4b1fad..0baf5ebcb2 100644
--- a/src/library-authoring/component-info/ComponentPreview.scss
+++ b/src/library-authoring/component-info/ComponentPreview.scss
@@ -1,3 +1,3 @@
 .component-preview-modal {
-  min-width: map-get($grid-breakpoints, "lg");
+  min-width: map-get($grid-breakpoints, "md");
 }
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 7f67a44f10..94ab52a775 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -34,7 +34,6 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
       )}
       className="component-preview-modal"
     >
-      <PreviewOverlay />
       <LibraryBlock usageKey={usageKey} />
     </StandardModal>
   );

From 0e9b90757f61eab3eff78858795540478a8bce37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Wed, 11 Sep 2024 16:56:50 -0300
Subject: [PATCH 12/15] refactor: code cleanup

---
 .../component-info/ComponentPreview.tsx       |  2 -
 src/library-authoring/data/api.ts             | 39 -------------------
 src/library-authoring/data/apiHooks.ts        | 22 -----------
 3 files changed, 63 deletions(-)

diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 94ab52a775..1340e15c9a 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -4,8 +4,6 @@ import { Button, StandardModal, useToggle } from '@openedx/paragon';
 import { OpenInFull } from '@openedx/paragon/icons';
 
 import { LibraryBlock } from '../LibraryBlock';
-import { getXBlockHandlerUrl } from '../data/api';
-import { useXBlockRender } from '../data/apiHooks';
 import messages from './messages';
 
 // This is a simple overlay to prevent interaction with the preview
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 516649764d..0cfe3a6dea 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -35,17 +35,6 @@ export const getLibraryPasteClipboardUrl = (libraryId: string) => `${getApiBaseU
   */
 export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/fields/`;
 
-/**
-  * Get the URL that render the XBlock in the LMS.
-  */
-export const getXBlockRenderUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/view/student_view/`;
-
-/**
- * Get the URL for the xblock handler API.
- * The string `handler_name` is a placeholder for the name of the handler.
- */
-export const getXBlockHandlerUrlUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/handler_name/`;
-
 export interface ContentLibrary {
   id: string;
   type: string;
@@ -144,18 +133,6 @@ export interface UpdateXBlockFieldsRequest {
   };
 }
 
-export interface XBlockRenderResource {
-  data: string;
-  kind: 'url';
-  mimetype: string;
-  placement: 'head' | 'foot';
-}
-
-export interface XBlockRenderResponse {
-  content: string;
-  resources: XBlockRenderResource[];
-}
-
 /**
  * Fetch block types of a library
  */
@@ -273,19 +250,3 @@ export async function updateXBlockFields(usageKey:string, xblockData: UpdateXBlo
   const client = getAuthenticatedHttpClient();
   await client.post(getXBlockFieldsApiUrl(usageKey), xblockData);
 }
-
-/**
-  * Get rendered xblock
- */
-export async function getXBlockRender(usageKey: string): Promise<XBlockRenderResponse> {
-  const { data } = await getAuthenticatedHttpClient().get(getXBlockRenderUrl(usageKey));
-  return camelCaseObject(data);
-}
-
-/**
-  * Get the URL of the xblock handler.
- */
-export const getXBlockHandlerUrl = async (usageKey: string): Promise<string> => {
-  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey));
-  return data.handler_url;
-};
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 651fd3a18d..bd1e210974 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -18,7 +18,6 @@ import {
   libraryPasteClipboard,
   getXBlockFields,
   updateXBlockFields,
-  getXBlockRender,
 } from './api';
 
 const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -53,7 +52,6 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
-  // ToDo: Move to xblockQueryKeys
   xblockFields: (contentLibraryId: string, usageKey: string) => [
     ...libraryAuthoringQueryKeys.contentLibrary(contentLibraryId),
     'content',
@@ -62,18 +60,6 @@ export const libraryAuthoringQueryKeys = {
   ],
 };
 
-export const xblockQueryKeys = {
-  all: ['xblock'],
-  /**
-   * Base key for data specific to a xblock
-   */
-  xblock: (usageKey?: string) => [...xblockQueryKeys.all, usageKey],
-  render: (usageKey: string) => [
-    ...xblockQueryKeys.xblock(usageKey),
-    'render',
-  ],
-};
-
 /**
  * Hook to fetch a content library by its ID.
  */
@@ -222,11 +208,3 @@ export const useUpdateXBlockFields = (contentLibraryId: string, usageKey: string
     },
   });
 };
-
-export const useXBlockRender = (usageKey: string) => (
-  useQuery({
-    queryKey: xblockQueryKeys.render(usageKey),
-    queryFn: () => getXBlockRender(usageKey),
-    enabled: !!usageKey,
-  })
-);

From 0ed8e025efc74ea8ebf0ddd8f4e2916e34f60fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Fri, 13 Sep 2024 14:22:56 -0300
Subject: [PATCH 13/15] fix: remove unused code and add localization

---
 .../LibraryBlock/LibraryBlock.tsx                  | 14 +++++++-------
 src/library-authoring/LibraryBlock/messages.ts     | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/library-authoring/LibraryBlock/messages.ts

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 5982c14c38..d975130e61 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -1,7 +1,9 @@
-/* eslint-disable react/require-default-props */
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
+import messages from './messages';
+
 interface LibraryBlockProps {
   onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
   usageKey: string;
@@ -20,6 +22,8 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   const [iFrameHeight, setIFrameHeight] = useState(600);
   const lmsBaseUrl = getConfig().LMS_BASE_URL;
 
+  const intl = useIntl();
+
   /**
    * Handle any messages we receive from the XBlock Runtime code in the IFrame.
    * See wrap.ts to see the code that sends these messages.
@@ -31,10 +35,6 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
     }
 
     const { method, replyKey, ...args } = event.data;
-    // const frame = iframeRef.current.contentWindow;
-    // const sendReply = async (data) => {
-    //   frame?.postMessage({ ...data, replyKey }, '*');
-    // };
 
     if (method === 'update_frame_height') {
       setIFrameHeight(args.height);
@@ -74,7 +74,7 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
     >
       <iframe
         ref={iframeRef}
-        title="preview" // FIXME: i18n needed
+        title={intl.formatMessage(messages.iframeTitle)}
         src={`${lmsBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
         data-testid="block-preview"
         style={{
diff --git a/src/library-authoring/LibraryBlock/messages.ts b/src/library-authoring/LibraryBlock/messages.ts
new file mode 100644
index 0000000000..f325b60d3f
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/messages.ts
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  iframeTitle: {
+    id: 'course-authoring.library-authoring.library-block.iframe-title',
+    defaultMessage: 'Preview',
+    description: 'The title for the LibraryBlock iframe',
+  },
+});
+
+export default messages;

From a5bd6503fe28abe19526062c23d0353951a89932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@opencraft.com>
Date: Sat, 14 Sep 2024 10:46:29 -0300
Subject: [PATCH 14/15] docs: add comments from review

Co-authored-by: Braden MacDonald <mail@bradenm.com>
---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index d975130e61..87defc0d83 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -50,10 +50,9 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   };
 
   /**
-   * Load the XBlock data from the LMS and then inject it into our IFrame.
+   * Prepare to receive messages from the IFrame.
    */
   useEffect(() => {
-    // Prepare to receive messages from the IFrame.
     // Messages are the only way that the code in the IFrame can communicate
     // with the surrounding UI.
     window.addEventListener('message', receivedWindowMessage);

From d2edd559111251d226f419d97b2755b4c68d3f79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Sat, 14 Sep 2024 10:54:05 -0300
Subject: [PATCH 15/15] fix: remove footer close button

---
 src/library-authoring/component-info/ComponentPreview.tsx | 5 -----
 src/library-authoring/component-info/messages.ts          | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 1340e15c9a..b3a12315ae 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -25,11 +25,6 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
       title={intl.formatMessage(messages.previewModalTitle)}
       isOpen={isOpen}
       onClose={close}
-      footerNode={(
-        <Button variant="tertiary" onClick={close}>
-          {intl.formatMessage(messages.previewModalCloseButtonTitle)}
-        </Button>
-      )}
       className="component-preview-modal"
     >
       <LibraryBlock usageKey={usageKey} />
diff --git a/src/library-authoring/component-info/messages.ts b/src/library-authoring/component-info/messages.ts
index 3e5bf04653..e945064cee 100644
--- a/src/library-authoring/component-info/messages.ts
+++ b/src/library-authoring/component-info/messages.ts
@@ -51,11 +51,6 @@ const messages = defineMessages({
     defaultMessage: 'Component Preview',
     description: 'Title for preview modal',
   },
-  previewModalCloseButtonTitle: {
-    id: 'course-authoring.library-authoring.component.preview.modal.close.title',
-    defaultMessage: 'Close',
-    description: 'Title for close preview modal button',
-  },
 });
 
 export default messages;