@khanacademy/perseus-editor 2.15.7 → 2.16.0

package/dist/es/index.js

@@ -9,12 +9,11 @@ import Clickable from '@khanacademy/wonder-blocks-clickable';
 import Color from '@khanacademy/wonder-blocks-color';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
-import * as ReactDOM from 'react-dom';
-import ReactDOM__default from 'react-dom';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
+import ReactDOM from 'react-dom';
 import { point, number, line, ray, vector } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import { isTruthy } from '@khanacademy/wonder-stuff-core';
@@ -26,7 +25,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.15.7";
+const libVersion = "2.16.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20863,7 +20862,6 @@ const IMAGE_REGEX$1 = /!\[[^\]]*\]\(([^\s)]+)[^)]*\)/g;
  * ignores captures. If you don't need captures, use String::match
  */
 const allMatches = function allMatches(regex, str) {
-  // @ts-expect-error - TS2702 - 'RegExp' only refers to a type, but is being used as a namespace here.
   const result = [];
   // eslint-disable-next-line no-constant-condition
   while (true) {
@@ -20881,7 +20879,7 @@ const allMatches = function allMatches(regex, str) {
  * markdown.
  */
 const imageUrlsFromContent = function imageUrlsFromContent(content) {
-  return _.map(allMatches(IMAGE_REGEX$1, content), capture => capture[1]);
+  return allMatches(IMAGE_REGEX$1, content).map(capture => capture[1]);
 };
 // eslint-disable-next-line react/no-unsafe
 class Editor extends React.Component {
@@ -20890,6 +20888,8 @@ class Editor extends React.Component {
     this.lastUserValue = void 0;
     this.deferredChange = void 0;
     this.widgetIds = void 0;
+    this.underlay = /*#__PURE__*/React.createRef();
+    this.textarea = /*#__PURE__*/React.createRef();
     this.state = {
       textAreaValue: this.props.content
     };
@@ -20923,12 +20923,10 @@ class Editor extends React.Component {
       }, cb, silent);
     };
     this._handleWidgetEditorRemove = id => {
-      // eslint-disable-next-line react/no-string-refs
-      const textarea = this.refs.textarea;
+      const textarea = this.textarea.current;
       const re = new RegExp(widgetRegExp.replace("{id}", id), "gm");
-      // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'ReactInstance'.
       this.props.onChange({
-        content: textarea.value.replace(re, "")
+        content: textarea == null ? void 0 : textarea.value.replace(re, "")
       });
     };
     /**
@@ -21074,11 +21072,11 @@ class Editor extends React.Component {
       // Tab-completion of widgets. For example, to insert an image:
       // type `[[im`, then tab.
       if (e.key === "Tab") {
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
-
-        // findDOMNode can also return Text, but we know it's an element.
-        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
+        // We're in an event handler attached to the textarea, so the ref
+        // can't be empty/undefined! (which is why its safe to use the
+        // non-null-assertion here. aka the `!` suffix)
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const textarea = this.textarea.current;
         const word = Util.textarea.getWordBeforeCursor(textarea);
         const matches = word.string.toLowerCase().match(shortcutRegexp);
         if (matches != null) {
@@ -21212,9 +21210,6 @@ class Editor extends React.Component {
     };
     this._addWidgetToContent = (oldContent, cursorRange, widgetType) => {
       var _Widgets$getEditor;
-      // eslint-disable-next-line react/no-string-refs
-      const textarea = ReactDOM.findDOMNode(this.refs.textarea);
-
       // Note: we have to use _.map here instead of Array::map
       // because the results of a .match might be null if no
       // widgets were found.
@@ -21261,23 +21256,22 @@ class Editor extends React.Component {
       this.props.onChange({
         content: newContent,
         widgets: newWidgets
-      }, function () {
-        Util.textarea.moveCursor(
-        // findDOMNode can return Text but we know this is Element
-        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
-        textarea,
+      }, () => {
+        if (!this.textarea.current) {
+          return;
+        }
+        Util.textarea.moveCursor(this.textarea.current,
         // We want to put the cursor after the widget
         // and after any added newlines
         newContent.length - postlude.length);
       });
     };
     this._addWidget = widgetType => {
-      // eslint-disable-next-line react/no-string-refs
-      const textarea = this.refs.textarea;
-      this._addWidgetToContent(this.props.content,
-      // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'ReactInstance'. | TS2339 - Property 'selectionEnd' does not exist on type 'ReactInstance'.
-      [textarea.selectionStart, textarea.selectionEnd], widgetType);
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+      const textarea = this.textarea.current;
+      if (!textarea) {
+        return;
+      }
+      this._addWidgetToContent(this.props.content, [textarea.selectionStart, textarea.selectionEnd], widgetType);
       textarea.focus();
     };
     this.addTemplate = e => {
@@ -21331,31 +21325,16 @@ class Editor extends React.Component {
       return warnings;
     };
     this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+      const textarea = this.textarea.current;
       if (textarea) {
-        /**
-         * TODO(somewhatabstract, JIRA-XXXX):
-         * textarea should be refined with an instanceof check to
-         * HTMLTextAreaElement so that these props are available.
-         */
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
         textarea.focus();
       }
     };
     this.focusAndMoveToEnd = () => {
       this.focus();
-      // eslint-disable-next-line react/no-string-refs
-      const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+      const textarea = this.textarea.current;
       if (textarea) {
-        /**
-         * TODO(somewhatabstract, JIRA-XXXX):
-         * textarea should be refined with an instanceof check to
-         * HTMLTextAreaElement so that these props are available.
-         */
-        // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
         textarea.selectionStart = textarea.value.length;
-        // @ts-expect-error - TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
         textarea.selectionEnd = textarea.value.length;
       }
     };
@@ -21401,11 +21380,15 @@ class Editor extends React.Component {
     // this.props.onChange during that, since it calls our parent's
     // setState
     this._sizeImages(this.props);
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    $(ReactDOM.findDOMNode(this.refs.textarea))
+    // NOTE(jeremy): We use the non-null assertion here (!) because refs
+    // are guaranteed to be up-to-date before componentDidMount or
+    // componentDidUpdate fires.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    $(this.textarea.current)
     // @ts-expect-error - TS2339 - Property 'on' does not exist on type 'JQueryStatic'.
-    .on("copy cut", this._maybeCopyWidgets).on("paste", this._maybePasteWidgets);
+    .on("copy cut", this._maybeCopyWidgets)
+    // @ts-expect-error - TS2769 - No overload matches this call.
+    .on("paste", this._maybePasteWidgets);
   }
 
   // TODO(arun): This is a deprecated method, use the appropriate replacement
@@ -21418,9 +21401,7 @@ class Editor extends React.Component {
     }
   }
   componentDidUpdate(prevProps) {
-    // TODO(alpert): Maybe fix React so this isn't necessary
-    // eslint-disable-next-line react/no-string-refs
-    const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+    const textarea = this.textarea.current;
 
     // Slightly unorthodox method to ensure that programmatic text changes
     // are in the browser's undo stack.
@@ -21429,24 +21410,14 @@ class Editor extends React.Component {
     // will return false. However at least in Firefox setting `value` on a
     // textbox clears the undo stack so we don't get unexpected undo
     // behavior.
-    if (this.lastUserValue !== null && textarea) {
-      /**
-       * TODO(somewhatabstract, JIRA-XXXX):
-       * textarea should be refined with an instanceof check to
-       * HTMLTextAreaElement so that these props are available.
-       */
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+    if (this.lastUserValue != null && textarea) {
       textarea.focus();
-      // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
       textarea.value = this.lastUserValue;
-      // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
       textarea.selectionStart = 0;
-      // @ts-expect-error - TS2339 - Property 'select' does not exist on type 'Element | Text'.
-      textarea.select(0, prevProps.content.length);
+      textarea.setSelectionRange(0, prevProps.content.length);
       if (document.execCommand("insertText", false, this.props.content) === false) {
         // This command is not implemented. Fall back to setting `value`
         // directly.
-        // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
         textarea.value = this.props.content;
       }
       this.lastUserValue = null;
@@ -21551,10 +21522,7 @@ class Editor extends React.Component {
         onChange: this._addWidget
       });
       const insertTemplateString = "Insert template\u2026";
-      templatesDropDown =
-      /*#__PURE__*/
-      // @ts-expect-error - TS2322 - Type '(e: SyntheticEvent<HTMLTextAreaElement, Event>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-      React.createElement("select", {
+      templatesDropDown = /*#__PURE__*/React.createElement("select", {
         onChange: this.addTemplate
       }, /*#__PURE__*/React.createElement("option", {
         value: ""
@@ -21593,14 +21561,11 @@ class Editor extends React.Component {
       key: "end"
     }));
     const completeTextarea = [/*#__PURE__*/React.createElement("div", {
-      className: "perseus-textarea-underlay"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "underlay",
+      className: "perseus-textarea-underlay",
+      ref: this.underlay,
       key: "underlay"
     }, underlayPieces), /*#__PURE__*/React.createElement("textarea", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "textarea",
+      ref: this.textarea,
       key: "textarea",
       onChange: this.handleChange,
       onKeyDown: this._handleKeyDown,
@@ -21702,6 +21667,7 @@ class IframeContentRenderer extends React.Component {
   constructor(...args) {
     super(...args);
     this._frame = void 0;
+    this.container = /*#__PURE__*/React.createRef();
     // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     this._isMounted = void 0;
     this._lastData = void 0;
@@ -21722,10 +21688,8 @@ class IframeContentRenderer extends React.Component {
     };
     updateIframeHeight[this.iframeID] = height => {
       this._lastHeight = height;
-      if (this._isMounted && this.props.seamless) {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-        this.refs.container.style.height = height + "px";
+      if (this._isMounted && this.props.seamless && this.container.current) {
+        this.container.current.style.height = height + "px";
       }
     };
   }
@@ -21733,14 +21697,12 @@ class IframeContentRenderer extends React.Component {
     return nextProps.datasetValue !== this.props.datasetValue || nextProps.seamless !== this.props.seamless;
   }
   componentDidUpdate(prevProps) {
-    if (!this.props.seamless) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-      this.refs.container.style.height = "100%";
-    } else {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-      this.refs.container.style.height = this._lastHeight + "px";
+    if (this.container.current) {
+      if (!this.props.seamless) {
+        this.container.current.style.height = "100%";
+      } else {
+        this.container.current.style.height = this._lastHeight + "px";
+      }
     }
     if (prevProps.datasetValue !== this.props.datasetValue) {
       // Not just a change in seamless
@@ -21753,11 +21715,11 @@ class IframeContentRenderer extends React.Component {
     this._isMounted = false;
   }
   _prepareFrame() {
+    var _this$container$curre2;
     // Don't initialize the iframe until the page has loaded
     if (this._frame) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'removeChild' does not exist on type 'ReactInstance'.
-      this.refs.container.removeChild(this._frame);
+      var _this$container$curre;
+      (_this$container$curre = this.container.current) == null || _this$container$curre.removeChild(this._frame);
     }
     const frame = document.createElement("iframe");
     frame.style.width = "100%";
@@ -21779,10 +21741,7 @@ class IframeContentRenderer extends React.Component {
       // component inside the iframe
       frame.dataset.lintGutter = "true";
     }
-
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'appendChild' does not exist on type 'ReactInstance'.
-    this.refs.container.appendChild(frame);
+    (_this$container$curre2 = this.container.current) == null || _this$container$curre2.appendChild(frame);
     this._frame = frame;
   }
   sendNewData(data) {
@@ -21799,9 +21758,8 @@ class IframeContentRenderer extends React.Component {
     }
   }
   render() {
-    // eslint-disable-next-line react/no-string-refs
     return /*#__PURE__*/React.createElement("div", {
-      ref: "container",
+      ref: this.container,
       style: {
         width: "100%",
         height: "100%"
@@ -23524,25 +23482,23 @@ const {
 class HintEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.editor = /*#__PURE__*/React.createRef();
     this.handleChange = e => {
       this.props.onChange({
         replace: e.target.checked
       });
     };
     this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.editor.focus();
+      var _this$editor$current;
+      (_this$editor$current = this.editor.current) == null || _this$editor$current.focus();
     };
     this.getSaveWarnings = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-      return this.refs.editor.getSaveWarnings();
+      var _this$editor$current2;
+      return (_this$editor$current2 = this.editor.current) == null ? void 0 : _this$editor$current2.getSaveWarnings();
     };
     this.serialize = options => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-      return this.refs.editor.serialize(options);
+      var _this$editor$current3;
+      return (_this$editor$current3 = this.editor.current) == null ? void 0 : _this$editor$current3.serialize(options);
     };
   }
   render() {
@@ -23550,10 +23506,8 @@ class HintEditor extends React.Component {
       className: "perseus-hint-editor " + this.props.className
     }, this.props.showTitle && /*#__PURE__*/React.createElement("div", {
       className: "pod-title"
-    }, "Hint"), /*#__PURE__*/React.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor"
+    }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
+      ref: this.editor
       // Using the AssessmentItem content ID as the key
       // ensures that when the user navigates to another
       // item in the Sidebar, the question editor is
@@ -23605,12 +23559,12 @@ HintEditor.defaultProps = {
 class CombinedHintEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.editor = /*#__PURE__*/React.createRef();
+    this.frame = /*#__PURE__*/React.createRef();
     this.updatePreview = () => {
+      var _this$frame$current;
       const shouldBold = this.props.isLast && !/\*\*/.test(this.props.hint.content);
-
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
-      this.refs.frame.sendNewData({
+      (_this$frame$current = this.frame.current) == null || _this$frame$current.sendNewData({
         type: "hint",
         data: {
           hint: this.props.hint,
@@ -23626,19 +23580,16 @@ class CombinedHintEditor extends React.Component {
       });
     };
     this.getSaveWarnings = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-      return this.refs.editor.getSaveWarnings();
+      var _this$editor$current4;
+      return (_this$editor$current4 = this.editor.current) == null ? void 0 : _this$editor$current4.getSaveWarnings();
     };
     this.serialize = options => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-      return this.refs.editor.serialize(options);
+      var _this$editor$current5;
+      return (_this$editor$current5 = this.editor.current) == null ? void 0 : _this$editor$current5.serialize(options);
     };
     this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.editor.focus();
+      var _this$editor$current6;
+      (_this$editor$current6 = this.editor.current) == null || _this$editor$current6.focus();
     };
   }
   componentDidMount() {
@@ -23653,10 +23604,8 @@ class CombinedHintEditor extends React.Component {
       className: "perseus-combined-hint-editor " + "perseus-editor-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-editor-left-cell"
-    }, /*#__PURE__*/React.createElement(HintEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }, /*#__PURE__*/React.createElement(HintEditor, {
+      ref: this.editor,
       itemId: this.props.itemId,
       isFirst: this.props.isFirst,
       isLast: this.props.isLast,
@@ -23674,10 +23623,8 @@ class CombinedHintEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(DeviceFramer, {
       deviceType: this.props.deviceType,
       nochrome: true
-    }, /*#__PURE__*/React.createElement(IframeContentRenderer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "frame",
+    }, /*#__PURE__*/React.createElement(IframeContentRenderer, {
+      ref: this.frame,
       datasetKey: "mobile",
       datasetValue: isMobile,
       seamless: true,
@@ -24000,15 +23947,17 @@ const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.frame = /*#__PURE__*/React.createRef();
+    this.questionEditor = /*#__PURE__*/React.createRef();
+    this.itemExtrasEditor = /*#__PURE__*/React.createRef();
     // Notify the parent that the question or answer area has been updated.
     this.updateProps = (newProps, cb, silent) => {
       const props = _(this.props).pick("question", "answerArea");
       this.props.onChange(_(props).extend(newProps), cb, silent);
     };
     this.triggerPreviewUpdate = newData => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
-      this.refs.frame.sendNewData(newData);
+      var _this$frame$current;
+      (_this$frame$current = this.frame.current) == null || _this$frame$current.sendNewData(newData);
     };
     this.handleEditorChange = (newProps, cb, silent) => {
       const question = _.extend({}, this.props.question, newProps);
@@ -24023,18 +23972,14 @@ class ItemEditor extends React.Component {
       }, cb, silent);
     };
     this.getSaveWarnings = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-      return this.refs.questionEditor.getSaveWarnings();
+      var _this$questionEditor$;
+      return (_this$questionEditor$ = this.questionEditor.current) == null ? void 0 : _this$questionEditor$.getSaveWarnings();
     };
     this.serialize = options => {
+      var _this$questionEditor$2, _this$itemExtrasEdito;
       return {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        question: this.refs.questionEditor.serialize(options),
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        answerArea: this.refs.itemExtrasEditor.serialize(options),
+        question: (_this$questionEditor$2 = this.questionEditor.current) == null ? void 0 : _this$questionEditor$2.serialize(options),
+        answerArea: (_this$itemExtrasEdito = this.itemExtrasEditor.current) == null ? void 0 : _this$itemExtrasEdito.serialize(),
         itemDataVersion: ITEM_DATA_VERSION
       };
     };
@@ -24049,10 +23994,8 @@ class ItemEditor extends React.Component {
       className: "perseus-editor-left-cell"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pod-title"
-    }, "Question"), /*#__PURE__*/React.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , _extends({
-      ref: "questionEditor"
+    }, "Question"), /*#__PURE__*/React.createElement(Editor, _extends({
+      ref: this.questionEditor
       // Using the AssessmentItem content ID as the key
       // ensures that when the user navigates to another
       // item in the Sidebar, the question editor is
@@ -24072,10 +24015,8 @@ class ItemEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(DeviceFramer, {
       deviceType: this.props.deviceType,
       nochrome: true
-    }, /*#__PURE__*/React.createElement(IframeContentRenderer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "frame",
+    }, /*#__PURE__*/React.createElement(IframeContentRenderer, {
+      ref: this.frame,
       key: this.props.deviceType,
       datasetKey: "mobile",
       datasetValue: isMobile,
@@ -24093,10 +24034,8 @@ class ItemEditor extends React.Component {
       className: "perseus-editor-left-cell"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pod-title"
-    }, "Question extras"), /*#__PURE__*/React.createElement(ItemExtrasEditor
-    // eslint-disable-next-line react/no-string-refs
-    , _extends({
-      ref: "itemExtrasEditor",
+    }, "Question extras"), /*#__PURE__*/React.createElement(ItemExtrasEditor, _extends({
+      ref: this.itemExtrasEditor,
       onChange: this.handleItemExtrasChange
     }, this.props.answerArea))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-editor-right-cell"
@@ -24118,9 +24057,9 @@ class EditorPage extends React.Component {
   constructor(props) {
     super(props);
     this._isMounted = void 0;
-    // @ts-expect-error - TS2564 - Property 'rendererMountNode' has no initializer and is not definitely assigned in the constructor.
-    this.rendererMountNode = void 0;
     this.renderer = void 0;
+    this.itemEditor = /*#__PURE__*/React.createRef();
+    this.hintsEditor = /*#__PURE__*/React.createRef();
     this.toggleJsonMode = () => {
       this.setState({
         json: this.serialize({
@@ -24156,7 +24095,6 @@ class EditorPage extends React.Component {
     // 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.rendererMountNode = document.createElement("div");
     this.updateRenderer();
   }
   componentDidUpdate() {
@@ -24175,6 +24113,7 @@ class EditorPage extends React.Component {
     this._isMounted = false;
   }
   updateRenderer() {
+    var _this$itemEditor$curr, _this$itemEditor$curr2;
     // Some widgets (namely the image widget) like to call onChange before
     // anything has actually been mounted, which causes problems here. We
     // just ensure don't update until we've mounted
@@ -24187,10 +24126,7 @@ class EditorPage extends React.Component {
       customKeypad: touch,
       isMobile: touch
     });
-
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'triggerPreviewUpdate' does not exist on type 'ReactInstance'.
-    this.refs.itemEditor.triggerPreviewUpdate({
+    (_this$itemEditor$curr = this.itemEditor.current) == null || _this$itemEditor$curr.triggerPreviewUpdate({
       type: "question",
       data: _({
         item: this.serialize(),
@@ -24204,9 +24140,7 @@ class EditorPage extends React.Component {
           paths: this.props.contentPaths || []
         },
         reviewMode: true,
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        legacyPerseusLint: this.refs.itemEditor.getSaveWarnings()
+        legacyPerseusLint: (_this$itemEditor$curr2 = this.itemEditor.current) == null ? void 0 : _this$itemEditor$curr2.getSaveWarnings()
       }).extend(_(this.props).pick("workAreaSelector", "solutionAreaSelector", "hintsAreaSelector", "problemNum"))
     });
   }
@@ -24214,24 +24148,18 @@ class EditorPage extends React.Component {
     return _extends({}, ApiOptions.defaults, this.props.apiOptions);
   }
   getSaveWarnings() {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-    const issues1 = this.refs.itemEditor.getSaveWarnings();
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-    const issues2 = this.refs.hintsEditor.getSaveWarnings();
+    var _this$itemEditor$curr3, _this$hintsEditor$cur;
+    const issues1 = (_this$itemEditor$curr3 = this.itemEditor.current) == null ? void 0 : _this$itemEditor$curr3.getSaveWarnings();
+    const issues2 = (_this$hintsEditor$cur = this.hintsEditor.current) == null ? void 0 : _this$hintsEditor$cur.getSaveWarnings();
     return issues1.concat(issues2);
   }
   serialize(options) {
+    var _this$itemEditor$curr4, _this$hintsEditor$cur2;
     if (this.props.jsonMode) {
       return this.state.json;
     }
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-    return _.extend(this.refs.itemEditor.serialize(options), {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-      hints: this.refs.hintsEditor.serialize(options)
+    return _.extend((_this$itemEditor$curr4 = this.itemEditor.current) == null ? void 0 : _this$itemEditor$curr4.serialize(options), {
+      hints: (_this$hintsEditor$cur2 = this.hintsEditor.current) == null ? void 0 : _this$hintsEditor$cur2.serialize(options)
     });
   }
   scorePreview() {
@@ -24277,10 +24205,8 @@ class EditorPage extends React.Component {
       multiLine: true,
       value: this.state.json,
       onChange: this.changeJSON
-    })), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React.createElement(ItemEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "itemEditor",
+    })), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React.createElement(ItemEditor, {
+      ref: this.itemEditor,
       itemId: this.props.itemId,
       question: this.props.question,
       answerArea: this.props.answerArea,
@@ -24291,10 +24217,8 @@ class EditorPage extends React.Component {
       deviceType: this.props.previewDevice,
       apiOptions: deviceBasedApiOptions,
       previewURL: this.props.previewURL
-    }), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React.createElement(CombinedHintsEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "hintsEditor",
+    }), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React.createElement(CombinedHintsEditor, {
+      ref: this.hintsEditor,
       itemId: this.props.itemId,
       hints: this.props.hints,
       imageUploader: this.props.imageUploader,
@@ -25207,7 +25131,7 @@ const withStickiness = WrappedComponent => {
         sticky: false
       };
       this.updateStickiness = () => {
-        const domNode = ReactDOM__default.findDOMNode(this);
+        const domNode = ReactDOM.findDOMNode(this);
         // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element | Text'.
         const height = domNode.offsetHeight;
         const windowHeight = window.innerHeight;
@@ -25940,6 +25864,7 @@ CategorizerEditor.defaultProps = {
 class BlurInput extends React.Component {
   constructor(props) {
     super(props);
+    this.input = /*#__PURE__*/React.createRef();
     this.handleChange = e => {
       this.setState({
         value: e.target.value
@@ -25959,8 +25884,13 @@ class BlurInput extends React.Component {
       value: nextProps.value
     });
   }
+  focus() {
+    var _this$input$current;
+    (_this$input$current = this.input.current) == null || _this$input$current.focus();
+  }
   render() {
     return /*#__PURE__*/React.createElement("input", {
+      ref: this.input,
       className: this.props.className,
       style: this.props.style,
       type: "text",
@@ -26273,7 +26203,7 @@ class DropdownEditor extends React.Component {
     };
     this.focus = i => {
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs["editor" + i]).focus(); // eslint-disable-line react/no-string-refs
+      ReactDOM.findDOMNode(this.refs["editor" + i]).focus(); // eslint-disable-line react/no-string-refs
       return true;
     };
     this.serialize = () => {
@@ -26548,6 +26478,7 @@ ExampleGraphieWidgetEditor.defaultProps = {
 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({
@@ -26558,9 +26489,8 @@ class ExampleWidgetEditor extends React.Component {
       return Changeable.change.apply(this, 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();
+      var _this$input$current;
+      (_this$input$current = this.input.current) == null || _this$input$current.focus();
       return true;
     };
     this.serialize = () => {
@@ -26570,10 +26500,8 @@ class ExampleWidgetEditor extends React.Component {
   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
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input"
+      onChange: this.handleAnswerChange,
+      ref: this.input
     })));
   }
 }
@@ -26737,7 +26665,7 @@ const SortableArea = createReactClass({
     this._dragItems = this._dragItems || [];
     const items =
     // @ts-expect-error - TS2531 - Object is possibly 'null'
-    ReactDOM__default.findDOMNode(this).querySelectorAll("[draggable=true]");
+    ReactDOM.findDOMNode(this).querySelectorAll("[draggable=true]");
     const oldItems = [];
     const newItems = [];
     for (let i = 0; i < this._dragItems.length; i++) {
@@ -27205,6 +27133,8 @@ const {
 class GradedGroupEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
+    this.editor = /*#__PURE__*/React.createRef();
+    this.hintEditor = /*#__PURE__*/React.createRef();
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
@@ -27215,9 +27145,8 @@ class GradedGroupEditor extends React.Component {
       this.props.onChange({
         hint
       }, () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs["hint-editor"].focus();
+        var _this$hintEditor$curr;
+        (_this$hintEditor$curr = this.hintEditor.current) == null || _this$hintEditor$curr.focus();
       });
     };
     this.handleRemoveHint = e => {
@@ -27226,20 +27155,15 @@ class GradedGroupEditor extends React.Component {
       });
     };
     this.getSaveWarnings = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-      return this.refs.editor.getSaveWarnings();
+      var _this$editor$current;
+      return (_this$editor$current = this.editor.current) == null ? void 0 : _this$editor$current.getSaveWarnings();
     };
     this.serialize = () => {
+      var _this$editor$current2, _this$hintEditor$curr2;
       return _extends({
         title: this.props.title
-      }, this.refs.editor.serialize(), {
-        hint:
-        // eslint-disable-next-line react/no-string-refs
-        this.refs["hint-editor"] &&
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        this.refs["hint-editor"].serialize()
+      }, (_this$editor$current2 = this.editor.current) == null ? void 0 : _this$editor$current2.serialize(), {
+        hint: (_this$hintEditor$curr2 = this.hintEditor.current) == null ? void 0 : _this$hintEditor$curr2.serialize()
       });
     };
   }
@@ -27256,10 +27180,8 @@ class GradedGroupEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
-    }))), /*#__PURE__*/React.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }))), /*#__PURE__*/React.createElement(Editor, {
+      ref: this.editor,
       content: this.props.content,
       widgets: this.props.widgets,
       apiOptions: this.props.apiOptions,
@@ -27280,10 +27202,8 @@ class GradedGroupEditor extends React.Component {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$b.hintsTitle)
-    }, "Hint"), /*#__PURE__*/React.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "hint-editor",
+    }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
+      ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
       widgets: this.props.hint ? this.props.hint.widgets : {},
       apiOptions: this.props.apiOptions,
@@ -27509,7 +27429,7 @@ const GraphSettings = createReactClass({
     };
 
     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    const url = ReactDOM__default.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+    const url = ReactDOM.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
     if (url) {
       Util.getImageSize(url, (width, height) => {
         if (this._isMounted) {
@@ -27985,6 +27905,7 @@ GrapherEditor.defaultProps = {
 class GroupEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
+    this.editor = /*#__PURE__*/React.createRef();
     this._renderMetadataEditor = () => {
       const GroupMetadataEditor = this.props.apiOptions.GroupMetadataEditor;
       return /*#__PURE__*/React.createElement(GroupMetadataEditor, {
@@ -27998,14 +27919,12 @@ class GroupEditor extends React.Component {
       return Changeable.change.apply(this, args);
     };
     this.getSaveWarnings = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-      return this.refs.editor.getSaveWarnings();
+      var _this$editor$current;
+      return (_this$editor$current = this.editor.current) == null ? void 0 : _this$editor$current.getSaveWarnings();
     };
     this.serialize = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-      return _.extend({}, this.refs.editor.serialize(), {
+      var _this$editor$current2;
+      return _.extend({}, (_this$editor$current2 = this.editor.current) == null ? void 0 : _this$editor$current2.serialize(), {
         metadata: this.props.metadata
       });
     };
@@ -28013,10 +27932,8 @@ class GroupEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-group-editor"
-    }, /*#__PURE__*/React.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }, /*#__PURE__*/React.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React.createElement(Editor, {
+      ref: this.editor,
       content: this.props.content,
       widgets: this.props.widgets,
       apiOptions: this.props.apiOptions,
@@ -28472,6 +28389,7 @@ const answerTypes = {
 class InputNumberEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.input = /*#__PURE__*/React.createRef();
     this.handleAnswerChange = str => {
       const value = Util.firstNumericalParse(str) || 0;
       this.props.onChange({
@@ -28479,8 +28397,8 @@ class InputNumberEditor extends React.Component {
       });
     };
     this.focus = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+      var _this$input$current;
+      (_this$input$current = this.input.current) == null || _this$input$current.focus();
       return true;
     };
     this.serialize = () => ({
@@ -28502,10 +28420,8 @@ class InputNumberEditor extends React.Component {
     }, this);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Correct answer:", " ", /*#__PURE__*/React.createElement(BlurInput, {
       value: "" + this.props.value,
-      onChange: this.handleAnswerChange
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input"
+      onChange: this.handleAnswerChange,
+      ref: this.input
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Unsimplified answers", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.simplify,
       onChange: e => {
@@ -30812,7 +30728,7 @@ const {
   colors: colors$3
 } = globalStyles;
 const findAndFocusElement = component => {
-  const DOMNode = ReactDOM__default.findDOMNode(component);
+  const DOMNode = ReactDOM.findDOMNode(component);
   const button = DOMNode;
   // @ts-expect-error - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead?
   if (button.focus) {
@@ -33188,7 +33104,7 @@ class PlotterEditor extends React.Component {
       }
       if (categories) {
         // eslint-disable-next-line react/no-string-refs
-        const node = ReactDOM__default.findDOMNode(this.refs.categories);
+        const node = ReactDOM.findDOMNode(this.refs.categories);
         // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
         node.value = categories.join(", ");
       }
@@ -33237,7 +33153,7 @@ class PlotterEditor extends React.Component {
       });
 
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.maxY).value = maxY; // eslint-disable-line react/no-string-refs
+      ReactDOM.findDOMNode(this.refs.maxY).value = maxY; // eslint-disable-line react/no-string-refs
     };
     this.changeMax = e => {
       this.props.onChange({
@@ -33271,7 +33187,7 @@ class PlotterEditor extends React.Component {
       this.changeCategories(categories);
 
       // eslint-disable-next-line react/no-string-refs
-      const node = ReactDOM__default.findDOMNode(this.refs.categories);
+      const node = ReactDOM.findDOMNode(this.refs.categories);
 
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
       node.value = categories.join(", ");
@@ -33964,13 +33880,13 @@ class TextArea extends React.Component {
 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 = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.input.focus();
+      var _this$input$current;
+      (_this$input$current = this.input.current) == null || _this$input$current.focus();
       return true;
     };
     this.serialize = () => {
@@ -33982,10 +33898,8 @@ class SimpleMarkdownTesterEditor extends React.Component {
       value: this.props.value
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
-      onChange: this.change("value")
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input"
+      onChange: this.change("value"),
+      ref: this.input
     }))));
   }
 }
@@ -34136,9 +34050,10 @@ const Table = TableWidget.widget;
 class TableEditor extends React.Component {
   constructor(...args) {
     super(...args);
+    this.numberOfColumns = /*#__PURE__*/React.createRef();
     this.focus = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.numberOfColumns).focus(); // eslint-disable-line react/no-string-refs
+      var _this$numberOfColumns;
+      (_this$numberOfColumns = this.numberOfColumns.current) == null || _this$numberOfColumns.focus();
     };
     this.onSizeInput = (numRawRows, numRawColumns) => {
       let rows = +numRawRows || 0;
@@ -34194,10 +34109,8 @@ class TableEditor extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React.createElement(NumberInput$1
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "numberOfColumns",
+    }, /*#__PURE__*/React.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React.createElement(NumberInput$1, {
+      ref: this.numberOfColumns,
       value: this.props.columns,
       onChange: val => {
         if (val) {
@@ -35298,10 +35211,10 @@ var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, Dropdown
 class TextInput extends React.Component {
   constructor(...args) {
     super(...args);
+    this.input = /*#__PURE__*/React.createRef();
     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();
+      var _this$input$current;
+      (_this$input$current = this.input.current) == null || _this$input$current.focus();
       return true;
     };
     this.changeValue = e => {
@@ -35312,8 +35225,7 @@ class TextInput extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("input", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
+      ref: this.input,
       value: this.props.value || "",
       onChange: this.changeValue
     });
@@ -35328,6 +35240,7 @@ class TextInput extends React.Component {
 class ExampleWidget extends React.Component {
   constructor(..._args) {
     super(..._args);
+    this.input = /*#__PURE__*/React.createRef();
     /**
      * Tell our parent to update our props.
      */
@@ -35343,9 +35256,8 @@ class ExampleWidget extends React.Component {
      * 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();
+      var _this$input$current2;
+      (_this$input$current2 = this.input.current) == null || _this$input$current2.focus();
       return true;
     };
     /**
@@ -35394,10 +35306,8 @@ class ExampleWidget extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement(TextInput
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
+    return /*#__PURE__*/React.createElement(TextInput, {
+      ref: this.input,
       value: this.props.value
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,