@khanacademy/perseus-editor 2.11.0 → 2.12.1

package/dist/index.js

@@ -13,11 +13,13 @@ var Color = require('@khanacademy/wonder-blocks-color');
 var aphrodite = require('aphrodite');
 var $ = require('jquery');
 var ReactDOM = require('react-dom');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
+var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 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');
 var Button = require('@khanacademy/wonder-blocks-button');
@@ -52,6 +54,7 @@ var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
@@ -61,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.11.0";
+const libVersion = "2.12.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20614,6 +20617,8 @@ class WidgetEditor extends React__namespace.Component {
       widgetInfo: _upgradeWidgetInfo(props)
     };
   }
+
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps(nextProps) {
     // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
     this.setState({
@@ -20764,19 +20769,13 @@ class WidgetSelect extends React__namespace.Component {
 }
 
 /**
- * Displays a collapsable list of KaTeX rendering errors.
+ * Displays a collapsable list of TeX rendering errors.
  */
-class KatexErrorView extends React__namespace.Component {
-  static propTypes = {
-    errorList: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-      math: PropTypes__default["default"].string.isRequired,
-      message: PropTypes__default["default"].string.isRequired
-    })).isRequired
-  };
+class TexErrorView extends React__namespace.Component {
   state = {
     showErrors: false
   };
-  handleToggleKatexErrors = e => {
+  handleToggleTexErrors = e => {
     this.setState({
       showErrors: !this.state.showErrors
     });
@@ -20788,36 +20787,36 @@ class KatexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-
-    // TODO(riley) replace with SVG icons
-    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$e.errorContainer)
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$e.title),
-      onClick: this.handleToggleKatexErrors
-    }, /*#__PURE__*/React__namespace.createElement("i", {
-      className: disclosureClass,
-      style: {
-        fontSize: 14
-      }
-    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$e.errorExplanation)
-    }, "These errors will cause your LaTeX to load really slowly for the student. Please fix them if you can. If you can\u2019t because KaTeX doesn\u2019t support the feature you need, please message Cam."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$e.error),
+    const iconStyle = showErrors ? styles$e.iconExpanded : styles$e.iconCollapsed;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$e.errorContainer
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$e.title,
+      onClick: this.handleToggleTexErrors
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      icon: caretRight__default["default"],
+      style: iconStyle
+    }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$e.errorExplanation
+    }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$e.error,
       key: index
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
         color: "red"
       }
-    }, e.math), /*#__PURE__*/React__namespace.createElement("div", null, e.message))));
+    }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
 const styles$e = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
-    padding: "4px 10px"
+    padding: "4px 10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
   },
   errorContainer: {
     border: "1px solid #ddd",
@@ -20829,6 +20828,13 @@ const styles$e = aphrodite.StyleSheet.create({
   },
   error: {
     padding: "4px 10px"
+  },
+  iconCollapsed: {
+    transition: ".15s"
+  },
+  iconExpanded: {
+    transform: "rotate(90deg)",
+    transition: ".15s"
   }
 });
 
@@ -20941,6 +20947,7 @@ class Editor extends React__namespace.Component {
   }
 
   // TODO(arun): This is a deprecated method, use the appropriate replacement
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.content !== nextProps.content) {
       this.setState({
@@ -21659,7 +21666,7 @@ class Editor extends React__namespace.Component {
     };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-single-editor " + (this.props.className || "")
-    }, textareaWrapper, katexErrorList.length > 0 && /*#__PURE__*/React__namespace.createElement(KatexErrorView, {
+    }, textareaWrapper, katexErrorList.length > 0 && /*#__PURE__*/React__namespace.createElement(TexErrorView, {
       errorList: katexErrorList
     }), this.props.warnNoPrompt && noPrompt && /*#__PURE__*/React__namespace.createElement("div", {
       style: warningStyle
@@ -25842,6 +25849,8 @@ class BlurInput extends React__namespace.Component {
       value: this.props.value
     };
   }
+
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       value: nextProps.value
@@ -26615,6 +26624,7 @@ const SortableArea = createReactClass__default["default"]({
   componentDidMount: function () {
     this._setDragEvents();
   },
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps: function (nextProps) {
     this.setState({
       components: nextProps.components