@khanacademy/perseus-editor 2.15.5 → 2.15.7

package/dist/index.js

@@ -20,6 +20,7 @@ var classNames = require('classnames');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
+var mathInput = require('@khanacademy/math-input');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var Typography = require('@khanacademy/wonder-blocks-typography');
 var Button = require('@khanacademy/wonder-blocks-button');
@@ -64,7 +65,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.15.5";
+const libVersion = "2.15.7";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -258,13 +259,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$f.button
+      style: styles$g.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$c, icon);
     });
   }
 }
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: Color__default["default"].gold,
     margin: 2,
@@ -20787,19 +20788,19 @@ class TexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$e.iconExpanded : styles$e.iconCollapsed;
+    const iconStyle = showErrors ? styles$f.iconExpanded : styles$f.iconCollapsed;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$e.errorContainer
+      style: styles$f.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$e.title,
+      style: styles$f.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
+      style: styles$f.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,
+      style: styles$f.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20808,7 +20809,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24820,12 +24821,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$d.baseButton, color === "green" && styles$d.green, color === "orange" && styles$d.orange),
+      className: aphrodite.css(styles$e.baseButton, color === "green" && styles$e.green, color === "orange" && styles$e.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -25038,23 +25039,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.containerHeader)
+    className: aphrodite.css(styles$d.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$c.containerTitle)
+    className: aphrodite.css(styles$d.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.container)
+    className: aphrodite.css(styles$d.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$c.row, styles$c.rowHeading)
+    className: aphrodite.css(styles$d.row, styles$d.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$c.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$d.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.containerTitle)
+    className: aphrodite.css(styles$d.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnRight)
+    className: aphrodite.css(styles$d.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -25067,11 +25068,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.container)
+    className: aphrodite.css(styles$d.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft, styles$c.containerHeader)
+    className: aphrodite.css(styles$d.columnLeft, styles$d.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -25085,28 +25086,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.containerHeader)
+    className: aphrodite.css(styles$d.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$c.containerTitle)
+    className: aphrodite.css(styles$d.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.containerHeader, styles$c.previewCollectionHeader)
+    className: aphrodite.css(styles$d.containerHeader, styles$d.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$c.containerTitle)
+    className: aphrodite.css(styles$d.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.container)
+    className: aphrodite.css(styles$d.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$c.row)
+    className: aphrodite.css(styles$d.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnRight)
+    className: aphrodite.css(styles$d.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$c.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$d.contentIndent)
   }, children));
 };
 
@@ -25226,11 +25227,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.row)
+    className: aphrodite.css(styles$d.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$c.sticky)
+    className: aphrodite.css(sticky && styles$d.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25238,9 +25239,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnRight)
+    className: aphrodite.css(styles$d.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$c.sticky)
+    className: aphrodite.css(sticky && styles$d.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25256,13 +25257,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.row)
+    className: aphrodite.css(styles$d.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$c.sticky)
+    className: aphrodite.css(sticky && styles$d.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$c.hintEditor),
+    className: aphrodite.css(styles$d.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25277,9 +25278,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnRight)
+    className: aphrodite.css(styles$d.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$c.sticky)
+    className: aphrodite.css(sticky && styles$d.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25296,9 +25297,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.columnLeft)
+    className: aphrodite.css(styles$d.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$c.tagsEditor)
+    className: aphrodite.css(styles$d.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25329,23 +25330,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$c.control)
+      className: aphrodite.css(styles$d.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$c.verticalFlip)
+      className: aphrodite.css(styles$d.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$c.control)
+      className: aphrodite.css(styles$d.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$c.control)
+      className: aphrodite.css(styles$d.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25353,7 +25354,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$c.arrayElement, !elementIsLeaf && styles$c.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25379,7 +25380,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$c.objectElement)
+    className: aphrodite.css(styles$d.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25548,7 +25549,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25700,47 +25701,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$b.controlBar
+      style: styles$c.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$b.controls
+      style: styles$c.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$b.controlSelected : styles$b.control
+      style: mode === "edit" ? styles$c.controlSelected : styles$c.control
     }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$b.controlSelected : styles$b.control
