@khanacademy/perseus-editor 2.12.1 → 2.14.0

package/src/widgets/expression-editor.tsx

@@ -17,7 +17,7 @@ import SortableArea from "../components/sortable";
 
 import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";
 
-const {InfoTip, PropCheckBox, TexButtons} = components;
+const {InfoTip, PropCheckBox} = components;
 
 type Props = {
     widgetId?: any;
@@ -36,6 +36,15 @@ type DefaultProps = {
     functions: Props["functions"];
 };
 
+const buttonSetsList: any = [
+    "basic",
+    "trig",
+    "prealgebra",
+    "logarithms",
+    "basic relations",
+    "advanced relations",
+];
+
 const parseAnswerKey = ({key}: AnswerForm): number => {
     // 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,
@@ -67,11 +76,7 @@ const _makeNewKey = (answerForms: ReadonlyArray<AnswerForm>) => {
     return usedKeys.length;
 };
 
-type State = {
-    isTex: boolean;
-};
-
-class ExpressionEditor extends React.Component<Props, State> {
+class ExpressionEditor extends React.Component<Props> {
     static widgetName = "expression" as const;
 
     static defaultProps: DefaultProps = {
@@ -81,29 +86,6 @@ class ExpressionEditor extends React.Component<Props, State> {
         functions: ["f", "g", "h"],
     };
 
-    constructor(props: Props) {
-        super(props);
-        // Is the format of `value` TeX or plain text?
-        // TODO(alex): Remove after backfilling everything to TeX
-        // TODO(joel) - sucks if you edit some expression without
-        // backslashes or curly braces, then come back to the question and
-        // it's surprisingly not TeX anymore.
-
-        let isTex;
-        // default to TeX if new;
-        if (props.answerForms.length === 0) {
-            isTex = true;
-        } else {
-            isTex = props.answerForms.some((form) => {
-                const {value} = form;
-                // only TeX has backslashes and curly braces
-                return value.indexOf("\\") !== -1 || value.indexOf("{") !== -1;
-            });
-        }
-
-        this.state = {isTex};
-    }
-
     change(...args) {
         return Changeable.change.apply(this, args);
     }
@@ -156,38 +138,31 @@ class ExpressionEditor extends React.Component<Props, State> {
         );
 
         // checkboxes to choose which sets of input buttons are shown
-        const buttonSetChoices = Object.keys(TexButtons.buttonSets).map(
-            (name) => {
-                // 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 as PerseusExpressionWidgetOptions["buttonSets"][number],
-                    ) || isFirst;
-                const className = isFirst
-                    ? "button-set-label-float"
-                    : "button-set-label";
-                return (
-                    <label className={className} key={name}>
-                        <input
-                            type="checkbox"
-                            checked={checked}
-                            disabled={isFirst}
-                            onChange={() => this.handleButtonSet(name)}
-                        />
-                        {name}
-                    </label>
-                );
-            },
-        );
+        const buttonSetChoices = buttonSetsList.map((name) => {
+            // 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 as PerseusExpressionWidgetOptions["buttonSets"][number],
+                ) || isFirst;
+            return (
+                <label className="button-set-label" key={name}>
+                    <input
+                        type="checkbox"
+                        checked={checked}
+                        disabled={isFirst}
+                        onChange={() => this.handleButtonSet(name)}
+                    />
+                    {name}
+                </label>
+            );
+        });
 
         const {TeX} = Dependencies.getDependencies(); // OldExpression only
 
-        buttonSetChoices.splice(
-            1,
-            1,
-            <label key="show-div">
+        buttonSetChoices.unshift(
+            <label className="button-set-label" key="show-div">
                 <input type="checkbox" onChange={this.handleToggleDiv} />
                 <span className="show-div-button">
                     show <TeX>\div</TeX> button
@@ -240,15 +215,6 @@ class ExpressionEditor extends React.Component<Props, State> {
                     {buttonSetChoices}
                 </div>
 
-                {this.state.isTex && (
-                    <TexButtons
-                        className="math-input-buttons"
-                        sets={this.props.buttonSets}
-                        convertDotToTimes={this.props.times}
-                        onInsert={this.handleTexInsert}
-                    />
-                )}
-
                 <h3 className="expression-editor-h3">Answers</h3>
 
                 <p style={{margin: "4px 0"}}>
@@ -397,9 +363,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
     // called when the selected buttonset changes
     handleButtonSet: (changingName: string) => void = (changingName) => {
-        const buttonSetNames = Object.keys(
-            TexButtons.buttonSets,
-        ) as LegacyButtonSet[];
+        const buttonSetNames = buttonSetsList;
 
         // Filter to preserve order - using .union and .difference would always
         // move the last added button set to the end.

package/src/widgets/label-image/__stories__/behavior.stories.tsx

@@ -27,5 +27,5 @@ export const Default = (args: StoryArgs): React.ReactElement => {
             setState({...state, ...newState});
         },
     } as const;
-    return <Behavior {...props} />;
+    return <Behavior preferredPopoverDirection="NONE" {...props} />;
 };

package/src/widgets/label-image/behavior.tsx

@@ -10,21 +10,32 @@ import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
+export type PreferredPopoverDirection =
+    | "NONE"
+    | "UP"
+    | "DOWN"
+    | "LEFT"
+    | "RIGHT";
+
 type Props = {
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
     hideChoicesFromInstructions: boolean;
+
+    preferredPopoverDirection: PreferredPopoverDirection;
     // Callback for when widget options change.
     onChange: (options: {
         multipleAnswers?: boolean;
         hideChoicesFromInstructions?: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection;
     }) => void;
 };
 
 const Behavior = ({
     multipleAnswers,
     hideChoicesFromInstructions,
+    preferredPopoverDirection,
     onChange,
 }: Props): React.ReactElement => (
     <div>
@@ -59,6 +70,27 @@ const Behavior = ({
                     Do not display answer choices in instructions
                 </span>
             </li>
+
+            <li className={css(styles.option)}>
+                <span className={css(styles.label)}>
+                    Preferred pop-over direction
+                </span>
+                <select
+                    value={preferredPopoverDirection}
+                    onChange={(e) => {
+                        onChange({
+                            preferredPopoverDirection: e.target
+                                .value as PreferredPopoverDirection,
+                        });
+                    }}
+                >
+                    <option value="NONE"> No Preference </option>
+                    <option value="UP"> Up </option>
+                    <option value="DOWN"> Down </option>
+                    <option value="LEFT"> Left </option>
+                    <option value="RIGHT"> Right </option>
+                </select>
+            </li>
         </ul>
     </div>
 );

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

@@ -229,6 +229,7 @@ class LabelImageEditor extends React.Component<Props> {
                 <div className={css(styles.largeSpacer)} />
 
                 <Behavior
+                    preferredPopoverDirection="NONE"
                     multipleAnswers={multipleAnswers}
                     hideChoicesFromInstructions={hideChoicesFromInstructions}
                     onChange={this.handleBehaviorChange}