@khanacademy/perseus-editor 13.0.1 → 14.0.0

package/dist/es/index.js

@@ -1,5 +1,6 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect, useState } from 'react';
 import _ from 'underscore';
@@ -16,12 +17,12 @@ import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
 import { Checkbox as Checkbox$1, LabeledTextField, TextField } from '@khanacademy/wonder-blocks-form';
 import ReactDOM from 'react-dom';
-import { point, vector, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import Button from '@khanacademy/wonder-blocks-button';
 import { HeadingSmall, HeadingXSmall, LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
+import { vector, number } from '@khanacademy/kmath';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -41,22 +42,17 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "13.0.1";
+const libVersion = "14.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 const SCREEN_SIZES = {
@@ -133,16 +129,6 @@ const JsonEditor = createReactClass({
       this.setState(this.getInitialState());
     }
   },
-  render: function () {
-    const classes = "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
-    return /*#__PURE__*/React.createElement("textarea", {
-      className: classes,
-      value: this.state.currentValue,
-      onChange: this.handleChange,
-      onKeyDown: this.handleKeyDown,
-      onBlur: this.handleBlur
-    });
-  },
   handleKeyDown: function (e) {
     // This handler allows the tab character to be entered by pressing
     // tab, instead of jumping to the next (non-existant) field
@@ -209,6 +195,16 @@ const JsonEditor = createReactClass({
         valid: true
       });
     }
+  },
+  render: function () {
+    const classes = "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
+    return /*#__PURE__*/React.createElement("textarea", {
+      className: classes,
+      value: this.state.currentValue,
+      onChange: this.handleChange,
+      onKeyDown: this.handleKeyDown,
+      onBlur: this.handleBlur
+    });
   }
 });
 
@@ -20561,17 +20557,14 @@ const DragTarget = createReactClass({
   }
 });
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
 }
 
 const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
@@ -25559,7 +25552,7 @@ const styles$N = StyleSheet.create({
   }
 });
 
