@khanacademy/perseus-editor 2.15.4 → 2.15.6

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.4";
+const libVersion = "2.15.6";
 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"
@@ -27437,7 +27438,7 @@ const {
   RangeInput: RangeInput$5
 } = perseus.components;
 const {
-  getDependencies: getDependencies$1
+  getDependencies: getDependencies$9
 } = perseus.Dependencies;
 const defaultBackgroundImage$3 = {
   url: null,
@@ -27758,7 +27759,7 @@ const GraphSettings = createReactClass__default["default"]({
     const scale = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
-    } = getDependencies$1();
+    } = getDependencies$9();
     return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -28656,209 +28657,200 @@ 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 {
-  ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$1,
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$g
 } = perseus.components;
-class ConstraintEditor extends React__namespace.Component {
+const {
+  getDependencies: getDependencies$8
+} = perseus.Dependencies;
+// Editor for function plots
+class FunctionEditor extends React__namespace.Component {
   static defaultProps = {
-    constraint: "none",
-    snap: 0.5,
-    constraintFn: "0",
-    constraintXMin: "-10",
-    constraintXMax: "10",
-    constraintYMin: "-10",
-    constraintYMax: "10"
+    value: "x",
+    rangeMin: "-10",
+    rangeMax: "10",
+    color: perseus.KhanColors.BLUE,
+    strokeDasharray: "",
+    strokeWidth: 2
   };
-  change = propName => {
-    return perseus.Changeable.change.call(this, propName);
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     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, {
-      value: this.props.constraint,
-      allowEmpty: false,
-      buttons: [{
-        value: "none",
-        content: "None"
-      }, {
-        value: "snap",
-        content: "Snap"
-      }, {
-        value: "x",
-        content: "x="
-      }, {
-        value: "y",
-        content: "y="
-      }],
-      onChange: this.change("constraint")
-    })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
-      value: this.props.snap,
-      placeholder: 0,
-      onChange: this.change("snap")
-    })), this.props.constraint === "x" && /*#__PURE__*/React__namespace.createElement("div", {
+    } = getDependencies$8();
+    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="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
-    }))), this.props.constraint === "y" && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.value,
+      onChange: this.change("value")
+    })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
-    }))), "Ensure these are set so nothing can be dragged off the canvas:", /*#__PURE__*/React__namespace.createElement("div", {
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.rangeMin,
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.rangeMax,
+      onChange: this.change("rangeMax")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+      value: this.props.color,
+      onChange: this.change("color")
+    })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
+      value: this.props.strokeDasharray,
+      onChange: this.change("strokeDasharray")
+    })), /*#__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$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
+      className: "perseus-widget-left-col"
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$g, {
+      value: this.props.strokeWidth,
+      placeholder: 2,
+      onChange: this.change("strokeWidth")
+    }))));
   }
 }
 
 const {
-  MathInput,
-  NumberInput: NumberInput$b,
   TextInput: TextInput$5
 } = perseus.components;
 const {
-  getDependencies
+  getDependencies: getDependencies$7
 } = perseus.Dependencies;
-const {
-  unescapeMathMode
-} = perseus.Util;
-const defaultInteractionProps = {
-  graph: {
-    box: [400, 400],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    tickStep: [1, 1],
-    gridStep: [1, 1],
-    markings: "graph"
-  },
-  elements: []
-};
-//
-// 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
-  };
+// Editor for labels
+// TODO(eater): Add text direction
+class LabelEditor extends React__namespace.Component {
   static defaultProps = {
     coordX: "0",
     coordY: "0",
-    color: perseus.KhanColors.BLACK
+    color: perseus.KhanColors.BLACK,
+    label: "\\phi"
+  };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$7();
     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, {
-      buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
+      value: this.props.label,
+      onChange: this.change("label"),
+      style: {
+        width: "100%"
+      }
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordY,
+      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, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
+
+const {
+  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",
@@ -28869,109 +28861,71 @@ class LineEditor extends React__namespace.Component {
     arrows: "",
     strokeWidth: 2
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$6();
     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, {
-      buttonsVisible: "never",
-      value: this.props.startX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.startY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.startX,
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.startY,
+      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, {
-      buttonsVisible: "never",
-      value: this.props.endX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.endY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("endY"),
-      analytics: analyticsStub
+    }, "End: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.endX,
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.endY,
+      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, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     }), "\xA0 \xA0", /*#__PURE__*/React__namespace.createElement(perseus.ArrowPicker, {
-      value: this.props.arrows
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.arrows,
       onChange: this.change("arrows")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$f, {
       value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      placeholder: 2,
       onChange: this.change("strokeWidth")
     }))));
   }
