@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/tex-buttons.jsx

@@ -0,0 +1,322 @@
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import {getDependencies} from "../dependencies.js";
+
+const prettyBig = {fontSize: "150%"};
+const slightlyBig = {fontSize: "120%"};
+const symbStyle = {fontSize: "130%"};
+
+type Inserter = string | ((input: $FlowFixMe) => void);
+type ButtonSet = (props: $FlowFixMe) => [React.Node, Inserter];
+
+type ButtonSets = {|
+    +[string]: $ReadOnlyArray<ButtonSet>,
+|};
+
+// These are functions because we want to generate a new component for each use
+// on the page rather than reusing an instance (which will cause an error).
+// Also, it's useful for things which might look different depending on the
+// props.
+
+const basic: $ReadOnlyArray<ButtonSet> = [
+    () => [
+        <span key="plus" style={slightlyBig}>
+            +
+        </span>,
+        "+",
+    ],
+    () => [
+        <span key="minus" style={prettyBig}>
+            -
+        </span>,
+        "-",
+    ],
+
+    // TODO(joel) - display as \cdot when appropriate
+    (props) => {
+        const {TeX} = getDependencies();
+        if (props.convertDotToTimes) {
+            return [
+                <TeX key="times" style={prettyBig}>
+                    {i18n.doNotTranslate("\\times")}
+                </TeX>,
+                "\\times",
+            ];
+        }
+        return [
+            <TeX key="times" style={prettyBig}>
+                {i18n.doNotTranslate("\\cdot")}
+            </TeX>,
+            "\\cdot",
+        ];
+    },
+    () => {
+        const {TeX} = getDependencies();
+        return [
+            <TeX key="frac" style={prettyBig}>
+                {i18n.doNotTranslate("\\frac{x}{y}")}
+            </TeX>,
+
+            // If there's something in the input that can become part of a
+            // fraction, typing "/" puts it in the numerator. If not, typing
+            // "/" does nothing. In that case, enter a \frac.
+            (input) => {
+                const contents = input.latex();
+                input.typedText("/");
+                if (input.latex() === contents) {
+                    input.cmd("\\frac");
+                }
+            },
+        ];
+    },
+];
+
+const buttonSets: ButtonSets = {
+    basic,
+
+    "basic+div": basic.concat([
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="div">{i18n.doNotTranslate("\\div")}</TeX>,
+                "\\div",
+            ];
+        },
+    ]),
+
+    trig: [
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="sin">{i18n.doNotTranslate("\\sin")}</TeX>,
+                "\\sin",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="cos">{i18n.doNotTranslate("\\cos")}</TeX>,
+                "\\cos",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="tan">{i18n.doNotTranslate("\\tan")}</TeX>,
+                "\\tan",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="theta" style={symbStyle}>
+                    {i18n.doNotTranslate("\\theta")}
+                </TeX>,
+                "\\theta",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <span key="phi">
+                    {/*NOTE: KaTeX does not render "phi" for screen readers*/}
+                    <span className="perseus-sr-only">
+                        {i18n.doNotTranslate("phi")}
+                    </span>
+                    <TeX key="pi" style={symbStyle}>
+                        {i18n.doNotTranslate("\\phi")}
+                    </TeX>
+                </span>,
+                "\\phi",
+            ];
+        },
+    ],
+
+    prealgebra: [
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="sqrt">{i18n.doNotTranslate("\\sqrt{x}")}</TeX>,
+                "\\sqrt",
+            ];
+        },
+        // TODO(joel) - how does desmos do this?
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="nthroot">{i18n.doNotTranslate("\\sqrt[3]{x}")}</TeX>,
+                (input) => {
+                    input.typedText("nthroot3");
+                    input.keystroke("Right");
+                },
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="pow" style={slightlyBig}>
+                    {i18n.doNotTranslate("a^b")}
+                </TeX>,
+                (input) => {
+                    const contents = input.latex();
+                    input.typedText("^");
+
+                    // If the input hasn't changed (for example, if we're
+                    // attempting to add an exponent on an empty input or an empty
+                    // denominator), insert our own "a^b"
+                    if (input.latex() === contents) {
+                        input.typedText("a^b");
+                    }
+                },
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="pi" style={slightlyBig}>
+                    {i18n.doNotTranslate("\\pi")}
+                </TeX>,
+                "\\pi",
+            ];
+        },
+    ],
+
+    logarithms: [
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="log">{i18n.doNotTranslate("\\log")}</TeX>,
+                "\\log",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [<TeX key="ln">{i18n.doNotTranslate("\\ln")}</TeX>, "\\ln"];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="log_b">{i18n.doNotTranslate("\\log_b")}</TeX>,
+                (input) => {
+                    input.typedText("log_");
+                    input.keystroke("Right");
+                    input.typedText("(");
+                    input.keystroke("Left");
+                    input.keystroke("Left");
+                },
+            ];
+        },
+    ],
+
+    "basic relations": [
+        () => {
+            const {TeX} = getDependencies();
+            return [<TeX key="eq">{"="}</TeX>, "="];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [<TeX key="lt">{i18n.doNotTranslate("\\lt")}</TeX>, "\\lt"];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [<TeX key="gt">{i18n.doNotTranslate("\\gt")}</TeX>, "\\gt"];
+        },
+    ],
+
+    "advanced relations": [
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="neq">{i18n.doNotTranslate("\\neq")}</TeX>,
+                "\\neq",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="leq">{i18n.doNotTranslate("\\leq")}</TeX>,
+                "\\leq",
+            ];
+        },
+        () => {
+            const {TeX} = getDependencies();
+            return [
+                <TeX key="geq">{i18n.doNotTranslate("\\geq")}</TeX>,
+                "\\geq",
+            ];
+        },
+    ],
+};
+
+type TexButtonProps = {|
+    sets: $ReadOnlyArray<$Keys<typeof buttonSets>>,
+    onInsert: (Inserter) => void,
+    className?: string,
+    convertDotToTimes?: boolean,
+|};
+
+const buttonSetsType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
+
+class TexButtons extends React.Component<TexButtonProps> {
+    static propTypes = {
+        sets: buttonSetsType.isRequired,
+        onInsert: PropTypes.func.isRequired,
+        className: PropTypes.string,
+    };
+
+    static buttonSets: typeof buttonSets = buttonSets;
+    static buttonSetsType: $FlowFixMe = buttonSetsType;
+
+    render(): React.Node {
+        // Always show buttonSets in the same order. Note: Technically it's ok
+        // for _.keys() to return the keys in an arbitrary order, but in
+        // practice, they will be ordered as listed above.
+        const sortedButtonSets = _.sortBy(this.props.sets, (setName) =>
+            _.keys(buttonSets).indexOf(setName),
+        );
+
+        const buttons = _(sortedButtonSets).map(
+            (setName) => buttonSets[setName],
+        );
+
+        const buttonRows = _(buttons).map((row) =>
+            row.map((symbGen) => {
+                // create a (component, thing we should send to mathquill) pair
+                const symbol = symbGen(this.props);
+                return (
+                    <button
+                        onClick={() => this.props.onInsert(symbol[1])}
+                        className="tex-button"
+                        key={symbol[0].key}
+                        type="button"
+                    >
+                        {symbol[0]}
+                    </button>
+                );
+            }),
+        );
+
+        const buttonPopup = _(buttonRows).map((row, i) => {
+            return (
+                <div
+                    className="clearfix tex-button-row"
+                    key={this.props.sets[i]}
+                >
+                    {row}
+                </div>
+            );
+        });
+
+        return (
+            <div className={`${this.props.className || ""} preview-measure`}>
+                {buttonPopup}
+            </div>
+        );
+    }
+}
+
+export default TexButtons;

