@khanacademy/perseus-editor 18.2.3 → 20.0.0

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-utils';
 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';
+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, GrapherUtil, containerSizeClass, getInteractiveBoxFromSizeClass, 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 { CoreWidgetRegistry, upgradeWidgetInfoToLatestVersion, 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 { CoreWidgetRegistry, upgradeWidgetInfoToLatestVersion, PerseusError, Errors, ItemExtras, categorizerLogic, csProgramLogic, definitionLogic, dropdownLogic, explanationLogic, expressionLogic, deriveExtraKeys, PerseusExpressionAnswerFormConsidered, gradedGroupLogic, gradedGroupSetLogic, grapherLogic, GrapherUtil as GrapherUtil$1, 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';
@@ -53,8 +53,11 @@ import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
 import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
+// version number during the release build.
+// In dev, you'll never see the version number.
+
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "18.2.3";
+const libVersion = "20.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const devices = {
@@ -132,6 +135,7 @@ const DeviceFramer = ({
 };
 
 /* eslint-disable @babel/no-invalid-this */
+/* eslint-disable react/no-unsafe */
 class JsonEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -3076,6 +3080,8 @@ var texify = {
 };
 
 /* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+
 
 // Add \ce, \pu, and \tripledash to the KaTeX macros.
 
@@ -4504,6 +4510,7 @@ class ArticleEditor extends React.Component {
         paths: this.props.contentPaths
       },
       // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       legacyPerseusLint: editor ? editor.getSaveWarnings() : []
     };
   }
@@ -5182,6 +5189,8 @@ const splitDiff = function splitDiff(diffEntries) {
       currentLine.push(newEntry);
     });
   });
+
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (currentLine.length) {
     // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never'.
     lines.push(currentLine);
@@ -5690,6 +5699,7 @@ WidgetDiff.defaultProps = {
 /**
  * A side by side diff view for Perseus renderers.
  */
+
 // In diffs, only show the widgetInfo props that can change
 const filterWidgetInfo = function filterWidgetInfo(widgetInfo, showAlignmentOptions) {
   const {
@@ -5743,6 +5753,8 @@ class RendererDiff extends React.Component {
     }
     const beforeWidgets = Object.keys((_before$widgets = before.widgets) != null ? _before$widgets : {}).filter(widget => before.content.includes(widget));
     const afterWidgets = Object.keys((_after$widgets = after.widgets) != null ? _after$widgets : {}).filter(widget => after.content.includes(widget));
+
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (beforeWidgets.length || afterWidgets.length) {
       const widgets = _.union(beforeWidgets, afterWidgets);
       widgetsDiff = widgets.map(widget => {
@@ -5777,6 +5789,10 @@ RendererDiff.defaultProps = {
 };
 
 /* eslint-disable react/no-unsafe */
+/**
+ * A side by side diff view for Perseus articles.
+ */
+
 const rendererProps = PropTypes.shape({
   content: PropTypes.string,
   images: PropTypes.objectOf(PropTypes.any),
@@ -5830,6 +5846,7 @@ ArticleDiff._stateFromProps = props => {
  * A side by side diff view for Perseus exercise items
  * in the standard layout.
  */
+
 const itemProps = PropTypes.shape({
   question: PropTypes.shape({}).isRequired,
   answerArea: PropTypes.shape({}).isRequired,
@@ -5877,6 +5894,11 @@ ItemDiff.propTypes = {
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+/* eslint-disable @babel/no-invalid-this */
+/**
+ * Collection of classes for rendering the hint editor area,
+ * hint editor boxes, and hint previews
+ */
 const {
   InfoTip: InfoTip$p,
   InlineIcon: InlineIcon$5
@@ -6822,7 +6844,7 @@ const DEFAULT_HEIGHT = 400;
 /**
  * This is used for editing a name/value pair.
  */
-class PairEditor$1 extends React.Component {
+let PairEditor$1 = class PairEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
     this.change = (...args) => {
@@ -6843,7 +6865,7 @@ class PairEditor$1 extends React.Component {
       onChange: this.change("value")
     })));
   }
-}
+};
 
 /**
  * This is used for editing a set of name/value pairs.
@@ -6856,7 +6878,7 @@ PairEditor$1.defaultProps = {
   name: "",
   value: ""
 };
-class PairsEditor$1 extends React.Component {
+let PairsEditor$1 = class PairsEditor extends React.Component {
   constructor(..._args2) {
     super(..._args2);
     this.change = (...args) => {
@@ -6892,7 +6914,7 @@ class PairsEditor$1 extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", null, editors);
   }
-}
+};
 PairsEditor$1.propTypes = _extends({}, Changeable.propTypes, {
   pairs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
@@ -8331,6 +8353,9 @@ GradedGroupSetEditor.defaultProps = gradedGroupSetLogic.defaultWidgetOptions;
 const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.slice(i + 1)];
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
+/**
+ * Used in the editors for the Grapher and Interaction widgets.
+ */
 const {
   ButtonGroup: ButtonGroup$6,
   InfoTip: InfoTip$k,
@@ -8849,7 +8874,7 @@ const {
   defaultPlotProps,
   getEquationString,
   typeToButton
-} = GrapherUtil$1;
+} = GrapherUtil;
 class GrapherEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -8939,7 +8964,7 @@ class GrapherEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("label", null, "Available functions: "), /*#__PURE__*/React.createElement(MultiButtonGroup, {
       allowEmpty: false,
       values: this.props.availableTypes,
-      buttons: _.map(GrapherUtil.allTypes, typeToButton),
+      buttons: _.map(GrapherUtil$1.allTypes, typeToButton),
       onChange: this.handleAvailableTypesChange
     })), graph);
   }
@@ -9471,6 +9496,7 @@ InputNumberEditor.widgetName = "input-number";
 InputNumberEditor.defaultProps = inputNumberLogic.defaultWidgetOptions;
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
+
 const {
   InlineIcon: InlineIcon$1
 } = components;
@@ -14129,6 +14155,7 @@ const styles$j = StyleSheet.create({
  * Used in the interactive graph editor's locked figures section.
  */
 
+
 // Union this type with other locked figure types when they are added.
 
 const LockedFigureSettings = props => {
@@ -14920,8 +14947,10 @@ class InteractiveGraphEditor extends React.Component {
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (graph) {
       // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       const correct = graph && graph.getUserInput();
       _.extend(json, {
         graph: {
@@ -14943,8 +14972,12 @@ class InteractiveGraphEditor extends React.Component {
   render() {
     let graph;
     let equationString;
-    const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
-    const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+    const gridStep =
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
+    const snapStep =
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    this.props.snapStep || Util.snapStepFromGridStep(gridStep);
     const sizeClass = containerSizeClass.SMALL;
     if (this.props.valid === true) {
       const correct = this.props.correct;
@@ -15093,7 +15126,9 @@ class InteractiveGraphEditor extends React.Component {
         label: "Number of sides:"
       }, /*#__PURE__*/React.createElement(SingleSelect, {
         key: "polygon-select",
-        selectedValue: (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
+        selectedValue:
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        (_this$props$correct7 = this.props.correct) != null && _this$props$correct7.numSides ? `${this.props.correct.numSides}` : "3",
         placeholder: "",
         onChange: newValue => {
           var _this$props$graph7;
@@ -15424,12 +15459,18 @@ class FormWrappedTextField extends React.Component {
     } = this.state;
     const extraStyles = {};
     const spanStyle = [styles$9.input, styles$9.container];
+
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (width) {
       extraStyles.width = width;
     }
+
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (grow) {
       extraStyles.flexGrow = grow === true ? 1 : grow;
     }
+
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (shrink || shrink === 0) {
       extraStyles.flexShrink = shrink === true ? 0 : shrink;
     }
@@ -16172,6 +16213,7 @@ const findAndFocusElement = component => {
   const DOMNode = ReactDOM.findDOMNode(component);
   const button = DOMNode;
   // @ts-expect-error - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead?
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (button.focus) {
     focusWithChromeStickyFocusBugWorkaround(button);
   }
@@ -16263,6 +16305,7 @@ class OptionGroup extends React.Component {
     this.focusedElement = void 0;
   }
   componentDidMount() {
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (this.focusedElement) {
       findAndFocusElement(this.focusedElement);
     }
@@ -16725,6 +16768,7 @@ const styles$1 = StyleSheet.create({
  * that involve the use of images, and enable learners to demonstrate their
  * knowledge by directly interacting with the image.
  */
+
 class LabelImageEditor extends React.Component {
   constructor(...args) {
     super(...args);
@@ -16745,12 +16789,15 @@ class LabelImageEditor extends React.Component {
       } else if (!imageAlt) {
         warnings.push("Question image has no alt text");
       }
+
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       if (!markers.length) {
         warnings.push("Question has no markers, to label answers on image");
       } else {
         let numNoAnswers = 0;
         let numNoLabels = 0;
         for (const marker of markers) {
+          // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
           if (!marker.answers.length) {
             numNoAnswers++;
           }
@@ -16758,9 +16805,13 @@ class LabelImageEditor extends React.Component {
             numNoLabels++;
           }
         }
+
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         if (numNoAnswers) {
           warnings.push(`Question has ${numNoAnswers} markers with no ` + "answers selected");
         }
+
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         if (numNoLabels) {
           warnings.push(`Question has ${numNoLabels} markers with no ` + "ARIA label");
         }
@@ -16822,6 +16873,7 @@ class LabelImageEditor extends React.Component {
 
     // Automatically reveal their dropdowns as a prompt to the content
     // creator to select answers and set the ARIA label.
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (newIndices.length && this._questionMarkers) {
       this._questionMarkers.openDropdownForMarkerIndices(newIndices);
     }
@@ -16854,7 +16906,9 @@ class LabelImageEditor extends React.Component {
     }), /*#__PURE__*/React.createElement("div", {
       className: css(styles.largeSpacer)
     }), /*#__PURE__*/React.createElement(QuestionMarkers, {
-      choices: choices,
+      choices: choices
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      ,
       imageUrl: imageSelected ? imageUrl : "",
       imageWidth: imageWidth,
       imageHeight: imageHeight,
@@ -17326,6 +17380,7 @@ class NumberLineEditor extends React.Component {
       numDivisions = numDivisions < 0 ? numDivisions * -1 : numDivisions;
 
       // If the number of divisions isn't blank, update the number line
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       if (numDivisions) {
         // Constrain numDivisions to be within the allowed range
         numDivisions = Math.min(divRange[1], Math.max(divRange[0], numDivisions));
@@ -17372,6 +17427,7 @@ class NumberLineEditor extends React.Component {
     let step;
     if (!isTickCtrl) {
       // this will help constrain the answer to what is reachable
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       step = tickStep ? tickStep / snapDivisions : width / numDivisions / snapDivisions;
     } else {
       // but if tickCtrl is on, the range of what is reachable is
@@ -17511,7 +17567,9 @@ class NumberLineEditor extends React.Component {
       }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$5
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    , {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -17520,7 +17578,9 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$5
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    , {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -17529,7 +17589,9 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$5
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    , {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -18036,6 +18098,7 @@ NumericInputEditor.displayName = "NumericInputEditor";
 NumericInputEditor.defaultProps = numericInputLogic.defaultWidgetOptions;
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+/* eslint-disable react/forbid-prop-types */
 const {
   InfoTip: InfoTip$6,
   TextListEditor: TextListEditor$2
@@ -18458,6 +18521,7 @@ class PlotterEditor extends React.Component {
     };
     this.changeScale = e => {
       const oldScale = this.props.scaleY;
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       const newScale = +e.target.value || editorDefaults.scaleY;
       const scale = function scale(value) {
         return value * newScale / oldScale;
@@ -18475,11 +18539,13 @@ class PlotterEditor extends React.Component {
     };
     this.changeMax = e => {
       this.props.onChange({
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         maxY: +e.target.value || editorDefaults.maxY
       });
     };
     this.changeSnaps = e => {
       this.props.onChange({
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         snapsPerLine: +e.target.value || editorDefaults.snapsPerLine
       });
     };
@@ -18962,6 +19028,7 @@ RadioEditor.widgetName = "radio";
 RadioEditor.defaultProps = radioLogic.defaultWidgetOptions;
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+/* eslint-disable react/forbid-prop-types */
 const {
   InfoTip: InfoTip$2,
   TextListEditor
@@ -19034,7 +19101,9 @@ class TableEditor extends React.Component {
       (_this$numberOfColumns = this.numberOfColumns.current) == null || _this$numberOfColumns.focus();
     };
     this.onSizeInput = (numRawRows, numRawColumns) => {
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       let rows = +numRawRows || 0;
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       let columns = +numRawColumns || 0;
       rows = Math.min(Math.max(1, rows), 30);
       columns = Math.min(Math.max(1, columns), 6);