+      style: mode === "preview" ? styles$c.controlSelected : styles$c.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$b.controlSelected : styles$b.control
+      style: mode === "json" ? styles$c.controlSelected : styles$c.control
     }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$b.controls
+      style: styles$c.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$b.controlSelected : styles$b.control
+      style: screen === "phone" ? styles$c.controlSelected : styles$c.control
     }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$b.controlSelected : styles$b.control
+      style: screen === "tablet" ? styles$c.controlSelected : styles$c.control
     }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$b.controlSelected : styles$b.control
+      style: screen === "desktop" ? styles$c.controlSelected : styles$c.control
     }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$b.editor
+      style: styles$c.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$b = {
+const styles$c = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27272,10 +27273,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$a.title)
+      className: aphrodite.css(styles$b.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$a.input)
+      className: aphrodite.css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27302,7 +27303,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.hintsTitle)
+      className: aphrodite.css(styles$b.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor
     // eslint-disable-next-line react/no-string-refs
     , {
@@ -27345,7 +27346,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$a = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28656,28 +28657,73 @@ class InputNumberEditor extends React__namespace.Component {
   });
 }
 
+/**
+ * A simple Mathquill MathField input for the InteractionEditor.
+ * Unlike our other uses of Mathquill, we're not using a keypad here;
+ * it's just the input itself for use writing TeX.
+ */
+function MathquillInput(props) {
+  const mathFieldWrapperRef = React.useRef(null);
+  const mathFieldInstance = React.useRef();
+  React.useEffect(() => {
+    // If we have the mount for the input, but not the input
+    // make a new Mathquill input
+    if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
+      // Initialize MathQuill.MathField instance
+      mathFieldInstance.current = mathInput.createMathField(mathFieldWrapperRef.current, baseConfig => ({
+        ...baseConfig,
+        handlers: {
+          edit: mathField => {
+            // This handler is guaranteed to be called on change, but
+            // unlike React it sometimes generates false positives.
+            // One of these is on initialization (with an empty string
+            // value), so we have to guard against that below.
+            let value = mathField.latex();
+
+            // Provide a MathQuill-compatible way to generate the
+            // not-equals sign without pasting unicode or typing TeX
+            value = value.replace(/<>/g, "\\ne");
+            if (props.value !== value) {
+              props.onChange(value);
+            }
+          },
+          upOutOf: mathField => {
+            // This handler is called when the user presses the up
+            // arrow key, but there is nowhere in the expression to go
+            // up to (no numerator or exponent). For ease of use,
+            // interpret this as an attempt to create an exponent.
+            mathField.typedText("^");
+          }
+        }
+      }));
+    }
+  });
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$a.outerWrapper
+  }, /*#__PURE__*/React__namespace.createElement("span", {
+    ref: mathFieldWrapperRef,
+    className: "perseus-math-input mq-editable-field mq-math-mode"
+  }));
+}
+const styles$a = aphrodite.StyleSheet.create({
+  outerWrapper: {
+    display: "inline-block",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: Color__default["default"].offBlack50,
+    borderRadius: 3,
+    background: Color__default["default"].white
+  }
+});
+
 const {
-  MathInput: MathInput$8,
   NumberInput: NumberInput$g
 } = perseus.components;
 const {
   getDependencies: getDependencies$8
 } = perseus.Dependencies;
-//
 // Editor for function plots
-//
-// TODO(eater): Factor this out
-//
 class FunctionEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    value: PropTypes__default["default"].string,
