@khanacademy/perseus-editor 2.9.1 → 2.11.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.9.1",
+    "version": "2.11.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,38 +24,40 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/perseus": "^13.1.0",
+        "@khanacademy/perseus": "^14.0.0",
         "@khanacademy/perseus-core": "1.3.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
-        "perseus-build-settings": "^0.2.1",
+        "perseus-build-settings": "^0.3.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

package/src/__stories__/editor.stories.tsx

@@ -11,6 +11,8 @@ import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widge
 
 import type {PerseusRenderer} from "@khanacademy/perseus";
 
+import "../styles/perseus-editor.less";
+
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
 export default {

package/src/styles/perseus-editor.less

@@ -279,15 +279,6 @@
 
     // Question area styles
     #problemarea {
-        /* Override the min-height property used for displaying the problem.
-        While editing, the size of the editor itself is a better constraint on
-        the size of the problemarea, and having a smaller problemarea is nicer
-        if it means it aligns better with the editor. */
-        min-height: 0;
-
-        // Force the hint width to take up the width of its containing viewport.
-        width: 100%;
-
         #workarea {
             margin: 0; // override ke
 

package/src/widgets/__tests__/expression-editor.test.tsx

@@ -0,0 +1,56 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import ExpressionEditor from "../expression-editor";
+
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
+
+describe("expression-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<ExpressionEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText(/Add new answer/)).toBeInTheDocument();
+    });
+
+    it("should render answerForms missing a key", async () => {
+        const answerForms: PropsFor<typeof ExpressionEditor>["answerForms"] = [
+            {
+                value: "x\\cdot3=y",
+                form: true,
+                simplify: true,
+                considered: "correct",
+            },
+            {
+                value: "x^2=y",
+                form: true,
+                simplify: true,
+                considered: "wrong",
+            },
+            {
+                value: "x=y\\cdotπ",
+                form: true,
+                simplify: true,
+                considered: "wrong",
+            },
+        ];
+
+        render(
+            <ExpressionEditor
+                onChange={() => undefined}
+                answerForms={answerForms}
+            />,
+        );
+
+        expect(await screen.findByText(/π/)).toBeInTheDocument();
+    });
+});

package/src/widgets/expression-editor.tsx

@@ -18,7 +18,6 @@ import SortableArea from "../components/sortable";
 import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";
 
 const {InfoTip, PropCheckBox, TexButtons} = components;
-const {getDependencies} = Dependencies;
 
 type Props = {
     widgetId?: any;
@@ -38,11 +37,12 @@ type DefaultProps = {
 };
 
 const parseAnswerKey = ({key}: AnswerForm): number => {
-    const parsedKey = Number.parseInt(key ?? "");
-    if (Number.isNaN(parsedKey)) {
-        throw new Error(`Invalid answer key: ${key}`);
-    }
-    return parsedKey;
+    // We don't throw here because there is data stored in some
+    // exercises/articles where the answer forms don't have a key. If we throw,
+    // it blocks content editors from loading the page at all.
+    // TODO(Jeremy): find a way to handle these answer forms that are missing
+    // keys more gracefully.
+    return Number.parseInt(key ?? "");
 };
 
 // Pick a key that isn't currently used by an answer in answerForms
@@ -182,7 +182,7 @@ class ExpressionEditor extends React.Component<Props, State> {
             },
         );
 
-        const {TeX} = getDependencies(); // OldExpression only
+        const {TeX} = Dependencies.getDependencies(); // OldExpression only
 
         buttonSetChoices.splice(
             1,