@khanacademy/perseus-editor 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/perseus-editor
 
+## 2.12.0
+
+### Minor Changes
+
+-   [#814](https://github.com/Khan/perseus/pull/814) [`105d2060`](https://github.com/Khan/perseus/commit/105d20603d935d35cff237b17f0bfb57ca751e4c) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Change KaTeXErrorView to TeXErrorView and adopt Phosphor Icons in it
+
+### Patch Changes
+
+-   [#814](https://github.com/Khan/perseus/pull/814) [`105d2060`](https://github.com/Khan/perseus/commit/105d20603d935d35cff237b17f0bfb57ca751e4c) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Minor build change to how we provide Typescript type definitions (should be no change to build output).
+
+-   Updated dependencies [[`a91c84fe`](https://github.com/Khan/perseus/commit/a91c84fe53827ff4333220777a9918882b7fe9f0), [`3e176246`](https://github.com/Khan/perseus/commit/3e176246025ba237682569481dd9960f7a0dabf4), [`105d2060`](https://github.com/Khan/perseus/commit/105d20603d935d35cff237b17f0bfb57ca751e4c), [`3cf5ac4c`](https://github.com/Khan/perseus/commit/3cf5ac4c3f9d51dbcddc6f75bfbf0f8778b20f78)]:
+    -   @khanacademy/perseus@15.0.0
+    -   @khanacademy/perseus-core@1.4.0
+    -   @khanacademy/kas@0.3.6
+    -   @khanacademy/kmath@0.1.7
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -10,11 +10,13 @@ import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
+import { View } from '@khanacademy/wonder-blocks-core';
+import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
+import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
 import { point, number, line, ray, vector } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import { isTruthy } from '@khanacademy/wonder-stuff-core';
-import { View } from '@khanacademy/wonder-blocks-core';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import * as Typography from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -22,24 +24,21 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // 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.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -20629,6 +20628,8 @@ class WidgetEditor extends React.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({
@@ -20733,15 +20734,15 @@ class WidgetSelect extends React.Component {
 }
 
 /**
- * Displays a collapsable list of KaTeX rendering errors.
+ * Displays a collapsable list of TeX rendering errors.
  */
-class KatexErrorView extends React.Component {
+class TexErrorView extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
       showErrors: false
     };
-    this.handleToggleKatexErrors = e => {
+    this.handleToggleTexErrors = e => {
       this.setState({
         showErrors: !this.state.showErrors
       });
@@ -20754,42 +20755,36 @@ class KatexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-
-    // TODO(riley) replace with SVG icons
-    const disclosureClass = showErrors ? "icon-chevron-down" : "icon-chevron-right";
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$e.errorContainer)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$e.title),
-      onClick: this.handleToggleKatexErrors
-    }, /*#__PURE__*/React.createElement("i", {
-      className: disclosureClass,
-      style: {
-        fontSize: 14
-      }
-    }), "\xA0 KaTeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement("div", {
-      className: 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.createElement("div", {
-      className: css(styles$e.error),
+    const iconStyle = showErrors ? styles$e.iconExpanded : styles$e.iconCollapsed;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles$e.errorContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$e.title,
+      onClick: this.handleToggleTexErrors
+    }, /*#__PURE__*/React.createElement(PhosphorIcon, {
+      icon: caretRight,
+      style: iconStyle
+    }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(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.createElement(View, {
+      style: styles$e.error,
       key: index
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(View, {
       style: {
         color: "red"
       }
-    }, e.math), /*#__PURE__*/React.createElement("div", null, e.message))));
+    }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-KatexErrorView.propTypes = {
-  errorList: PropTypes.arrayOf(PropTypes.shape({
-    math: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired
-  })).isRequired
-};
 const styles$e = 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",
@@ -20801,6 +20796,13 @@ const styles$e = StyleSheet.create({
   },
   error: {
     padding: "4px 10px"
+  },
+  iconCollapsed: {
+    transition: ".15s"
+  },
+  iconExpanded: {
+    transform: "rotate(90deg)",
+    transition: ".15s"
   }
 });
 
@@ -21405,6 +21407,7 @@ class Editor extends React.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({
@@ -21624,7 +21627,7 @@ class Editor extends React.Component {
     };
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-single-editor " + (this.props.className || "")
-    }, textareaWrapper, katexErrorList.length > 0 && /*#__PURE__*/React.createElement(KatexErrorView, {
+    }, textareaWrapper, katexErrorList.length > 0 && /*#__PURE__*/React.createElement(TexErrorView, {
       errorList: katexErrorList
     }), this.props.warnNoPrompt && noPrompt && /*#__PURE__*/React.createElement("div", {
       style: warningStyle
@@ -24375,13 +24378,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -25879,6 +25880,8 @@ class BlurInput extends React.Component {
       value: this.props.value
     };
   }
+
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       value: nextProps.value
@@ -26606,6 +26609,7 @@ const SortableArea = createReactClass({
   componentDidMount: function () {
     this._setDragEvents();
   },
+  // eslint-disable-next-line react/no-unsafe
   UNSAFE_componentWillReceiveProps: function (nextProps) {
     this.setState({
       components: nextProps.components