fix(LEMS-2738): Convert Expression Editor Answer keys to strings (#2042)

## Summary:
- Converts expression editor keys to strings
- Updates `onDelete` handler to use index instead of key

Issue: LEMS-2738

## Test plan:


https://github.com/user-attachments/assets/60424f5a-f654-4afc-901f-de47505e053c

Author: anakaren-rojas

Reviewers: catandthemachines, anakaren-rojas

Required Reviewers:

Approved By: catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ⏹️  [cancelled] Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⏹️  [cancelled] Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Check builds for changes in size (ubuntu-latest, 20.x), ⏹️  [cancelled] Cypress (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #2042

.changeset/red-bugs-build.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+fix for editor

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

@@ -235,7 +235,7 @@ describe("expression-editor", () => {
                     {
                         considered: "correct",
                         form: false,
-                        key: 0,
+                        key: "0",
                         simplify: false,
                         value: "",
                     },

packages/perseus-editor/src/widgets/expression-editor.tsx

@@ -189,13 +189,14 @@ class ExpressionEditor extends React.Component<Props, State> {
     };
 
     _newEmptyAnswerForm: () => any = () => {
+        const newKey = _makeNewKey(this.props.answerForms);
         return {
             considered: "correct",
             form: false,
 
             // note: the key means "n-th form created" - not "form in
             // position n" and will stay the same for the life of this form
-            key: _makeNewKey(this.props.answerForms),
+            key: `${newKey}`,
 
             simplify: false,
             value: "",
@@ -211,7 +212,11 @@ class ExpressionEditor extends React.Component<Props, State> {
     handleRemoveForm: (answerKey: number) => void = (i) => {
         const answerForms = this.props.answerForms.slice();
         answerForms.splice(i, 1);
-        this.change({answerForms});
+        const updatedAnswerForms = answerForms.map((form, index) => ({
+            ...form,
+            key: `${index}`,
+        }));
+        this.change({answerForms: updatedAnswerForms});
     };
 
     // This function is designed to update the answerForm property
@@ -344,7 +349,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         const answerOptions: React.JSX.Element[] = this.props.answerForms.map(
-            (ans: AnswerForm) => {
+            (ans: AnswerForm, index: number) => {
                 const key = parseAnswerKey(ans);
 
                 const expressionProps: Partial<
@@ -376,7 +381,7 @@ class ExpressionEditor extends React.Component<Props, State> {
                         expressionProps={expressionProps}
                         form={ans.form}
                         simplify={ans.simplify}
-                        onDelete={() => this.handleRemoveForm(key)}
+                        onDelete={() => this.handleRemoveForm(index)}
                         onChangeSimplify={(simplify) =>
                             this.changeSimplify(key, simplify)
                         }
@@ -565,6 +570,7 @@ class AnswerOption extends React.Component<
 
     handleImSure = () => {
         this.props.onDelete();
+        this.handleCancelDelete();
     };
 
     handleCancelDelete = () => {