@khanacademy/perseus-editor 2.10.0 → 2.12.0

package/dist/widgets/radio/editor.d.ts

@@ -23,7 +23,6 @@ declare class RadioEditor extends React.Component<any> {
             customKeypad: PropTypes.Requireable<boolean>;
             nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
             isMobile: PropTypes.Requireable<boolean>;
-            useV2Keypad: PropTypes.Requireable<boolean>;
             setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
             useDraftEditor: PropTypes.Requireable<boolean>;
             hintProgressColor: PropTypes.Requireable<string>;

package/dist/widgets/sequence-editor.d.ts

@@ -33,7 +33,6 @@ declare class SequenceEditor extends React.Component<SequenceEditorProps> {
             customKeypad: PropTypes.Requireable<boolean>;
             nativeKeypadProxy: PropTypes.Requireable<(...args: any[]) => any>;
             isMobile: PropTypes.Requireable<boolean>;
-            useV2Keypad: PropTypes.Requireable<boolean>;
             setDrawingAreaAvailable: PropTypes.Requireable<(...args: any[]) => any>;
             useDraftEditor: PropTypes.Requireable<boolean>;
             hintProgressColor: PropTypes.Requireable<string>;

package/dist/widgets/unit-editor.d.ts

@@ -11,7 +11,7 @@ declare class UnitInputEditor extends React.Component<UnitInputEditorProps> {
     static propTypes: {
         value: PropTypes.Requireable<string>;
         acceptingUnits: PropTypes.Requireable<(string | null | undefined)[]>;
-        accepting: PropTypes.Requireable<"some" | "all">;
+        accepting: PropTypes.Requireable<"all" | "some">;
         sigfigs: PropTypes.Requireable<number>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
     };

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.10.0",
+    "version": "2.12.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,16 +22,17 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.5",
-        "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/perseus": "^13.2.0",
-        "@khanacademy/perseus-core": "1.3.0"
+        "@khanacademy/kas": "^0.3.6",
+        "@khanacademy/kmath": "^0.1.7",
+        "@khanacademy/perseus": "^15.0.0",
+        "@khanacademy/perseus-core": "1.4.0"
     },
     "devDependencies": {
         "@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-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
@@ -53,6 +54,7 @@
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",

package/src/__stories__/tex-error-view.stories.tsx

@@ -0,0 +1,26 @@
+import TexErrorView from "../tex-error-view";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+const meta: Meta<typeof TexErrorView> = {
+    component: TexErrorView,
+    title: "Perseus/Editor/TexErrorView",
+};
+
+export default meta;
+type Story = StoryObj<typeof TexErrorView>;
+
+export const Primary: Story = {
+    args: {
+        errorList: [
+            {
+                math: "\\x^2",
+                message: "TeX parse error: Undefined control sequence: \\x",
+            },
+            {
+                math: "\\y^2",
+                message: "TeX parse error: Undefined control sequence: \\y",
+            },
+        ],
+    },
+};

package/src/components/blur-input.tsx

@@ -32,6 +32,7 @@ class BlurInput extends React.Component<Props, State> {
         this.state = {value: this.props.value};
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({value: nextProps.value});
     }

package/src/components/sortable.tsx

@@ -30,6 +30,7 @@ const SortableArea = createReactClass({
     componentDidMount: function () {
         this._setDragEvents();
     },
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps: function (nextProps) {
         this.setState({components: nextProps.components});
     },

package/src/components/widget-editor.tsx

@@ -58,6 +58,7 @@ class WidgetEditor extends React.Component<
         };
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
         // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
         this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});

package/src/diffs/__stories__/structured-item-diff.stories.tsx

@@ -4,7 +4,6 @@ import StructuredItemDiff from "../structured-item-diff";
 
 import Wrapper from "./perseus-diff-wrapper";
 
-// @ts-expect-error [FEI-5003] - TS2307 - Cannot find module '../../styles/perseus-editor.less' or its corresponding type declarations.
 import("../../styles/perseus-editor.less");
 
 type StoryArgs = Record<any, any>;

package/src/editor.tsx

@@ -24,7 +24,7 @@ import _ from "underscore";
 import DragTarget from "./components/drag-target";
 import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
-import KatexErrorView from "./katex-error-view";
+import TexErrorView from "./tex-error-view";
 
 import type {ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
 
@@ -192,6 +192,7 @@ class Editor extends React.Component<Props, State> {
     }
 
     // TODO(arun): This is a deprecated method, use the appropriate replacement
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (this.props.content !== nextProps.content) {
             this.setState({textAreaValue: nextProps.content});
@@ -1100,7 +1101,7 @@ class Editor extends React.Component<Props, State> {
             >
                 {textareaWrapper}
                 {katexErrorList.length > 0 && (
-                    <KatexErrorView errorList={katexErrorList} />
+                    <TexErrorView errorList={katexErrorList} />
                 )}
                 {this.props.warnNoPrompt && noPrompt && (
                     <div style={warningStyle}>

package/src/tex-error-view.tsx

@@ -0,0 +1,90 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import caretRight from "@phosphor-icons/core/bold/caret-right-bold.svg";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+type Props = {
+    errorList: ReadonlyArray<{math: string; message: string}>;
+};
+
+type State = {
+    showErrors: boolean;
+};
+
+/**
+ * Displays a collapsable list of TeX rendering errors.
+ */
+class TexErrorView extends React.Component<Props, State> {
+    state: State = {
+        showErrors: false,
+    };
+
+    handleToggleTexErrors: (arg1: React.MouseEvent) => void = (e) => {
+        this.setState({showErrors: !this.state.showErrors});
+    };
+
+    render(): React.ReactNode {
+        const {errorList} = this.props;
+        const {showErrors} = this.state;
+
+        const iconStyle = showErrors
+            ? styles.iconExpanded
+            : styles.iconCollapsed;
+
+        return (
+            <View style={styles.errorContainer}>
+                <View style={styles.title} onClick={this.handleToggleTexErrors}>
+                    <PhosphorIcon icon={caretRight} style={iconStyle} />
+                    &nbsp; TeX Errors ({errorList.length})
+                </View>
+                {showErrors && (
+                    <View style={styles.errorExplanation}>
+                        If your math doesn't display correctly, these errors
+                        might help you troubleshoot. Message #content-kitchen
+                        for help.
+                    </View>
+                )}
+                {showErrors &&
+                    errorList.map((e, index) => (
+                        <View style={styles.error} key={index}>
+                            <View style={{color: "red"}}>{e.math}</View>
+                            <View>{e.message}</View>
+                        </View>
+                    ))}
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    title: {
+        backgroundColor: "#eee",
+        fontSize: "1.25em",
+        padding: "4px 10px",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    errorContainer: {
+        border: "1px solid #ddd",
+        borderTop: "none",
+    },
+    errorExplanation: {
+        padding: "4px 10px",
+        backgroundColor: "pink",
+    },
+    error: {
+        padding: "4px 10px",
+    },
+    iconCollapsed: {
+        transition: ".15s",
+    },
+    iconExpanded: {
+        transform: "rotate(90deg)",
+        transition: ".15s",
+    },
+});
+
+export default TexErrorView;

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,