From 604715dce94389be3b7c35f731cc38edefbc68a3 Mon Sep 17 00:00:00 2001
From: Henrik Nygren <nygrenh@gmail.com>
Date: Tue, 30 Jul 2024 16:45:43 +0300
Subject: [PATCH] Allow customizing iframe block width (#1299)

---
 services/cms/src/blocks/Iframe/IframeEditor.tsx        | 10 +++++++++-
 services/cms/src/blocks/Iframe/index.tsx               |  5 +++++
 .../components/ContentRenderer/moocfi/IframeBlock.tsx  |  7 +++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/services/cms/src/blocks/Iframe/IframeEditor.tsx b/services/cms/src/blocks/Iframe/IframeEditor.tsx
index af3a7a8bb67f..a77e39147404 100644
--- a/services/cms/src/blocks/Iframe/IframeEditor.tsx
+++ b/services/cms/src/blocks/Iframe/IframeEditor.tsx
@@ -48,7 +48,15 @@ const IframeEditor: React.FC<React.PropsWithChildren<BlockEditProps<IframeAttrib
             <TextField
               value={attributes.heightPx?.toString() ?? IFRAME_BLOCK_DEFAULT_HEIGHT_PX}
               onChangeByValue={(newValue) => setAttributes({ heightPx: Number(newValue) })}
-              label="Height"
+              label="Height px"
+            />
+            <TextField
+              value={attributes.widthPx}
+              onChangeByValue={(newValue) =>
+                setAttributes({ widthPx: newValue === "" ? undefined : Number(newValue) })
+              }
+              placeholder="Auto"
+              label="Width px (leave empty for auto)"
             />
           </PanelBody>
         </InspectorControls>
diff --git a/services/cms/src/blocks/Iframe/index.tsx b/services/cms/src/blocks/Iframe/index.tsx
index f89bc7258529..04e84647b888 100644
--- a/services/cms/src/blocks/Iframe/index.tsx
+++ b/services/cms/src/blocks/Iframe/index.tsx
@@ -8,6 +8,7 @@ import IframeSave from "./IframeSave"
 export interface IframeAttributes {
   url: string | undefined
   heightPx: number
+  widthPx: number | undefined
 }
 
 export const IFRAME_BLOCK_DEFAULT_HEIGHT_PX = 630
@@ -25,6 +26,10 @@ const IframeBoxConfiguration: BlockConfiguration<IframeAttributes> = {
       type: "number",
       default: IFRAME_BLOCK_DEFAULT_HEIGHT_PX,
     },
+    widthPx: {
+      type: "number",
+      default: undefined,
+    },
   },
   icon,
   edit: IframeEditor,
diff --git a/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx
index 16293f00a2fd..efe8534bd380 100644
--- a/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx
+++ b/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx
@@ -7,6 +7,7 @@ import BreakFromCentered from "@/shared-module/common/components/Centering/Break
 export interface IframeAttributes {
   url: string | undefined
   heightPx: number | undefined
+  widthPx: number | undefined
 }
 
 const IFRAME = "iframe"
@@ -16,19 +17,21 @@ export const IframeBlock: React.FC<BlockRendererProps<IframeAttributes>> = (prop
     return null
   }
 
+  const { heightPx, widthPx } = props.data.attributes
+
   return (
     <BreakFromCentered sidebar={false}>
       <figure
         className={css`
           width: 100%;
-          max-width: 1000px;
+          max-width: ${widthPx ?? 1000}px;
           margin: 4rem auto;
         `}
       >
         <iframe
           className={css`
             width: 100%;
-            height: ${props.data.attributes.heightPx ?? 630}px;
+            height: ${heightPx ?? 630}px;
             border: none;
             overflow: hidden;
           `}