package/src/components/tex.jsx

@@ -0,0 +1,70 @@
+// @flow
+/**
+ * Wrapper around the TeX component from react-components-package
+ * which adds logic to track whether all pieces of math in an exercise
+ * have been loaded.  This tracking is facilitated by the AssetContext.
+ */
+import * as React from "react";
+
+import {getDependencies} from "../dependencies.js";
+
+type Props = {|
+    children: string,
+
+    // Pass through prop to TeX from react-components-package.
+    onRender: () => void,
+
+    // If provided, use AssetContext.Consumer, see renderer.jsx.
+    // If not, it defaults to a no-op.
+    setAssetStatus: (assetKey: string, loaded: boolean) => void,
+|};
+
+type State = {|
+    rendered: boolean,
+|};
+
+export default class Tex extends React.Component<Props, State> {
+    _hasRendered: boolean;
+
+    static defaultProps: {|
+        onRender: () => void,
+        setAssetStatus: (src: string, status: boolean) => void,
+    |} = {
+        onRender: () => {},
+        setAssetStatus: (src: string, status: boolean) => {},
+    };
+
+    constructor(props: Props) {
+        super(props);
+        this.props.setAssetStatus(this.props.children, false);
+        this.state = {
+            rendered: false,
+        };
+        this._hasRendered = false;
+    }
+
+    handleRender: () => void = () => {
+        this.props.onRender();
+        this.setState({rendered: true});
+
+        this.props.onRender();
+
+        // We can't use BaseTeX's onRender callback directly b/c it
+        // can fire from BaseTeX's componentDidMount() method and we
+        // need to wait for all of the constructors in the perseus
+        // render tree to first first.
+        if (!this._hasRendered) {
+            this._hasRendered = true;
+            this.props.setAssetStatus(this.props.children, true);
+        }
+    };
+
+    render(): React.Node {
+        const {TeX: BaseTeX} = getDependencies();
+        return (
+            <BaseTeX onRender={this.handleRender}>
+                {this.props.children}
+            </BaseTeX>
+        );
+    }
+}