-    rangeMin: PropTypes__default["default"].string,
-    rangeMax: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string,
-    strokeDashArray: PropTypes__default["default"].string,
-    strokeWidth: PropTypes__default["default"].number
-  };
   static defaultProps = {
     value: "x",
     rangeMin: "-10",
@@ -28702,30 +28748,21 @@ class FunctionEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$8();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$8, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.value,
-      onChange: this.change("value"),
-      analytics: analyticsStub
+      onChange: this.change("value")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$8, {
-      buttonsVisible: "never",
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.rangeMin,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$8, {
-      buttonsVisible: "never",
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.rangeMax,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+      onChange: this.change("rangeMax")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -28749,26 +28786,14 @@ class FunctionEditor extends React__namespace.Component {
 }
 
 const {
-  MathInput: MathInput$7,
   TextInput: TextInput$5
 } = perseus.components;
 const {
   getDependencies: getDependencies$7
 } = perseus.Dependencies;
-//
 // Editor for labels
-//
-// TODO(eater): Factor this out maybe?
 // TODO(eater): Add text direction
-//
 class LabelEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    color: PropTypes__default["default"].string,
-    coordX: PropTypes__default["default"].string,
-    coordY: PropTypes__default["default"].string,
-    label: PropTypes__default["default"].string
-  };
   static defaultProps = {
     coordX: "0",
     coordY: "0",
@@ -28791,9 +28816,6 @@ class LabelEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$7();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -28806,16 +28828,12 @@ class LabelEditor extends React__namespace.Component {
       }
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$7, {
-      buttonsVisible: "never",
+    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$7, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -28826,29 +28844,13 @@ class LabelEditor extends React__namespace.Component {
 }
 
 const {
-  MathInput: MathInput$6,
   NumberInput: NumberInput$f
 } = perseus.components;
 const {
   getDependencies: getDependencies$6
 } = perseus.Dependencies;
-//
 // Editor for non-interactive line segments
-//
-// TODO(eater): Factor this out
-//
 class LineEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    startX: PropTypes__default["default"].string,
-    startY: PropTypes__default["default"].string,
-    endX: PropTypes__default["default"].string,
-    endY: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string,
-    strokeDasharray: PropTypes__default["default"].string,
-    arrows: PropTypes__default["default"].string,
-    strokeWidth: PropTypes__default["default"].number
-  };
   static defaultProps = {
     startX: "-5",
     startY: "5",
@@ -28875,35 +28877,24 @@ class LineEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$6();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$6, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$6, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$6, {
-      buttonsVisible: "never",
+    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.endX,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$6, {
-      buttonsVisible: "never",
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.endY,
-      onChange: this.change("endY"),
-      analytics: analyticsStub
+      onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -28931,7 +28922,6 @@ class LineEditor extends React__namespace.Component {
 
 const {
   ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$5,
   NumberInput: NumberInput$e
 } = perseus.components;
 class ConstraintEditor extends React__namespace.Component {
@@ -28951,9 +28941,6 @@ class ConstraintEditor extends React__namespace.Component {
     const {
       TeX
     } = perseus.Dependencies.getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
@@ -28983,76 +28970,49 @@ class ConstraintEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
+      onChange: this.change("constraintFn")
     }))), this.props.constraint === "y" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
+      onChange: this.change("constraintFn")
     }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+      onChange: this.change("constraintXMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax"),
-      analytics: analyticsStub
+      onChange: this.change("constraintXMax")
     }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$5, {
-      buttonsVisible: "never",
+      onChange: this.change("constraintYMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
+      onChange: this.change("constraintYMax")
     }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
   }
 }
 
 const {
-  MathInput: MathInput$4,
   NumberInput: NumberInput$d
 } = perseus.components;
 const {
   getDependencies: getDependencies$5
 } = perseus.Dependencies;
-//
 // Editor for interactive movable line segments
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
 class MovableLineEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    startX: PropTypes__default["default"].string,
-    startY: PropTypes__default["default"].string,
-    endX: PropTypes__default["default"].string,
-    endY: PropTypes__default["default"].string,
-    constraint: PropTypes__default["default"].string,
-    snap: PropTypes__default["default"].number,
-    constraintFn: PropTypes__default["default"].string
-  };
   static defaultProps = {
     startX: "-5",
     startY: "5",
@@ -29061,6 +29021,7 @@ class MovableLineEditor extends React__namespace.Component {
     constraint: "none",
     snap: 0.5,
     constraintFn: "0",
+    // @ts-expect-error - TS2561
     constraintXMin: "-10",
     constraintXMax: "10",
     constraintYMin: "-10",
@@ -29082,35 +29043,24 @@ class MovableLineEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$5();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$4, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$4, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$4, {
-      buttonsVisible: "never",
+    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.endX,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$4, {
-      buttonsVisible: "never",
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.endY,
-      onChange: this.change("endY"),
-      analytics: analyticsStub
+      onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
@@ -29130,33 +29080,21 @@ class MovableLineEditor extends React__namespace.Component {
 }
 
 const {
-  MathInput: MathInput$3,
   NumberInput: NumberInput$c
 } = perseus.components;
 const {
   getDependencies: getDependencies$4
 } = perseus.Dependencies;
-//
 // Editor for interactive movable points
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
 class MovablePointEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    startX: PropTypes__default["default"].string,
-    startY: PropTypes__default["default"].string,
-    constraint: PropTypes__default["default"].string,
-    snap: PropTypes__default["default"].number,
-    constraintFn: PropTypes__default["default"].string
-  };
   static defaultProps = {
     startX: "0",
     startY: "0",
     constraint: "none",
     snap: 0.5,
     constraintFn: "0",
+    // @ts-expect-error - TS2561
     constraintXMin: "-10",
     constraintXMax: "10",
     constraintYMin: "-10",
@@ -29178,23 +29116,16 @@ class MovablePointEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$4();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$3, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$3, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
@@ -29206,28 +29137,13 @@ class MovablePointEditor extends React__namespace.Component {
 }
 
 const {
-  MathInput: MathInput$2,
   NumberInput: NumberInput$b
 } = perseus.components;
 const {
   getDependencies: getDependencies$3
 } = perseus.Dependencies;
-//
 // Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
 class ParametricEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    x: PropTypes__default["default"].string,
-    y: PropTypes__default["default"].string,
-    rangeMin: PropTypes__default["default"].string,
-    rangeMax: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string,
-    strokeDashArray: PropTypes__default["default"].string,
-    strokeWidth: PropTypes__default["default"].number
-  };
   static defaultProps = {
     x: "cos(t)",
     y: "sin(t)",
@@ -29253,37 +29169,26 @@ class ParametricEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$3();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.x,
-      onChange: this.change("x"),
-      analytics: analyticsStub
+      onChange: this.change("x")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.y,
-      onChange: this.change("y"),
-      analytics: analyticsStub
+      onChange: this.change("y")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.rangeMin,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$2, {
-      buttonsVisible: "never",
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.rangeMax,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+      onChange: this.change("rangeMax")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29306,24 +29211,11 @@ class ParametricEditor extends React__namespace.Component {
   }
 }
 
-const {
-  MathInput: MathInput$1
-} = perseus.components;
 const {
   getDependencies: getDependencies$2
 } = perseus.Dependencies;
-//
 // Editor for non-interactive points
-//
-// TODO(eater): Factor this out
-//
 class PointEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    coordX: PropTypes__default["default"].string,
-    coordY: PropTypes__default["default"].string,
-    color: PropTypes__default["default"].string
-  };
   static defaultProps = {
     coordX: "0",
     coordY: "0",
@@ -29345,23 +29237,16 @@ class PointEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$2();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
+    }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29371,26 +29256,11 @@ class PointEditor extends React__namespace.Component {
   }
 }
 
-const {
-  MathInput
-} = perseus.components;
 const {
   getDependencies: getDependencies$1
 } = perseus.Dependencies;
-//
 // Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
 class RectangleEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    color: PropTypes__default["default"].string,
-    coordX: PropTypes__default["default"].string,
-    coordY: PropTypes__default["default"].string,
-    height: PropTypes__default["default"].string,
-    width: PropTypes__default["default"].string
-  };
   static defaultProps = {
     coordX: "-5",
     coordY: "5",
@@ -29414,37 +29284,26 @@ class RectangleEditor extends React__namespace.Component {
     const {
       TeX
     } = getDependencies$1();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Bottom left: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Bottom left: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.width,
-      onChange: this.change("width"),
-      analytics: analyticsStub
+      onChange: this.change("width")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
       value: this.props.height,
-      onChange: this.change("height"),
-      analytics: analyticsStub
+      onChange: this.change("height")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
@@ -29475,13 +29334,6 @@ const defaultInteractionProps = {
   elements: []
 };
 class InteractionEditor extends React__namespace.Component {
-  // TODO(eater): Make more better
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    // eslint-disable-next-line react/forbid-prop-types
-    elements: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
-    graph: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
-  };
   static widgetName = "interaction";
   static defaultProps = defaultInteractionProps;
   state = {