feat: Add AdvancedEditors with an iframe

src/editors/AdvancedEditor.tsx

@@ -0,0 +1,18 @@
+import { LibraryBlock } from '../library-authoring/LibraryBlock';
+import { EditorModalWrapper } from './containers/EditorContainer';
+
+interface AdvancedEditorProps {
+  usageKey: string,
+  onClose: Function | null,
+}
+
+const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => (
+  <EditorModalWrapper onClose={onClose as () => void}>
+    <LibraryBlock
+      usageKey={usageKey}
+      view="studio_view"
+    />
+  </EditorModalWrapper>
+);
+
+export default AdvancedEditor;

src/editors/Editor.tsx

@@ -2,14 +2,13 @@
 // <EditorPage> as its parent, so they are tested together in EditorPage.test.tsx
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import messages from './messages';
 import * as hooks from './hooks';
 
 import supportedEditors from './supportedEditors';
 import type { EditorComponent } from './EditorComponent';
 import { useEditorContext } from './EditorContext';
+import AdvancedEditor from './AdvancedEditor';
 
 export interface Props extends EditorComponent {
   blockType: string;
@@ -43,9 +42,17 @@ const Editor: React.FC<Props> = ({
   const { fullScreen } = useEditorContext();
 
   const EditorComponent = supportedEditors[blockType];
-  const innerEditor = (EditorComponent !== undefined)
-    ? <EditorComponent {...{ onClose, returnFunction }} />
-    : <FormattedMessage {...messages.couldNotFindEditor} />;
+
+  if (EditorComponent === undefined && blockId) {
+    return (
+      <AdvancedEditor
+        usageKey={blockId}
+        onClose={onClose}
+      />
+    );
+  }
+
+  const innerEditor = <EditorComponent {...{ onClose, returnFunction }} />;
 
   if (fullScreen) {
     return (

src/editors/messages.ts

@@ -2,11 +2,6 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
 
-  couldNotFindEditor: {
-    id: 'authoring.editorpage.selecteditor.error',
-    defaultMessage: 'Error: Could Not find Editor',
-    description: 'Error Message Dispayed When An unsopported Editor is desired in V2',
-  },
   dropVideoFileHere: {
     defaultMessage: 'Drag and drop video here or click to upload',
     id: 'VideoUploadEditor.dropVideoFileHere',

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -10,6 +10,7 @@ interface LibraryBlockProps {
   onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
   usageKey: string;
   version?: VersionSpec;
+  view?: string;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -20,7 +21,12 @@ 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.
  */
-export const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockProps) => {
+export const LibraryBlock = ({
+  onBlockNotification,
+  usageKey,
+  version,
+  view,
+}: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(50);
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
@@ -71,6 +77,8 @@ export const LibraryBlock = ({ onBlockNotification, usageKey, version }: Library
 
   const queryStr = version ? `?version=${version}` : '';
 
+  const xblockView = view ?? 'student_view';
+
   return (
     <div style={{
       height: `${iFrameHeight}vh`,
@@ -83,7 +91,7 @@ export const LibraryBlock = ({ onBlockNotification, usageKey, version }: Library
       <iframe
         ref={iframeRef}
         title={intl.formatMessage(messages.iframeTitle)}
-        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/${queryStr}`}
+        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/${xblockView}/${queryStr}`}
         data-testid="block-preview"
         style={{
           width: '100%',

src/library-authoring/components/ComponentEditorModal.tsx

@@ -15,9 +15,7 @@ export function canEditComponent(usageKey: string): boolean {
     return false;
   }
 
-  // Which XBlock/component types are supported by the 'editors' built in to this repo?
-  const mfeEditorTypes = ['html', 'problem', 'video'];
-  return mfeEditorTypes.includes(blockType);
+  return getConfig().LIBRARY_SUPPORTED_BLOCKS.includes(blockType);
 }
 
 export const ComponentEditorModal: React.FC<Record<never, never>> = () => {