package/src/components/text-input.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+class TextInput extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        value: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+        className: PropTypes.string,
+        labelText: PropTypes.string,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func,
+        disabled: PropTypes.bool,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        value: "",
+        disabled: false,
+    };
+
+    render(): React.Node {
+        const {labelText, ...props} = this.props;
+        return (
+            <input
+                {...props}
+                type="text"
+                aria-label={labelText}
+                onChange={(e) => this.props.onChange(e.target.value)}
+            />
+        );
+    }
+
+    focus: () => void = () => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this).focus();
+    };
+
+    blur: () => void = () => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this).blur();
+    };
+
+    getValue: () => ?string = () => {
+        // $FlowFixMe[prop-missing]
+        return ReactDOM.findDOMNode(this)?.value;
+    };
+
+    getStringValue: () => ?string = () => {
+        // $FlowFixMe[prop-missing]
+        return ReactDOM.findDOMNode(this)?.value.toString();
+    };
+
+    setSelectionRange: (number, number) => void = (
+        selectionStart,
+        selectionEnd,
+    ) => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this).setSelectionRange(
+            selectionStart,
+            selectionEnd,
+        );
+    };
+
+    getSelectionStart: () => number = () => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        return ReactDOM.findDOMNode(this).selectionStart;
+    };
+
+    getSelectionEnd: () => number = () => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        return ReactDOM.findDOMNode(this).selectionEnd;
+    };
+}
+
+export default TextInput;

package/src/components/text-list-editor.jsx

