[Interactive Graph] | (CX) | Use dynamically resizing textarea for Description field (#2771)

## Summary:
The Interactive Graph "Description" field takes up a ton of vertical space by default.

Instead of having fixed rows, I'm going to use the dynamically resizing textarea
that was previously only used by radio.

- Move AutoResizingTextArea to the shared editor components folder
- Use it inside the interactive graph editor

Issue: none

| Before | After | 
| --- | --- |
| <img width="351" height="414" alt="Screenshot 2025-08-06 at 2 57 46 PM" src="https://github.com/user-attachments/assets/dc14fe97-371f-4e39-af92-95f9de5c12fe" /> |  <img width="350" height="263" alt="Screenshot 2025-08-06 at 2 57 52 PM" src="https://github.com/user-attachments/assets/11678dcb-518e-454b-b6ad-86c143d3eae9" /> |

Demo

https://github.com/user-attachments/assets/c3def134-9736-4c35-93c0-f4eb71086ce5

## Test plan:
Storybook
- http://localhost:6006/?path=/story/editors-editorpage--demo
- Add an interactive graph widget
- Check that the Description field is only one line by default now
  when it's empty.
- Type in it so it takes up multiple lines and confirm that it
  resizes dynamically

Author: nishasy

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

Required Reviewers:

Approved By: mark-fitzgerald, ivyolamit

Checks: ✅ 12 checks were successful, ⏹️  5 checks were cancelled

Pull Request URL: #2771

Author: nishasy

.changeset/healthy-carpets-draw.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph] | (CX) | Use dynamically resizing textarea for Description field

packages/perseus-editor/src/widgets/radio/auto-resizing-text-area.tsx renamed to packages/perseus-editor/src/components/auto-resizing-text-area.tsx

@@ -1,11 +1,12 @@
 import {View} from "@khanacademy/wonder-blocks-core";
-import {TextArea, TextField} from "@khanacademy/wonder-blocks-form";
+import {TextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import {AutoResizingTextArea} from "../../../components/auto-resizing-text-area";
 import Heading from "../../../components/heading";
 
 import type {Props as EditorProps} from "../interactive-graph-editor";
@@ -21,6 +22,9 @@ export default function InteractiveGraphDescription(props: Props) {
 
     const [isOpen, setIsOpen] = React.useState(true);
 
+    const uniqueId = React.useId();
+    const descriptionTextAreaId = `${uniqueId}-description-textarea`;
+
     return (
         <>
             <Heading
@@ -52,23 +56,21 @@ export default function InteractiveGraphDescription(props: Props) {
                         />
                     </LabelLarge>
                     <Strut size={spacing.small_12} />
-                    <LabelLarge tag="label">
+                    <LabelLarge tag="label" htmlFor={descriptionTextAreaId}>
                         Description
-                        <TextArea
-                            rows={8}
-                            resizeType="vertical"
-                            value={ariaDescriptionValue}
-                            onChange={(newValue) =>
-                                onChange({
-                                    fullGraphAriaDescription:
-                                        // Save as undefined if the new value
-                                        // is an empty string.
-                                        newValue || undefined,
-                                })
-                            }
-                            style={styles.spaceAbove}
-                        />
                     </LabelLarge>
+                    <AutoResizingTextArea
+                        id={descriptionTextAreaId}
+                        value={ariaDescriptionValue}
+                        onChange={(newValue) =>
+                            onChange({
+                                fullGraphAriaDescription:
+                                    // Save as undefined if the new value
+                                    // is an empty string.
+                                    newValue || undefined,
+                            })
+                        }
+                    />
                 </View>
             )}
         </>

packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx

@@ -3,7 +3,8 @@ import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingXSmall} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 
-import {AutoResizingTextArea} from "./auto-resizing-text-area";
+import {AutoResizingTextArea} from "../../components/auto-resizing-text-area";
+
 import styles from "./radio-editor.module.css";
 import {RadioOptionContentAndImageEditor} from "./radio-option-content-and-image-editor";
 import {RadioOptionSettingsActions} from "./radio-option-settings-actions";