feat: Intercept cancel button event to close Advanced Editor

Author: ChrisChV

src/editors/AdvancedEditor.test.tsx

@@ -0,0 +1,50 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import {
+  render,
+  initializeMocks,
+  waitFor,
+} from '../testUtils';
+import AdvancedEditor from './AdvancedEditor';
+
+jest.mock('../library-authoring/LibraryBlock', () => ({
+  LibraryBlock: jest.fn(() => (<div>Advanced Editor Iframe</div>)),
+}));
+
+describe('AdvancedEditor', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should call onClose when receiving "cancel-clicked" message', () => {
+    const onCloseMock = jest.fn();
+
+    render(<AdvancedEditor usageKey="test" onClose={onCloseMock} />);
+
+    const messageEvent = new MessageEvent('message', {
+      data: 'cancel-clicked',
+      origin: getConfig().STUDIO_BASE_URL,
+    });
+
+    window.dispatchEvent(messageEvent);
+
+    waitFor(() => {
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+  });
+
+  it('should not call onClose if the message is from an invalid origin', () => {
+    const onCloseMock = jest.fn();
+
+    render(<AdvancedEditor usageKey="test" onClose={onCloseMock} />);
+
+    const messageEvent = new MessageEvent('message', {
+      data: 'cancel-clicked',
+      origin: 'https://invalid-origin.com',
+    });
+
+    window.dispatchEvent(messageEvent);
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+});

src/editors/AdvancedEditor.tsx

@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+
 import { LibraryBlock } from '../library-authoring/LibraryBlock';
 import { EditorModalWrapper } from './containers/EditorContainer';
 
@@ -6,13 +9,33 @@ interface AdvancedEditorProps {
   onClose: Function | null,
 }
 
-const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => (
-  <EditorModalWrapper onClose={onClose as () => void}>
-    <LibraryBlock
-      usageKey={usageKey}
-      view="studio_view"
-    />
-  </EditorModalWrapper>
-);
+const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => {
+  useEffect(() => {
+    const handleIframeMessage = (event) => {
+      if (event.origin !== getConfig().STUDIO_BASE_URL) {
+        return;
+      }
+
+      if (event.data === 'cancel-clicked' && onClose) {
+        onClose();
+      }
+    };
+
+    window.addEventListener('message', handleIframeMessage);
+
+    return () => {
+      window.removeEventListener('message', handleIframeMessage);
+    };
+  }, []);
+
+  return (
+    <EditorModalWrapper onClose={onClose as () => void}>
+      <LibraryBlock
+        usageKey={usageKey}
+        view="studio_view"
+      />
+    </EditorModalWrapper>
+  );
+};
 
 export default AdvancedEditor;