@khanacademy/perseus-editor 2.15.5 → 2.15.7

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
+import { useRef, useEffect } from 'react';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
@@ -17,6 +18,7 @@ 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 { createMathField } from '@khanacademy/math-input';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import * as Typography from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -24,7 +26,7 @@ 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.15.5";
+const libVersion = "2.15.7";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -218,7 +220,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$f.button
+      style: styles$g.button
     }, ({
       hovered,
       focused,
@@ -226,7 +228,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$c, icon));
   }
 }
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   button: {
     backgroundColor: Color.gold,
     margin: 2,
@@ -20755,19 +20757,19 @@ class TexErrorView extends React.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.createElement(View, {
-      style: styles$e.errorContainer
+      style: styles$f.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$e.title,
+      style: styles$f.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
+      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.createElement(View, {
-      style: styles$e.error,
+      style: styles$f.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20776,7 +20778,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24828,7 +24830,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$d.baseButton, color === "green" && styles$d.green, color === "orange" && styles$d.orange),
+      className: css(styles$e.baseButton, color === "green" && styles$e.green, color === "orange" && styles$e.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24843,7 +24845,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -25063,23 +25065,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.containerHeader)
+    className: css(styles$d.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$c.containerTitle)
+    className: css(styles$d.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.container)
+    className: css(styles$d.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$c.row, styles$c.rowHeading)
+    className: css(styles$d.row, styles$d.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$c.containerHeader)
+    className: "pod-title " + css(styles$d.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.containerTitle)
+    className: css(styles$d.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnRight)
+    className: css(styles$d.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -25092,11 +25094,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.container)
+    className: css(styles$d.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft, styles$c.containerHeader)
+    className: css(styles$d.columnLeft, styles$d.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -25109,28 +25111,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.containerHeader)
+    className: css(styles$d.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$c.containerTitle)
+    className: css(styles$d.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.containerHeader, styles$c.previewCollectionHeader)
+    className: css(styles$d.containerHeader, styles$d.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$c.containerTitle)
+    className: css(styles$d.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.container)
+    className: css(styles$d.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$c.row)
+    className: css(styles$d.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnRight)
+    className: css(styles$d.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$c.contentIndent)
+    className: css(path.length > 0 && styles$d.contentIndent)
   }, children));
 };
 
@@ -25253,11 +25255,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.row)
+    className: css(styles$d.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$c.sticky)
+    className: css(sticky && styles$d.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25265,9 +25267,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnRight)
+    className: css(styles$d.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$c.sticky)
+    className: css(sticky && styles$d.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25283,13 +25285,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.row)
+    className: css(styles$d.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$c.sticky)
+    className: css(sticky && styles$d.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$c.hintEditor),
+    className: css(styles$d.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25304,9 +25306,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnRight)
+    className: css(styles$d.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$c.sticky)
+    className: css(sticky && styles$d.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25323,9 +25325,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.columnLeft)
+    className: css(styles$d.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$c.tagsEditor)
+    className: css(styles$d.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25356,23 +25358,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$c.control)
+      className: css(styles$d.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$c.verticalFlip)
+      className: css(styles$d.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$c.control)
+      className: css(styles$d.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$c.control)
+      className: css(styles$d.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25380,7 +25382,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$c.arrayElement, !elementIsLeaf && styles$c.arrayElementAndNotLeaf)
+      className: css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25406,7 +25408,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.createElement("div", {
     key: subkey,
-    className: css(styles$c.objectElement)
+    className: css(styles$d.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25573,7 +25575,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25725,47 +25727,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$b.controlBar
+      style: styles$c.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$b.controls
+      style: styles$c.controls
     }, "Mode:", " ", /*#__PURE__*/React.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.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.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.createElement("span", {
-      style: styles$b.controls
+      style: styles$c.controls
     }, "Screen:", " ", /*#__PURE__*/React.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.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.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.createElement("div", {
-      style: styles$b.editor
+      style: styles$c.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$b = {
+const styles$c = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27247,10 +27249,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$a.title)
+      className: css(styles$b.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$a.input)
+      className: css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27277,7 +27279,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.hintsTitle)
+      className: css(styles$b.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor
     // eslint-disable-next-line react/no-string-refs
     , {
@@ -27316,7 +27318,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$a = StyleSheet.create({
+const styles$b = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28588,18 +28590,71 @@ InputNumberEditor.defaultProps = {
   rightAlign: false
 };
 
+/**
+ * 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 = useRef(null);
+  const mathFieldInstance = useRef();
+  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 = createMathField(mathFieldWrapperRef.current, baseConfig => _extends({}, 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.createElement(View, {
+    style: styles$a.outerWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: mathFieldWrapperRef,
+    className: "perseus-math-input mq-editable-field mq-math-mode"
+  }));
+}
+const styles$a = StyleSheet.create({
+  outerWrapper: {
+    display: "inline-block",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: Color.offBlack50,
+    borderRadius: 3,
+    background: Color.white
+  }
+});
+
 const {
-  MathInput: MathInput$8,
   NumberInput: NumberInput$g
 } = components;
 const {
   getDependencies: getDependencies$8
 } = Dependencies;
-//
 // Editor for function plots
-//
-// TODO(eater): Factor this out
-//
 class FunctionEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -28614,30 +28669,21 @@ class FunctionEditor extends React.Component {
     const {
       TeX
     } = getDependencies$8();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.createElement(MathInput$8, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.value,
-      onChange: this.change("value"),
-      analytics: analyticsStub
+      onChange: this.change("value")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$8, {
-      buttonsVisible: "never",
+    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.rangeMin,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$8, {
-      buttonsVisible: "never",
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.rangeMax,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+      onChange: this.change("rangeMax")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -28659,14 +28705,6 @@ class FunctionEditor extends React.Component {
     }))));
   }
 }
-FunctionEditor.propTypes = _extends({}, Changeable.propTypes, {
-  value: PropTypes.string,
-  rangeMin: PropTypes.string,
-  rangeMax: PropTypes.string,
-  color: PropTypes.string,
-  strokeDashArray: PropTypes.string,
-  strokeWidth: PropTypes.number
-});
 FunctionEditor.defaultProps = {
   value: "x",
   rangeMin: "-10",
@@ -28677,18 +28715,13 @@ FunctionEditor.defaultProps = {
 };
 
 const {
-  MathInput: MathInput$7,
   TextInput: TextInput$5
 } = components;
 const {
   getDependencies: getDependencies$7
 } = Dependencies;
-//
 // Editor for labels
-//
-// TODO(eater): Factor this out maybe?
 // TODO(eater): Add text direction
-//
 class LabelEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -28703,9 +28736,6 @@ class LabelEditor extends React.Component {
     const {
       TeX
     } = getDependencies$7();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
@@ -28718,16 +28748,12 @@ class LabelEditor extends React.Component {
       }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$7, {
-      buttonsVisible: "never",
+    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$7, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -28736,12 +28762,6 @@ class LabelEditor extends React.Component {
     })));
   }
 }
-LabelEditor.propTypes = _extends({}, Changeable.propTypes, {
-  color: PropTypes.string,
-  coordX: PropTypes.string,
-  coordY: PropTypes.string,
-  label: PropTypes.string
-});
 LabelEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
@@ -28750,17 +28770,12 @@ LabelEditor.defaultProps = {
 };
 
 const {
-  MathInput: MathInput$6,
   NumberInput: NumberInput$f
 } = components;
 const {
   getDependencies: getDependencies$6
 } = Dependencies;
-//
 // Editor for non-interactive line segments
-//
-// TODO(eater): Factor this out
-//
 class LineEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -28775,35 +28790,24 @@ class LineEditor extends React.Component {
     const {
       TeX
     } = getDependencies$6();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$6, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$6, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$6, {
-      buttonsVisible: "never",
+    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.endX,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$6, {
-      buttonsVisible: "never",
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.endY,
-      onChange: this.change("endY"),
-      analytics: analyticsStub
+      onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -28828,16 +28832,6 @@ class LineEditor extends React.Component {
     }))));
   }
 }
-LineEditor.propTypes = _extends({}, Changeable.propTypes, {
-  startX: PropTypes.string,
-  startY: PropTypes.string,
-  endX: PropTypes.string,
-  endY: PropTypes.string,
-  color: PropTypes.string,
-  strokeDasharray: PropTypes.string,
-  arrows: PropTypes.string,
-  strokeWidth: PropTypes.number
-});
 LineEditor.defaultProps = {
   startX: "-5",
   startY: "5",
@@ -28851,7 +28845,6 @@ LineEditor.defaultProps = {
 
 const {
   ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$5,
   NumberInput: NumberInput$e
 } = components;
 class ConstraintEditor extends React.Component {
@@ -28865,9 +28858,6 @@ class ConstraintEditor extends React.Component {
     const {
       TeX
     } = Dependencies.getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Constraint:", " ", /*#__PURE__*/React.createElement(ButtonGroup$2, {
@@ -28897,48 +28887,36 @@ class ConstraintEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
+      onChange: this.change("constraintFn")
     }))), this.props.constraint === "y" && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+      onChange: this.change("constraintXMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax"),
-      analytics: analyticsStub
+      onChange: this.change("constraintXMax")
     }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "y \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$5, {
-      buttonsVisible: "never",
+      onChange: this.change("constraintYMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
+      onChange: this.change("constraintYMax")
     }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
   }
 }
@@ -28953,18 +28931,13 @@ ConstraintEditor.defaultProps = {
 };
 
 const {
-  MathInput: MathInput$4,
   NumberInput: NumberInput$d
 } = components;
 const {
   getDependencies: getDependencies$5
 } = Dependencies;
-//
 // Editor for interactive movable line segments
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
 class MovableLineEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -28979,35 +28952,24 @@ class MovableLineEditor extends React.Component {
     const {
       TeX
     } = getDependencies$5();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, "Initial position:", /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$4, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$4, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$4, {
-      buttonsVisible: "never",
+    }, "End: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.endX,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$4, {
-      buttonsVisible: "never",
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.endY,
-      onChange: this.change("endY"),
-      analytics: analyticsStub
+      onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$d, {
@@ -29025,15 +28987,6 @@ class MovableLineEditor extends React.Component {
     }, "All constraints are applied to the start point."), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
   }
 }
-MovableLineEditor.propTypes = _extends({}, Changeable.propTypes, {
-  startX: PropTypes.string,
-  startY: PropTypes.string,
-  endX: PropTypes.string,
-  endY: PropTypes.string,
-  constraint: PropTypes.string,
-  snap: PropTypes.number,
-  constraintFn: PropTypes.string
-});
 MovableLineEditor.defaultProps = {
   startX: "-5",
   startY: "5",
@@ -29042,6 +28995,7 @@ MovableLineEditor.defaultProps = {
   constraint: "none",
   snap: 0.5,
   constraintFn: "0",
+  // @ts-expect-error - TS2561
   constraintXMin: "-10",
   constraintXMax: "10",
   constraintYMin: "-10",
@@ -29049,18 +29003,13 @@ MovableLineEditor.defaultProps = {
 };
 
 const {
-  MathInput: MathInput$3,
   NumberInput: NumberInput$c
 } = components;
 const {
   getDependencies: getDependencies$4
 } = Dependencies;
-//
 // Editor for interactive movable points
-//
-// TODO(eater): Factor this out
 // TODO(eater): Rethink how constraints are represented
-//
 class MovablePointEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -29075,23 +29024,16 @@ class MovablePointEditor extends React.Component {
     const {
       TeX
     } = getDependencies$4();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$3, {
-      buttonsVisible: "never",
+    }, "Start: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$3, {
-      buttonsVisible: "never",
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+      onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$c, {
@@ -29101,19 +29043,13 @@ class MovablePointEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
   }
 }
-MovablePointEditor.propTypes = _extends({}, Changeable.propTypes, {
-  startX: PropTypes.string,
-  startY: PropTypes.string,
-  constraint: PropTypes.string,
-  snap: PropTypes.number,
-  constraintFn: PropTypes.string
-});
 MovablePointEditor.defaultProps = {
   startX: "0",
   startY: "0",
   constraint: "none",
   snap: 0.5,
   constraintFn: "0",
+  // @ts-expect-error - TS2561
   constraintXMin: "-10",
   constraintXMax: "10",
   constraintYMin: "-10",
@@ -29121,17 +29057,12 @@ MovablePointEditor.defaultProps = {
 };
 
 const {
-  MathInput: MathInput$2,
   NumberInput: NumberInput$b
 } = components;
 const {
   getDependencies: getDependencies$3
 } = Dependencies;
-//
 // Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
 class ParametricEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -29146,37 +29077,26 @@ class ParametricEditor extends React.Component {
     const {
       TeX
     } = getDependencies$3();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.x,
-      onChange: this.change("x"),
-      analytics: analyticsStub
+      onChange: this.change("x")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.y,
-      onChange: this.change("y"),
-      analytics: analyticsStub
+      onChange: this.change("y")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$2, {
-      buttonsVisible: "never",
+    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.rangeMin,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$2, {
-      buttonsVisible: "never",
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.rangeMax,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+      onChange: this.change("rangeMax")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29198,15 +29118,6 @@ class ParametricEditor extends React.Component {
     }))));
   }
 }
-ParametricEditor.propTypes = _extends({}, Changeable.propTypes, {
-  x: PropTypes.string,
-  y: PropTypes.string,
-  rangeMin: PropTypes.string,
-  rangeMax: PropTypes.string,
-  color: PropTypes.string,
-  strokeDashArray: PropTypes.string,
-  strokeWidth: PropTypes.number
-});
 ParametricEditor.defaultProps = {
   x: "cos(t)",
   y: "sin(t)",
@@ -29217,17 +29128,10 @@ ParametricEditor.defaultProps = {
   strokeWidth: 2
 };
 
-const {
-  MathInput: MathInput$1
-} = components;
 const {
   getDependencies: getDependencies$2
 } = Dependencies;
-//
 // Editor for non-interactive points
-//
-// TODO(eater): Factor this out
-//
 class PointEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -29242,23 +29146,16 @@ class PointEditor extends React.Component {
     const {
       TeX
     } = getDependencies$2();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Coordinate: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
+    }, "Coordinate: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29267,28 +29164,16 @@ class PointEditor extends React.Component {
     })));
   }
 }
