[Radio] | (CX) | Nicer image editing in radio (#2647)

## Summary:
Implement a UI for adding images to the content area within the Radio widget editor.

Note for reviewer: Over half the lines of code are tests.

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

## Demo:

| Default | Adding image | Added image |
| --- | --- | --- |
| <img width="333" height="265" alt="image" src="https://github.com/user-attachments/assets/237ad001-9693-4761-923f-214e603fadea" /> |  <img width="337" height="467" alt="Screenshot 2025-08-05 at 1 46 53 PM" src="https://github.com/user-attachments/assets/ac4ad8aa-53f6-4dac-8a74-0e42ad76fc89" /> | <img width="337" height="718" alt="image" src="https://github.com/user-attachments/assets/4fa37858-f4d6-4871-9cd1-f77af06bb7d3" /> |



https://github.com/user-attachments/assets/d7791b90-a089-440b-a225-fac1f1df12ed


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

ZND manual testing:
- Press "Add image" to show the editor tile
- Close the "Add image" editor tile
- Add an image to see a new image show up
- It should also cause a new editor accordion to show up
- Edit an image with the accordion
- Delete an image with the accordion
- Paste an image into the content box

Author: nishasy

Reviewers: nishasy, ivyolamit, mark-fitzgerald, SonicScrewdriver, anakaren-rojas

Required Reviewers:

Approved By: ivyolamit, mark-fitzgerald

Checks: ✅ 10 checks were successful

Pull Request URL: #2647

Author: nishasy

.changeset/forty-bobcats-invent.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+[Radio] | (CX) | Implment UI for adding images in Radio editor

packages/perseus-editor/src/components/perseus-editor-accordion.tsx

@@ -13,6 +13,7 @@ type Props = {
     expanded?: boolean;
     containerStyle?: StyleType;
     panelStyle?: StyleType;
+    headerStyle?: StyleType;
     onToggle?: (expanded: boolean) => void;
 };
 
@@ -24,6 +25,7 @@ const PerseusEditorAccordion = (props: Props) => {
         expanded,
         containerStyle,
         panelStyle,
+        headerStyle,
         onToggle,
     } = props;
 
@@ -39,7 +41,7 @@ const PerseusEditorAccordion = (props: Props) => {
                 expanded={expanded}
                 onToggle={onToggle}
                 style={[styles.container, containerStyle]}
-                headerStyle={styles.accordionHeader}
+                headerStyle={[styles.accordionHeader, headerStyle]}
                 header={header}
             >
                 <View style={[styles.accordionPanel, panelStyle]}>

packages/perseus-editor/src/widgets/__docs__/radio-editor.stories.tsx

@@ -11,6 +11,8 @@ import RadioEditor from "../radio/editor";
 
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
+const PROD_EDITOR_WIDTH = 330;
+
 // This is to address timing - Perseus widget editor registry accessed before initialization!
 registerAllWidgetsAndEditorsForTesting();
 
@@ -31,9 +33,13 @@ export const Default: Story = {
 };
 
 export const SingleChoice = (): React.ReactElement => (
-    <EditorPageWithStorybookPreview question={singleSelectQuestion} />
+    <div style={{width: PROD_EDITOR_WIDTH}}>
+        <EditorPageWithStorybookPreview question={singleSelectQuestion} />
+    </div>
 );
 
 export const MultiChoice = (): React.ReactElement => (
-    <EditorPageWithStorybookPreview question={multiChoiceQuestion} />
+    <div style={{width: PROD_EDITOR_WIDTH}}>
+        <EditorPageWithStorybookPreview question={multiChoiceQuestion} />
+    </div>
 );