fix: fill the fullscreen component editor with the editor

src/constants.ts

@@ -92,6 +92,8 @@ export const REGEX_RULES = {
  * This policy was selected in conference with the edX Security Working Group.
  * Changes to it should be vetted by them (security@edx.org).
  */
+export const ADVANCED_EDITOR_MIN_HEIGHT = '70vh';
+
 export const IFRAME_FEATURE_POLICY =
   'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *';
 

src/editors/AdvancedEditor.test.tsx

@@ -1,4 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
+import userEvent from '@testing-library/user-event';
 
 import {
   render,
@@ -8,10 +9,15 @@ import {
   act,
   fireEvent,
 } from '../testUtils';
+import { LibraryBlock } from '../library-authoring/LibraryBlock';
+import messages from './messages';
 import AdvancedEditor from './AdvancedEditor';
 
 jest.mock('./containers/EditorContainer', () => ({
-  EditorModalWrapper: jest.fn(() => <div>Advanced Editor Iframe</div>),
+  EditorModalWrapper: jest.fn(({ children }) => <div>Advanced Editor Iframe{children}</div>),
+}));
+jest.mock('../library-authoring/LibraryBlock', () => ({
+  LibraryBlock: jest.fn(() => <div>Library Block</div>),
 }));
 const onCloseMock = jest.fn();
 
@@ -99,4 +105,24 @@ describe('AdvancedEditor', () => {
 
     expect(onCloseMock).not.toHaveBeenCalled();
   });
+
+  it('lets the block fill the modal only in fullscreen', async () => {
+    const user = userEvent.setup();
+    render(<AdvancedEditor usageKey="test" onClose={onCloseMock} />);
+
+    expect(LibraryBlock).toHaveBeenLastCalledWith(
+      expect.objectContaining({ fillContainer: false }),
+      expect.anything(),
+    );
+
+    const toggleButton = await screen.findByRole('button', {
+      name: messages.advancedEditorFullscreenButtonAlt.defaultMessage,
+    });
+    await user.click(toggleButton);
+
+    expect(LibraryBlock).toHaveBeenLastCalledWith(
+      expect.objectContaining({ fillContainer: true }),
+      expect.anything(),
+    );
+  });
 });

src/editors/AdvancedEditor.tsx

@@ -12,6 +12,8 @@ import {
 } from '@openedx/paragon';
 import { Close, CloseFullscreen, OpenInFull } from '@openedx/paragon/icons';
 
+import { ADVANCED_EDITOR_MIN_HEIGHT } from '@src/constants';
+
 import { LibraryBlock } from '../library-authoring/LibraryBlock';
 import { EditorModalWrapper } from './containers/EditorContainer';
 import { ToastContext } from '../generic/toast-context';
@@ -88,7 +90,8 @@ const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => {
             usageKey={usageKey}
             view="studio_view"
             scrolling="yes"
-            minHeight="70vh"
+            minHeight={ADVANCED_EDITOR_MIN_HEIGHT}
+            fillContainer={isFullscreen}
           />
         </IframeProvider>
       </EditorModalWrapper>

src/editors/containers/EditorContainer/index.scss

@@ -4,3 +4,24 @@
     overflow: visible;
   }
 }
+
+// Pass the fullscreen height down: flex-basis outranks h-75 and TinyMCE's inline height.
+.editor-modal.pgn__modal-fullscreen {
+  .pgn__modal-body,
+  .pgn__modal-body-content,
+  .editor-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pgn__modal-body-content,
+  .editor-body,
+  .tox-tinymce {
+    flex: 1 1 0;
+    min-height: 0;
+  }
+
+  .pgn__modal-body-content {
+    overflow-y: auto;
+  }
+}

src/editors/containers/EditorContainer/index.tsx

@@ -46,6 +46,7 @@ export const EditorModalWrapper: React.FC<WrapperProps & { onClose: () => void;
       isOpen
       onClose={onClose}
       title={title}
+      className="editor-modal"
       size={fullscreen ? 'fullscreen' : 'xl'}
       isOverflowVisible={false}
       hasCloseButton={false}

src/library-authoring/LibraryBlock/LibraryBlock.test.tsx

@@ -0,0 +1,36 @@
+import { initializeMocks, render, screen } from '../../testUtils';
+import { ADVANCED_EDITOR_MIN_HEIGHT } from '../../constants';
+import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
+import { LibraryBlock } from '.';
+
+const usageKey = 'lb:Org:Lib:html:block-1';
+
+const renderBlock = (props = {}) =>
+  render(
+    <IframeProvider>
+      <LibraryBlock usageKey={usageKey} minHeight={ADVANCED_EDITOR_MIN_HEIGHT} {...props} />
+    </IframeProvider>,
+  );
+
+describe('LibraryBlock', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('sizes the frame to the height the block reports', async () => {
+    renderBlock();
+
+    const iframe = await screen.findByTestId('block-preview');
+    expect(iframe.style.minHeight).toBe(ADVANCED_EDITOR_MIN_HEIGHT);
+    expect(iframe.style.flex).toBe('');
+  });
+
+  it('stretches the frame to its container when asked to', async () => {
+    renderBlock({ fillContainer: true });
+
+    const iframe = await screen.findByTestId('block-preview');
+    expect(iframe.style.flex).toBe('1 1 auto');
+    expect(iframe.style.height).toBe('auto');
+    expect(iframe.style.minHeight).toBe('0');
+  });
+});

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -19,6 +19,7 @@ interface LibraryBlockProps {
   view?: string;
   scrolling?: string;
   minHeight?: string;
+  fillContainer?: boolean;
   scrollIntoView?: boolean;
   showTitle?: boolean;
   addHeight?: number;
@@ -38,6 +39,7 @@ export const LibraryBlock = ({
   version,
   view,
   minHeight,
+  fillContainer = false,
   scrolling = 'no',
   scrollIntoView = false,
   showTitle = false,
@@ -99,9 +101,10 @@ export const LibraryBlock = ({
       referrerPolicy="origin"
       style={{
         width: '100%',
-        height: iframeHeight + addHeight,
         pointerEvents: 'auto',
-        minHeight,
+        ...(fillContainer
+          ? { flex: '1 1 auto', height: 'auto', minHeight: 0 }
+          : { height: iframeHeight + addHeight, minHeight }),
       }}
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen