@khanacademy/perseus-editor 2.15.4 → 2.15.6

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.4";
+const libVersion = "2.15.6";
 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"
@@ -27399,7 +27401,7 @@ const {
   RangeInput: RangeInput$5
 } = components;
 const {
-  getDependencies: getDependencies$1
+  getDependencies: getDependencies$9
 } = Dependencies;
 const defaultBackgroundImage$3 = {
   url: null,
@@ -27716,7 +27718,7 @@ const GraphSettings = createReactClass({
     const scale = [KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[0], this.props.box[0])), KhanMath.roundTo(2, Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
-    } = getDependencies$1();
+    } = getDependencies$9();
     return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
@@ -28588,137 +28590,139 @@ 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 {
-  ButtonGroup: ButtonGroup$2,
-  MathInput: MathInput$1,
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$g
 } = components;
-class ConstraintEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.change = propName => {
-      return Changeable.change.call(this, propName);
+const {
+  getDependencies: getDependencies$8
+} = Dependencies;
+// Editor for function plots
+class FunctionEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
+    this.change = (...args) => {
+      return Changeable.change.apply(this, args);
+    };
+    this.serialize = () => {
+      return EditorJsonify.serialize.call(this);
     };
   }
   render() {
     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, {
-      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.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
-      value: this.props.snap,
-      placeholder: 0,
-      onChange: this.change("snap")
-    })), this.props.constraint === "x" && /*#__PURE__*/React.createElement("div", {
+    } = getDependencies$8();
+    return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintFn,
-      onChange: this.change("constraintFn"),
-      analytics: analyticsStub
-    }))), this.props.constraint === "y" && /*#__PURE__*/React.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(TeX, null, this.props.funcName + "(x)="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.value,
+      onChange: this.change("value")
+    })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.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.createElement("div", {
+    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.rangeMin,
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.rangeMax,
+      onChange: this.change("rangeMax")
+    }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(ColorPicker, {
+      value: this.props.color,
+      onChange: this.change("color")
+    })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "x \\in \\Large["), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintXMin,
-      onChange: this.change("constraintXMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintXMax,
-      onChange: this.change("constraintXMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(DashPicker, {
+      value: this.props.strokeDasharray,
+      onChange: this.change("strokeDasharray")
+    })), /*#__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$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMin,
-      onChange: this.change("constraintYMin"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathInput$1, {
-      buttonsVisible: "never",
-      value: this.props.constraintYMax,
-      onChange: this.change("constraintYMax"),
-      analytics: analyticsStub
-    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
+      className: "perseus-widget-left-col"
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$g, {
+      value: this.props.strokeWidth,
+      placeholder: 2,
+      onChange: this.change("strokeWidth")
+    }))));
   }
 }
-ConstraintEditor.defaultProps = {
-  constraint: "none",
-  snap: 0.5,
-  constraintFn: "0",
-  constraintXMin: "-10",
-  constraintXMax: "10",
-  constraintYMin: "-10",
-  constraintYMax: "10"
+FunctionEditor.defaultProps = {
+  value: "x",
+  rangeMin: "-10",
+  rangeMax: "10",
+  color: KhanColors.BLUE,
+  strokeDasharray: "",
+  strokeWidth: 2
 };
 
 const {
-  MathInput,
-  NumberInput: NumberInput$b,
   TextInput: TextInput$5
 } = components;
 const {
-  getDependencies
+  getDependencies: getDependencies$7
 } = Dependencies;
-const {
-  unescapeMathMode
-} = 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.Component {
+// Editor for labels
+// TODO(eater): Add text direction
+class LabelEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
     this.change = (...args) => {
@@ -28731,56 +28735,50 @@ class PointEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$7();
     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, {
-      buttonsVisible: "never",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TextInput$5, {
+      value: this.props.label,
+      onChange: this.change("label"),
+      style: {
+        width: "100%"
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordY,
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
 }
-PointEditor.propTypes = _extends({}, Changeable.propTypes, {
-  coordX: PropTypes.string,
-  coordY: PropTypes.string,
-  color: PropTypes.string
-});
-PointEditor.defaultProps = {
+LabelEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
-  color: KhanColors.BLACK
+  color: KhanColors.BLACK,
+  label: "\\phi"
 };
-//
+
+const {
+  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(..._args2) {
-    super(..._args2);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -28791,86 +28789,49 @@ class LineEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$6();
     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, {
-      buttonsVisible: "never",
-      value: this.props.startX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.startX,
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.startY,
+      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, {
-      buttonsVisible: "never",
-      value: this.props.endX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("endX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.endX,
+      onChange: this.change("endX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.endY,
+      onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React.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")
     }))));
   }
 }
-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",
@@ -28881,62 +28842,85 @@ LineEditor.defaultProps = {
   arrows: "",
   strokeWidth: 2
 };
-//
-// Editor for interactive movable points
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React.Component {
-  constructor(..._args3) {
-    super(..._args3);
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
+
+const {
+  ButtonGroup: ButtonGroup$2,
+  NumberInput: NumberInput$e
+} = components;
+class ConstraintEditor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.change = propName => {
+      return Changeable.change.call(this, propName);
     };
   }
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
-    return /*#__PURE__*/React.createElement("div", {
+    } = Dependencies.getDependencies();
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Constraint:", " ", /*#__PURE__*/React.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.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$e, {
+      value: this.props.snap,
+      placeholder: 0,
+      onChange: this.change("snap")
+    })), this.props.constraint === "x" && /*#__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, {
-      buttonsVisible: "never",
-      value: this.props.startX,
-      onChange: this.change("startX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathInput, {
-      buttonsVisible: "never",
-      value: this.props.startY,
-      onChange: this.change("startY"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(TeX, null, "x="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.constraintFn,
+      onChange: this.change("constraintFn")
+    }))), this.props.constraint === "y" && /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__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$b, {
-      value: this.props.varSubscript,
-      placeholder: 0,
-      onChange: this.change("varSubscript")
-    })), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
+    }, /*#__PURE__*/React.createElement(TeX, null, "y="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.constraintFn,
+      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(MathquillInput, {
+      value: this.props.constraintXMin,
+      onChange: this.change("constraintXMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.constraintXMax,
+      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(MathquillInput, {
+      value: this.props.constraintYMin,
+      onChange: this.change("constraintYMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ", "), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.constraintYMax,
+      onChange: this.change("constraintYMax")
+    }), " ", /*#__PURE__*/React.createElement(TeX, null, "\\Large]"))));
   }
 }
