@khanacademy/perseus-editor 2.7.6 → 2.8.0

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const libVersion = "__lib_version__";

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

@@ -24,10 +24,10 @@ declare class ExpressionEditor extends React.Component<Props, State> {
     getSaveWarnings: () => any;
     _newEmptyAnswerForm: () => any;
     newAnswer: () => void;
-    handleRemoveForm: (arg1: number) => void;
-    updateForm: (arg1: number, arg2: any) => void;
-    handleReorder: (arg1: any) => void;
-    handleButtonSet: (arg1: string) => void;
+    handleRemoveForm: (answerKey: number) => void;
+    updateForm: (i: number, props: any) => void;
+    handleReorder: (components: any) => void;
+    handleButtonSet: (changingName: string) => void;
     handleToggleDiv: () => void;
     handleTexInsert: (arg1: string) => void;
     handleFunctions: (arg1: React.ChangeEvent<HTMLInputElement>) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.7.6",
+    "version": "2.8.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,9 +22,10 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.1",
-        "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/perseus": "^11.6.0"
+        "@khanacademy/kas": "^0.3.2",
+        "@khanacademy/kmath": "^0.1.3",
+        "@khanacademy/perseus": "^12.0.0",
+        "@khanacademy/perseus-core": "1.1.1"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",
@@ -40,7 +41,7 @@
         "create-react-class": "^15.6.3",
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
-        "perseus-build-settings": "^0.2.0",
+        "perseus-build-settings": "^0.2.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/index.ts

@@ -1,3 +1,5 @@
+export {libVersion} from "./version";
+
 export {default as ArticleEditor} from "./article-editor";
 export {default as DeviceFramer} from "./components/device-framer";
 export {default as ViewportResizer} from "./components/viewport-resizer";

package/src/version.ts

@@ -0,0 +1,10 @@
+// This file is processed by a Rollup plugin (replace) to inject the production
+// version number during the release build.
+// In dev, you'll never see the version number.
+
+import {addLibraryVersionToPerseusDebug} from "@khanacademy/perseus-core";
+
+const libName = "@khanacademy/perseus-editor";
+export const libVersion = "__lib_version__";
+
+addLibraryVersionToPerseusDebug(libName, libVersion);

package/src/widgets/expression-editor.tsx

@@ -26,6 +26,10 @@ type Props = {
 } & Omit<PerseusExpressionWidgetOptions, "buttonsVisible"> &
     Changeable.ChangeableProps;
 
+// types for iterables
+type AnswerForm = PerseusExpressionWidgetOptions["answerForms"][number];
+type LegacyButtonSet = PerseusExpressionWidgetOptions["buttonSets"][number];
+
 type DefaultProps = {
     answerForms: Props["answerForms"];
     times: Props["times"];
@@ -33,14 +37,22 @@ type DefaultProps = {
     functions: Props["functions"];
 };
 
+const parseAnswerKey = ({key}: AnswerForm): number => {
+    const parsedKey = Number.parseInt(key ?? "");
+    if (Number.isNaN(parsedKey)) {
+        throw new Error(`Invalid answer key: ${key}`);
+    }
+    return parsedKey;
+};
+
 // Pick a key that isn't currently used by an answer in answerForms
-const _makeNewKey = (answerForms: any) => {
+const _makeNewKey = (answerForms: ReadonlyArray<AnswerForm>) => {
     // first note all the currently used keys in an array, used like a map :3
     // note that this automatically updates the array's length property to
     // be one past the largest key.
     const usedKeys: Array<boolean> = [];
     answerForms.forEach((ans) => {
-        usedKeys[ans.key] = true;
+        usedKeys[parseAnswerKey(ans)] = true;
     });
 
     // then scan through the array to find the first unused (undefined) key
@@ -98,7 +110,9 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     render(): React.ReactNode {
         const answerOptions = this.props.answerForms
-            .map((obj, index) => {
+            .map((ans: AnswerForm) => {
+                const key = parseAnswerKey(ans);
+
                 const expressionProps = {
                     // note we're using
                     // *this.props*.{times,functions,buttonSets} since each
@@ -108,26 +122,30 @@ class ExpressionEditor extends React.Component<Props, State> {
                     buttonSets: this.props.buttonSets,
 
                     buttonsVisible: "focused",
-                    form: obj.form,
-                    simplify: obj.simplify,
-                    value: obj.value,
+                    form: ans.form,
+                    simplify: ans.simplify,
+                    value: ans.value,
 
-                    onChange: (props) => this.updateForm(index, props),
+                    onChange: (props) => this.updateForm(key, props),
                     trackInteraction: () => {},
 
-                    widgetId: this.props.widgetId + "-" + index,
+                    widgetId: this.props.widgetId + "-" + ans.key,
                 } as const;
 
-                return lens(obj)
+                return lens(ans)
                     .merge([], {
                         draggable: true,
-                        onChange: (props) => this.updateForm(index, props),
-                        onDelete: () => this.handleRemoveForm(index),
+                        onChange: (props) =>
+                            this.updateForm(
+                                Number.parseInt(ans.key ?? ""),
+                                props,
+                            ),
+                        onDelete: () => this.handleRemoveForm(key),
                         expressionProps: expressionProps,
                     })
                     .freeze();
             })
-            .map((obj, index) => <AnswerOption key={index} {...obj} />);
+            .map((obj) => <AnswerOption key={obj.key} {...obj} />);
 
         const sortable = (
             <SortableArea
@@ -143,7 +161,10 @@ class ExpressionEditor extends React.Component<Props, State> {
                 // The first one gets special cased to always be checked, disabled,
                 // and float left.
                 const isFirst = name === "basic";
-                const checked = this.props.buttonSets.includes(name) || isFirst;
+                const checked =
+                    this.props.buttonSets.includes(
+                        name as PerseusExpressionWidgetOptions["buttonSets"][number],
+                    ) || isFirst;
                 const className = isFirst
                     ? "button-set-label-float"
                     : "button-set-label";
@@ -342,7 +363,7 @@ class ExpressionEditor extends React.Component<Props, State> {
         this.change({answerForms});
     };
 
-    handleRemoveForm: (arg1: number) => void = (i) => {
+    handleRemoveForm: (answerKey: number) => void = (i) => {
         const answerForms = this.props.answerForms.slice();
         answerForms.splice(i, 1);
         this.change({answerForms});
@@ -350,7 +371,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     // called when the options (including the expression itself) to an answer
     // form change
-    updateForm: (arg1: number, arg2: any) => void = (i, props) => {
+    updateForm: (i: number, props: any) => void = (i, props) => {
         const answerForms = lens(this.props.answerForms)
             .merge([i], props)
             .freeze();
@@ -358,7 +379,7 @@ class ExpressionEditor extends React.Component<Props, State> {
         this.change({answerForms});
     };
 
-    handleReorder: (arg1: any) => void = (components) => {
+    handleReorder: (components: any) => void = (components) => {
         const answerForms = components.map((component) => {
             const form = _(component.props).pick(
                 "considered",
@@ -375,8 +396,10 @@ class ExpressionEditor extends React.Component<Props, State> {
     };
 
     // called when the selected buttonset changes
-    handleButtonSet: (arg1: string) => void = (changingName) => {
-        const buttonSetNames = Object.keys(TexButtons.buttonSets);
+    handleButtonSet: (changingName: string) => void = (changingName) => {
+        const buttonSetNames = Object.keys(
+            TexButtons.buttonSets,
+        ) as LegacyButtonSet[];
 
         // Filter to preserve order - using .union and .difference would always
         // move the last added button set to the end.
@@ -394,8 +417,8 @@ class ExpressionEditor extends React.Component<Props, State> {
         // "basic+div". Toggle between the two of them.
         // If someone can think of a more elegant formulation of this (there
         // must be one!) feel free to change it.
-        let keep: string | undefined;
-        let remove: string | undefined;
+        let keep: LegacyButtonSet | undefined;
+        let remove: LegacyButtonSet | undefined;
         if (this.props.buttonSets.includes("basic+div")) {
             keep = "basic";
             remove = "basic+div";

package/src/widgets/interaction/constraint-editor.tsx

@@ -45,6 +45,8 @@ class ConstraintEditor extends React.Component<Props> {
     render(): React.ReactNode {
         const {TeX} = Dependencies.getDependencies();
 
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
         return (
             <div>
                 <div className="perseus-widget-row">
@@ -76,10 +78,10 @@ class ConstraintEditor extends React.Component<Props> {
                         <div className="perseus-widget-row">
                             <TeX>x=</TeX>{" "}
                             <MathInput
-                                buttonSets={[]}
                                 buttonsVisible="never"
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
+                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -89,10 +91,10 @@ class ConstraintEditor extends React.Component<Props> {
                         <div className="perseus-widget-row">
                             <TeX>y=</TeX>{" "}
                             <MathInput
-                                buttonSets={[]}
                                 buttonsVisible="never"
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
+                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -102,17 +104,17 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="perseus-widget-row">
                         <TeX>x \in \Large[</TeX>{" "}
                         <MathInput
-                            buttonSets={[]}
                             buttonsVisible="never"
                             value={this.props.constraintXMin}
                             onChange={this.change("constraintXMin")}
+                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
                         <MathInput
-                            buttonSets={[]}
                             buttonsVisible="never"
                             value={this.props.constraintXMax}
                             onChange={this.change("constraintXMax")}
+                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>
@@ -121,17 +123,17 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="perseus-widget-row">
                         <TeX>y \in \Large[</TeX>{" "}
                         <MathInput
-                            buttonSets={[]}
                             buttonsVisible="never"
                             value={this.props.constraintYMin}
                             onChange={this.change("constraintYMin")}
+                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
                         <MathInput
-                            buttonSets={[]}
                             buttonsVisible="never"
                             value={this.props.constraintYMax}
                             onChange={this.change("constraintYMax")}
+                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>

package/src/widgets/interaction-editor.tsx

@@ -62,25 +62,26 @@ class PointEditor extends React.Component<PointEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     Coordinate: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordX}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordY}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -137,44 +138,45 @@ class LineEditor extends React.Component<LineEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     Start: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startX}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("startX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startY}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("startY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
                 <div className="perseus-widget-row">
                     End: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.endX}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("endX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.endY}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("endY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -254,23 +256,24 @@ class MovablePointEditor extends React.Component<MovablePointEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     Start: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startX}
                         onChange={this.change("startX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startY}
                         onChange={this.change("startY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -333,6 +336,7 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
@@ -340,34 +344,34 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
                 <div className="perseus-widget-row">
                     Start: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startX}
                         onChange={this.change("startX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.startY}
                         onChange={this.change("startY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
                 <div className="perseus-widget-row">
                     End: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.endX}
                         onChange={this.change("endX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.endY}
                         onChange={this.change("endY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -434,35 +438,36 @@ class FunctionEditor extends React.Component<FunctionEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.value}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("value")}
+                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     Range: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.rangeMin}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.rangeMax}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -535,45 +540,46 @@ class ParametricEditor extends React.Component<ParametricEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     <TeX>X(t) =</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.x}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("x")}
+                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     <TeX>Y(t) =</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.y}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("y")}
+                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     Range: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.rangeMin}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.rangeMax}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -641,6 +647,7 @@ class LabelEditor extends React.Component<LabelEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
@@ -657,19 +664,19 @@ class LabelEditor extends React.Component<LabelEditorProps> {
                 <div className="perseus-widget-row">
                     Location: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordX}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordY}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -720,46 +727,47 @@ class RectangleEditor extends React.Component<RectangleEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 <div className="perseus-widget-row">
                     Bottom left: <TeX>\Large(</TeX>
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordX}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordX")}
+                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.coordY}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("coordY")}
+                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
                 <div className="perseus-widget-row">
                     Width:{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.width}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("width")}
+                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     Height:{" "}
                     <MathInput
-                        buttonSets={[]}
                         buttonsVisible="never"
                         value={this.props.height}
                         // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("height")}
+                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">

package/tsconfig-build.json

@@ -17,5 +17,6 @@
         {"path": "../kas/tsconfig-build.json"},
         {"path": "../kmath/tsconfig-build.json"},
         {"path": "../perseus/tsconfig-build.json"},
+        {"path": "../perseus-core/tsconfig-build.json"},
     ]
 }