feat: retain image dimensions during re-edit and handle null dimensions

Ensure width and height are preserved for re-edited images. Introduce fallback to original dimensions when selection dimensions are null. Update tests to validate new behaviors.

Author: xitij2000

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.tsx

@@ -108,6 +108,43 @@ describe('ImageSettingsModal', () => {
       expect(props.saveToEditor).toHaveBeenCalled();
     });
 
+    test('Preserve dimensions when reediting', async () => {
+      render(
+        <ImageSettingsModal
+          {...props}
+          selection={{ ...props.selection, width: '1280', height: '720' }}
+        />,
+      );
+      mockImageLoad(1920, 1080);
+      const widthInput = await screen.findByRole('textbox', { name: /width/i });
+      const heightInput = screen.getByRole('textbox', { name: /height/i });
+      expect(widthInput).toHaveValue('1280');
+      expect(heightInput).toHaveValue('720');
+    });
+
+    test('Use original dimensions for new images', async () => {
+      render(<ImageSettingsModal {...props} />);
+      mockImageLoad(1920, 1080);
+      const widthInput = await screen.findByRole('textbox', { name: /width/i });
+      const heightInput = screen.getByRole('textbox', { name: /height/i });
+      expect(widthInput).toHaveValue('1920');
+      expect(heightInput).toHaveValue('1080');
+    });
+
+    test('Use original dimensions when selection dimensions are null', async () => {
+      render(
+        <ImageSettingsModal
+          {...props}
+          selection={{ ...props.selection, width: null, height: null }}
+        />,
+      );
+      mockImageLoad(1920, 1080);
+      const widthInput = await screen.findByRole('textbox', { name: /width/i });
+      const heightInput = screen.getByRole('textbox', { name: /height/i });
+      expect(widthInput).toHaveValue('1920');
+      expect(heightInput).toHaveValue('1080');
+    });
+
     describe('Dimension Locking', () => {
       test('When dimensions are locked it maintains the original ratio', async () => {
         render(<ImageSettingsModal {...props} />);

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.tsx

@@ -29,6 +29,8 @@ interface ImageSettingsModalCommonProps {
     externalUrl: string;
     url: string;
     classList: string[];
+    width?: string | number | null;
+    height?: string | number | null;
   };
 }
 
@@ -61,12 +63,17 @@ const ImageSettingsModalBase = ({
   const intl = useIntl();
   const formik = useFormikContext<ImageConfig>();
 
-  const setOriginalDimensions = React.useCallback(async (event: React.ChangeEvent<HTMLImageElement>) => {
-    const img = event.currentTarget as HTMLImageElement;
-    setImgDimensions({ width: img.naturalWidth, height: img.naturalHeight });
-    await formik.setFieldValue('width', img.naturalWidth, false);
-    await formik.setFieldValue('height', img.naturalHeight, false);
-  }, [formik]);
+  const setOriginalDimensions = React.useCallback(
+    async (event: React.ChangeEvent<HTMLImageElement>) => {
+      const img = event.currentTarget as HTMLImageElement;
+      setImgDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+      if (!selection.width || !selection.height) {
+        await formik.setFieldValue('width', img.naturalWidth, false);
+        await formik.setFieldValue('height', img.naturalHeight, false);
+      }
+    },
+    [formik, selection.width, selection.height],
+  );
 
   const handleDismissError = React.useCallback(() => formik.setFieldError('altText', ''), [formik]);
 
@@ -176,8 +183,8 @@ const ImageSettingsModal = ({
   const [imgDimensions, setImgDimensions] = React.useState<OrigImageDimensions>({ width: 0, height: 0 });
   const initialValues: ImageConfig = {
     isLocked: true,
-    width: imgDimensions.width,
-    height: imgDimensions.height,
+    width: selection.width ?? imgDimensions.width,
+    height: selection.height ?? imgDimensions.height,
     isDecorative: !selection.altText,
     altText: selection.altText || '',
     classList: selection.classList,