hack: local html rendering

package.json

@@ -33,7 +33,7 @@
     "@edx/frontend-component-footer": "11.6.3",
     "@edx/frontend-component-header": "3.6.4",
     "@edx/frontend-lib-special-exams": "2.10.0",
-    "@edx/frontend-platform": "3.4.1",
+    "@edx/frontend-platform": "4.1.0",
     "@edx/paragon": "20.28.4",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -45,6 +45,7 @@
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
+    "html-react-parser": "^3.0.15",
     "js-cookie": "3.0.1",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",

src/courseware/course/sequence/Unit.jsx

@@ -1,257 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
-import PropTypes from 'prop-types';
-import React, {
-  Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
-} from 'react';
-import { useDispatch } from 'react-redux';
-import { processEvent } from '../../../course-home/data/thunks';
-import { useEventListener } from '../../../generic/hooks';
-import { useModel } from '../../../generic/model-store';
-import PageLoading from '../../../generic/PageLoading';
-import { fetchCourse } from '../../data';
-import BookmarkButton from '../bookmark/BookmarkButton';
-import ShareButton from '../share/ShareButton';
-import messages from './messages';
-
-const HonorCode = React.lazy(() => import('./honor-code'));
-const LockPaywall = React.lazy(() => import('./lock-paywall'));
-
-/**
- * Feature policy for iframe, allowing access to certain courseware-related media.
- *
- * We must use the wildcard (*) origin for each feature, as courseware content
- * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
- * block that iframes external course content.
-
- * This policy was selected in conference with the edX Security Working Group.
- * Changes to it should be vetted by them (security@edx.org).
- */
-const IFRAME_FEATURE_POLICY = (
-  'microphone *; camera *; midi *; geolocation *; encrypted-media *'
-);
-
-/**
- * We discovered an error in Firefox where - upon iframe load - React would cease to call any
- * useEffect hooks until the user interacts with the page again.  This is particularly confusing
- * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
- * state.
- *
- * We were able to solve this error by using a layout effect to update some component state, which
- * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
- * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
- * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
- * a joke) one here so it wouldn't be accidentally removed elsewhere.
- *
- * If we remove this hook when one of these happens:
- * 1. React figures out that there's an issue here and fixes a bug.
- * 2. We cease to use an iframe for unit rendering.
- * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
- * 4. We stop supporting Firefox.
- * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
- *    Firefox/React for review, and they kindly help us figure out what in the world is happening
- *    so  we can fix it.
- *
- * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
- * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
- * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
- */
-function useLoadBearingHook(id) {
-  const setValue = useState(0)[1];
-  useLayoutEffect(() => {
-    setValue(currentValue => currentValue + 1);
-  }, [id]);
-}
-
-export function sendUrlHashToFrame(frame) {
-  const { hash } = window.location;
-  if (hash) {
-    // The url hash will be sent to LMS-served iframe in order to find the location of the
-    // hash within the iframe.
-    frame.contentWindow.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
-  }
-}
-
-const Unit = ({
-  courseId,
-  format,
-  onLoaded,
-  id,
-  intl,
-}) => {
-  const { authenticatedUser } = useContext(AppContext);
-  const view = authenticatedUser ? 'student_view' : 'public_view';
-  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
-  if (format) {
-    iframeUrl += `&format=${format}`;
-  }
-
-  const [iframeHeight, setIframeHeight] = useState(0);
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const [modalOptions, setModalOptions] = useState({ open: false });
-  const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
-
-  const unit = useModel('units', id);
-  const course = useModel('coursewareMeta', courseId);
-  const {
-    contentTypeGatingEnabled,
-    userNeedsIntegritySignature,
-  } = course;
-
-  const dispatch = useDispatch();
-  // Do not remove this hook.  See function description.
-  useLoadBearingHook(id);
-
-  useEffect(() => {
-    if (userNeedsIntegritySignature && unit.graded) {
-      setShouldDisplayHonorCode(true);
-    } else {
-      setShouldDisplayHonorCode(false);
-    }
-  }, [userNeedsIntegritySignature]);
-
-  const receiveMessage = useCallback(({ data }) => {
-    const {
-      type,
-      payload,
-    } = data;
-    if (type === 'plugin.resize') {
-      setIframeHeight(payload.height);
-      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
-        setHasLoaded(true);
-        if (onLoaded) {
-          onLoaded();
-        }
-      }
-    } else if (type === 'plugin.modal') {
-      payload.open = true;
-      setModalOptions(payload);
-    } else if (data.offset) {
-      // We listen for this message from LMS to know when the page needs to
-      // be scrolled to another location on the page.
-      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
-    }
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
-  useEventListener('message', receiveMessage);
-  useEffect(() => {
-    sendUrlHashToFrame(document.getElementById('unit-iframe'));
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
-
-  return (
-    <div className="unit">
-      <h1 className="mb-0 h3">{unit.title}</h1>
-      <h2 className="sr-only">{intl.formatMessage(messages.headerPlaceholder)}</h2>
-      <BookmarkButton
-        unitId={unit.id}
-        isBookmarked={unit.bookmarked}
-        isProcessing={unit.bookmarkedUpdateState === 'loading'}
-      />
-      {/* TODO: social share exp. Need to remove later */}
-      {(window.expSocialShareAboutUrls && window.expSocialShareAboutUrls[unit.id] !== undefined) && (
-        <ShareButton url={window.expSocialShareAboutUrls[unit.id]} />
-      )}
-      {contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
-        <Suspense
-          fallback={(
-            <PageLoading
-              srMessage={intl.formatMessage(messages.loadingLockedContent)}
-            />
-          )}
-        >
-          <LockPaywall courseId={courseId} />
-        </Suspense>
-      )}
-      {shouldDisplayHonorCode && (
-        <Suspense
-          fallback={(
-            <PageLoading
-              srMessage={intl.formatMessage(messages.loadingHonorCode)}
-            />
-          )}
-        >
-          <HonorCode courseId={courseId} />
-        </Suspense>
-      )}
-      {!shouldDisplayHonorCode && !hasLoaded && !showError && (
-        <PageLoading
-          srMessage={intl.formatMessage(messages.loadingSequence)}
-        />
-      )}
-      {!shouldDisplayHonorCode && !hasLoaded && showError && (
-        <ErrorPage />
-      )}
-      {modalOptions.open && (
-        <Modal
-          body={(
-            <>
-              {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
-                : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{
-                      width: '100%',
-                      height: '100vh',
-                    }}
-                  />
-                )}
-            </>
-          )}
-          onClose={() => { setModalOptions({ open: false }); }}
-          open
-          dialogClassName="modal-lti"
-        />
-      )}
-      {!shouldDisplayHonorCode && (
-        <div className="unit-iframe-wrapper">
-          <iframe
-            id="unit-iframe"
-            title={unit.title}
-            src={iframeUrl}
-            allow={IFRAME_FEATURE_POLICY}
-            allowFullScreen
-            height={iframeHeight}
-            scrolling="no"
-            referrerPolicy="origin"
-            onLoad={() => {
-              // onLoad *should* only fire after everything in the iframe has finished its own load events.
-              // Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already
-              // for a successful load. If it *has not fired*, we are in an error state. For example, the backend
-              // could have given us a 4xx or 5xx response.
-              if (!hasLoaded) {
-                setShowError(true);
-              }
-
-              window.onmessage = (e) => {
-                if (e.data.event_name) {
-                  dispatch(processEvent(e.data, fetchCourse));
-                }
-              };
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-Unit.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  format: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  onLoaded: PropTypes.func,
-};
-
-Unit.defaultProps = {
-  format: null,
-  onLoaded: undefined,
-};
-
-export default injectIntl(Unit);

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { ErrorPage } from '@edx/frontend-platform/react';
+import { Modal } from '@edx/paragon';
+import PageLoading from '../../../../generic/PageLoading';
+import LocalIFrame from './LocalIFrame';
+import { renderers } from './constants';
+import hooks from './hooks';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+const ContentIFrame = ({
+  iframeUrl,
+  showContent,
+  loadingMessage,
+  id,
+  elementId,
+  onLoaded,
+  title,
+  childBlocks,
+}) => {
+  const {
+    hasLoaded,
+    showError,
+    modalOptions,
+    handleModalClose,
+    handleIFrameLoad,
+    iframeHeight,
+  } = hooks.useIFrameBehavior({
+    id,
+    elementId,
+    onLoaded,
+    title,
+  });
+
+  const renderModal = () => (
+    <Modal
+      body={(
+        <>
+          {modalOptions.body
+            ? <div className="unit-modal">{ modalOptions.body }</div>
+            : (
+              <iframe
+                title={modalOptions.title}
+                allow={IFRAME_FEATURE_POLICY}
+                frameBorder="0"
+                src={modalOptions.url}
+                style={{
+                  width: '100%',
+                  height: '100vh',
+                }}
+              />
+            )}
+        </>
+      )}
+      onClose={handleModalClose}
+      open
+      dialogClassName="modal-lti"
+    />
+  );
+
+  const renderChild = (childBlock) => {
+    const Renderer = renderers[childBlock.type];
+    return (<Renderer key={childBlock.id} {...childBlock.student_view_data} block={childBlock} />);
+  };
+
+  const renderContent = () => {
+    if (iframeUrl) {
+      return (
+        <>
+          {!hasLoaded && (
+            showError ? <ErrorPage /> : <PageLoading srMessage={loadingMessage} />
+          )}
+          <div className="unit-iframe-wrapper">
+            <iframe
+              id={elementId}
+              title={title}
+              src={iframeUrl}
+              allow={IFRAME_FEATURE_POLICY}
+              allowFullScreen
+              height={iframeHeight}
+              scrolling="no"
+              referrerPolicy="origin"
+              onLoad={handleIFrameLoad}
+            />
+          </div>
+        </>
+      );
+    }
+    return (
+      <>
+        {childBlocks.map(renderChild)}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {showContent && renderContent()}
+      {modalOptions.open && renderModal()}
+    </>
+  );
+};
+
+ContentIFrame.propTypes = {
+  iframeUrl: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  showContent: PropTypes.bool.isRequired,
+  loadingMessage: PropTypes.node.isRequired,
+  elementId: PropTypes.string.isRequired,
+  onLoaded: PropTypes.func,
+  title: PropTypes.node.isRequired,
+  childBlocks: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.string,
+    student_view_data: PropTypes.shape({
+      enabled: PropTypes.bool,
+    }),
+  })).isRequired,
+};
+
+ContentIFrame.defaultProps = {
+  iframeUrl: null,
+  onLoaded: () => ({}),
+};
+
+export default ContentIFrame;

src/courseware/course/sequence/Unit/LocalIFrame.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+
+const LocalIFrame = ({
+  children,
+  title,
+  ...props
+}) => {
+  const [contentRef, setContentRef] = React.useState(null);
+  const mountNode = contentRef?.contentWindow?.document?.body;
+  return (
+    <iframe title={title} {...props} ref={setContentRef}>
+      {mountNode && createPortal(children, mountNode)}
+    </iframe>
+  );
+};
+
+LocalIFrame.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+};
+export default LocalIFrame;

src/courseware/course/sequence/Unit/constants.js

@@ -0,0 +1,12 @@
+import HTMLRenderer from './renderers/HTMLRenderer';
+
+export const renderers = {
+  html: HTMLRenderer,
+};
+
+export const FRendlyTypes = Object.keys(renderers);
+
+export default {
+  renderers,
+  FRendlyTypes,
+};

src/courseware/course/sequence/Unit/hooks.js

@@ -0,0 +1,211 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+import { processEvent } from '../../../../course-home/data/thunks';
+import { useEventListener } from '../../../../generic/hooks';
+import { useModel } from '../../../../generic/model-store';
+import { fetchCourse } from '../../../data';
+
+import { FRendlyTypes } from './constants';
+
+const useFetchStudentData = ({
+  id,
+}) => {
+  const [blocks, setBlocks] = useState(null);
+  const [children, setChildren] = useState(null);
+  const [isFRendly, setIsFRendly] = useState(false);
+
+  const { authenticatedUser } = useContext(AppContext);
+
+  useEffect(() => {
+    if (children) {
+      setIsFRendly(children.every(child => FRendlyTypes.includes(child.type)));
+    }
+  }, [children, setIsFRendly]);
+
+  useEffect(() => {
+    if (blocks) {
+      setChildren(blocks[id].children.map(childID => blocks[childID]));
+    }
+  }, [blocks, setChildren]);
+
+  useEffect(() => {
+    let sequenceUrl;
+    if (authenticatedUser) {
+      const { username } = authenticatedUser;
+      sequenceUrl = `${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/${id}?username=${username}&requested_fields=children&depth=all&student_view_data=video,html`;
+      getAuthenticatedHttpClient().get(sequenceUrl).then(response => {
+        console.log({ response });
+        setBlocks(response.data.blocks);
+      });
+    }
+  }, [authenticatedUser, setBlocks]);
+  console.log({ isFRendly, children });
+  return { children, isFRendly };
+};
+
+const useUnitData = ({
+  courseId,
+  format,
+  id,
+}) => {
+  const { authenticatedUser } = useContext(AppContext);
+  const view = authenticatedUser ? 'student_view' : 'public_view';
+  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
+  if (format) {
+    iframeUrl += `&format=${format}`;
+  }
+
+  const { isFRendly, children } = useFetchStudentData({ id });
+
+  const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
+
+  const unit = useModel('units', id);
+  const course = useModel('coursewareMeta', courseId);
+  const {
+    contentTypeGatingEnabled,
+    userNeedsIntegritySignature,
+  } = course;
+
+  useEffect(() => {
+    if (userNeedsIntegritySignature && unit.graded) {
+      setShouldDisplayHonorCode(true);
+    } else {
+      setShouldDisplayHonorCode(false);
+    }
+  }, [userNeedsIntegritySignature]);
+
+  return {
+    contentTypeGatingEnabled,
+    iframeUrl,
+    shouldDisplayHonorCode,
+    unit,
+    isFRendly,
+    children,
+  };
+};
+
+/**
+ * We discovered an error in Firefox where - upon iframe load - React would cease to call any
+ * useEffect hooks until the user interacts with the page again.  This is particularly confusing
+ * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
+ * state.
+ *
+ * We were able to solve this error by using a layout effect to update some component state, which
+ * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
+ * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
+ * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
+ * a joke) one here so it wouldn't be accidentally removed elsewhere.
+ *
+ * If we remove this hook when one of these happens:
+ * 1. React figures out that there's an issue here and fixes a bug.
+ * 2. We cease to use an iframe for unit rendering.
+ * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
+ * 4. We stop supporting Firefox.
+ * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
+ *    Firefox/React for review, and they kindly help us figure out what in the world is happening
+ *    so  we can fix it.
+ *
+ * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
+ * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
+ * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
+ */
+export const useLoadBearingHook = (id) => {
+  const setValue = useState(0)[1];
+  useLayoutEffect(() => {
+    setValue(currentValue => currentValue + 1);
+  }, [id]);
+};
+
+export const sendUrlHashToFrame = (frame) => {
+  const { hash } = window.location;
+  if (hash) {
+    // The url hash will be sent to LMS-served iframe in order to find the location of the
+    // hash within the iframe.
+    frame.contentWindow.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
+  }
+};
+
+const useIFrameBehavior = ({
+  id,
+  elementId,
+  onLoaded,
+}) => {
+  // Do not remove this hook.  See function description.
+  useLoadBearingHook(id);
+
+  const dispatch = useDispatch();
+
+  const [iframeHeight, setIframeHeight] = useState(0);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const [modalOptions, setModalOptions] = useState({ open: false });
+
+  useEffect(() => {
+    sendUrlHashToFrame(document.getElementById(elementId));
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+
+  const receiveMessage = useCallback(({ data }) => {
+    const { type, payload } = data;
+    if (type === 'plugin.resize') {
+      setIframeHeight(payload.height);
+      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
+        setHasLoaded(true);
+        if (onLoaded) {
+          onLoaded();
+        }
+      }
+    } else if (type === 'plugin.modal') {
+      payload.open = true;
+      setModalOptions(payload);
+    } else if (data.offset) {
+      // We listen for this message from LMS to know when the page needs to
+      // be scrolled to another location on the page.
+      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
+    }
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+  useEventListener('message', receiveMessage);
+
+  /**
+  * onLoad *should* only fire after everything in the iframe has finished its own load events.
+  * Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already
+  * for a successful load. If it *has not fired*, we are in an error state. For example, the backend
+  * could have given us a 4xx or 5xx response.
+  */
+  const handleIFrameLoad = () => {
+    if (!hasLoaded) {
+      setShowError(true);
+    }
+    window.onmessage = (e) => {
+      if (e.data.event_name) {
+        dispatch(processEvent(e.data, fetchCourse));
+      }
+    };
+  };
+
+  const handleCloseModal = () => {
+    setModalOptions({ open: false });
+  };
+
+  return {
+    iframeHeight,
+    handleCloseModal,
+    modalOptions,
+    handleIFrameLoad,
+    showError,
+    hasLoaded,
+  };
+};
+
+export default {
+  useIFrameBehavior,
+  useUnitData,
+};

src/courseware/course/sequence/Unit/index.jsx

@@ -0,0 +1,89 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import React, { Suspense } from 'react';
+import PageLoading from '../../../../generic/PageLoading';
+import BookmarkButton from '../../bookmark/BookmarkButton';
+import messages from '../messages';
+import ContentIFrame from './ContentIFrame';
+import hooks from './hooks';
+
+const HonorCode = React.lazy(() => import('../honor-code'));
+const LockPaywall = React.lazy(() => import('../lock-paywall'));
+
+const Unit = ({
+  courseId,
+  format,
+  onLoaded,
+  id,
+}) => {
+  const { formatMessage } = useIntl();
+  const {
+    unit,
+    contentTypeGatingEnabled,
+    shouldDisplayHonorCode,
+    iframeUrl,
+    isFRendly,
+    children,
+  } = hooks.useUnitData({
+    courseId,
+    format,
+    id,
+  });
+
+  return (
+    <div className="unit">
+      <h1 className="mb-0 h3">{unit.title}</h1>
+      <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
+      <BookmarkButton
+        unitId={unit.id}
+        isBookmarked={unit.bookmarked}
+        isProcessing={unit.bookmarkedUpdateState === 'loading'}
+      />
+      {contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
+        <Suspense
+          fallback={(
+            <PageLoading
+              srMessage={formatMessage(messages.loadingLockedContent)}
+            />
+          )}
+        >
+          <LockPaywall courseId={courseId} />
+        </Suspense>
+      )}
+      {shouldDisplayHonorCode && (
+        <Suspense
+          fallback={(
+            <PageLoading
+              srMessage={formatMessage(messages.loadingHonorCode)}
+            />
+          )}
+        >
+          <HonorCode courseId={courseId} />
+        </Suspense>
+      )}
+      <ContentIFrame
+        showContent={!shouldDisplayHonorCode}
+        {...(isFRendly ? { childBlocks: children } : { iframeUrl })}
+        loadingMessage={formatMessage(messages.loadingSequence)}
+        id={id}
+        elementId="unit-iframe"
+        onLoaded={onLoaded}
+        title={unit.title}
+      />
+    </div>
+  );
+};
+
+Unit.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  format: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  onLoaded: PropTypes.func,
+};
+
+Unit.defaultProps = {
+  format: null,
+  onLoaded: undefined,
+};
+
+export default Unit;

src/courseware/course/sequence/Unit/renderers/HTMLRenderer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+
+import parse from 'html-react-parser';
+
+const HTMLRenderer = ({ html }) => {
+  console.log({ html });
+  return (<div dangerouslySetInnerHTML={{ __html: html }} />);
+  // return parse(html);
+};
+
+HTMLRenderer.propTypes = {
+  html: PropTypes.string.isRequired,
+};
+
+export default HTMLRenderer;