@khanacademy/perseus-editor 17.8.1 → 17.9.0

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import { components, Widgets, iconChevronDown, iconTrash, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, itemDataVersion, ClassNames, usePerseusI18n, Renderer, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, Expression, interactiveSizes, GrapherWidget, containerSizeClass, getInteractiveBoxFromSizeClass, GrapherUtil as GrapherUtil$1, PerseusI18nContext, KhanColors, mathOnlyParser, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, InteractiveGraphWidget, bodyXsmallBold, MatrixWidget, makeSafeUrl, PlotterWidget, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
-import { upgradeWidgetInfoToLatestVersion, CoreWidgetRegistry, PerseusError, Errors, ItemExtras, categorizerLogic, csProgramLogic, definitionLogic, dropdownLogic, explanationLogic, expressionLogic, PerseusExpressionAnswerFormConsidered, gradedGroupLogic, gradedGroupSetLogic, grapherLogic, GrapherUtil, groupLogic, iframeLogic, imageLogic, inputNumberLogic, interactionLogic, lockedFigureColors, lockedFigureFillStyles, interactiveGraphLogic, labelImageLogic, matcherLogic, matrixLogic, getMatrixSize, measurerLogic, numberLineLogic, numericInputLogic, ordererLogic, passageLogic, passageRefLogic, passageRefTargetLogic, phetSimulationLogic, plotterLogic, plotterPlotTypes, pythonProgramLogic, radioLogic, sorterLogic, tableLogic, videoLogic } from '@khanacademy/perseus-core';
+import { upgradeWidgetInfoToLatestVersion, CoreWidgetRegistry, PerseusError, Errors, ItemExtras, categorizerLogic, csProgramLogic, definitionLogic, dropdownLogic, explanationLogic, expressionLogic, deriveExtraKeys, PerseusExpressionAnswerFormConsidered, gradedGroupLogic, gradedGroupSetLogic, grapherLogic, GrapherUtil, groupLogic, iframeLogic, imageLogic, inputNumberLogic, interactionLogic, lockedFigureColors, lockedFigureFillStyles, interactiveGraphLogic, labelImageLogic, matcherLogic, matrixLogic, getMatrixSize, measurerLogic, numberLineLogic, numericInputLogic, ordererLogic, passageLogic, passageRefLogic, passageRefTargetLogic, phetSimulationLogic, plotterLogic, plotterPlotTypes, pythonProgramLogic, radioLogic, deriveNumCorrect, sorterLogic, tableLogic, videoLogic } from '@khanacademy/perseus-core';
 import * as React from 'react';
 import { useId, useRef, useEffect, useState } from 'react';
 import _ from 'underscore';
@@ -94,7 +94,7 @@ const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "17.8.1";
+const libVersion = "17.9.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const devices = {
@@ -20557,7 +20557,7 @@ katex.__defineMacro("\\pu", function (context) {
 //  a mathematical minus, U+2212. So we need that extra 0.56.
 katex.__defineMacro("\\tripledash", "{\\vphantom{-}\\raisebox{2.56mu}{$\\mkern2mu" + "\\tiny\\text{-}\\mkern1mu\\text{-}\\mkern1mu\\text{-}\\mkern2mu$}}");
 
-const _excluded$4 = ["component", "shouldDragHighlight"];
+const _excluded$5 = ["component", "shouldDragHighlight"];
 class DragTarget extends React.Component {
   constructor(props) {
     super(props);
@@ -20605,7 +20605,7 @@ class DragTarget extends React.Component {
         component: Component
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } = _this$props,
-      forwardProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      forwardProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     return /*#__PURE__*/React.createElement(Component, _extends({}, forwardProps, {
       style: Object.assign({}, this.props.style, opacity),
       onDrop: this.handleDrop,
@@ -20657,7 +20657,7 @@ const iconTablet = {
   height: 100
 };
 
-const _excluded$3 = ["label"];
+const _excluded$4 = ["label"];
 const {
   InlineIcon: InlineIcon$8
 } = components;
@@ -20796,7 +20796,7 @@ function LabeledSwitch$1(props) {
   const {
       label
     } = props,
-    switchProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    switchProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   const id = useId();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     htmlFor: id
@@ -20833,12 +20833,13 @@ class WidgetSelect extends React.Component {
     const addWidgetString = "Add a widget\u2026";
     return /*#__PURE__*/React.createElement("select", {
       value: "",
-      onChange: this.handleChange
+      onChange: this.handleChange,
+      "data-testid": "editor__widget-select"
     }, /*#__PURE__*/React.createElement("option", {
       value: ""
     }, addWidgetString), /*#__PURE__*/React.createElement("option", {
       disabled: true
-    }, "--"), _.map(orderedWidgetNames, name => {
+    }, "--"), orderedWidgetNames.map(name => {
       return /*#__PURE__*/React.createElement("option", {
         key: name,
         value: name
@@ -25149,6 +25150,7 @@ const styles$O = StyleSheet.create({
   }
 });
 
+const _excluded$3 = ["extraKeys"];
 const {
   InfoTip: InfoTip$l
 } = components;
@@ -25194,17 +25196,6 @@ class ExpressionEditor extends React.Component {
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
-    this.serialize = () => {
-      const formSerializables = ["value", "form", "simplify", "considered",
-      // it's a little weird to serialize the react key, but saves some
-      // effort reconstructing them when this item is loaded later.
-      "key"];
-      const serializables = ["answerForms", "buttonSets", "functions", "times", "visibleLabel", "ariaLabel"];
-      const answerForms = this.props.answerForms.map(form => {
-        return _(form).pick(formSerializables);
-      });
-      return lens(this.props).set(["answerForms"], answerForms).mod([], props => _(props).pick(serializables)).freeze();
-    };
     this.getSaveWarnings = () => {
       const issues = [];
       if (this.props.answerForms.length === 0) {
@@ -25336,13 +25327,44 @@ class ExpressionEditor extends React.Component {
       functionsInternal: this.props.functions.join(" ")
     };
   }
+  serialize() {
+    const {
+      answerForms,
+      buttonSets,
+      functions,
+      times,
+      visibleLabel,
+      ariaLabel
+    } = this.props;
+    return {
+      answerForms,
+      buttonSets,
+      functions,
+      times,
+      visibleLabel,
+      ariaLabel,
+      extraKeys: deriveExtraKeys(this.props)
+    };
+  }
   // This function is designed to update the answerForm property
   // with new data. This function should not be used to update any
-  // other properties within ExpressionEditor.
+  // other properties within ExpressionEditor except extraKeys
+  // which is derived from answerForms
   updateAnswerForm(i, props) {
     const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
-    this.change({
+
+    // deriveExtraKeys defaults to using the `extraKeys` it was given
+    // which in most case is what we want, but is not what we want
+    // in the editing experience because we should recalculate them
+    // when answers change
+    const _this$props = this.props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+    const extraKeys = deriveExtraKeys(_extends({}, restProps, {
       answerForms
+    }));
+    this.change({
+      answerForms,
+      extraKeys
     });
   }
   changeSimplify(key, simplify) {
@@ -36147,14 +36169,6 @@ class ChoiceEditor extends React.Component {
     }, clueEditor), this.props.showDelete && deleteLink);
   }
 }
-ChoiceEditor.propTypes = {
-  apiOptions: ApiOptions.propTypes,
-  choice: PropTypes.object,
-  showDelete: PropTypes.bool,
-  onClueChange: PropTypes.func,
-  onContentChange: PropTypes.func,
-  onDelete: PropTypes.func
-};
 class RadioEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -36192,14 +36206,17 @@ class RadioEditor extends React.Component {
     this.onChange = ({
       checked
     }) => {
-      const choices = _.map(this.props.choices, (choice, i) => {
-        return _.extend({}, choice, {
+      const choices = this.props.choices.map((choice, i) => {
+        return _extends({}, choice, {
           correct: checked[i],
           content: choice.isNoneOfTheAbove && !checked[i] ? "" : choice.content
         });
       });
       this.props.onChange({
-        choices: choices
+        choices: choices,
+        numCorrect: deriveNumCorrect(_extends({}, this.props, {
+          choices
+        }))
       });
     };
     this.onContentChange = (choiceIndex, newContent) => {
@@ -36211,18 +36228,6 @@ class RadioEditor extends React.Component {
         choices: choices
       });
     };
-    this.onClueChange = (choiceIndex, newClue) => {
-      const choices = this.props.choices.slice();
-      choices[choiceIndex] = _.extend({}, choices[choiceIndex], {
-        clue: newClue
-      });
-      if (newClue === "") {
-        delete choices[choiceIndex].clue;
-      }
-      this.props.onChange({
-        choices: choices
-      });
-    };
     this.onDelete = choiceIndex => {
       const choices = this.props.choices.slice();
       const deleted = choices[choiceIndex];
@@ -36236,7 +36241,8 @@ class RadioEditor extends React.Component {
       e.preventDefault();
       const choices = this.props.choices.slice();
       const newChoice = {
-        isNoneOfTheAbove: noneOfTheAbove
+        isNoneOfTheAbove: noneOfTheAbove,
+        content: ""
       };
       const addIndex = choices.length - (this.props.hasNoneOfTheAbove ? 1 : 0);
       choices.splice(addIndex, 0, newChoice);
@@ -36266,8 +36272,38 @@ class RadioEditor extends React.Component {
       }
       return [];
     };
-    this.serialize = () => {
-      return _.pick(this.props, "choices", "randomize", "multipleSelect", "countChoices", "displayCount", "hasNoneOfTheAbove", "deselectEnabled");
+  }
+  onClueChange(choiceIndex, newClue) {
+    const choices = this.props.choices.slice();
+    choices[choiceIndex] = _.extend({}, choices[choiceIndex], {
+      clue: newClue
+    });
+    if (newClue === "") {
+      delete choices[choiceIndex].clue;
+    }
+    this.props.onChange({
+      choices: choices
+    });
+  }
+  serialize() {
+    const {
+      choices,
+      randomize,
+      multipleSelect,
+      countChoices,
+      displayCount,
+      hasNoneOfTheAbove,
+      deselectEnabled
+    } = this.props;
+    return {
+      choices,
+      randomize,
+      multipleSelect,
+      countChoices,
+      displayCount,
+      hasNoneOfTheAbove,
+      deselectEnabled,
+      numCorrect: deriveNumCorrect(this.props)
     };
   }
   render() {
@@ -36327,12 +36363,12 @@ class RadioEditor extends React.Component {
             apiOptions: this.props.apiOptions,
             choice: choice,
             onContentChange: newProps => {
-              if ("content" in newProps) {
+              if (newProps.content != null) {
                 this.onContentChange(i, newProps.content);
               }
             },
             onClueChange: newProps => {
-              if ("content" in newProps) {
+              if (newProps.content != null) {
                 this.onClueChange(i, newProps.content);
               }
             },
@@ -36361,24 +36397,6 @@ class RadioEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon, iconPlus), " None of the above", " ")));
   }
 }
-RadioEditor.propTypes = _extends({}, Changeable.propTypes, {
-  apiOptions: ApiOptions.propTypes,
-  choices: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.string,
-    clue: PropTypes.string,
-    correct: PropTypes.bool
-  })),
-  displayCount: PropTypes.number,
-  randomize: PropTypes.bool,
-  hasNoneOfTheAbove: PropTypes.bool,
-  multipleSelect: PropTypes.bool,
-  countChoices: PropTypes.bool,
-  // TODO(kevinb): DEPRECATED: This is be used to force deselectEnabled
-  // behavior on mobile but not on desktop.  When enabled, the user can
-  // deselect a radio input by tapping on it again.
-  deselectEnabled: PropTypes.bool,
-  static: PropTypes.bool
-});
 RadioEditor.widgetName = "radio";
 RadioEditor.defaultProps = radioLogic.defaultWidgetOptions;