-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",
+ConstraintEditor.defaultProps = {
   constraint: "none",
   snap: 0.5,
   constraintFn: "0",
@@ -28945,15 +28929,18 @@ MovablePointEditor.defaultProps = {
   constraintYMin: "-10",
   constraintYMax: "10"
 };
-//
+
+const {
+  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(..._args4) {
-    super(..._args4);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -28964,45 +28951,34 @@ class MovableLineEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$5();
     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, {
-      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, {
-      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, {
-      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, {
-      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$b, {
+    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -29011,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",
@@ -29028,19 +28995,24 @@ MovableLineEditor.defaultProps = {
   constraint: "none",
   snap: 0.5,
   constraintFn: "0",
+  // @ts-expect-error - TS2561
   constraintXMin: "-10",
   constraintXMax: "10",
   constraintYMin: "-10",
   constraintYMax: "10"
 };
-//
-// Editor for function plots
-//
-// TODO(eater): Factor this out
-//
-class FunctionEditor extends React.Component {
-  constructor(..._args5) {
-    super(..._args5);
+
+const {
+  NumberInput: NumberInput$c
+} = components;
+const {
+  getDependencies: getDependencies$4
+} = Dependencies;
+// Editor for interactive movable points
+// TODO(eater): Rethink how constraints are represented
+class MovablePointEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29051,88 +29023,49 @@ class FunctionEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$4();
     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, {
-      buttonsVisible: "never",
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value"),
-      analytics: analyticsStub
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.startX,
+      onChange: this.change("startX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.startY,
+      onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("color")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(DashPicker, {
-      value: this.props.strokeDasharray
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("strokeDasharray")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.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.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$c, {
+      value: this.props.varSubscript,
+      placeholder: 0,
+      onChange: this.change("varSubscript")
+    })), /*#__PURE__*/React.createElement(ConstraintEditor, this.props));
   }
 }
-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",
-  rangeMax: "10",
-  color: KhanColors.BLUE,
-  strokeDasharray: "",
-  strokeWidth: 2
+MovablePointEditor.defaultProps = {
+  startX: "0",
+  startY: "0",
+  constraint: "none",
+  snap: 0.5,
+  constraintFn: "0",
+  // @ts-expect-error - TS2561
+  constraintXMin: "-10",
+  constraintXMax: "10",
+  constraintYMin: "-10",
+  constraintYMax: "10"
 };
-//
+
+const {
+  NumberInput: NumberInput$b
+} = components;
+const {
+  getDependencies: getDependencies$3
+} = Dependencies;
 // Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
 class ParametricEditor extends React.Component {
-  constructor(..._args6) {
-    super(..._args6);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29143,59 +29076,36 @@ class ParametricEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$3();
     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, {
-      buttonsVisible: "never",
-      value: this.props.x
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("x"),
-      analytics: analyticsStub
+    }, /*#__PURE__*/React.createElement(TeX, null, "X(t) ="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.x,
+      onChange: this.change("x")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.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.createElement(TeX, null, "Y(t) ="), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.y,
+      onChange: this.change("y")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Range: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.rangeMin,
+      onChange: this.change("rangeMin")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.rangeMax,
+      onChange: this.change("rangeMax")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
@@ -29203,22 +29113,11 @@ class ParametricEditor extends React.Component {
       className: "perseus-widget-left-col"
     }, "Width:", " ", /*#__PURE__*/React.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")
     }))));
   }
 }
-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)",
@@ -29228,15 +29127,14 @@ ParametricEditor.defaultProps = {
   strokeDasharray: "",
   strokeWidth: 2
 };
-//
-// Editor for labels
-//
-// TODO(eater): Factor this out maybe?
-// TODO(eater): Add text direction
-//
-class LabelEditor extends React.Component {
-  constructor(..._args7) {
-    super(..._args7);
+
+const {
+  getDependencies: getDependencies$2
+} = Dependencies;
+// Editor for non-interactive points
+class PointEditor extends React.Component {
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29247,68 +29145,38 @@ class LabelEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$2();
     return /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Location: ", /*#__PURE__*/React.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.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.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordY,
+      onChange: this.change("coordY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(ColorPicker, {
-      value: this.props.color
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
+      value: this.props.color,
       onChange: this.change("color")
     })));
   }
 }
-LabelEditor.propTypes = _extends({}, Changeable.propTypes, {
-  color: PropTypes.string,
-  coordX: PropTypes.string,
-  coordY: PropTypes.string,
-  label: PropTypes.string
-});
-LabelEditor.defaultProps = {
+PointEditor.defaultProps = {
   coordX: "0",
   coordY: "0",
-  color: KhanColors.BLACK,
-  label: "\\phi"
+  color: KhanColors.BLACK
 };
-//
+
+const {
+  getDependencies: getDependencies$1
+} = Dependencies;
 // Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
 class RectangleEditor extends React.Component {
-  constructor(..._args8) {
-    super(..._args8);
+  constructor(..._args) {
+    super(..._args);
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -29319,66 +29187,38 @@ class RectangleEditor extends React.Component {
   render() {
     const {
       TeX
-    } = getDependencies();
-    const analyticsStub = {
-      onAnalyticsEvent: () => Promise.resolve()
-    };
+    } = getDependencies$1();
     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",
-      value: this.props.coordX
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("coordX"),
-      analytics: analyticsStub
-    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.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.createElement(TeX, null, "\\Large("), /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordX,
+      onChange: this.change("coordX")
+    }), /*#__PURE__*/React.createElement(TeX, null, ","), " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.coordY,
+      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",
-      value: this.props.width
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("width"),
-      analytics: analyticsStub
+    }, "Width:", " ", /*#__PURE__*/React.createElement(MathquillInput, {
+      value: this.props.width,
+      onChange: this.change("width")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Height:", " ", /*#__PURE__*/React.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.createElement(MathquillInput, {
+      value: this.props.height,
+      onChange: this.change("height")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement(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.createElement("div", {
       className: "perseus-widget-row"
     }, "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",
@@ -29386,9 +29226,27 @@ RectangleEditor.defaultProps = {
   height: "3",
   color: KhanColors.LIGHT_BLUE
 };
+
+const {
+  getDependencies
+} = Dependencies;
+const {
+  unescapeMathMode
+} = 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.Component {
-  constructor(..._args9) {
-    super(..._args9);
+  constructor(..._args) {
+    super(..._args);
     this.state = {
       usedVarSubscripts: this._getAllVarSubscripts(this.props.elements),
       usedFunctionNames: this._getAllFunctionNames(this.props.elements)
@@ -29813,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;