@khanacademy/perseus-editor 4.2.7 → 4.3.0

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "4.2.7";
+const libVersion = "4.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -22087,7 +22087,7 @@ class ArticleEditor extends React__namespace.Component {
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
  */
 const {
-  ButtonGroup: ButtonGroup$4,
+  ButtonGroup: ButtonGroup$5,
   InlineIcon: InlineIcon$9
 } = perseus.components;
 const {
@@ -22117,7 +22117,7 @@ class ViewportResizer extends React__namespace.Component {
     // TODO(david): Allow input of custom viewport sizes.
     return /*#__PURE__*/React__namespace.createElement("span", {
       className: "viewport-resizer"
-    }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$4, {
+    }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$5, {
       value: this.props.deviceType,
       allowEmpty: false,
       buttons: [{
@@ -22135,8 +22135,6 @@ class ViewportResizer extends React__namespace.Component {
   }
 }
 
-var jsdiff$1 = {exports: {}};
-
 /*
 Software License Agreement (BSD License)
 
@@ -22171,382 +22169,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 (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 (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
@@ -22609,7 +22599,7 @@ const mapcat = function (lst, fn) {
 //    { "value": [2, 3] },
 //    { "value": [4],
 //      "added": true }]
-const ArrayDiff = new jsdiff.Diff();
+const ArrayDiff = new JSDiff.Diff();
 ArrayDiff.tokenize = array => ___default["default"].map(array, elem => [elem]);
 // The default is `+` for string concatenation, which doesn't work for array
 // concatenation.
@@ -22708,7 +22698,7 @@ class TextDiff extends React__namespace.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);
@@ -23456,7 +23446,7 @@ class StructuredItemDiff extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$m,
+  InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$8
 } = perseus.components;
 const {
@@ -23530,7 +23520,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$n, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23765,7 +23755,7 @@ class CombinedHintsEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = perseus.components;
 class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
@@ -23922,7 +23912,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement("
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, props.infoTip));
+})), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, props.infoTip));
 
 const ITEM_DATA_VERSION = perseus.itemDataVersion;
 class ItemEditor extends React__namespace.Component {
@@ -25581,7 +25571,7 @@ const StatefulEditorPage = createReactClass__default["default"]({
 });
 
 const {
-  PropCheckBox: PropCheckBox$c,
+  PropCheckBox: PropCheckBox$d,
   TextListEditor: TextListEditor$4
 } = perseus.components;
 const Categorizer = perseus.Categorizer.widget;
@@ -25616,7 +25606,7 @@ class CategorizerEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$d, {
       label: "Randomize item order",
       labelAlignment: "right",
       randomizeItems: this.props.randomizeItems,
@@ -25714,8 +25704,8 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$k,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$l,
+  PropCheckBox: PropCheckBox$c
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25898,11 +25888,11 @@ class CSProgramEditor extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25910,7 +25900,7 @@ class CSProgramEditor extends React__namespace.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
   }
 }
 
@@ -25987,7 +25977,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$6
 } = perseus.components;
 const {
@@ -26068,14 +26058,14 @@ class DropdownEditor extends React__namespace.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React__namespace.createElement("ul", {
       className: "dropdown-choices"
@@ -26615,8 +26605,8 @@ const SortableItem = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a
+  InfoTip: InfoTip$j,
+  PropCheckBox: PropCheckBox$b
 } = perseus.components;
 
 // types for iterables
@@ -26735,16 +26725,16 @@ class ExpressionEditor extends React__namespace.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React__namespace.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
@@ -26953,19 +26943,19 @@ class AnswerOption extends React__namespace.Component {
       className: "answer-expression"
     }, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
       form: this.props.form,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -27189,20 +27179,17 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 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
 } = perseus.components;
-const {
-  getDependencies: getDependencies$9
-} = perseus.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__default["default"]({
@@ -27235,7 +27222,7 @@ const GraphSettings = createReactClass__default["default"]({
       gridStep: [1, 1],
       snapStep: [1, 1],
       valid: true,
-      backgroundImage: defaultBackgroundImage$2,
+      backgroundImage: defaultBackgroundImage$3,
       markings: "graph",
       showProtractor: false,
       showRuler: false,
@@ -27348,7 +27335,7 @@ const GraphSettings = createReactClass__default["default"]({
     if (!___default["default"].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.";
     }
@@ -27516,12 +27503,16 @@ const GraphSettings = createReactClass__default["default"]({
     const scale = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
     const {
       TeX
-    } = getDependencies$9();
+    } = perseus.Dependencies.getDependencies();
+    this.props.box; // ?
     return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Canvas size (x,y pixels)", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "canvas-size"
+    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "canvas-size",
       value: this.props.box,
       onChange: box => {
         this.change({
@@ -27536,7 +27527,10 @@ const GraphSettings = createReactClass__default["default"]({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, " ", "x Label", /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "labels-x"
+    }, "x Label"), /*#__PURE__*/React__namespace.createElement("input", {
+      id: "labels-x",
       type: "text",
       className: "graph-settings-axis-label"
       // eslint-disable-next-line react/no-string-refs
@@ -27546,7 +27540,10 @@ const GraphSettings = createReactClass__default["default"]({
       value: this.state.labelsTextbox[0] || ""
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "y Label", /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "labels-y"
+    }, "y Label"), /*#__PURE__*/React__namespace.createElement("input", {
+      id: "labels-y",
       type: "text",
       className: "graph-settings-axis-label"
       // eslint-disable-next-line react/no-string-refs
@@ -27558,36 +27555,51 @@ const GraphSettings = createReactClass__default["default"]({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "x Range", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "range-x"
+    }, "x Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "range-x",
       value: this.state.rangeTextbox[0],
       onChange: vals => this.changeRange(0, vals)
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "y Range", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "range-y"
+    }, "y Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "range-y",
       value: this.state.rangeTextbox[1],
       onChange: vals => this.changeRange(1, vals)
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Tick Step", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "tick-step"
+    }, "Tick Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "tick-step",
       value: this.state.stepTextbox,
       onChange: this.changeStep
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, "Grid Step", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "grid-step"
+    }, "Grid Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "grid-step",
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
     }))), ___default["default"].contains(this.props.editableSettings, "snap") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Snap Step", /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "snap-step"
+    }, "Snap Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$6, {
+      id: "snap-step",
       value: this.state.snapStepTextbox,
       onChange: this.changeSnapStep
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.createElement(ButtonGroup$3, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.createElement(ButtonGroup$4, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -27603,13 +27615,16 @@ const GraphSettings = createReactClass__default["default"]({
       onChange: this.change("markings")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
     }))), ___default["default"].contains(this.props.editableSettings, "image") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "image-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, "Url:", " ", /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "bg-url"
+    }, "Url:"), /*#__PURE__*/React__namespace.createElement("input", {
+      id: "bg-url",
       type: "text",
       className: "graph-settings-background-url"
       // eslint-disable-next-line react/no-string-refs
@@ -27625,19 +27640,19 @@ const GraphSettings = createReactClass__default["default"]({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -27662,7 +27677,7 @@ const GraphSettings = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = perseus.components;
 const {
@@ -27736,7 +27751,7 @@ class GrapherEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27848,7 +27863,7 @@ class GroupEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  PropCheckBox: PropCheckBox$8
+  PropCheckBox: PropCheckBox$9
 } = perseus.components;
 /**
  * This is used for editing a name/value pair.
@@ -27988,11 +28003,11 @@ class IframeEditor extends React__namespace.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    })), /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
       label: "Allow full screen",
       allowFullScreen: this.props.allowFullScreen,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
       label: "Allow iframe content to redirect the page",
       allowTopNavigation: this.props.allowTopNavigation,
       onChange: this.props.onChange
@@ -28011,13 +28026,13 @@ class IframeEditor extends React__namespace.Component {
 
 /* 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
 } = perseus.components;
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$1 = {
+const defaultBackgroundImage$2 = {
   url: null,
   width: 0,
   height: 0
@@ -28042,7 +28057,7 @@ class ImageEditor extends React__namespace.Component {
     title: "",
     range: [defaultRange, defaultRange],
     box: [defaultBoxSize, defaultBoxSize],
-    backgroundImage: defaultBackgroundImage$1,
+    backgroundImage: defaultBackgroundImage$2,
     labels: [],
     alt: "",
     caption: ""
@@ -28068,7 +28083,7 @@ class ImageEditor extends React__namespace.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28092,7 +28107,7 @@ class ImageEditor extends React__namespace.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28103,7 +28118,7 @@ class ImageEditor extends React__namespace.Component {
   _renderRowForLabel(label, i) {
     return /*#__PURE__*/React__namespace.createElement("tr", {
       key: i
-    }, /*#__PURE__*/React__namespace.createElement("td", null, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+    }, /*#__PURE__*/React__namespace.createElement("td", null, /*#__PURE__*/React__namespace.createElement(RangeInput$5, {
       value: label.coordinates
       // eslint-disable-next-line react/jsx-no-bind
       ,
@@ -28248,7 +28263,7 @@ class ImageEditor extends React__namespace.Component {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$e
+  InfoTip: InfoTip$f
 } = perseus.components;
 const answerTypes = {
   number: {
@@ -28327,7 +28342,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28363,7 +28378,7 @@ class InputNumberEditor extends React__namespace.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28375,7 +28390,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -28664,7 +28679,7 @@ class LineEditor extends React__namespace.Component {
 }
 
 const {
-  ButtonGroup: ButtonGroup$2,
+  ButtonGroup: ButtonGroup$3,
   NumberInput: NumberInput$f
 } = perseus.components;
 class ConstraintEditor extends React__namespace.Component {
@@ -28686,7 +28701,7 @@ class ConstraintEditor extends React__namespace.Component {
     } = perseus.Dependencies.getDependencies();
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
+    }, "Constraint:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$3, {
       value: this.props.constraint,
       allowEmpty: false,
       buttons: [{
@@ -29569,44 +29584,541 @@ const GraphTypeSelector = props => {
   }, "Angle"));
 };
 
-const SegmentCountSelector = _ref => {
-  let {
-    numSegments = 1,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React__namespace.createElement("select", {
-    key: "segment-select",
-    value: numSegments,
-    onChange: e => {
-      const num = +e.target.value;
-      onChange(num);
-    }
-  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement("option", {
-    key: n,
-    value: n
-  }, `${n} segment${n > 1 ? "s" : ""}`)));
-};
-
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
-  InfoTip: InfoTip$d
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$e,
+  PropCheckBox: PropCheckBox$8,
+  RangeInput: RangeInput$4
 } = perseus.components;
-const {
-  containerSizeClass,
-  getInteractiveBoxFromSizeClass
-} = perseus.SizingUtils;
-const DeprecationMixin = perseus.Util.DeprecationMixin;
-const InteractiveGraph = perseus.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
+};
+function numSteps(range, step) {
+  return Math.floor((range[1] - range[0]) / step);
+}
+const InteractiveGraphSettings = createReactClass__default["default"]({
+  displayName: "InteractiveGraphSettings",
+  propTypes: {
+    ...perseus.Changeable.propTypes,
+    editableSettings: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(["canvas", "graph", "snap", "image", "measure"])),
+    box: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+    labels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    range: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)),
+    step: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+    gridStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+    snapStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+    valid: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].string]),
+    backgroundImage: PropTypes__default["default"].object,
+    markings: PropTypes__default["default"].oneOf(["graph", "grid", "none"]),
+    showProtractor: PropTypes__default["default"].bool,
+    showRuler: PropTypes__default["default"].bool,
+    showTooltips: PropTypes__default["default"].bool,
+    rulerLabel: PropTypes__default["default"].string,
+    rulerTicks: PropTypes__default["default"].number
+  },
+  getDefaultProps: function () {
+    return {
+      editableSettings: ["graph", "snap", "image", "measure"],
+      box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.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 = ___default["default"].debounce(this.changeGraph, 300);
+  },
+  UNSAFE_componentWillReceiveProps: function (nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!___default["default"].isEqual(this.props.labels, nextProps.labels) || !___default["default"].isEqual(this.props.gridStep, nextProps.gridStep) || !___default["default"].isEqual(this.props.snapStep, nextProps.snapStep) || !___default["default"].isEqual(this.props.step, nextProps.step) || !___default["default"].isEqual(this.props.range, nextProps.range) || !___default["default"].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: ___default["default"].clone(props.backgroundImage)
+    };
+  },
+  change() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return perseus.Changeable.change.apply(this, args);
+  },
+  // 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 = ___default["default"].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__default["default"].findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+    if (url) {
+      perseus.Util.getImageSize(url, (width, height) => {
+        if (this._isMounted) {
+          setUrl(url, width, height);
+        }
+      });
+    } else {
+      setUrl(null, 0, 0);
+    }
+  },
+  renderLabelChoices: function (choices) {
+    return ___default["default"].map(choices, function (nameAndValue) {
+      return /*#__PURE__*/React__namespace.createElement("option", {
+        value: nameAndValue[1]
+      }, nameAndValue[0]);
+    });
+  },
+  validRange: function (range) {
+    const numbers = ___default["default"].every(range, function (num) {
+      return ___default["default"].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 (!___default["default"].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 = ___default["default"].every(range, function (range) {
+      msg = self.validRange(range);
+      return msg === true;
+    });
+    if (!goodRange) {
+      return msg;
+    }
+    const goodStep = ___default["default"].every(step, function (step, i) {
+      msg = self.validStep(step, range[i]);
+      return msg === true;
+    });
+    if (!goodStep) {
+      return msg;
+    }
+    const goodGridStep = ___default["default"].every(gridStep, function (gridStep, i) {
+      msg = self.validGridStep(gridStep, range[i]);
+      return msg === true;
+    });
+    if (!goodGridStep) {
+      return msg;
+    }
+    const goodSnapStep = ___default["default"].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 = perseus.Util.scaleFromExtent(ranges[i], this.props.box[i]);
+    if (this.validRange(ranges[i]) === true) {
+      step[i] = perseus.Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+      gridStep[i] = perseus.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: ___default["default"].map(gridStep, function (step) {
+        return step / 2;
+      })
+    }, this.changeGraph);
+  },
+  changeGraph: function () {
+    const labels = this.state.labelsTextbox;
+    const range = ___default["default"].map(this.state.rangeTextbox, function (range) {
+      return ___default["default"].map(range, Number);
+    });
+    const step = ___default["default"].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 = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
+    const {
+      TeX
+    } = perseus.Dependencies.getDependencies();
+    return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "canvas-size"
+    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "canvas-size",
+      value: this.props.box,
+      onChange: box => {
+        this.change({
+          box: box
+        });
+      }
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, "Scale (px per div):", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + scale[0] + ", " + scale[1] + ")"))), ___default["default"].contains(this.props.editableSettings, "graph") && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "labels-x"
+    }, "x Label"), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "labels-y"
+    }, "y Label"), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "range-x"
+    }, "x Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "range-x",
+      value: this.state.rangeTextbox[0],
+      onChange: vals => this.changeRange(0, vals)
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "range-y"
+    }, "y Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "range-y",
+      value: this.state.rangeTextbox[1],
+      onChange: vals => this.changeRange(1, vals)
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "tick-step"
+    }, "Tick Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "tick-step",
+      value: this.state.stepTextbox,
+      onChange: this.changeStep
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "grid-step"
+    }, "Grid Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "grid-step",
+      value: this.state.gridStepTextbox,
+      onChange: this.changeGridStep
+    }))), ___default["default"].contains(this.props.editableSettings, "snap") && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "snap-step"
+    }, "Snap Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      id: "snap-step",
+      value: this.state.snapStepTextbox,
+      onChange: this.changeSnapStep
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+      label: "Show tooltips",
+      showTooltips: this.props.showTooltips,
+      onChange: this.change
+    }))), ___default["default"].contains(this.props.editableSettings, "image") && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "image-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", {
+      htmlFor: "bg-url"
+    }, "Url:"), /*#__PURE__*/React__namespace.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 = ___default["default"].clone(this.props.backgroundImage);
+        image.url = e.target.value;
+        this.setState({
+          backgroundImage: image
+        });
+      },
+      onKeyPress: this.changeBackgroundUrl,
+      onBlur: this.changeBackgroundUrl
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "misc-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+      label: "Show ruler",
+      showRuler: this.props.showRuler,
+      onChange: this.change
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+      label: "Show protractor",
+      showProtractor: this.props.showProtractor,
+      onChange: this.change
+    }))), this.props.showRuler && /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React__namespace.createElement("select", {
+      onChange: this.changeRulerLabel,
+      value: this.props.rulerLabel
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: ""
+    }, "None"), /*#__PURE__*/React__namespace.createElement("optgroup", {
+      label: "Metric"
+    }, this.renderLabelChoices([["milimeters", "mm"], ["centimeters", "cm"], ["meters", "m"], ["kilometers", "km"]])), /*#__PURE__*/React__namespace.createElement("optgroup", {
+      label: "Imperial"
+    }, this.renderLabelChoices([["inches", "in"], ["feet", "ft"], ["yards", "yd"], ["miles", "mi"]]))))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler ticks:", " ", /*#__PURE__*/React__namespace.createElement("select", {
+      onChange: this.changeRulerTicks,
+      value: this.props.rulerTicks
+    }, ___default["default"].map([1, 2, 4, 8, 10, 16], function (n) {
+      return /*#__PURE__*/React__namespace.createElement("option", {
+        value: n
+      }, n);
+    })))))));
+  }
+});
+
+const SegmentCountSelector = _ref => {
+  let {
+    numSegments = 1,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement("select", {
+    key: "segment-select",
+    value: numSegments,
+    onChange: e => {
+      const num = +e.target.value;
+      onChange(num);
+    }
+  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement("option", {
+    key: n,
+    value: n
+  }, `${n} segment${n > 1 ? "s" : ""}`)));
+};
+
+const {
+  InfoTip: InfoTip$d
+} = perseus.components;
+const {
+  containerSizeClass,
+  getInteractiveBoxFromSizeClass
+} = perseus.SizingUtils;
+const DeprecationMixin = perseus.Util.DeprecationMixin;
+const InteractiveGraph = perseus.InteractiveGraphWidget.widget;
+const defaultBackgroundImage = {
+  url: null
+};
+const deprecatedProps = {
+  showGraph: function (props) {
+    return {
+      markings: props.showGraph ? "graph" : "none"
+    };
+  }
 };
-// [min, max]
 // Renders the given children in a View laid out horizontally.
 const Row = props => {
   const {
@@ -29628,6 +30140,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__namespace.Component {
   displayName = "InteractiveGraphEditor";
   className = "perseus-widget-interactive-graph";
@@ -29821,7 +30339,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
+    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,