-  change = (() => {
-    var _this2 = this;
-    return function () {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      return perseus.Changeable.change.apply(_this2, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
-// 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",
+
+const {
+  ButtonGroup: ButtonGroup$2,
+  NumberInput: NumberInput$e
+} = perseus.components;
+class ConstraintEditor extends React__namespace.Component {
+  static defaultProps = {
     constraint: "none",
     snap: 0.5,
     constraintFn: "0",
@@ -28980,65 +28934,85 @@ class MovablePointEditor extends React__namespace.Component {
     constraintYMin: "-10",
     constraintYMax: "10"
   };
+  change = propName => {
+    return perseus.Changeable.change.call(this, propName);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    } = perseus.Dependencies.getDependencies();
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
+      value: this.props.constraint,
+      allowEmpty: false,
+      buttons: [{
+        value: "none",
+        content: "None"
+      }, {
+        value: "snap",
+        content: "Snap"
+      }, {
+        value: "x",
+        content: "x="
+      }, {
+        value: "y",
+        content: "y="
+      }],
+      onChange: this.change("constraint")
+    })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+      value: this.props.snap,
+      placeholder: 0,
+      onChange: this.change("snap")
+    })), this.props.constraint === "x" && /*#__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, {
-      buttonsVisible: "never",
-      value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "x="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.constraintFn,
+      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"
-    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this.props.varSubscript,
-      placeholder: 0,
-      onChange: this.change("varSubscript")
-    })), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "y="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.constraintFn,
+      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(MathquillInput, {
+      value: this.props.constraintXMin,
+      onChange: this.change("constraintXMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.constraintXMax,
+      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(MathquillInput, {
+      value: this.props.constraintYMin,
+      onChange: this.change("constraintYMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ", "), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.constraintYMax,
+      onChange: this.change("constraintYMax")
+    }), " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large]"))));
   }
-  change = (() => {
-    var _this3 = this;
-    return function () {
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      return perseus.Changeable.change.apply(_this3, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
+
+const {
+  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",
@@ -29047,53 +29021,55 @@ class MovableLineEditor extends React__namespace.Component {
     constraint: "none",
     snap: 0.5,
     constraintFn: "0",
+    // @ts-expect-error - TS2561
     constraintXMin: "-10",
     constraintXMax: "10",
     constraintYMin: "-10",
     constraintYMax: "10"
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$5();
     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, {
-      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, {
-      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, {
-      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, {
-      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$b, {
+    }, "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, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -29101,131 +29077,73 @@ class MovableLineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, "All constraints are applied to the start point."), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
   }
+}
+
+const {
+  NumberInput: NumberInput$c
+} = perseus.components;
+const {
+  getDependencies: getDependencies$4
+} = perseus.Dependencies;
+// Editor for interactive movable points
+// TODO(eater): Rethink how constraints are represented
+class MovablePointEditor extends React__namespace.Component {
+  static defaultProps = {
+    startX: "0",
+    startY: "0",
+    constraint: "none",
+    snap: 0.5,
+    constraintFn: "0",
+    // @ts-expect-error - TS2561
+    constraintXMin: "-10",
+    constraintXMax: "10",
+    constraintYMin: "-10",
+    constraintYMax: "10"
+  };
   change = (() => {
-    var _this4 = this;
+    var _this = this;
     return function () {
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-      return perseus.Changeable.change.apply(_this4, args);
+      return perseus.Changeable.change.apply(_this, args);
     };
   })();
   serialize = () => {
     return perseus.EditorJsonify.serialize.call(this);
   };
-}
-//
-// 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",
-    rangeMax: "10",
-    color: perseus.KhanColors.BLUE,
-    strokeDasharray: "",
-    strokeWidth: 2
-  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$4();
     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, {
-      buttonsVisible: "never",
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value"),
-      analytics: analyticsStub
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.rangeMin
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.rangeMax
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+    }, "Start: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.startX,
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.startY,
+      onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("color")
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeDasharray")
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeWidth")
-    }))));
+    }, "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, {
+      value: this.props.varSubscript,
+      placeholder: 0,
+      onChange: this.change("varSubscript")
+    })), /*#__PURE__*/React__namespace.createElement(ConstraintEditor, this.props));
   }