-/* eslint-disable react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
  *
@@ -25578,10 +25571,6 @@ const StatefulEditorPage = createReactClass({
       componentClass: EditorPage
     };
   },
-  render: function () {
-    const Component = this.props.componentClass;
-    return /*#__PURE__*/React.createElement(Component, this.state);
-  },
   getInitialState: function () {
     return _({}).extend(_.omit(this.props, "componentClass"), {
       onChange: this.handleChange,
@@ -25591,9 +25580,6 @@ const StatefulEditorPage = createReactClass({
   componentDidMount: function () {
     this._isMounted = true;
   },
-  componentWillUnmount: function () {
-    this._isMounted = false;
-  },
   // getInitialState isn't called if the react component is re-rendered
   // in-place on the dom, in which case this is called instead, so we
   // need to update the state here.
@@ -25601,6 +25587,9 @@ const StatefulEditorPage = createReactClass({
   UNSAFE_componentWillReceiveProps: function (nextProps) {
     this.setState(_(nextProps).pick("apiOptions", "imageUploader", "developerMode", "problemNum", "previewDevice", "frameSource"));
   },
+  componentWillUnmount: function () {
+    this._isMounted = false;
+  },
   getSaveWarnings: function () {
     // eslint-disable-next-line react/no-string-refs
     return this.refs.editor.getSaveWarnings();
@@ -25617,6 +25606,10 @@ const StatefulEditorPage = createReactClass({
   scorePreview: function () {
     // eslint-disable-next-line react/no-string-refs
     return this.refs.editor.scorePreview();
+  },
+  render: function () {
+    const Component = this.props.componentClass;
+    return /*#__PURE__*/React.createElement(Component, this.state);
   }
 });
 
@@ -25947,7 +25940,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25967,7 +25960,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26161,222 +26154,8 @@ DropdownEditor.defaultProps = {
   }]
 };
 
-/* eslint-disable @typescript-eslint/no-unused-vars, react/forbid-prop-types, react/sort-comp */
-const {
-  Graphie
-} = components;
-
-// @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint = Graphie.MovablePoint;
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleGraphieWidget$1 extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.getUserInput = () => {
-      return WidgetJsonifyDeprecated.getUserInput.call(this);
-    };
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.movePoint = newCoord => {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        coord: newCoord
-      });
-    };
-    this._getGridConfig = options => {
-      return _.map(options.step, function (step, i) {
-        return Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
-      });
-    };
-    this.setupGraphie = (graphie, options) => {
-      const gridConfig = this._getGridConfig(options);
-      graphie.graphInit({
-        range: options.range,
-        scale: _.pluck(gridConfig, "scale"),
-        axisArrows: "<->",
-        labelFormat: function (s) {
-          return "\\small{" + s + "}";
-        },
-        gridStep: options.gridStep,
-        tickStep: _.pluck(gridConfig, "tickStep"),
-        labelStep: 1,
-        unityLabels: _.pluck(gridConfig, "unityLabel")
-      });
-      graphie.label([0, options.range[1][1]], options.labels[1], "above");
-    };
-    this.simpleValidate = rubric => {
-      return ExampleGraphieWidget$1.validate(this.getUserInput(), rubric);
-    };
-  }
-  /**
-   * This is the widget's grading function
-   */
-  static validate(state, rubric) {
-    if (state.coord == null) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    if (point.equal(state.coord, rubric.correct)) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-  render() {
-    var _this$props$apiOption;
-    return /*#__PURE__*/React.createElement(Graphie
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "graphie",
-      box: this.props.graph.box,
-      range: this.props.graph.range,
-      options: this.props.graph,
-      setup: this.setupGraphie,
-      setDrawingAreaAvailable: (_this$props$apiOption = this.props.apiOptions) == null ? void 0 : _this$props$apiOption.setDrawingAreaAvailable
-    }, /*#__PURE__*/React.createElement(MovablePoint, {
-      pointSize: 5,
-      coord: this.props.coord || [0, 0],
-      constraints: [MovablePoint.constraints.snap(), MovablePoint.constraints.bound()],
-      onMove: this.movePoint
-    }));
-  }
-}
-
-/**
- * For this widget to work, we must export it.
- * We also must import this file in src/all-widgets.js
- */
-ExampleGraphieWidget$1.defaultProps = {
-  // We want to allow our coord to be null to test if the
-  // user has interacted with this widget yet when grading it
-  coord: null,
-  graph: {
-    box: [400, 400],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    gridStep: [1, 1],
-    valid: true,
-    backgroundImage: null,
-    markings: "grid",
-    showProtractor: false
-  }
-};
-var ExampleGraphieWidget$2 = {
-  name: "example-graphie-widget",
-  displayName: "Example Graphie Widget",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: ExampleGraphieWidget$1
-};
-
-const ExampleGraphieWidget = ExampleGraphieWidget$2.widget;
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo page. Only the question writer sees this.
- */
-class ExampleGraphieWidgetEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.handleChange = newProps => {
-      if (newProps.coord) {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
-          correct: newProps.coord
-        });
-      }
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExampleGraphieWidget, {
-      graph: this.props.graph,
-      coord: this.props.correct,
-      onChange: this.handleChange,
-      apiOptions: this.props.apiOptions
-    }));
-  }
-}
-ExampleGraphieWidgetEditor.propTypes = _extends({}, Changeable.propTypes);
-ExampleGraphieWidgetEditor.widgetName = "example-graphie-widget";
-ExampleGraphieWidgetEditor.defaultProps = {
-  correct: [4, 4],
-  graph: {
-    box: [340, 340],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    gridStep: [1, 1],
-    valid: true,
-    backgroundImage: null,
-    markings: "grid",
-    showProtractor: false
-  }
-};
-
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo. Only the question writer sees this.
- */
-class ExampleWidgetEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.input = /*#__PURE__*/React.createRef();
-    this.handleAnswerChange = event => {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        correct: event.target.value
-      });
-    };
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.focus = () => {
-      var _this$input$current;
-      (_this$input$current = this.input.current) == null || _this$input$current.focus();
-      return true;
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Correct answer:", /*#__PURE__*/React.createElement("input", {
-      value: this.props.correct,
-      onChange: this.handleAnswerChange,
-      ref: this.input
-    })));
-  }
-}
-ExampleWidgetEditor.propTypes = _extends({}, Changeable.propTypes);
-ExampleWidgetEditor.widgetName = "example-widget";
-ExampleWidgetEditor.defaultProps = {
-  correct: ""
-};
-
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$6
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26400,14 +26179,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -27056,7 +26835,7 @@ const styles$L = StyleSheet.create({
 
 const {
   InlineIcon: InlineIcon$3,
-  TextInput: TextInput$6
+  TextInput: TextInput$5
 } = components;
 const {
   iconPlus: iconPlus$1,
@@ -27106,7 +26885,7 @@ class GradedGroupEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: css(styles$K.title)
-    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
+    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$5, {
       value: this.props.title,
       className: css(styles$K.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -28084,7 +27863,7 @@ IframeEditor.defaultProps = {
   allowTopNavigation: false
 };
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   InfoTip: InfoTip$f,
   InlineIcon: InlineIcon$2,
@@ -28125,48 +27904,6 @@ class ImageEditor extends React.Component {
   componentWillUnmount() {
     this._isMounted = false;
   }
-  render() {
-    const backgroundImage = this.props.backgroundImage;
-    const imageSettings = /*#__PURE__*/React.createElement("div", {
-      className: "image-settings"
-    }, !Util.isLabeledSVG(backgroundImage.url) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Preview:"), /*#__PURE__*/React.createElement("img", {
-      alt: "Editor preview of image",
-      src: backgroundImage.url,
-      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, {
-      apiOptions: this.props.apiOptions,
-      content: this.props.alt,
-      onChange: props => {
-        if (props.content != null) {
-          this.change("alt", props.content);
-        }
-      },
-      widgetEnabled: false
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Caption:"), /*#__PURE__*/React.createElement(Editor, {
-      apiOptions: this.props.apiOptions,
-      content: this.props.caption,
-      onChange: props => {
-        if (props.content != null) {
-          this.change("caption", props.content);
-        }
-      },
-      widgetEnabled: false
-    }))));
-    const backgroundImageErrorText = /*#__PURE__*/React.createElement("div", {
-      className: "renderer-widget-error"
-    }, 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, {
-      value: backgroundImage.url || "",
-      style: {
-        width: 332
-      },
-      onChange: url => this.onUrlChange(url, false)
-    })), backgroundImage.url && imageSettings);
-  }
   _renderRowForLabel(label, i) {
     return /*#__PURE__*/React.createElement("tr", {
       key: i
@@ -28308,6 +28045,48 @@ class ImageEditor extends React.Component {
   serialize() {
     return EditorJsonify.serialize.call(this);
   }
+  render() {
+    const backgroundImage = this.props.backgroundImage;
+    const imageSettings = /*#__PURE__*/React.createElement("div", {
+      className: "image-settings"
+    }, !Util.isLabeledSVG(backgroundImage.url) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Preview:"), /*#__PURE__*/React.createElement("img", {
+      alt: "Editor preview of image",
+      src: backgroundImage.url,
+      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, {
+      apiOptions: this.props.apiOptions,
+      content: this.props.alt,
+      onChange: props => {
+        if (props.content != null) {
+          this.change("alt", props.content);
+        }
+      },
+      widgetEnabled: false
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Caption:"), /*#__PURE__*/React.createElement(Editor, {
+      apiOptions: this.props.apiOptions,
+      content: this.props.caption,
+      onChange: props => {
+        if (props.content != null) {
+          this.change("caption", props.content);
+        }
+      },
+      widgetEnabled: false
+    }))));
+    const backgroundImageErrorText = /*#__PURE__*/React.createElement("div", {
+      className: "renderer-widget-error"
+    }, 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, {
+      value: backgroundImage.url || "",
+      style: {
+        width: 332
+      },
+      onChange: url => this.onUrlChange(url, false)
+    })), backgroundImage.url && imageSettings);
+  }
 }
 ImageEditor.displayName = "ImageEditor";
 ImageEditor.widgetName = "image";
