@khanacademy/perseus-editor 4.2.8 → 4.3.1

package/dist/es/index.js

@@ -25,7 +25,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 = "4.2.8";
+const libVersion = "4.3.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -22064,7 +22064,7 @@ ArticleEditor.defaultProps = {
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
  */
 const {
-  ButtonGroup: ButtonGroup$4,
+  ButtonGroup: ButtonGroup$5,
   InlineIcon: InlineIcon$9
 } = components;
 const {
@@ -22090,7 +22090,7 @@ class ViewportResizer extends React.Component {
     // TODO(david): Allow input of custom viewport sizes.
     return /*#__PURE__*/React.createElement("span", {
       className: "viewport-resizer"
-    }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$4, {
+    }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$5, {
       value: this.props.deviceType,
       allowEmpty: false,
       buttons: [{
@@ -22115,8 +22115,6 @@ ViewportResizer.propTypes = {
   onViewportSizeChanged: PropTypes.func.isRequired
 };
 
-var jsdiff$1 = {exports: {}};
-
 /*
 Software License Agreement (BSD License)
 
@@ -22151,382 +22149,374 @@ IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISI
 OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
-(function (module) {
-	/*
-	 * Text diff implementation.
-	 *
-	 * This library supports the following APIS:
-	 * JsDiff.diffChars: Character by character diff
-	 * JsDiff.diffWords: Word (as defined by \b regex) diff which ignores whitespace
-	 * JsDiff.diffLines: Line based diff
-	 *
-	 * JsDiff.diffCss: Diff targeted at CSS content
-	 *
-	 * These methods are based on the implementation proposed in
-	 * "An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
-	 * http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
-	 */
-	var JsDiff = function () {
-	  /*jshint maxparams: 5*/
-	  function clonePath(path) {
-	    return {
-	      newPos: path.newPos,
-	      components: path.components.slice(0)
-	    };
-	  }
-	  function removeEmpty(array) {
-	    var ret = [];
-	    for (var i = 0; i < array.length; i++) {
-	      if (array[i]) {
-	        ret.push(array[i]);
-	      }
-	    }
-	    return ret;
-	  }
-	  function escapeHTML(s) {
-	    var n = s;
-	    n = n.replace(/&/g, '&amp;');
-	    n = n.replace(/</g, '&lt;');
-	    n = n.replace(/>/g, '&gt;');
-	    n = n.replace(/"/g, '&quot;');
-	    return n;
-	  }
-	  var Diff = function Diff(ignoreWhitespace) {
-	    this.ignoreWhitespace = ignoreWhitespace;
-	  };
-	  Diff.prototype = {
-	    diff: function (oldString, newString) {
-	      // Handle the identity case (this is due to unrolling editLength == 0
-	      if (newString === oldString) {
-	        return [{
-	          value: newString
-	        }];
-	      }
-	      if (!newString) {
-	        return [{
-	          value: oldString,
-	          removed: true
-	        }];
-	      }
-	      if (!oldString) {
-	        return [{
-	          value: newString,
-	          added: true
-	        }];
-	      }
-	      newString = this.tokenize(newString);
-	      oldString = this.tokenize(oldString);
-	      var newLen = newString.length,
-	        oldLen = oldString.length;
-	      var maxEditLength = newLen + oldLen;
-	      var bestPath = [{
-	        newPos: -1,
-	        components: []
-	      }];
+/*
+ * Text diff implementation.
+ *
+ * This library supports the following APIS:
+ * JsDiff.diffChars: Character by character diff
+ * JsDiff.diffWords: Word (as defined by \b regex) diff which ignores whitespace
+ * JsDiff.diffLines: Line based diff
+ *
+ * JsDiff.diffCss: Diff targeted at CSS content
+ *
+ * These methods are based on the implementation proposed in
+ * "An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
+ * http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
+ */
 
-	      // Seed editLength = 0
-	      var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
-	      if (bestPath[0].newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
-	        return bestPath[0].components;
-	      }
-	      for (var editLength = 1; editLength <= maxEditLength; editLength++) {
-	        for (var diagonalPath = -1 * editLength; diagonalPath <= editLength; diagonalPath += 2) {
-	          var basePath;
-	          var addPath = bestPath[diagonalPath - 1],
-	            removePath = bestPath[diagonalPath + 1];
-	          oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
-	          if (addPath) {
-	            // No one else is going to attempt to use this value, clear it
-	            bestPath[diagonalPath - 1] = undefined;
-	          }
-	          var canAdd = addPath && addPath.newPos + 1 < newLen;
-	          var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
-	          if (!canAdd && !canRemove) {
-	            bestPath[diagonalPath] = undefined;
-	            continue;
-	          }
+/*jshint maxparams: 5*/
+function clonePath(path) {
+  return {
+    newPos: path.newPos,
+    components: path.components.slice(0)
+  };
+}
+function removeEmpty(array) {
+  var ret = [];
+  for (var i = 0; i < array.length; i++) {
+    if (array[i]) {
+      ret.push(array[i]);
+    }
+  }
+  return ret;
+}
+function escapeHTML(s) {
+  var n = s;
+  n = n.replace(/&/g, '&amp;');
+  n = n.replace(/</g, '&lt;');
+  n = n.replace(/>/g, '&gt;');
+  n = n.replace(/"/g, '&quot;');
+  return n;
+}
+var Diff = function Diff(ignoreWhitespace) {
+  this.ignoreWhitespace = ignoreWhitespace;
+};
+Diff.prototype = {
+  diff: function (oldString, newString) {
+    // Handle the identity case (this is due to unrolling editLength == 0
+    if (newString === oldString) {
+      return [{
+        value: newString
+      }];
+    }
+    if (!newString) {
+      return [{
+        value: oldString,
+        removed: true
+      }];
+    }
+    if (!oldString) {
+      return [{
+        value: newString,
+        added: true
+      }];
+    }
+    newString = this.tokenize(newString);
+    oldString = this.tokenize(oldString);
+    var newLen = newString.length,
+      oldLen = oldString.length;
+    var maxEditLength = newLen + oldLen;
+    var bestPath = [{
+      newPos: -1,
+      components: []
+    }];
 
-	          // Select the diagonal that we want to branch from. We select the prior
-	          // path whose position in the new string is the farthest from the origin
-	          // and does not pass the bounds of the diff graph
-	          if (!canAdd || canRemove && addPath.newPos < removePath.newPos) {
-	            basePath = clonePath(removePath);
-	            this.pushComponent(basePath.components, oldString[oldPos], undefined, true);
-	          } else {
-	            basePath = clonePath(addPath);
-	            basePath.newPos++;
-	            this.pushComponent(basePath.components, newString[basePath.newPos], true, undefined);
-	          }
-	          var oldPos = this.extractCommon(basePath, newString, oldString, diagonalPath);
-	          if (basePath.newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
-	            return basePath.components;
-	          } else {
-	            bestPath[diagonalPath] = basePath;
-	          }
-	        }
-	      }
-	    },
-	    pushComponent: function (components, value, added, removed) {
-	      var last = components[components.length - 1];
-	      if (last && last.added === added && last.removed === removed) {
-	        // We need to clone here as the component clone operation is just
-	        // as shallow array clone
-	        components[components.length - 1] = {
-	          value: this.join(last.value, value),
-	          added: added,
-	          removed: removed
-	        };
-	      } else {
-	        components.push({
-	          value: value,
-	          added: added,
-	          removed: removed
-	        });
-	      }
-	    },
-	    extractCommon: function (basePath, newString, oldString, diagonalPath) {
-	      var newLen = newString.length,
-	        oldLen = oldString.length,
-	        newPos = basePath.newPos,
-	        oldPos = newPos - diagonalPath;
-	      while (newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(newString[newPos + 1], oldString[oldPos + 1])) {
-	        newPos++;
-	        oldPos++;
-	        this.pushComponent(basePath.components, newString[newPos], undefined, undefined);
-	      }
-	      basePath.newPos = newPos;
-	      return oldPos;
-	    },
-	    equals: function (left, right) {
-	      var reWhitespace = /\S/;
-	      if (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right)) {
-	        return true;
-	      } else {
-	        return left === right;
-	      }
-	    },
-	    join: function (left, right) {
-	      return left + right;
-	    },
-	    tokenize: function (value) {
-	      return value;
-	    }
-	  };
-	  var CharDiff = new Diff();
-	  var WordDiff = new Diff(true);
-	  var WordWithSpaceDiff = new Diff();
-	  WordDiff.tokenize = WordWithSpaceDiff.tokenize = function (value) {
-	    return removeEmpty(value.split(/(\s+|\b)/));
-	  };
-	  var CssDiff = new Diff(true);
-	  CssDiff.tokenize = function (value) {
-	    return removeEmpty(value.split(/([{}:;,]|\s+)/));
-	  };
-	  var LineDiff = new Diff();
-	  LineDiff.tokenize = function (value) {
-	    var retLines = [],
-	      lines = value.split(/^/m);
-	    for (var i = 0; i < lines.length; i++) {
-	      var line = lines[i],
-	        lastLine = lines[i - 1];
-
-	      // Merge lines that may contain windows new lines
-	      if (line == '\n' && lastLine && lastLine[lastLine.length - 1] === '\r') {
-	        retLines[retLines.length - 1] += '\n';
-	      } else if (line) {
-	        retLines.push(line);
-	      }
-	    }
-	    return retLines;
-	  };
-	  return {
-	    Diff: Diff,
-	    diffChars: function (oldStr, newStr) {
-	      return CharDiff.diff(oldStr, newStr);
-	    },
-	    diffWords: function (oldStr, newStr) {
-	      return WordDiff.diff(oldStr, newStr);
-	    },
-	    diffWordsWithSpace: function (oldStr, newStr) {
-	      return WordWithSpaceDiff.diff(oldStr, newStr);
-	    },
-	    diffLines: function (oldStr, newStr) {
-	      return LineDiff.diff(oldStr, newStr);
-	    },
-	    diffCss: function (oldStr, newStr) {
-	      return CssDiff.diff(oldStr, newStr);
-	    },
-	    createPatch: function (fileName, oldStr, newStr, oldHeader, newHeader) {
-	      var ret = [];
-	      ret.push('Index: ' + fileName);
-	      ret.push('===================================================================');
-	      ret.push('--- ' + fileName + (typeof oldHeader === 'undefined' ? '' : '\t' + oldHeader));
-	      ret.push('+++ ' + fileName + (typeof newHeader === 'undefined' ? '' : '\t' + newHeader));
-	      var diff = LineDiff.diff(oldStr, newStr);
-	      if (!diff[diff.length - 1].value) {
-	        diff.pop(); // Remove trailing newline add
-	      }
+    // Seed editLength = 0
+    var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
+    if (bestPath[0].newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
+      return bestPath[0].components;
+    }
+    for (var editLength = 1; editLength <= maxEditLength; editLength++) {
+      for (var diagonalPath = -1 * editLength; diagonalPath <= editLength; diagonalPath += 2) {
+        var basePath;
+        var addPath = bestPath[diagonalPath - 1],
+          removePath = bestPath[diagonalPath + 1];
+        oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
+        if (addPath) {
+          // No one else is going to attempt to use this value, clear it
+          bestPath[diagonalPath - 1] = undefined;
+        }
+        var canAdd = addPath && addPath.newPos + 1 < newLen;
+        var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
+        if (!canAdd && !canRemove) {
+          bestPath[diagonalPath] = undefined;
+          continue;
+        }
 
-	      diff.push({
-	        value: '',
-	        lines: []
-	      }); // Append an empty value to make cleanup easier
+        // Select the diagonal that we want to branch from. We select the prior
+        // path whose position in the new string is the farthest from the origin
+        // and does not pass the bounds of the diff graph
+        if (!canAdd || canRemove && addPath.newPos < removePath.newPos) {
+          basePath = clonePath(removePath);
+          this.pushComponent(basePath.components, oldString[oldPos], undefined, true);
+        } else {
+          basePath = clonePath(addPath);
+          basePath.newPos++;
+          this.pushComponent(basePath.components, newString[basePath.newPos], true, undefined);
+        }
+        var oldPos = this.extractCommon(basePath, newString, oldString, diagonalPath);
+        if (basePath.newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
+          return basePath.components;
+        } else {
+          bestPath[diagonalPath] = basePath;
+        }
+      }
+    }
+  },
+  pushComponent: function (components, value, added, removed) {
+    var last = components[components.length - 1];
+    if (last && last.added === added && last.removed === removed) {
+      // We need to clone here as the component clone operation is just
+      // as shallow array clone
+      components[components.length - 1] = {
+        value: this.join(last.value, value),
+        added: added,
+        removed: removed
+      };
+    } else {
+      components.push({
+        value: value,
+        added: added,
+        removed: removed
+      });
+    }
+  },
+  extractCommon: function (basePath, newString, oldString, diagonalPath) {
+    var newLen = newString.length,
+      oldLen = oldString.length,
+      newPos = basePath.newPos,
+      oldPos = newPos - diagonalPath;
+    while (newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(newString[newPos + 1], oldString[oldPos + 1])) {
+      newPos++;
+      oldPos++;
+      this.pushComponent(basePath.components, newString[newPos], undefined, undefined);
+    }
+    basePath.newPos = newPos;
+    return oldPos;
+  },
+  equals: function (left, right) {
+    var reWhitespace = /\S/;
+    if (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right)) {
+      return true;
+    } else {
+      return left === right;
+    }
+  },
+  join: function (left, right) {
+    return left + right;
+  },
+  tokenize: function (value) {
+    return value;
+  }
+};
+var CharDiff = new Diff();
+var WordDiff = new Diff(true);
+var WordWithSpaceDiff = new Diff();
+WordDiff.tokenize = WordWithSpaceDiff.tokenize = function (value) {
+  return removeEmpty(value.split(/(\s+|\b)/));
+};
+var CssDiff = new Diff(true);
+CssDiff.tokenize = function (value) {
+  return removeEmpty(value.split(/([{}:;,]|\s+)/));
+};
+var LineDiff = new Diff();
+LineDiff.tokenize = function (value) {
+  var retLines = [],
+    lines = value.split(/^/m);
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i],
+      lastLine = lines[i - 1];
+
+    // Merge lines that may contain windows new lines
+    if (line == '\n' && lastLine && lastLine[lastLine.length - 1] === '\r') {
+      retLines[retLines.length - 1] += '\n';
+    } else if (line) {
+      retLines.push(line);
+    }
+  }
+  return retLines;
+};
+const JSDiff = {
+  Diff: Diff,
+  diffChars: function (oldStr, newStr) {
+    return CharDiff.diff(oldStr, newStr);
+  },
+  diffWords: function (oldStr, newStr) {
+    return WordDiff.diff(oldStr, newStr);
+  },
+  diffWordsWithSpace: function (oldStr, newStr) {
+    return WordWithSpaceDiff.diff(oldStr, newStr);
+  },
+  diffLines: function (oldStr, newStr) {
+    return LineDiff.diff(oldStr, newStr);
+  },
+  diffCss: function (oldStr, newStr) {
+    return CssDiff.diff(oldStr, newStr);
+  },
+  createPatch: function (fileName, oldStr, newStr, oldHeader, newHeader) {
+    var ret = [];
+    ret.push('Index: ' + fileName);
+    ret.push('===================================================================');
+    ret.push('--- ' + fileName + (typeof oldHeader === 'undefined' ? '' : '\t' + oldHeader));
+    ret.push('+++ ' + fileName + (typeof newHeader === 'undefined' ? '' : '\t' + newHeader));
+    var diff = LineDiff.diff(oldStr, newStr);
+    if (!diff[diff.length - 1].value) {
+      diff.pop(); // Remove trailing newline add
+    }
 
-	      function contextLines(lines) {
-	        return lines.map(function (entry) {
-	          return ' ' + entry;
-	        });
-	      }
-	      function eofNL(curRange, i, current) {
-	        var last = diff[diff.length - 2],
-	          isLast = i === diff.length - 2,
-	          isLastOfType = i === diff.length - 3 && (current.added !== last.added || current.removed !== last.removed);
-
-	        // Figure out if this is the last line for the given file and missing NL
-	        if (!/\n$/.test(current.value) && (isLast || isLastOfType)) {
-	          curRange.push('\');
-	        }
-	      }
-	      var oldRangeStart = 0,
-	        newRangeStart = 0,
-	        curRange = [],
-	        oldLine = 1,
-	        newLine = 1;
-	      for (var i = 0; i < diff.length; i++) {
-	        var current = diff[i],
-	          lines = current.lines || current.value.replace(/\n$/, '').split('\n');
-	        current.lines = lines;
-	        if (current.added || current.removed) {
-	          if (!oldRangeStart) {
-	            var prev = diff[i - 1];
-	            oldRangeStart = oldLine;
-	            newRangeStart = newLine;
-	            if (prev) {
-	              curRange = contextLines(prev.lines.slice(-4));
-	              oldRangeStart -= curRange.length;
-	              newRangeStart -= curRange.length;
-	            }
-	          }
-	          curRange.push.apply(curRange, lines.map(function (entry) {
-	            return (current.added ? '+' : '-') + entry;
-	          }));
-	          eofNL(curRange, i, current);
-	          if (current.added) {
-	            newLine += lines.length;
-	          } else {
-	            oldLine += lines.length;
-	          }
-	        } else {
-	          if (oldRangeStart) {
-	            // Close out any changes that have been output (or join overlapping)
-	            if (lines.length <= 8 && i < diff.length - 2) {
-	              // Overlapping
-	              curRange.push.apply(curRange, contextLines(lines));
-	            } else {
-	              // end the range and output
-	              var contextSize = Math.min(lines.length, 4);
-	              ret.push('@@ -' + oldRangeStart + ',' + (oldLine - oldRangeStart + contextSize) + ' +' + newRangeStart + ',' + (newLine - newRangeStart + contextSize) + ' @@');
-	              ret.push.apply(ret, curRange);
-	              ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));
-	              if (lines.length <= 4) {
-	                eofNL(ret, i, current);
-	              }
-	              oldRangeStart = 0;
-	              newRangeStart = 0;
-	              curRange = [];
-	            }
-	          }
-	          oldLine += lines.length;
-	          newLine += lines.length;
-	        }
-	      }
-	      return ret.join('\n') + '\n';
-	    },
-	    applyPatch: function (oldStr, uniDiff) {
-	      var diffstr = uniDiff.split('\n');
-	      var diff = [];
-	      var remEOFNL = false,
-	        addEOFNL = false;
-	      for (var i = diffstr[0][0] === 'I' ? 4 : 0; i < diffstr.length; i++) {
-	        if (diffstr[i][0] === '@') {
-	          var meh = diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);
-	          diff.unshift({
-	            start: meh[3],
-	            oldlength: meh[2],
-	            oldlines: [],
-	            newlength: meh[4],
-	            newlines: []
-	          });
-	        } else if (diffstr[i][0] === '+') {
-	          diff[0].newlines.push(diffstr[i].substr(1));
-	        } else if (diffstr[i][0] === '-') {
-	          diff[0].oldlines.push(diffstr[i].substr(1));
-	        } else if (diffstr[i][0] === ' ') {
-	          diff[0].newlines.push(diffstr[i].substr(1));
-	          diff[0].oldlines.push(diffstr[i].substr(1));
-	        } else if (diffstr[i][0] === '\\') {
-	          if (diffstr[i - 1][0] === '+') {
-	            remEOFNL = true;
-	          } else if (diffstr[i - 1][0] === '-') {
-	            addEOFNL = true;
-	          }
-	        }
-	      }
-	      var str = oldStr.split('\n');
-	      for (var i = diff.length - 1; i >= 0; i--) {
-	        var d = diff[i];
-	        for (var j = 0; j < d.oldlength; j++) {
-	          if (str[d.start - 1 + j] !== d.oldlines[j]) {
-	            return false;
-	          }
-	        }
-	        Array.prototype.splice.apply(str, [d.start - 1, +d.oldlength].concat(d.newlines));
-	      }
-	      if (remEOFNL) {
-	        while (!str[str.length - 1]) {
-	          str.pop();
-	        }
-	      } else if (addEOFNL) {
-	        str.push('');
-	      }
-	      return str.join('\n');
-	    },
-	    convertChangesToXML: function (changes) {
-	      var ret = [];
-	      for (var i = 0; i < changes.length; i++) {
-	        var change = changes[i];
-	        if (change.added) {
-	          ret.push('<ins>');
-	        } else if (change.removed) {
-	          ret.push('<del>');
-	        }
-	        ret.push(escapeHTML(change.value));
-	        if (change.added) {
-	          ret.push('</ins>');
-	        } else if (change.removed) {
-	          ret.push('</del>');
-	        }
-	      }
-	      return ret.join('');
-	    },
-	    // See: http://code.google.com/p/google-diff-match-patch/wiki/API
-	    convertChangesToDMP: function (changes) {
-	      var ret = [],
-	        change;
-	      for (var i = 0; i < changes.length; i++) {
-	        change = changes[i];
-	        ret.push([change.added ? 1 : change.removed ? -1 : 0, change.value]);
-	      }
-	      return ret;
-	    }
-	  };
-	}();
-	{
-	  module.exports = JsDiff;
-	}
-} (jsdiff$1));
+    diff.push({
+      value: '',
+      lines: []
+    }); // Append an empty value to make cleanup easier
 
-var jsdiff = jsdiff$1.exports;
+    function contextLines(lines) {
+      return lines.map(function (entry) {
+        return ' ' + entry;
+      });
+    }
+    function eofNL(curRange, i, current) {
+      var last = diff[diff.length - 2],
+        isLast = i === diff.length - 2,
+        isLastOfType = i === diff.length - 3 && (current.added !== last.added || current.removed !== last.removed);
+
+      // Figure out if this is the last line for the given file and missing NL
+      if (!/\n$/.test(current.value) && (isLast || isLastOfType)) {
+        curRange.push('\');
+      }
+    }
+    var oldRangeStart = 0,
+      newRangeStart = 0,
+      curRange = [],
+      oldLine = 1,
+      newLine = 1;
+    for (var i = 0; i < diff.length; i++) {
+      var current = diff[i],
+        lines = current.lines || current.value.replace(/\n$/, '').split('\n');
+      current.lines = lines;
+      if (current.added || current.removed) {
+        if (!oldRangeStart) {
+          var prev = diff[i - 1];
+          oldRangeStart = oldLine;
+          newRangeStart = newLine;
+          if (prev) {
+            curRange = contextLines(prev.lines.slice(-4));
+            oldRangeStart -= curRange.length;
+            newRangeStart -= curRange.length;
+          }
+        }
+        curRange.push.apply(curRange, lines.map(function (entry) {
+          return (current.added ? '+' : '-') + entry;
+        }));
+        eofNL(curRange, i, current);
+        if (current.added) {
+          newLine += lines.length;
+        } else {
+          oldLine += lines.length;
+        }
+      } else {
+        if (oldRangeStart) {
+          // Close out any changes that have been output (or join overlapping)
+          if (lines.length <= 8 && i < diff.length - 2) {
+            // Overlapping
+            curRange.push.apply(curRange, contextLines(lines));
+          } else {
+            // end the range and output
+            var contextSize = Math.min(lines.length, 4);
+            ret.push('@@ -' + oldRangeStart + ',' + (oldLine - oldRangeStart + contextSize) + ' +' + newRangeStart + ',' + (newLine - newRangeStart + contextSize) + ' @@');
+            ret.push.apply(ret, curRange);
+            ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));
+            if (lines.length <= 4) {
+              eofNL(ret, i, current);
+            }
+            oldRangeStart = 0;
+            newRangeStart = 0;
+            curRange = [];
+          }
+        }
+        oldLine += lines.length;
+        newLine += lines.length;
+      }
+    }
+    return ret.join('\n') + '\n';
+  },
+  applyPatch: function (oldStr, uniDiff) {
+    var diffstr = uniDiff.split('\n');
+    var diff = [];
+    var remEOFNL = false,
+      addEOFNL = false;
+    for (var i = diffstr[0][0] === 'I' ? 4 : 0; i < diffstr.length; i++) {
+      if (diffstr[i][0] === '@') {
+        var meh = diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);
+        diff.unshift({
+          start: meh[3],
+          oldlength: meh[2],
+          oldlines: [],
+          newlength: meh[4],
+          newlines: []
+        });
+      } else if (diffstr[i][0] === '+') {
+        diff[0].newlines.push(diffstr[i].substr(1));
+      } else if (diffstr[i][0] === '-') {
+        diff[0].oldlines.push(diffstr[i].substr(1));
+      } else if (diffstr[i][0] === ' ') {
+        diff[0].newlines.push(diffstr[i].substr(1));
+        diff[0].oldlines.push(diffstr[i].substr(1));
+      } else if (diffstr[i][0] === '\\') {
+        if (diffstr[i - 1][0] === '+') {
+          remEOFNL = true;
+        } else if (diffstr[i - 1][0] === '-') {
+          addEOFNL = true;
+        }
+      }
+    }
+    var str = oldStr.split('\n');
+    for (var i = diff.length - 1; i >= 0; i--) {
+      var d = diff[i];
+      for (var j = 0; j < d.oldlength; j++) {
+        if (str[d.start - 1 + j] !== d.oldlines[j]) {
+          return false;
+        }
+      }
+      Array.prototype.splice.apply(str, [d.start - 1, +d.oldlength].concat(d.newlines));
+    }
+    if (remEOFNL) {
+      while (!str[str.length - 1]) {
+        str.pop();
+      }
+    } else if (addEOFNL) {
+      str.push('');
+    }
+    return str.join('\n');
+  },
+  convertChangesToXML: function (changes) {
+    var ret = [];
+    for (var i = 0; i < changes.length; i++) {
+      var change = changes[i];
+      if (change.added) {
+        ret.push('<ins>');
+      } else if (change.removed) {
+        ret.push('<del>');
+      }
+      ret.push(escapeHTML(change.value));
+      if (change.added) {
+        ret.push('</ins>');
+      } else if (change.removed) {
+        ret.push('</del>');
+      }
+    }
+    return ret.join('');
+  },
+  // See: http://code.google.com/p/google-diff-match-patch/wiki/API
+  convertChangesToDMP: function (changes) {
+    var ret = [],
+      change;
+    for (var i = 0; i < changes.length; i++) {
+      change = changes[i];
+      ret.push([change.added ? 1 : change.removed ? -1 : 0, change.value]);
+    }
+    return ret;
+  }
+};
 
 // Split a word-wise diff generated by jsdiff into multiple lines, for the
 // purpose of breaking up the diffs into lines, so that modified lines can be
@@ -22589,7 +22579,7 @@ const mapcat = function mapcat(lst, fn) {
 //    { "value": [2, 3] },
 //    { "value": [4],
 //      "added": true }]
-const ArrayDiff = new jsdiff.Diff();
+const ArrayDiff = new JSDiff.Diff();
 ArrayDiff.tokenize = array => _.map(array, elem => [elem]);
 // The default is `+` for string concatenation, which doesn't work for array
 // concatenation.
@@ -22682,7 +22672,7 @@ class TextDiff extends React.Component {
     });
   }
   render() {
-    const diffed = jsdiff.diffWords(this.props.before, this.props.after);
+    const diffed = JSDiff.diffWords(this.props.before, this.props.after);
     const lines = splitDiff(diffed);
     const beforeImages = imagesInString(this.props.before);
     const afterImages = imagesInString(this.props.after);
@@ -23450,7 +23440,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$m,
+  InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$8
 } = components;
 const {
@@ -23522,7 +23512,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23775,7 +23765,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -23933,7 +23923,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React.createElement(InfoTip$l, null, props.infoTip));
+})), /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -25619,7 +25609,7 @@ const StatefulEditorPage = createReactClass({
 });
 
 const {
-  PropCheckBox: PropCheckBox$c,
+  PropCheckBox: PropCheckBox$d,
   TextListEditor: TextListEditor$4
 } = components;
 const Categorizer = Categorizer$1.widget;