-  change = (() => {
-    var _this5 = this;
-    return function () {
-      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-        args[_key5] = arguments[_key5];
-      }
-      return perseus.Changeable.change.apply(_this5, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
+
+const {
+  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)",
@@ -29235,62 +29153,51 @@ class ParametricEditor extends React__namespace.Component {
     strokeDasharray: "",
     strokeWidth: 2
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$3();
     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, {
-      buttonsVisible: "never",
-      value: this.props.x
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("x"),
-      analytics: analyticsStub
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.x,
+      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, {
-      buttonsVisible: "never",
-      value: this.props.y
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("y"),
-      analytics: analyticsStub
+    }, /*#__PURE__*/React__namespace.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.y,
+      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, {
-      buttonsVisible: "never",
-      value: this.props.rangeMin
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.rangeMax
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("rangeMax"),
-      analytics: analyticsStub
+    }, "Range: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.rangeMin,
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.rangeMax,
+      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, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -29298,116 +29205,62 @@ class ParametricEditor extends React__namespace.Component {
       className: "perseus-widget-left-col"
     }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this.props.strokeWidth,
-      placeholder: 2
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      placeholder: 2,
       onChange: this.change("strokeWidth")
     }))));
   }
+}
+
+const {
+  getDependencies: getDependencies$2
+} = perseus.Dependencies;
+// Editor for non-interactive points
+class PointEditor extends React__namespace.Component {
+  static defaultProps = {
+    coordX: "0",
+    coordY: "0",
+    color: perseus.KhanColors.BLACK
+  };
   change = (() => {
-    var _this6 = this;
+    var _this = this;
     return function () {
-      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-        args[_key6] = arguments[_key6];
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-      return perseus.Changeable.change.apply(_this6, args);
+      return perseus.Changeable.change.apply(_this, args);
     };
   })();
   serialize = () => {
     return perseus.EditorJsonify.serialize.call(this);
   };
-}
-//
-// 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",
-    color: perseus.KhanColors.BLACK,
-    label: "\\phi"
-  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$2();
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
-      value: this.props.label
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("label"),
-      style: {
-        width: "100%"
-      }
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+    }, "Coordinate: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordY,
+      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, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
-  change = (() => {
-    var _this7 = this;
-    return function () {
-      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-        args[_key7] = arguments[_key7];
-      }
-      return perseus.Changeable.change.apply(_this7, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
-//
+
+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",
@@ -29415,82 +29268,72 @@ class RectangleEditor extends React__namespace.Component {
     height: "3",
     color: perseus.KhanColors.LIGHT_BLUE
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$1();
     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",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.coordY
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordY"),
-      analytics: analyticsStub
+    }, "Bottom left: ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large("), /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React__namespace.createElement(TeX, null, ","), " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.coordY,
+      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",
-      value: this.props.width
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("width"),
-      analytics: analyticsStub
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.width,
+      onChange: this.change("width")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.height
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("height"),
-      analytics: analyticsStub
+    }, "Height:", " ", /*#__PURE__*/React__namespace.createElement(MathquillInput, {
+      value: this.props.height,
+      onChange: this.change("height")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
       value: this.props.color,
-      lightColors: true
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      lightColors: true,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "You want a border? Sorry, draw your own."));
   }
-  change = (() => {
-    var _this8 = this;
-    return function () {
-      for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-        args[_key8] = arguments[_key8];
-      }
-      return perseus.Changeable.change.apply(_this8, args);
-    };
-  })();
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
+
+const {
+  getDependencies
+} = perseus.Dependencies;
+const {
+  unescapeMathMode
+} = perseus.Util;
+const defaultInteractionProps = {
+  graph: {
+    box: [400, 400],
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    tickStep: [1, 1],
+    gridStep: [1, 1],
+    markings: "graph"
+  },
+  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 = {
@@ -29589,14 +29432,17 @@ class InteractionEditor extends React__namespace.Component {
     });
   };
   change = (() => {
-    var _this9 = this;
+    var _this = this;
     return function () {
-      for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-        args[_key9] = arguments[_key9];
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-      return perseus.Changeable.change.apply(_this9, args);
+      return perseus.Changeable.change.apply(_this, args);
     };
   })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const {
       TeX
@@ -29918,10 +29764,6 @@ class InteractionEditor extends React__namespace.Component {
     }, "\u2605 Movable line segment"))));
     /* eslint-enable max-len */
   }
-
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 const UNLIMITED = "unlimited";