@khanacademy/perseus-editor 2.6.7 → 2.7.1

package/dist/index.css

@@ -191,6 +191,9 @@
 #perseus #problemarea #workarea {
   margin: 0;
 }
+#perseus #problemarea #workarea .perseus-image-caption {
+  top: 0px !important;
+}
 #perseus .perseus-question-container > div,
 #perseus .perseus-answer-container > div {
   padding-bottom: 25px;

package/dist/index.js

@@ -15,6 +15,7 @@ var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
+var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var Typography = require('@khanacademy/wonder-blocks-typography');
@@ -26808,13 +26809,6 @@ const {
 const {
   getDependencies: getDependencies$2
 } = perseus.Dependencies;
-const answerFormType = PropTypes__default["default"].shape({
-  considered: PropTypes__default["default"].oneOf(perseus.PerseusExpressionAnswerFormConsidered).isRequired,
-  value: PropTypes__default["default"].string.isRequired,
-  form: PropTypes__default["default"].bool.isRequired,
-  simplify: PropTypes__default["default"].bool.isRequired
-});
-
 // Pick a key that isn't currently used by an answer in answerForms
 const _makeNewKey = answerForms => {
   // first note all the currently used keys in an array, used like a map :3
@@ -26838,15 +26832,12 @@ const _makeNewKey = answerForms => {
 };
 class ExpressionEditor extends React__namespace.Component {
   constructor(_props) {
-    var _this;
     super(_props);
-    _this = this;
-    _defineProperty(this, "change", function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    });
+    // 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.
     _defineProperty(this, "serialize", () => {
       const formSerializables = ["value", "form", "simplify", "considered",
       // it's a little weird to serialize the react key, but saves some
@@ -26863,7 +26854,7 @@ class ExpressionEditor extends React__namespace.Component {
       if (this.props.answerForms.length === 0) {
         issues.push("No answers specified");
       } else {
-        const hasCorrect = !!___default["default"](this.props.answerForms).find(form => {
+        const hasCorrect = this.props.answerForms.some(form => {
           return form.considered === "correct";
         });
         if (!hasCorrect) {
@@ -26907,7 +26898,6 @@ class ExpressionEditor extends React__namespace.Component {
     _defineProperty(this, "newAnswer", () => {
       const answerForms = this.props.answerForms.slice();
       answerForms.push(this._newEmptyAnswerForm());
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       this.change({
         answerForms
       });
@@ -26915,39 +26905,34 @@ class ExpressionEditor extends React__namespace.Component {
     _defineProperty(this, "handleRemoveForm", i => {
       const answerForms = this.props.answerForms.slice();
       answerForms.splice(i, 1);
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       this.change({
         answerForms
       });
     });
     _defineProperty(this, "updateForm", (i, props) => {
       const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
-
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       this.change({
         answerForms
       });
     });
     _defineProperty(this, "handleReorder", components => {
-      const answerForms = ___default["default"](components).map(component => {
+      const answerForms = components.map(component => {
         const form = ___default["default"](component.props).pick("considered", "form", "simplify", "value");
         // @ts-expect-error - TS2339 - Property 'key' does not exist on type 'Pick<any, "form" | "value" | "simplify" | "considered">'.
         form.key = component.key;
         return form;
       });
-
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       this.change({
         answerForms
       });
     });
     _defineProperty(this, "handleButtonSet", changingName => {
-      const buttonSetNames = ___default["default"](TexButtons.buttonSets).keys();
+      const buttonSetNames = Object.keys(TexButtons.buttonSets);
 
       // Filter to preserve order - using .union and .difference would always
       // move the last added button set to the end.
-      const buttonSets = ___default["default"](buttonSetNames).filter(set => {
-        return ___default["default"](this.props.buttonSets).contains(set) !== (set === changingName);
+      const buttonSets = buttonSetNames.filter(set => {
+        return this.props.buttonSets.includes(set) !== (set === changingName);
       });
       this.props.onChange({
         buttonSets
@@ -26958,17 +26943,16 @@ class ExpressionEditor extends React__namespace.Component {
       // "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, remove;
-      if (___default["default"](this.props.buttonSets).contains("basic+div")) {
+      let keep;
+      let remove;
+      if (this.props.buttonSets.includes("basic+div")) {
         keep = "basic";
         remove = "basic+div";
       } else {
         keep = "basic+div";
         remove = "basic";
       }
-      const buttonSets = ___default["default"](this.props.buttonSets).reject(set => set === remove).concat(keep);
-
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
+      const buttonSets = this.props.buttonSets.filter(set => set !== remove).concat(keep);
       this.change("buttonSets", buttonSets);
     });
     _defineProperty(this, "handleTexInsert", str => {
@@ -26978,32 +26962,32 @@ class ExpressionEditor extends React__namespace.Component {
     });
     _defineProperty(this, "handleFunctions", e => {
       const newProps = {};
-      newProps.functions = ___default["default"].compact(e.target.value.split(/[ ,]+/));
+      newProps.functions = e.target.value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
       this.props.onChange(newProps);
     });
-    // 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 = ___default["default"](_props.answerForms).any(form => {
+      isTex = _props.answerForms.some(form => {
         const {
           value
         } = form;
         // only TeX has backslashes and curly braces
-        return ___default["default"].indexOf(value, "\\") !== -1 || ___default["default"].indexOf(value, "{") !== -1;
+        return value.indexOf("\\") !== -1 || value.indexOf("{") !== -1;
       });
     }
     this.state = {
       isTex
     };
   }
+  change() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return perseus.Changeable.change.apply(this, args);
+  }
   render() {
     const answerOptions = this.props.answerForms.map((obj, index) => {
       const expressionProps = {
@@ -27037,11 +27021,11 @@ class ExpressionEditor extends React__namespace.Component {
     });
 
     // checkboxes to choose which sets of input buttons are shown
-    const buttonSetChoices = ___default["default"](TexButtons.buttonSets).map((set, name) => {
+    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 = ___default["default"].contains(this.props.buttonSets, name) || isFirst;
+      const checked = this.props.buttonSets.includes(name) || isFirst;
       const className = isFirst ? "button-set-label-float" : "button-set-label";
       return /*#__PURE__*/React__namespace.createElement("label", {
         className: className,
@@ -27101,13 +27085,6 @@ class ExpressionEditor extends React__namespace.Component {
 }
 
 // Find the next element in arr after val, wrapping around to the first.
-_defineProperty(ExpressionEditor, "propTypes", {
-  ...perseus.Changeable.propTypes,
-  answerForms: PropTypes__default["default"].arrayOf(answerFormType),
-  times: PropTypes__default["default"].bool,
-  buttonSets: TexButtons.buttonSetsType,
-  functions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
-});
 _defineProperty(ExpressionEditor, "widgetName", "expression");
 _defineProperty(ExpressionEditor, "defaultProps", {
   answerForms: [],
@@ -27122,9 +27099,9 @@ const findNextIn = function (arr, val) {
 };
 class AnswerOption extends React__namespace.Component {
   constructor() {
-    var _this2;
+    var _this;
     super(...arguments);
-    _this2 = this;
+    _this = this;
     _defineProperty(this, "state", {
       deleteFocused: false
     });
@@ -27137,7 +27114,7 @@ class AnswerOption extends React__namespace.Component {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
-      return perseus.Changeable.change.apply(_this2, args);
+      return perseus.Changeable.change.apply(_this, args);
     });
     _defineProperty(this, "handleImSure", () => {
       this.props.onDelete();
@@ -27157,7 +27134,6 @@ class AnswerOption extends React__namespace.Component {
   render() {
     let removeButton = null;
     if (this.state.deleteFocused) {
-      // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
       removeButton = /*#__PURE__*/React__namespace.createElement("button", {
         type: "button",
         className: "simple-button orange",
@@ -27165,7 +27141,6 @@ class AnswerOption extends React__namespace.Component {
         onBlur: this.handleDeleteBlur
       }, "I'm sure!");
     } else {
-      // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
       removeButton = /*#__PURE__*/React__namespace.createElement("button", {
         type: "button",
         className: "simple-button orange",
@@ -27204,17 +27179,6 @@ class AnswerOption extends React__namespace.Component {
     }, removeButton)));
   }
 }
-_defineProperty(AnswerOption, "propTypes", {
-  ...perseus.Changeable.propTypes,
-  considered: PropTypes__default["default"].oneOf(perseus.PerseusExpressionAnswerFormConsidered).isRequired,
-  expressionProps: PropTypes__default["default"].object.isRequired,
-  // Must the answer have the same form as this answer.
-  form: PropTypes__default["default"].bool.isRequired,
-  // Must the answer be simplified.
-  simplify: PropTypes__default["default"].bool.isRequired,
-  onChange: PropTypes__default["default"].func.isRequired,
-  onDelete: PropTypes__default["default"].func.isRequired
-});
 
 const {
   InlineIcon: InlineIcon$5,