@@ -28321,7 +28100,6 @@ ImageEditor.defaultProps = {
   caption: ""
 };
 
-/* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$e
 } = components;
@@ -28609,7 +28387,7 @@ FunctionEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$5
+  TextInput: TextInput$4
 } = components;
 const {
   getDependencies: getDependencies$7
@@ -28634,7 +28412,7 @@ class LabelEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TextInput$5, {
+    }, /*#__PURE__*/React.createElement(TextInput$4, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -32734,8 +32512,38 @@ class InteractiveGraphEditor extends React.Component {
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
+  // serialize() is what makes copy/paste work. All the properties included
+  // in the serialization json are included when, for example, a graph
+  // is copied from the question editor and pasted into the hint editor
+  // (double brackets in the markdown).
+  serialize() {
+    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
+
+    // eslint-disable-next-line react/no-string-refs
+    const graph = this.refs.graph;
+    if (graph) {
+      var _this$props$graph2;
+      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
+      const correct = graph && graph.getUserInput();
+      _.extend(json, {
+        graph: {
+          type: correct.type,
+          startCoords: (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.startCoords
+        },
+        correct: correct
+      });
+      _.each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
+        if (_.has(correct, key)) {
+          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor">'.
+          json.graph[key] = correct[key];
+        }
+      });
+    }
+    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
+    return json;
+  }
   render() {
-    var _this$props$graph$typ, _this$props$graph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph5, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph3, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph6, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -32799,7 +32607,7 @@ class InteractiveGraphEditor extends React.Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
           graph: {
@@ -32888,8 +32696,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        var _this$props$graph3;
-        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon") {
+        var _this$props$graph4;
+        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showAngles: !this.props.correct.showAngles
@@ -32908,8 +32716,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        var _this$props$graph4;
-        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
+        var _this$props$graph5;
+        if (((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -32937,7 +32745,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) &&
+    })), ((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) &&
     // TODO(LEMS-2228): Remove flags once this is fully released
     shouldShowStartCoordsUI(this.props.apiOptions.flags, this.props.graph) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
@@ -33002,36 +32810,6 @@ class InteractiveGraphEditor extends React.Component {
       onChange: this.props.onChange
     }));
   }