-PointEditor.propTypes = _extends({}, Changeable.propTypes, {
-  coordX: PropTypes.string,
-  coordY: PropTypes.string,
-  color: PropTypes.string
-});
 PointEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
   color: KhanColors.BLACK
 };
 
-const {
-  MathInput
-} = components;
 const {
   getDependencies: getDependencies$1
 } = Dependencies;
-//
 // Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
 class RectangleEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -29303,37 +29188,26 @@ class RectangleEditor extends React.Component {
     const {
       TeX
     } = getDependencies$1();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Bottom left: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Bottom left: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordX,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.coordY,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Width:", " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.width,
-      onChange: this.change("width"),
-      analytics: analyticsStub
+      onChange: this.change("width")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Height:", " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
+    }, "Height:", " ", /*#__PURE__*/React.createElement(MathquillInput, {
       value: this.props.height,
-      onChange: this.change("height"),
-      analytics: analyticsStub
+      onChange: this.change("height")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
@@ -29345,13 +29219,6 @@ class RectangleEditor extends React.Component {
     }, "You want a border? Sorry, draw your own."));
   }
 }
-RectangleEditor.propTypes = _extends({}, Changeable.propTypes, {
-  color: PropTypes.string,
-  coordX: PropTypes.string,
-  coordY: PropTypes.string,
-  height: PropTypes.string,
-  width: PropTypes.string
-});
 RectangleEditor.defaultProps = {
   coordX: "-5",
   coordY: "5",
@@ -29804,12 +29671,6 @@ class InteractionEditor extends React.Component {
     /* eslint-enable max-len */
   }
 }
-// TODO(eater): Make more better
-InteractionEditor.propTypes = _extends({}, Changeable.propTypes, {
-  // eslint-disable-next-line react/forbid-prop-types
-  elements: PropTypes.arrayOf(PropTypes.object),
-  graph: PropTypes.objectOf(PropTypes.any)
-});
 InteractionEditor.widgetName = "interaction";
 InteractionEditor.defaultProps = defaultInteractionProps;