@@ -0,0 +1,157 @@
+/* eslint-disable @babel/no-invalid-this, react/forbid-prop-types, react/no-unsafe, react/sort-comp */
+// @flow
+import $ from "jquery";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+const textWidthCache = {};
+function getTextWidth(text) {
+    if (!textWidthCache[text]) {
+        // Hacky way to guess the width of an input box
+        const $test = $("<span>").text(text).appendTo("body");
+        textWidthCache[text] = $test.width() + 5;
+        $test.remove();
+    }
+    return textWidthCache[text];
+}
+
+class TextListEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        options: PropTypes.array,
+        layout: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        options: [],
+        layout: "horizontal",
+    };
+
+    state: $FlowFixMe = {
+        items: this.props.options.concat(""),
+    };
+
+    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
+        this.setState({
+            items: nextProps.options.concat(""),
+        });
+    }
+
+    render(): React.Node {
+        const className = [
+            "perseus-text-list-editor",
+            "perseus-clearfix",
+            "layout-" + this.props.layout,
+        ].join(" ");
+
+        const inputs = _.map(
+            this.state.items,
+            function (item, i) {
+                return (
+                    <li key={i}>
+                        <input
+                            ref={"input_" + i}
+                            type="text"
+                            value={item}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onChange={this.onChange.bind(this, i)}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onKeyDown={this.onKeyDown.bind(this, i)}
+                            style={{width: getTextWidth(item)}}
+                        />
+                    </li>
+                );
+            },
+            this,
+        );
+
+        return <ul className={className}>{inputs}</ul>;
+    }
+
+    onChange: (number, SyntheticInputEvent<>) => void = (index, event) => {
+        let items = _.clone(this.state.items);
+        items[index] = event.target.value;
+
+        if (index === items.length - 1) {
+            items = items.concat("");
+        }
+
+        this.setState({items: items});
+        this.props.onChange(_.compact(items));
+    };
+
+    onKeyDown: (number, SyntheticKeyboardEvent<>) => void = (index, event) => {
+        const which = event.nativeEvent.keyCode;
+
+        // Backspace deletes an empty input...
+        if (which === 8 /* backspace */ && this.state.items[index] === "") {
+            event.preventDefault();
+
+            const items = _.clone(this.state.items);
+            const focusIndex = index === 0 ? 0 : index - 1;
+
+            if (
+                index === items.length - 1 &&
+                (index === 0 || items[focusIndex] !== "")
+            ) {
+                // ...except for the last one, iff it is the only empty
+                // input at the end.
+                // $FlowFixMe[incompatible-use]
+                // $FlowFixMe[prop-missing]
+                ReactDOM.findDOMNode(this.refs["input_" + focusIndex]).focus(); // eslint-disable-line react/no-string-refs
+            } else {
+                items.splice(index, 1);
+                this.setState({items: items}, function () {
+                    ReactDOM.findDOMNode(
+                        // eslint-disable-next-line react/no-string-refs
+                        this.refs["input_" + focusIndex],
+                        // $FlowFixMe[incompatible-use]
+                        // $FlowFixMe[prop-missing]
+                    ).focus();
+                });
+            }
+
+            // Deleting the last character in the second-to-last input
+            // removes it
+        } else if (
+            which === 8 /* backspace */ &&
+            this.state.items[index].length === 1 &&
+            index === this.state.items.length - 2
+        ) {
+            event.preventDefault();
+
+            const items = _.clone(this.state.items);
+            items.splice(index, 1);
+            this.setState({items: items});
+            this.props.onChange(_.compact(items));
+
+            // Enter adds an option below the current one...
+        } else if (which === 13 /* enter */) {
+            event.preventDefault();
+
+            const items = _.clone(this.state.items);
+            const focusIndex = index + 1;
+
+            if (index === items.length - 2) {
+                // ...unless the empty input is just below.
+                // $FlowFixMe[incompatible-use]
+                // $FlowFixMe[prop-missing]
+                ReactDOM.findDOMNode(this.refs["input_" + focusIndex]).focus(); // eslint-disable-line react/no-string-refs
+            } else {
+                items.splice(focusIndex, 0, "");
+                this.setState({items: items}, function () {
+                    ReactDOM.findDOMNode(
+                        // eslint-disable-next-line react/no-string-refs
+                        this.refs["input_" + focusIndex],
+                        // $FlowFixMe[incompatible-use]
+                        // $FlowFixMe[prop-missing]
+                    ).focus();
+                });
+            }
+        }
+    };
+}
+
+export default TextListEditor;