-  // serialize() is what makes copy/paste work. All the properties included
-  // in the serialization json are included when, for example, a graph
-  // is copied from the question editor and pasted into the hint editor
-  // (double brackets in the markdown).
-  serialize() {
-    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
-
-    // eslint-disable-next-line react/no-string-refs
-    const graph = this.refs.graph;
-    if (graph) {
-      var _this$props$graph6;
-      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
-      const correct = graph && graph.getUserInput();
-      _.extend(json, {
-        graph: {
-          type: correct.type,
-          startCoords: (_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.startCoords
-        },
-        correct: correct
-      });
-      _.each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
-        if (_.has(correct, key)) {
-          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor">'.
-          json.graph[key] = correct[key];
-        }
-      });
-    }
-    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
-    return json;
-  }
 }
 InteractiveGraphEditor.widgetName = "interactive-graph";
 InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps, {
@@ -33476,7 +33254,50 @@ const editorStyles = StyleSheet.create({
   }
 });
 
-/* eslint-disable react/sort-comp */
+/**
+ * Add hover behavior to another component.
+ *
+ * This component provides hover and focus status updates in a consistent way
+ * across desktop and mobile.
+ *
+ * For advice on when to use this component instead of Button, see README.md.
+ *
+ * Many mobile browsers treat :hover as sticky which results in buttons looking
+ * pressed even when the user has lifted their finger.  This component ensures
+ * that when user lifts their finger the hover state is removed.
+ *
+ * We also chnage how the focus state works.  Browsers immediately set the
+ * focus state as soon as you click on a button.  This component only sets the
+ * focus state when a user starts navigating between elements via keybaord.
+ *
+ * HoverBehavior accepts a function as 'children' which is passed state and
+ * an object containing event handlers.  The 'children' function should return
+ * an React Element of some sort.
+ *
+ * Example:
+ *
+ * class MyButtonLikeComponent extends React.Component {
+ *     render(): React.Node {
+ *         return <HoverBehavior
+ *             disabled={this.props.disabled}
+ *             onClick={this.handleClick}
+ *         >
+ *             {({hovered}, handlers) =>
+ *                 <RoundRect
+ *                      textcolor='white'
+ *                      backgroundColor={hovered ? 'red' : 'blue'}/>}
+ *                      {...handlers}
+ *                 >
+ *                      {this.props.children}
+ *                 </RoundRect>
+ *             }
+ *         </HoverBehavior>
+ *     }
+ * }
+ *
+ * This follows a pattern call 'Function as Child Components':
+ * https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.sw0jiio8b
+ */
 class HoverBehavior extends React.Component {
   constructor(props) {
     super(props);
@@ -34513,7 +34334,7 @@ const styles = StyleSheet.create({
   }
 });
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/* eslint-disable react/forbid-prop-types */
 const {
   InfoTip: InfoTip$a,
   TextListEditor: TextListEditor$3
@@ -34896,7 +34717,7 @@ MeasurerEditor.defaultProps = {
 
 const {
   NumberInput: NumberInput$6,
-  TextInput: TextInput$4
+  TextInput: TextInput$3
 } = components;
 class MoleculeWidgetEditor extends React.Component {
   constructor(..._args) {
@@ -34921,7 +34742,7 @@ class MoleculeWidgetEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$4, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$3, {
       onChange: this.updateMolecule,
       value: this.props.smiles
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$6, {
@@ -35254,14 +35075,14 @@ NumberLineEditor.defaultProps = {
   showTooltips: false
 };
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   ButtonGroup,
   InfoTip: InfoTip$7,
   InlineIcon: InlineIcon$1,
   MultiButtonGroup,
   NumberInput: NumberInput$4,
-  TextInput: TextInput$3
+  TextInput: TextInput$2
 } = components;
 const {
   iconGear,
@@ -35476,7 +35297,7 @@ class NumericInputEditor extends React.Component {
     }));
     const labelText = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Aria label", /*#__PURE__*/React.createElement(TextInput$3, {
+    }, /*#__PURE__*/React.createElement("label", null, "Aria label", /*#__PURE__*/React.createElement(TextInput$2, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
@@ -35838,7 +35659,7 @@ PassageEditor.defaultProps = {
 const {
   InfoTip: InfoTip$4,
   NumberInput: NumberInput$3,
-  TextInput: TextInput$2
+  TextInput: TextInput$1
 } = components;
 class PassageRefEditor extends React.Component {
   constructor(..._args) {
@@ -35861,7 +35682,7 @@ class PassageRefEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$2, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$1, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -35915,14 +35736,32 @@ PassageRefTargetEditor.defaultProps = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class PhetSimulationEditor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.getSaveWarnings = () => {
+      if (makeSafeUrl(this.props.url, "en") === null) {
+        return ["Please enter a URL from the PhET domain."];
+      }
+      return [];
+    };
+  }
+  serialize() {
+    return {
+      url: this.props.url,
+      description: this.props.description
+    };
+  }
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "URL",
       value: this.props.url,
       onChange: url => this.props.onChange({
         url
-      })
-    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(LabeledTextField, {
+      }),
+      style: {
+        marginBottom: spacing.large_24
+      }
+    }), /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Description",
       value: this.props.description,
       onChange: description => this.props.onChange({
@@ -35930,12 +35769,6 @@ class PhetSimulationEditor extends React.Component {
       })
     }));
   }
-  serialize() {
-    return {
-      url: this.props.url,
-      description: this.props.description
-    };
-  }
 }
 PhetSimulationEditor.defaultProps = {
   url: "",
@@ -36257,7 +36090,7 @@ PlotterEditor.defaultProps = _extends({}, editorDefaults, {
  */
 const {
   NumberInput: NumberInput$1,
-  TextInput: TextInput$1
+  TextInput
 } = components;
 function validateOptions(height, programID) {
   const errors = [];
@@ -36291,7 +36124,7 @@ class PythonProgramEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React.createElement(TextInput$1, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React.createElement(TextInput, {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
@@ -36603,62 +36436,6 @@ RadioEditor.defaultProps = {
   deselectEnabled: false
 };
 
-class TextArea extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.input.focus();
-      return true;
-    };
-    this.changeValue = e => {
-      // Translating from the js event e to the value
-      // of the textbox to send to onChange
-      this.props.onChange(e.target.value);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("textarea", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
-      value: this.props.value || "",
-      onChange: this.changeValue
-    });
-  }
-}
-class SimpleMarkdownTesterEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.input = /*#__PURE__*/React.createRef();
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.focus = () => {
-      var _this$input$current;
-      (_this$input$current = this.input.current) == null || _this$input$current.focus();
-      return true;
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Simple markdown contents:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextArea, {
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value"),
-      ref: this.input
-    }))));
-  }
-}
-SimpleMarkdownTesterEditor.propTypes = _extends({}, Changeable.propTypes);
-SimpleMarkdownTesterEditor.widgetName = "simple-markdown-tester";
-SimpleMarkdownTesterEditor.defaultProps = {
-  value: ""
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$2,
@@ -36722,7 +36499,6 @@ SorterEditor.defaultProps = {
   padding: true
 };
 
-/* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$1,
   NumberInput
@@ -36889,219 +36665,12 @@ VideoEditor.defaultProps = {
   location: ""
 };
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PhetSimulationEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
-
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-class TextInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.input = /*#__PURE__*/React.createRef();
-    this.focus = () => {
-      var _this$input$current;
-      (_this$input$current = this.input.current) == null || _this$input$current.focus();
-      return true;
-    };
-    this.changeValue = e => {
-      // Translating from the js event e to the value
-      // of the textbox to send to onChange
-      this.props.onChange(e.target.value);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("input", {
-      ref: this.input,
-      value: this.props.value || "",
-      onChange: this.changeValue
-    });
-  }
-}
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleWidget extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.input = /*#__PURE__*/React.createRef();
-    /**
-     * Tell our parent to update our props.
-     */
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.getUserInput = () => {
-      return this.props.value;
-    };
-    /**
-     * Widgets that are focusable should add a focus method that returns
-     * true if focusing succeeded. The first such widget found will be
-     * focused on page load.
-     */
-    this.focus = () => {
-      var _this$input$current2;
-      (_this$input$current2 = this.input.current) == null || _this$input$current2.focus();
-      return true;
-    };
-    /**
-     * simpleValidate is called for grading. Rubric is the result of calling
-     * getUserInput() on the editor that created this widget.
-     *
-     * Should return an object representing the grading result, such as
-     * {
-     *     type: "points",
-     *     earned: 1,
-     *     total: 1,
-     *     message: null
-     * }
-     */
-    this.simpleValidate = rubric => {
-      return ExampleWidget.validate(this.getUserInput(), rubric);
-    };
-  }
-  /**
-   * This is the widget's grading function. simpleValidate generally
-   * defers to this function.
-   *
-   * value is usually the result of getUserInput on the widget
-   * rubric is the result of calling serialize() on the editor
-   */
-  static validate(value, rubric) {
-    if (value === "") {
-      return {
-        type: "invalid",
-        message: "It looks like you haven't answered all of the " + "question yet."
-      };
-    }
-    if (value === rubric.correct) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement(TextInput, {
-      ref: this.input,
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value")
-    });
-  }
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-ExampleWidget.defaultProps = {
-  value: ""
-};
-var ExampleWidget$1 = {
-  name: "example-widget",
-  displayName: "Example Widget",
-  // Tell the renderer what type of `display:` style we would like
-  // for the component wrapping this one.
-  defaultAlignment: "inline-block",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: ExampleWidget
-};
-
-/* eslint-disable react/sort-comp */
-const mdParse = PerseusMarkdown.parse;
-const mdOutput = PerseusMarkdown.basicOutput;
-class SimpleMarkdownTester extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.toJSON = () => {
-      return {};
-    };
-    /**
-     * Widgets that are focusable should add a focus method that returns
-     * true if focusing succeeded. The first such widget found will be
-     * focused on page load.
-     */
-    this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.input.focus();
-      return true;
-    };
-    /**
-     * simpleValidate is called for grading. Rubric is the result of calling
-     * toJSON() on the editor that created this widget.
-     *
-     * Should return an object representing the grading result, such as
-     * {
-     *     type: "points",
-     *     earned: 1,
-     *     total: 1,
-     *     message: null
-     * }
-     */
-    this.simpleValidate = rubric => {
-      return SimpleMarkdownTester.validate(this.toJSON(), rubric);
-    };
-  }
-  /**
-   * This is the widget's grading function.
-   *
-   * simpleValidate generally defers to this function
-   *
-   * state is usually the result of toJSON on the widget
-   * rubric is the result of calling toJSON() on the editor
-   */
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-  render() {
-    // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-    const parsed = mdParse(this.props.value);
-    const output = mdOutput(parsed);
-    return /*#__PURE__*/React.createElement("div", null, output);
-  }
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-SimpleMarkdownTester.defaultProps = {
-  value: ""
-};
-var SimpleMarkdownTester$1 = {
-  name: "simple-markdown-tester",
-  displayName: "Simple Markdown Tester",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: SimpleMarkdownTester,
-  transform: _.identity
-};
-
-var testingWidgets = [ExampleGraphieWidget$2, ExampleWidget$1, SimpleMarkdownTester$1];
-
-var AllWidgets = [...widgets, ...testingWidgets];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PhetSimulationEditor, PlotterEditor, PythonProgramEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 Widgets.registerEditors(AllEditors);
-Widgets.registerWidgets(AllWidgets);
+Widgets.registerWidgets(widgets);
 Widgets.replaceDeprecatedWidgets();
 Widgets.replaceDeprecatedEditors();
 
-export { AllEditors, AllWidgets, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
+export { AllEditors, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
 //# sourceMappingURL=index.js.map