[Image] | (CX) | Add a button to reset image to original dimensions (#3007)

## Summary:
It could be helpful to provide a way to reset an image to its natural dimensions
within the image widget editor.

Issue: https://khanacademy.atlassian.net/browse/LEMS-3638

## Test plan:
`pnpm jest packages/perseus-editor/src/widgets/__tests__/image-editor.test.tsx`

Storybook
`/?path=/story/widgets-image-editor-demo--populated`

https://github.com/user-attachments/assets/33ce9be2-fea6-476e-8147-b6f35452881e

Author: nishasy

Reviewers: ivyolamit

Required Reviewers:

Approved By: ivyolamit

Checks: ✅ 10 checks were successful, ⏹️  7 checks were cancelled

Pull Request URL: #3007

Author: nishasy

.changeset/lemon-seas-allow.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Image] | (CX) | Add a button to reset image to original dimensions

packages/perseus-editor/src/widgets/__tests__/image-editor.test.tsx

@@ -50,7 +50,10 @@ describe("image editor", () => {
             testDependencies,
         );
 
-        unmockImageLoading = mockImageLoading();
+        unmockImageLoading = mockImageLoading({
+            naturalWidth: earthMoonImage.width,
+            naturalHeight: earthMoonImage.height,
+        });
     });
 
     afterEach(() => {
@@ -427,6 +430,54 @@ describe("image editor", () => {
         });
     });
 
+    it("should call onChange with original image size when reset to original size is clicked", async () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(
+            <ImageEditorWithDependencies
+                apiOptions={apiOptions}
+                backgroundImage={{
+                    url: earthMoonImage.url,
+                    width: earthMoonImage.width / 2,
+                    height: earthMoonImage.height / 2,
+                }}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act
+        const resetToOriginalSizeButton = screen.getByRole("button", {
+            name: "Reset to original size",
+        });
+        await userEvent.click(resetToOriginalSizeButton);
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({
+            backgroundImage: earthMoonImage,
+        });
+    });
+
+    it("should not call onChange when reset to original size is clicked and the image size is already the original size", async () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(
+            <ImageEditorWithDependencies
+                apiOptions={apiOptions}
+                backgroundImage={earthMoonImage}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act
+        const resetToOriginalSizeButton = screen.getByRole("button", {
+            name: "Reset to original size",
+        });
+        await userEvent.click(resetToOriginalSizeButton);
+
+        // Assert
+        expect(onChangeMock).not.toHaveBeenCalled();
+    });
+
     it("should call onChange with new alt text", async () => {
         // Arrange
         const onChangeMock = jest.fn();

packages/perseus-editor/src/widgets/image-editor/components/image-dimensions-input.tsx

@@ -1,4 +1,7 @@
+import {Util} from "@khanacademy/perseus";
+import Button from "@khanacademy/wonder-blocks-button";
 import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
+import arrowCounterClockwise from "@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg";
 import * as React from "react";
 
 import ScrolllessNumberTextField from "../../../components/scrollless-number-text-field";
@@ -60,29 +63,59 @@ export default function ImageDimensionsInput({
         });
     }
 
+    async function handleResetToOriginalSize() {
+        const naturalSize = await Util.getImageSizeModern(backgroundImage.url!);
+        const [naturalWidth, naturalHeight] = naturalSize;
+
+        if (
+            naturalWidth === backgroundImage.width &&
+            naturalHeight === backgroundImage.height
+        ) {
+            return;
+        }
+
+        onChange({
+            backgroundImage: {
+                ...backgroundImage,
+                width: naturalWidth,
+                height: naturalHeight,
+            },
+        });
+    }
+
     return (
         <div className={styles.dimensionsContainer}>
-            <LabeledField
-                label="Width"
-                field={
-                    <ScrolllessNumberTextField
-                        value={backgroundImage.width?.toString() ?? ""}
-                        onChange={handleWidthChange}
-                    />
-                }
-                styles={wbFieldStyles}
-            />
-            <span className={styles.xSpan}>x</span>
-            <LabeledField
-                label="Height"
-                field={
-                    <ScrolllessNumberTextField
-                        value={backgroundImage.height?.toString() ?? ""}
-                        onChange={handleHeightChange}
-                    />
-                }
-                styles={wbFieldStyles}
-            />
+            <div className={styles.dimensionsFieldContainer}>
+                <LabeledField
+                    label="Width"
+                    field={
+                        <ScrolllessNumberTextField
+                            value={backgroundImage.width?.toString() ?? ""}
+                            onChange={handleWidthChange}
+                        />
+                    }
+                    styles={wbFieldStyles}
+                />
+                <span className={styles.xSpan}>x</span>
+                <LabeledField
+                    label="Height"
+                    field={
+                        <ScrolllessNumberTextField
+                            value={backgroundImage.height?.toString() ?? ""}
+                            onChange={handleHeightChange}
+                        />
+                    }
+                    styles={wbFieldStyles}
+                />
+            </div>
+            <Button
+                kind="tertiary"
+                size="small"
+                startIcon={arrowCounterClockwise}
+                onClick={handleResetToOriginalSize}
+            >
+                Reset to original size
+            </Button>
         </div>
     );
 }

packages/perseus-editor/src/widgets/image-editor/image-editor.module.css

@@ -1,7 +1,7 @@
 .dimensions-container {
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    align-items: start;
     background-color: var(
         --wb-semanticColor-core-background-instructive-subtle
     );
@@ -12,6 +12,12 @@
     padding: var(--wb-sizing-size_080);
 }
 
+.dimensions-field-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
 .x-span {
     display: block;
     margin-inline: var(--wb-sizing-size_080);

testing/image-loader-utils.ts

@@ -5,11 +5,17 @@ import {act} from "@testing-library/react";
  * the load event.
  * @returns A function to unmock the image loading
  */
-export const mockImageLoading = () => {
+export const mockImageLoading = (options?: {
+    naturalWidth?: number;
+    naturalHeight?: number;
+}) => {
     const originalImage = window.Image;
 
     const mockImage = jest.fn(() => {
-        const img = {} as HTMLImageElement;
+        const img = {
+            naturalWidth: options?.naturalWidth,
+            naturalHeight: options?.naturalHeight,
+        } as HTMLImageElement;
         // Immediately trigger onload using setTimeout to ensure it happens after render
         setTimeout(() => {
             if (img.onload) {