@khanacademy/perseus-editor 2.15.5 → 2.15.7

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

@@ -7,7 +7,6 @@ import {
     Util,
     ElementContainer,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
@@ -40,30 +39,38 @@ const defaultInteractionProps = {
     elements: [],
 } as const;
 
-type InteractionEditorProps = any;
-type InteractionEditorState = any;
+type Graph = {
+    box: ReadonlyArray<number>;
+    labels: ReadonlyArray<string>;
+    range: ReadonlyArray<ReadonlyArray<number>>;
+    tickStep: ReadonlyArray<number>;
+    gridStep: ReadonlyArray<number>;
+    markings: string;
+    valid?: boolean;
+};
 
-class InteractionEditor extends React.Component<
-    InteractionEditorProps,
-    InteractionEditorState
-> {
-    // TODO(eater): Make more better
-    static propTypes = {
-        ...Changeable.propTypes,
-        // eslint-disable-next-line react/forbid-prop-types
-        elements: PropTypes.arrayOf(PropTypes.object),
-        graph: PropTypes.objectOf(PropTypes.any),
-    };
+type Props = Changeable.ChangeableProps & {
+    elements: ReadonlyArray<any>;
+    graph: Graph;
+};
+
+type DefaultProps = {
+    elements: Props["elements"];
+    graph: Props["graph"];
+};
+
+type State = any;
 
+class InteractionEditor extends React.Component<Props, State> {
     static widgetName = "interaction" as const;
-    static defaultProps: InteractionEditorProps = defaultInteractionProps;
+    static defaultProps: DefaultProps = defaultInteractionProps;
 
-    state: InteractionEditorState = {
+    state: State = {
         usedVarSubscripts: this._getAllVarSubscripts(this.props.elements),
         usedFunctionNames: this._getAllFunctionNames(this.props.elements),
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: InteractionEditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({
             usedVarSubscripts: this._getAllVarSubscripts(nextProps.elements),
             usedFunctionNames: this._getAllFunctionNames(nextProps.elements),

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

@@ -6,31 +6,32 @@ import {
     KhanColors,
     ColorPicker,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {MathInput, TextInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {TextInput} = components;
 const {getDependencies} = Dependencies;
 
-type LabelEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    label: string;
+};
+
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    label: Props["label"];
+};
 
-//
 // Editor for labels
-//
-// TODO(eater): Factor this out maybe?
 // TODO(eater): Add text direction
-//
-class LabelEditor extends React.Component<LabelEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        label: PropTypes.string,
-    };
-
-    static defaultProps = {
+class LabelEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         coordX: "0",
         coordY: "0",
         color: KhanColors.BLACK,
@@ -47,7 +48,6 @@ class LabelEditor extends React.Component<LabelEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
@@ -62,18 +62,14 @@ class LabelEditor extends React.Component<LabelEditorProps> {
                 </div>
                 <div className="perseus-widget-row">
                     Location: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.coordX}
                         onChange={this.change("coordX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.coordY}
                         onChange={this.change("coordY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>

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

@@ -8,34 +8,39 @@ import {
     ColorPicker,
     DashPicker,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
-type LineEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    color: string;
+    strokeDasharray: string;
+    arrows: string;
+    strokeWidth: number;
+};
 
-//
-// Editor for non-interactive line segments
-//
-// TODO(eater): Factor this out
-//
-class LineEditor extends React.Component<LineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        color: PropTypes.string,
-        strokeDasharray: PropTypes.string,
-        arrows: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    arrows: Props["arrows"];
+    strokeWidth: Props["strokeWidth"];
+};
 
-    static defaultProps = {
+// Editor for non-interactive line segments
+class LineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         startX: "-5",
         startY: "5",
         endX: "5",
@@ -56,41 +61,32 @@ 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
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startX}
                         onChange={this.change("startX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startY}
                         onChange={this.change("startY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
                 <div className="perseus-widget-row">
                     End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.endX}
                         onChange={this.change("endX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.endY}
                         onChange={this.change("endY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>

package/src/widgets/interaction-editor/mathquill-input.tsx

@@ -0,0 +1,81 @@
+import {createMathField} from "@khanacademy/math-input";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import {useRef, useEffect} from "react";
+
+import type {MathFieldInterface} from "@khanacademy/math-input";
+
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+};
+
+/**
+ * A simple Mathquill MathField input for the InteractionEditor.
+ * Unlike our other uses of Mathquill, we're not using a keypad here;
+ * it's just the input itself for use writing TeX.
+ */
+export default function MathquillInput(props: Props) {
+    const mathFieldWrapperRef = useRef<HTMLSpanElement>(null);
+    const mathFieldInstance = useRef<MathFieldInterface>();
+
+    useEffect(() => {
+        // If we have the mount for the input, but not the input
+        // make a new Mathquill input
+        if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
+            // Initialize MathQuill.MathField instance
+            mathFieldInstance.current = createMathField(
+                mathFieldWrapperRef.current,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (mathField) => {
+                            // This handler is guaranteed to be called on change, but
+                            // unlike React it sometimes generates false positives.
+                            // One of these is on initialization (with an empty string
+                            // value), so we have to guard against that below.
+                            let value = mathField.latex();
+
+                            // Provide a MathQuill-compatible way to generate the
+                            // not-equals sign without pasting unicode or typing TeX
+                            value = value.replace(/<>/g, "\\ne");
+
+                            if (props.value !== value) {
+                                props.onChange(value);
+                            }
+                        },
+                        upOutOf: (mathField) => {
+                            // This handler is called when the user presses the up
+                            // arrow key, but there is nowhere in the expression to go
+                            // up to (no numerator or exponent). For ease of use,
+                            // interpret this as an attempt to create an exponent.
+                            mathField.typedText("^");
+                        },
+                    },
+                }),
+            );
+        }
+    });
+
+    return (
+        <View style={styles.outerWrapper}>
+            <span
+                ref={mathFieldWrapperRef}
+                className="perseus-math-input mq-editable-field mq-math-mode"
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    outerWrapper: {
+        display: "inline-block",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderColor: Color.offBlack50,
+        borderRadius: 3,
+        background: Color.white,
+    },
+});

package/src/widgets/interaction-editor/movable-line-editor.tsx

@@ -4,36 +4,41 @@ import {
     Dependencies,
     EditorJsonify,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
 
-const {MathInput, NumberInput} = components;
+const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
-type MovableLineEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    startSubscript: number;
+    endSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
 
-//
 // Editor for interactive movable line segments
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
-class MovableLineEditor extends React.Component<MovableLineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
+class MovableLineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         startX: "-5",
         startY: "5",
         endX: "5",
@@ -41,6 +46,7 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
         constraint: "none",
         snap: 0.5,
         constraintFn: "0",
+        // @ts-expect-error - TS2561
         constraintXMin: "-10",
         constraintXMax: "10",
         constraintYMin: "-10",
@@ -57,42 +63,33 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
 
     render(): React.ReactNode {
         const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
 
         return (
             <div className="graph-settings">
                 Initial position:
                 <div className="perseus-widget-row">
                     Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startX}
                         onChange={this.change("startX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startY}
                         onChange={this.change("startY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
                 <div className="perseus-widget-row">
                     End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.endX}
                         onChange={this.change("endX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.endY}
                         onChange={this.change("endY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -115,7 +112,6 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
                 <div className="perseus-widget-row">
                     All constraints are applied to the start point.
                 </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
                 <ConstraintEditor {...this.props} />
             </div>
         );

package/src/widgets/interaction-editor/movable-point-editor.tsx

@@ -4,39 +4,42 @@ import {
     Dependencies,
     EditorJsonify,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
 
-const {MathInput, NumberInput} = components;
+const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
-type MovablePointEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    varSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
 
-//
 // Editor for interactive movable points
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React.Component<MovablePointEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
+class MovablePointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         startX: "0",
         startY: "0",
         constraint: "none",
         snap: 0.5,
         constraintFn: "0",
+        // @ts-expect-error - TS2561
         constraintXMin: "-10",
         constraintXMax: "10",
         constraintYMin: "-10",
@@ -53,24 +56,19 @@ 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
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startX}
                         onChange={this.change("startX")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.startY}
                         onChange={this.change("startY")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>
@@ -82,7 +80,6 @@ class MovablePointEditor extends React.Component<MovablePointEditorProps> {
                         onChange={this.change("varSubscript")}
                     />
                 </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
                 <ConstraintEditor {...this.props} />
             </div>
         );

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

@@ -7,33 +7,37 @@ import {
     ColorPicker,
     DashPicker,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
 const {getDependencies} = Dependencies;
 
-type ParametricEditorProps = any;
+type Props = Changeable.ChangeableProps & {
+    x: string;
+    y: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
 
-//
-// Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
-class ParametricEditor extends React.Component<ParametricEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        x: PropTypes.string,
-        y: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
+type DefaultProps = {
+    x: Props["x"];
+    y: Props["y"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
 
-    static defaultProps = {
+// Editor for parametric plots
+class ParametricEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         x: "cos(t)",
         y: "sin(t)",
         rangeMin: "0",
@@ -53,42 +57,33 @@ 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
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.x}
                         onChange={this.change("x")}
-                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     <TeX>Y(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.y}
                         onChange={this.change("y")}
-                        analytics={analyticsStub}
                     />
                 </div>
                 <div className="perseus-widget-row">
                     Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.rangeMin}
                         onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
                     />
                     <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
+                    <MathquillInput
                         value={this.props.rangeMax}
                         onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
                     />
                     <TeX>\Large)</TeX>
                 </div>