@@ -25636,7 +25626,7 @@ class CategorizerEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$c, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$d, {
       label: "Randomize item order",
       labelAlignment: "right",
       randomizeItems: this.props.randomizeItems,
@@ -25748,8 +25738,8 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$k,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$l,
+  PropCheckBox: PropCheckBox$c
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25905,11 +25895,11 @@ class CSProgramEditor extends React.Component {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$c, {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$c, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25917,7 +25907,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -26003,7 +25993,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$6
 } = components;
 const {
@@ -26072,14 +26062,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26613,8 +26603,8 @@ const SortableItem = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a
+  InfoTip: InfoTip$j,
+  PropCheckBox: PropCheckBox$b
 } = components;
 
 // types for iterables
@@ -26861,16 +26851,16 @@ class ExpressionEditor extends React.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, "Global Options"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$b, {
       times: this.props.times,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Use \xD7 for rendering multiplication instead of a center dot."
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
+    })), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -26960,19 +26950,19 @@ class AnswerOption extends React.Component {
       className: "answer-expression"
     }, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$b, {
       form: this.props.form,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$b, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -27171,20 +27161,17 @@ GradedGroupSetEditor.defaultProps = {
 const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.slice(i + 1)];
 
 const {
-  ButtonGroup: ButtonGroup$3,
-  InfoTip: InfoTip$h,
-  PropCheckBox: PropCheckBox$9,
-  RangeInput: RangeInput$5
+  ButtonGroup: ButtonGroup$4,
+  InfoTip: InfoTip$i,
+  PropCheckBox: PropCheckBox$a,
+  RangeInput: RangeInput$6
 } = components;
-const {
-  getDependencies: getDependencies$9
-} = Dependencies;
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$3 = {
   url: null,
   width: 0,
   height: 0
 };
-function numSteps(range, step) {
+function numSteps$1(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
 const GraphSettings = createReactClass({
@@ -27216,7 +27203,7 @@ const GraphSettings = createReactClass({
       gridStep: [1, 1],
       snapStep: [1, 1],
       valid: true,
-      backgroundImage: defaultBackgroundImage$2,
+      backgroundImage: defaultBackgroundImage$3,
       markings: "graph",
       showProtractor: false,
       showRuler: false,
@@ -27326,7 +27313,7 @@ const GraphSettings = createReactClass({
     if (!_.isFinite(step)) {
       return name + " must be a valid number";
     }
-    const nSteps = numSteps(range, step);
+    const nSteps = numSteps$1(range, step);
     if (nSteps < minTicks) {
       return name + " is too large, there must be at least " + minTicks + " ticks.";
     }
@@ -27494,12 +27481,16 @@ 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$9();
+    } = Dependencies.getDependencies();
+    this.props.box; // ?
     return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Canvas size (x,y pixels)", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "canvas-size"
+    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "canvas-size",
       value: this.props.box,
       onChange: box => {
         this.change({
@@ -27514,7 +27505,10 @@ const GraphSettings = createReactClass({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, " ", "x Label", /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "labels-x"
+    }, "x Label"), /*#__PURE__*/React.createElement("input", {
+      id: "labels-x",
       type: "text",
       className: "graph-settings-axis-label"
       // eslint-disable-next-line react/no-string-refs
@@ -27524,7 +27518,10 @@ const GraphSettings = createReactClass({
       value: this.state.labelsTextbox[0] || ""
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "y Label", /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "labels-y"
+    }, "y Label"), /*#__PURE__*/React.createElement("input", {
+      id: "labels-y",
       type: "text",
       className: "graph-settings-axis-label"
       // eslint-disable-next-line react/no-string-refs
@@ -27536,36 +27533,51 @@ const GraphSettings = createReactClass({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "x Range", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "range-x"
+    }, "x Range"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "range-x",
       value: this.state.rangeTextbox[0],
       onChange: vals => this.changeRange(0, vals)
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "y Range", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "range-y"
+    }, "y Range"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "range-y",
       value: this.state.rangeTextbox[1],
       onChange: vals => this.changeRange(1, vals)
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Tick Step", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "tick-step"
+    }, "Tick Step"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "tick-step",
       value: this.state.stepTextbox,
       onChange: this.changeStep
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "Grid Step", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "grid-step"
+    }, "Grid Step"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "grid-step",
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
     }))), _.contains(this.props.editableSettings, "snap") && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Snap Step", /*#__PURE__*/React.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "snap-step"
+    }, "Snap Step"), /*#__PURE__*/React.createElement(RangeInput$6, {
+      id: "snap-step",
       value: this.state.snapStepTextbox,
       onChange: this.changeSnapStep
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$3, {
+    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$4, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -27581,13 +27593,16 @@ const GraphSettings = createReactClass({
       onChange: this.change("markings")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
     }))), _.contains(this.props.editableSettings, "image") && /*#__PURE__*/React.createElement("div", {
       className: "image-settings"
-    }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, "Url:", " ", /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "bg-url"
+    }, "Url:"), /*#__PURE__*/React.createElement("input", {
+      id: "bg-url",
       type: "text",
       className: "graph-settings-background-url"
       // eslint-disable-next-line react/no-string-refs
@@ -27603,19 +27618,19 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -27640,7 +27655,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const {
@@ -27723,7 +27738,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27818,7 +27833,7 @@ GroupEditor.defaultProps = {
 };
 
 const {
-  PropCheckBox: PropCheckBox$8
+  PropCheckBox: PropCheckBox$9
 } = components;
 /**
  * This is used for editing a name/value pair.
@@ -27941,11 +27956,11 @@ class IframeEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    })), /*#__PURE__*/React.createElement(PropCheckBox$9, {
       label: "Allow full screen",
       allowFullScreen: this.props.allowFullScreen,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$9, {
       label: "Allow iframe content to redirect the page",
       allowTopNavigation: this.props.allowTopNavigation,
       onChange: this.props.onChange
@@ -27968,13 +27983,13 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$f,
+  InfoTip: InfoTip$g,
   InlineIcon: InlineIcon$4,
-  RangeInput: RangeInput$4
+  RangeInput: RangeInput$5
 } = components;
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$1 = {
+const defaultBackgroundImage$2 = {
   url: null,
   width: 0,
   height: 0
@@ -28017,7 +28032,7 @@ class ImageEditor extends React.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28041,7 +28056,7 @@ class ImageEditor extends React.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28052,7 +28067,7 @@ class ImageEditor extends React.Component {
   _renderRowForLabel(label, i) {
     return /*#__PURE__*/React.createElement("tr", {
       key: i
-    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(RangeInput$4, {
+    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(RangeInput$5, {
       value: label.coordinates
       // eslint-disable-next-line react/jsx-no-bind
       ,
@@ -28197,7 +28212,7 @@ ImageEditor.defaultProps = {
   title: "",
   range: [defaultRange, defaultRange],
   box: [defaultBoxSize, defaultBoxSize],
-  backgroundImage: defaultBackgroundImage$1,
+  backgroundImage: defaultBackgroundImage$2,
   labels: [],
   alt: "",
   caption: ""
@@ -28205,7 +28220,7 @@ ImageEditor.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$e
+  InfoTip: InfoTip$f
 } = components;
 const answerTypes = {
   number: {
@@ -28291,7 +28306,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28327,7 +28342,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28339,7 +28354,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -28615,7 +28630,7 @@ LineEditor.defaultProps = {
 };
 
 const {
-  ButtonGroup: ButtonGroup$2,
+  ButtonGroup: ButtonGroup$3,
   NumberInput: NumberInput$f
 } = components;
 class ConstraintEditor extends React.Component {
@@ -28631,7 +28646,7 @@ class ConstraintEditor extends React.Component {
     } = Dependencies.getDependencies();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Constraint:", " ", /*#__PURE__*/React.createElement(ButtonGroup$2, {
+    }, "Constraint:", " ", /*#__PURE__*/React.createElement(ButtonGroup$3, {
       value: this.props.constraint,
       allowEmpty: false,
       buttons: [{
@@ -29504,45 +29519,537 @@ const GraphTypeSelector = props => {
   }, "Angle"));
 };
 
-const SegmentCountSelector = ({
-  numSegments: _numSegments = 1,
-  onChange
-}) => /*#__PURE__*/React.createElement("select", {
-  key: "segment-select",
-  value: _numSegments,
-  onChange: e => {
-    const num = +e.target.value;
-    onChange(num);
-  }
-}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement("option", {
-  key: n,
-  value: n
-}, `${n} segment${n > 1 ? "s" : ""}`)));
-
 const {
-  InfoTip: InfoTip$d
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$e,
+  PropCheckBox: PropCheckBox$8,
+  RangeInput: RangeInput$4
 } = components;
-const {
-  containerSizeClass,
-  getInteractiveBoxFromSizeClass
-} = SizingUtils;
-const DeprecationMixin = Util.DeprecationMixin;
-const InteractiveGraph = InteractiveGraphWidget.widget;
-const defaultBackgroundImage = {
-  url: null
-};
-const deprecatedProps = {
-  showGraph: function (props) {
-    return {
-      markings: props.showGraph ? "graph" : "none"
-    };
-  }
+const defaultBackgroundImage$1 = {
+  url: null,
+  width: 0,
+  height: 0
 };
-// [min, max]
-// Renders the given children in a View laid out horizontally.
-const Row = props => {
-  const {
-    children,
+function numSteps(range, step) {
+  return Math.floor((range[1] - range[0]) / step);
+}
+const InteractiveGraphSettings = createReactClass({
+  displayName: "InteractiveGraphSettings",
+  propTypes: _extends({}, Changeable.propTypes, {
+    editableSettings: PropTypes.arrayOf(PropTypes.oneOf(["canvas", "graph", "snap", "image", "measure"])),
+    box: PropTypes.arrayOf(PropTypes.number),
+    labels: PropTypes.arrayOf(PropTypes.string),
+    range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+    step: PropTypes.arrayOf(PropTypes.number),
+    gridStep: PropTypes.arrayOf(PropTypes.number),
+    snapStep: PropTypes.arrayOf(PropTypes.number),
+    valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    backgroundImage: PropTypes.object,
+    markings: PropTypes.oneOf(["graph", "grid", "none"]),
+    showProtractor: PropTypes.bool,
+    showRuler: PropTypes.bool,
+    showTooltips: PropTypes.bool,
+    rulerLabel: PropTypes.string,
+    rulerTicks: PropTypes.number
+  }),
+  getDefaultProps: function () {
+    return {
+      editableSettings: ["graph", "snap", "image", "measure"],
+      box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
+      labels: ["x", "y"],
+      range: [[-10, 10], [-10, 10]],
+      step: [1, 1],
+      gridStep: [1, 1],
+      snapStep: [1, 1],
+      valid: true,
+      backgroundImage: defaultBackgroundImage$1,
+      markings: "graph",
+      showProtractor: false,
+      showRuler: false,
+      showTooltips: false,
+      rulerLabel: "",
+      rulerTicks: 10
+    };
+  },
+  getInitialState: function () {
+    return this.stateFromProps(this.props);
+  },
+  componentDidMount: function () {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+    this.changeGraph = _.debounce(this.changeGraph, 300);
+  },
+  UNSAFE_componentWillReceiveProps: function (nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+      this.setState(this.stateFromProps(nextProps));
+    }
+  },
+  componentWillUnmount: function () {
+    this._isMounted = false;
+  },
+  stateFromProps: function (props) {
+    return {
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      rangeTextbox: props.range,
+      backgroundImage: _.clone(props.backgroundImage)
+    };
+  },
+  change(...args) {
+    return Changeable.change.apply(this, args);
+  },
+  // TODO(aria): Make either a wrapper for standard events to work
+  // with this.change, or make these use some TextInput/NumberInput box
+  changeRulerLabel: function (e) {
+    this.change({
+      rulerLabel: e.target.value
+    });
+  },
+  changeRulerTicks: function (e) {
+    this.change({
+      rulerTicks: +e.target.value
+    });
+  },
+  changeBackgroundUrl: function (e) {
+    // Only continue on blur or "enter"
+    if (e.type === "keypress" && e.key !== "Enter") {
+      return;
+    }
+    const setUrl = (url, width, height) => {
+      const image = _.clone(this.props.backgroundImage);
+      image.url = url;
+      image.width = width;
+      image.height = height;
+      this.setState({
+        backgroundImage: image
+      }, this.changeGraph);
+    };
+
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+    const url = ReactDOM.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+    if (url) {
+      Util.getImageSize(url, (width, height) => {
+        if (this._isMounted) {
+          setUrl(url, width, height);
+        }
+      });
+    } else {
+      setUrl(null, 0, 0);
+    }
+  },
+  renderLabelChoices: function (choices) {
+    return _.map(choices, function (nameAndValue) {
+      return /*#__PURE__*/React.createElement("option", {
+        value: nameAndValue[1]
+      }, nameAndValue[0]);
+    });
+  },
+  validRange: function (range) {
+    const numbers = _.every(range, function (num) {
+      return _.isFinite(num);
+    });
+    if (!numbers) {
+      return "Range must be a valid number";
+    }
+    if (range[0] >= range[1]) {
+      return "Range must have a higher number on the right";
+    }
+    return true;
+  },
+  validateStepValue: function (settings) {
+    const {
+      step,
+      range,
+      name,
+      minTicks,
+      maxTicks
+    } = settings;
+    if (!_.isFinite(step)) {
+      return name + " must be a valid number";
+    }
+    const nSteps = numSteps(range, step);
+    if (nSteps < minTicks) {
+      return name + " is too large, there must be at least " + minTicks + " ticks.";
+    }
+    if (nSteps > maxTicks) {
+      return name + " is too small, there can be at most " + maxTicks + " ticks.";
+    }
+    return true;
+  },
+  validSnapStep: function (step, range) {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Snap step",
+      minTicks: 5,
+      maxTicks: 60
+    });
+  },
+  validGridStep: function (step, range) {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Grid step",
+      minTicks: 3,
+      maxTicks: 60
+    });
+  },
+  validStep: function (step, range) {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Step",
+      minTicks: 3,
+      maxTicks: 20
+    });
+  },
+  validBackgroundImageSize: function (image) {
+    // Ignore empty images
+    if (!image.url) {
+      return true;
+    }
+    const validSize = image.width <= 450 && image.height <= 450;
+    if (!validSize) {
+      return "Image must be smaller than 450px x 450px.";
+    }
+    return true;
+  },
+  validateGraphSettings: function (range, step, gridStep, snapStep, image) {
+    const self = this;
+    let msg;
+    const goodRange = _.every(range, function (range) {
+      msg = self.validRange(range);
+      return msg === true;
+    });
+    if (!goodRange) {
+      return msg;
+    }
+    const goodStep = _.every(step, function (step, i) {
+      msg = self.validStep(step, range[i]);
+      return msg === true;
+    });
+    if (!goodStep) {
+      return msg;
+    }
+    const goodGridStep = _.every(gridStep, function (gridStep, i) {
+      msg = self.validGridStep(gridStep, range[i]);
+      return msg === true;
+    });
+    if (!goodGridStep) {
+      return msg;
+    }
+    const goodSnapStep = _.every(snapStep, function (snapStep, i) {
+      msg = self.validSnapStep(snapStep, range[i]);
+      return msg === true;
+    });
+    if (!goodSnapStep) {
+      return msg;
+    }
+    const goodImageSize = this.validBackgroundImageSize(image);
+    if (goodImageSize !== true) {
+      msg = goodImageSize;
+      return msg;
+    }
+    return true;
+  },
+  changeLabel: function (i, e) {
+    const val = e.target.value;
+    const labels = this.state.labelsTextbox.slice();
+    labels[i] = val;
+    this.setState({
+      labelsTextbox: labels
+    }, this.changeGraph);
+  },
+  changeRange: function (i, values) {
+    const ranges = this.state.rangeTextbox.slice();
+    ranges[i] = values;
+    const step = this.state.stepTextbox.slice();
+    const gridStep = this.state.gridStepTextbox.slice();
+    const snapStep = this.state.snapStepTextbox.slice();
+    const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
+    if (this.validRange(ranges[i]) === true) {
+      step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+      gridStep[i] = Util.gridStepFromTickStep(step[i], scale);
+      snapStep[i] = gridStep[i] / 2;
+    }
+    this.setState({
+      stepTextbox: step,
+      gridStepTextbox: gridStep,
+      snapStepTextbox: snapStep,
+      rangeTextbox: ranges
+    }, this.changeGraph);
+  },
+  changeStep: function (step) {
+    this.setState({
+      stepTextbox: step
+    }, this.changeGraph);
+  },
+  changeSnapStep: function (snapStep) {
+    this.setState({
+      snapStepTextbox: snapStep
+    }, this.changeGraph);
+  },
+  changeGridStep: function (gridStep) {
+    this.setState({
+      gridStepTextbox: gridStep,
+      snapStepTextbox: _.map(gridStep, function (step) {
+        return step / 2;
+      })
+    }, this.changeGraph);
+  },
+  changeGraph: function () {
+    const labels = this.state.labelsTextbox;
+    const range = _.map(this.state.rangeTextbox, function (range) {
+      return _.map(range, Number);
+    });
+    const step = _.map(this.state.stepTextbox, Number);
+    const gridStep = this.state.gridStepTextbox;
+    const snapStep = this.state.snapStepTextbox;
+    const image = this.state.backgroundImage;
+
+    // validationResult is either:
+    //   true -> the settings are valid
+    //   a string -> the settings are invalid, and the explanation
+    //               is contained in the string
+    // TODO(aria): Refactor this to not be confusing
+    const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
+    if (validationResult === true) {
+      // either true or a string
+      this.change({
+        valid: true,
+        labels: labels,
+        range: range,
+        step: step,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        backgroundImage: image
+      });
+    } else {
+      this.change({
+        valid: validationResult // a string message, not false
+      });
+    }
+  },
+
+  render: function () {
+    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
+    } = Dependencies.getDependencies();
+    return /*#__PURE__*/React.createElement("div", null, _.contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "canvas-size"
+    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "canvas-size",
+      value: this.props.box,
+      onChange: box => {
+        this.change({
+          box: box
+        });
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Scale (px per div):", " ", /*#__PURE__*/React.createElement(TeX, null, "(" + scale[0] + ", " + scale[1] + ")"))), _.contains(this.props.editableSettings, "graph") && /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "labels-x"
+    }, "x Label"), /*#__PURE__*/React.createElement("input", {
+      id: "labels-x",
+      type: "text",
+      className: "graph-settings-axis-label"
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "labels-0",
+      onChange: e => this.changeLabel(0, e),
+      value: this.state.labelsTextbox[0] || ""
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "labels-y"
+    }, "y Label"), /*#__PURE__*/React.createElement("input", {
+      id: "labels-y",
+      type: "text",
+      className: "graph-settings-axis-label"
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "labels-1",
+      onChange: e => this.changeLabel(1, e),
+      value: this.state.labelsTextbox[1] || ""
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "range-x"
+    }, "x Range"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "range-x",
+      value: this.state.rangeTextbox[0],
+      onChange: vals => this.changeRange(0, vals)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "range-y"
+    }, "y Range"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "range-y",
+      value: this.state.rangeTextbox[1],
+      onChange: vals => this.changeRange(1, vals)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "tick-step"
+    }, "Tick Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "tick-step",
+      value: this.state.stepTextbox,
+      onChange: this.changeStep
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "grid-step"
+    }, "Grid Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "grid-step",
+      value: this.state.gridStepTextbox,
+      onChange: this.changeGridStep
+    }))), _.contains(this.props.editableSettings, "snap") && /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "snap-step"
+    }, "Snap Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
+      id: "snap-step",
+      value: this.state.snapStepTextbox,
+      onChange: this.changeSnapStep
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$2, {
+      value: this.props.markings,
+      allowEmpty: false,
+      buttons: [{
+        value: "graph",
+        content: "Graph"
+      }, {
+        value: "grid",
+        content: "Grid"
+      }, {
+        value: "none",
+        content: "None"
+      }],
+      onChange: this.change("markings")
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(PropCheckBox$8, {
+      label: "Show tooltips",
+      showTooltips: this.props.showTooltips,
+      onChange: this.change
+    }))), _.contains(this.props.editableSettings, "image") && /*#__PURE__*/React.createElement("div", {
+      className: "image-settings"
+    }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+      htmlFor: "bg-url"
+    }, "Url:"), /*#__PURE__*/React.createElement("input", {
+      id: "bg-url",
+      type: "text",
+      className: "graph-settings-background-url"
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "bg-url",
+      value: this.state.backgroundImage.url || "",
+      onChange: e => {
+        const image = _.clone(this.props.backgroundImage);
+        image.url = e.target.value;
+        this.setState({
+          backgroundImage: image
+        });
+      },
+      onKeyPress: this.changeBackgroundUrl,
+      onBlur: this.changeBackgroundUrl
+    }), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+      className: "misc-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(PropCheckBox$8, {
+      label: "Show ruler",
+      showRuler: this.props.showRuler,
+      onChange: this.change
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(PropCheckBox$8, {
+      label: "Show protractor",
+      showProtractor: this.props.showProtractor,
+      onChange: this.change
+    }))), this.props.showRuler && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React.createElement("select", {
+      onChange: this.changeRulerLabel,
+      value: this.props.rulerLabel
+    }, /*#__PURE__*/React.createElement("option", {
+      value: ""
+    }, "None"), /*#__PURE__*/React.createElement("optgroup", {
+      label: "Metric"
+    }, this.renderLabelChoices([["milimeters", "mm"], ["centimeters", "cm"], ["meters", "m"], ["kilometers", "km"]])), /*#__PURE__*/React.createElement("optgroup", {
+      label: "Imperial"
+    }, this.renderLabelChoices([["inches", "in"], ["feet", "ft"], ["yards", "yd"], ["miles", "mi"]]))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler ticks:", " ", /*#__PURE__*/React.createElement("select", {
+      onChange: this.changeRulerTicks,
+      value: this.props.rulerTicks
+    }, _.map([1, 2, 4, 8, 10, 16], function (n) {
+      return /*#__PURE__*/React.createElement("option", {
+        value: n
+      }, n);
+    })))))));
+  }
+});
+
+const SegmentCountSelector = ({
+  numSegments: _numSegments = 1,
+  onChange
+}) => /*#__PURE__*/React.createElement("select", {
+  key: "segment-select",
+  value: _numSegments,
+  onChange: e => {
+    const num = +e.target.value;
+    onChange(num);
+  }
+}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement("option", {
+  key: n,
+  value: n
+}, `${n} segment${n > 1 ? "s" : ""}`)));
+
+const {
+  InfoTip: InfoTip$d
+} = components;
+const {
+  containerSizeClass,
+  getInteractiveBoxFromSizeClass
+} = SizingUtils;
+const DeprecationMixin = Util.DeprecationMixin;
+const InteractiveGraph = InteractiveGraphWidget.widget;
+const defaultBackgroundImage = {
+  url: null
+};
+const deprecatedProps = {
+  showGraph: function (props) {
+    return {
+      markings: props.showGraph ? "graph" : "none"
+    };
+  }
+};
+// Renders the given children in a View laid out horizontally.
+const Row = props => {
+  const {
+    children,
     style
   } = props;
   return /*#__PURE__*/React.createElement(View, {
@@ -29559,6 +30066,12 @@ const FieldLabel = props => {
     }
   }, props.children);
 };
+/**
+ * An editor for the InteractiveGraph widget, which allows the user to
+ * specify the graph's properties and the correct answer.
+ *
+ * Used in the exercise editor.
+ */
 class InteractiveGraphEditor extends React.Component {
   constructor(...args) {
     super(...args);
@@ -29738,7 +30251,7 @@ class InteractiveGraphEditor extends React.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(GraphSettings, {
+    }, equationString), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,