@khanacademy/perseus-editor 2.15.6 → 2.16.0

package/dist/index.js

@@ -12,11 +12,11 @@ var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var Color = require('@khanacademy/wonder-blocks-color');
 var aphrodite = require('aphrodite');
 var $ = require('jquery');
-var ReactDOM = require('react-dom');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
+var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
@@ -53,10 +53,9 @@ var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactCl
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var Typography__namespace = /*#__PURE__*/_interopNamespace(Typography);
@@ -65,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.15.6";
+const libVersion = "2.16.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20894,7 +20893,6 @@ const IMAGE_REGEX$1 = /!\[[^\]]*\]\(([^\s)]+)[^)]*\)/g;
  * ignores captures. If you don't need captures, use String::match
  */
 const allMatches = function (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) {
@@ -20912,10 +20910,12 @@ const allMatches = function (regex, str) {
  * markdown.
  */
 const imageUrlsFromContent = function (content) {
-  return ___default["default"].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__namespace.Component {
+  underlay = /*#__PURE__*/React__namespace.createRef();
+  textarea = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     content: "",
     placeholder: "",
@@ -20940,11 +20940,15 @@ class Editor extends React__namespace.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.
-    $__default["default"](ReactDOM__namespace.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
+    $__default["default"](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
@@ -20957,9 +20961,7 @@ class Editor extends React__namespace.Component {
     }
   }
   componentDidUpdate(prevProps) {
-    // TODO(alpert): Maybe fix React so this isn't necessary
-    // eslint-disable-next-line react/no-string-refs
-    const textarea = ReactDOM__namespace.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.
@@ -20968,24 +20970,14 @@ class Editor extends React__namespace.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;
@@ -21032,12 +21024,10 @@ class Editor extends React__namespace.Component {
     }, cb, silent);
   };
   _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?.value.replace(re, "")
     });
   };
 
@@ -21185,11 +21175,11 @@ class Editor extends React__namespace.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__namespace.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 = perseus.Util.textarea.getWordBeforeCursor(textarea);
       const matches = word.string.toLowerCase().match(shortcutRegexp);
       if (matches != null) {
@@ -21322,9 +21312,6 @@ class Editor extends React__namespace.Component {
     return safeWidgetMapping;
   };
   _addWidgetToContent = (oldContent, cursorRange, widgetType) => {
-    // eslint-disable-next-line react/no-string-refs
-    const textarea = ReactDOM__namespace.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.
@@ -21371,23 +21358,22 @@ class Editor extends React__namespace.Component {
     this.props.onChange({
       content: newContent,
       widgets: newWidgets
-    }, function () {
-      perseus.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;
+      }
+      perseus.Util.textarea.moveCursor(this.textarea.current,
       // We want to put the cursor after the widget
       // and after any added newlines
       newContent.length - postlude.length);
     });
   };
   _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();
   };
   addTemplate = e => {
@@ -21441,31 +21427,16 @@ class Editor extends React__namespace.Component {
     return warnings;
   };
   focus = () => {
-    // eslint-disable-next-line react/no-string-refs
-    const textarea = ReactDOM__namespace.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();
     }
   };
   focusAndMoveToEnd = () => {
     this.focus();
-    // eslint-disable-next-line react/no-string-refs
-    const textarea = ReactDOM__namespace.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;
     }
   };
@@ -21589,10 +21560,7 @@ class Editor extends React__namespace.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__namespace.createElement("select", {
+      templatesDropDown = /*#__PURE__*/React__namespace.createElement("select", {
         onChange: this.addTemplate
       }, /*#__PURE__*/React__namespace.createElement("option", {
         value: ""
@@ -21631,14 +21599,11 @@ class Editor extends React__namespace.Component {
       key: "end"
     }));
     const completeTextarea = [/*#__PURE__*/React__namespace.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__namespace.createElement("textarea", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "textarea",
+      ref: this.textarea,
       key: "textarea",
       onChange: this.handleChange,
       onKeyDown: this._handleKeyDown,
@@ -21725,6 +21690,8 @@ window.addEventListener("message", event => {
   }
 });
 class IframeContentRenderer extends React__namespace.Component {
+  container = /*#__PURE__*/React__namespace.createRef();
+
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
 
   // @ts-expect-error - TS2564 - Property '_lastHeight' has no initializer and is not definitely assigned in the constructor.
@@ -21743,10 +21710,8 @@ class IframeContentRenderer extends React__namespace.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";
       }
     };
   }
@@ -21754,14 +21719,12 @@ class IframeContentRenderer extends React__namespace.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
@@ -21776,9 +21739,7 @@ class IframeContentRenderer extends React__namespace.Component {
   _prepareFrame() {
     // 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);
+      this.container.current?.removeChild(this._frame);
     }
     const frame = document.createElement("iframe");
     frame.style.width = "100%";
@@ -21800,10 +21761,7 @@ class IframeContentRenderer extends React__namespace.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.current?.appendChild(frame);
     this._frame = frame;
   }
   sendNewData(data) {
@@ -21820,9 +21778,8 @@ class IframeContentRenderer extends React__namespace.Component {
     }
   }
   render() {
-    // eslint-disable-next-line react/no-string-refs
     return /*#__PURE__*/React__namespace.createElement("div", {
-      ref: "container",
+      ref: this.container,
       style: {
         width: "100%",
         height: "100%"
@@ -23535,35 +23492,28 @@ class HintEditor extends React__namespace.Component {
     showTitle: true,
     showRemoveButton: true
   };
+  editor = /*#__PURE__*/React__namespace.createRef();
   handleChange = e => {
     this.props.onChange({
       replace: e.target.checked
     });
   };
   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();
+    this.editor.current?.focus();
   };
   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();
+    return this.editor.current?.getSaveWarnings();
   };
   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);
+    return this.editor.current?.serialize(options);
   };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor " + this.props.className
     }, this.props.showTitle && /*#__PURE__*/React__namespace.createElement("div", {
       className: "pod-title"
-    }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor"
+    }, "Hint"), /*#__PURE__*/React__namespace.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
@@ -23608,6 +23558,8 @@ class CombinedHintEditor extends React__namespace.Component {
   static defaultProps = {
     highlightLint: false
   };
+  editor = /*#__PURE__*/React__namespace.createRef();
+  frame = /*#__PURE__*/React__namespace.createRef();
   componentDidMount() {
     this.updatePreview();
   }
@@ -23616,10 +23568,7 @@ class CombinedHintEditor extends React__namespace.Component {
   }
   updatePreview = () => {
     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?.sendNewData({
       type: "hint",
       data: {
         hint: this.props.hint,
@@ -23635,19 +23584,13 @@ class CombinedHintEditor extends React__namespace.Component {
     });
   };
   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();
+    return this.editor.current?.getSaveWarnings();
   };
   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);
+    return this.editor.current?.serialize(options);
   };
   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();
+    this.editor.current?.focus();
   };
   render() {
     const isMobile = this.props.deviceType === "phone" || this.props.deviceType === "tablet";
@@ -23655,10 +23598,8 @@ class CombinedHintEditor extends React__namespace.Component {
       className: "perseus-combined-hint-editor " + "perseus-editor-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-editor-left-cell"
-    }, /*#__PURE__*/React__namespace.createElement(HintEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }, /*#__PURE__*/React__namespace.createElement(HintEditor, {
+      ref: this.editor,
       itemId: this.props.itemId,
       isFirst: this.props.isFirst,
       isLast: this.props.isLast,
@@ -23676,10 +23617,8 @@ class CombinedHintEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(DeviceFramer, {
       deviceType: this.props.deviceType,
       nochrome: true
-    }, /*#__PURE__*/React__namespace.createElement(IframeContentRenderer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "frame",
+    }, /*#__PURE__*/React__namespace.createElement(IframeContentRenderer, {
+      ref: this.frame,
       datasetKey: "mobile",
       datasetValue: isMobile,
       seamless: true,
@@ -23998,6 +23937,9 @@ class ItemEditor extends React__namespace.Component {
     question: {},
     answerArea: {}
   };
+  frame = /*#__PURE__*/React__namespace.createRef();
+  questionEditor = /*#__PURE__*/React__namespace.createRef();
+  itemExtrasEditor = /*#__PURE__*/React__namespace.createRef();
 
   // Notify the parent that the question or answer area has been updated.
   updateProps = (newProps, cb, silent) => {
@@ -24005,9 +23947,7 @@ class ItemEditor extends React__namespace.Component {
     this.props.onChange(___default["default"](props).extend(newProps), cb, silent);
   };
   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);
+    this.frame.current?.sendNewData(newData);
   };
   handleEditorChange = (newProps, cb, silent) => {
     const question = ___default["default"].extend({}, this.props.question, newProps);
@@ -24022,18 +23962,12 @@ class ItemEditor extends React__namespace.Component {
     }, cb, silent);
   };
   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();
+    return this.questionEditor.current?.getSaveWarnings();
   };
   serialize = options => {
     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.current?.serialize(options),
+      answerArea: this.itemExtrasEditor.current?.serialize(),
       itemDataVersion: ITEM_DATA_VERSION
     };
   };
@@ -24047,10 +23981,8 @@ class ItemEditor extends React__namespace.Component {
       className: "perseus-editor-left-cell"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "pod-title"
-    }, "Question"), /*#__PURE__*/React__namespace.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , _extends({
-      ref: "questionEditor"
+    }, "Question"), /*#__PURE__*/React__namespace.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
@@ -24070,10 +24002,8 @@ class ItemEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(DeviceFramer, {
       deviceType: this.props.deviceType,
       nochrome: true
-    }, /*#__PURE__*/React__namespace.createElement(IframeContentRenderer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "frame",
+    }, /*#__PURE__*/React__namespace.createElement(IframeContentRenderer, {
+      ref: this.frame,
       key: this.props.deviceType,
       datasetKey: "mobile",
       datasetValue: isMobile,
@@ -24091,10 +24021,8 @@ class ItemEditor extends React__namespace.Component {
       className: "perseus-editor-left-cell"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "pod-title"
-    }, "Question extras"), /*#__PURE__*/React__namespace.createElement(ItemExtrasEditor
-    // eslint-disable-next-line react/no-string-refs
-    , _extends({
-      ref: "itemExtrasEditor",
+    }, "Question extras"), /*#__PURE__*/React__namespace.createElement(ItemExtrasEditor, _extends({
+      ref: this.itemExtrasEditor,
       onChange: this.handleItemExtrasChange
     }, this.props.answerArea))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-editor-right-cell"
@@ -24108,8 +24036,8 @@ const {
   HUD
 } = perseus.components;
 class EditorPage extends React__namespace.Component {
-  // @ts-expect-error - TS2564 - Property 'rendererMountNode' has no initializer and is not definitely assigned in the constructor.
-
+  itemEditor = /*#__PURE__*/React__namespace.createRef();
+  hintsEditor = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     developerMode: false,
     jsonMode: false,
@@ -24130,7 +24058,6 @@ class EditorPage extends React__namespace.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() {
@@ -24173,10 +24100,7 @@ class EditorPage extends React__namespace.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.current?.triggerPreviewUpdate({
       type: "question",
       data: ___default["default"]({
         item: this.serialize(),
@@ -24190,9 +24114,7 @@ class EditorPage extends React__namespace.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.current?.getSaveWarnings()
       }).extend(___default["default"](this.props).pick("workAreaSelector", "solutionAreaSelector", "hintsAreaSelector", "problemNum"))
     });
   }
@@ -24203,24 +24125,16 @@ class EditorPage extends React__namespace.Component {
     };
   }
   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();
+    const issues1 = this.itemEditor.current?.getSaveWarnings();
+    const issues2 = this.hintsEditor.current?.getSaveWarnings();
     return issues1.concat(issues2);
   }
   serialize(options) {
     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 ___default["default"].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 ___default["default"].extend(this.itemEditor.current?.serialize(options), {
+      hints: this.hintsEditor.current?.serialize(options)
     });
   }
   handleChange = (toChange, cb, silent) => {
@@ -24278,10 +24192,8 @@ class EditorPage extends React__namespace.Component {
       multiLine: true,
       value: this.state.json,
       onChange: this.changeJSON
-    })), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React__namespace.createElement(ItemEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "itemEditor",
+    })), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React__namespace.createElement(ItemEditor, {
+      ref: this.itemEditor,
       itemId: this.props.itemId,
       question: this.props.question,
       answerArea: this.props.answerArea,
@@ -24292,10 +24204,8 @@ class EditorPage extends React__namespace.Component {
       deviceType: this.props.previewDevice,
       apiOptions: deviceBasedApiOptions,
       previewURL: this.props.previewURL
-    }), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React__namespace.createElement(CombinedHintsEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "hintsEditor",
+    }), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React__namespace.createElement(CombinedHintsEditor, {
+      ref: this.hintsEditor,
       itemId: this.props.itemId,
       hints: this.props.hints,
       imageUploader: this.props.imageUploader,
@@ -25916,6 +25826,7 @@ class CategorizerEditor extends React__namespace.Component {
  * to its parent on blur.
  */ // eslint-disable-next-line react/no-unsafe
 class BlurInput extends React__namespace.Component {
+  input = /*#__PURE__*/React__namespace.createRef();
   constructor(props) {
     super(props);
     this.state = {
@@ -25937,8 +25848,12 @@ class BlurInput extends React__namespace.Component {
   handleBlur = e => {
     this.props.onChange(e.target.value);
   };
+  focus() {
+    this.input.current?.focus();
+  }
   render() {
     return /*#__PURE__*/React__namespace.createElement("input", {
+      ref: this.input,
       className: this.props.className,
       style: this.props.style,
       type: "text",
@@ -26559,6 +26474,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
   static defaultProps = {
     correct: ""
   };
+  input = /*#__PURE__*/React__namespace.createRef();
   handleAnswerChange = event => {
     // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
     this.change({
@@ -26568,10 +26484,8 @@ class ExampleWidgetEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Correct answer:", /*#__PURE__*/React__namespace.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
     })));
   }
   change = (() => {
@@ -26584,9 +26498,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
     };
   })();
   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();
+    this.input.current?.focus();
     return true;
   };
   serialize = () => {
@@ -27241,6 +27153,8 @@ class GradedGroupEditor extends React__namespace.Component {
     images: {},
     hint: null
   };
+  editor = /*#__PURE__*/React__namespace.createRef();
+  hintEditor = /*#__PURE__*/React__namespace.createRef();
   change = (() => {
     var _this = this;
     return function () {
@@ -27257,9 +27171,7 @@ class GradedGroupEditor extends React__namespace.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();
+      this.hintEditor.current?.focus();
     });
   };
   handleRemoveHint = e => {
@@ -27280,10 +27192,8 @@ class GradedGroupEditor extends React__namespace.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
-    }))), /*#__PURE__*/React__namespace.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }))), /*#__PURE__*/React__namespace.createElement(Editor, {
+      ref: this.editor,
       content: this.props.content,
       widgets: this.props.widgets,
       apiOptions: this.props.apiOptions,
@@ -27304,10 +27214,8 @@ class GradedGroupEditor extends React__namespace.Component {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$b.hintsTitle)
-    }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "hint-editor",
+    }, "Hint"), /*#__PURE__*/React__namespace.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,
@@ -27327,22 +27235,13 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3), " Remove this hint")));
   }
   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();
+    return this.editor.current?.getSaveWarnings();
   };
   serialize = () => {
     return {
       title: this.props.title,
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-      ...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.current?.serialize(),
+      hint: this.hintEditor.current?.serialize()
     };
   };
 }
@@ -28046,13 +27945,12 @@ class GroupEditor extends React__namespace.Component {
     // `the GroupMetadataEditor`
     metadata: undefined
   };
+  editor = /*#__PURE__*/React__namespace.createRef();
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-group-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React__namespace.createElement(Editor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "editor",
+    }, /*#__PURE__*/React__namespace.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React__namespace.createElement(Editor, {
+      ref: this.editor,
       content: this.props.content,
       widgets: this.props.widgets,
       apiOptions: this.props.apiOptions,
@@ -28081,14 +27979,10 @@ class GroupEditor extends React__namespace.Component {
     };
   })();
   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();
+    return this.editor.current?.getSaveWarnings();
   };
   serialize = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-    return ___default["default"].extend({}, this.refs.editor.serialize(), {
+    return ___default["default"].extend({}, this.editor.current?.serialize(), {
       metadata: this.props.metadata
     });
   };
@@ -28550,6 +28444,7 @@ class InputNumberEditor extends React__namespace.Component {
     answerType: "number",
     rightAlign: false
   };
+  input = /*#__PURE__*/React__namespace.createRef();
   handleAnswerChange = str => {
     const value = perseus.Util.firstNumericalParse(str) || 0;
     this.props.onChange({
@@ -28565,10 +28460,8 @@ class InputNumberEditor extends React__namespace.Component {
     }, this);
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Correct answer:", " ", /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Unsimplified answers", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.simplify,
       onChange: e => {
@@ -28642,8 +28535,7 @@ class InputNumberEditor extends React__namespace.Component {
     }), " ", "Right alignment")));
   }
   focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+    this.input.current?.focus();
     return true;
   };
   serialize = () => ({
@@ -34132,15 +34024,14 @@ class SimpleMarkdownTesterEditor extends React__namespace.Component {
   static defaultProps = {
     value: ""
   };
+  input = /*#__PURE__*/React__namespace.createRef();
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Simple markdown contents:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(TextArea, {
       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
     }))));
   }
   change = (() => {
@@ -34153,9 +34044,7 @@ class SimpleMarkdownTesterEditor extends React__namespace.Component {
     };
   })();
   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();
+    this.input.current?.focus();
     return true;
   };
   serialize = () => {
@@ -34324,11 +34213,10 @@ class TableEditor extends React__namespace.Component {
       answers: blankAnswers
     };
   }();
+  numberOfColumns = /*#__PURE__*/React__namespace.createRef();
   focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.numberOfColumns).focus(); // eslint-disable-line react/no-string-refs
+    this.numberOfColumns.current?.focus();
   };
-
   render() {
     const tableProps = ___default["default"].pick(this.props, "headers", "answers", "onChange", "apiOptions");
     ___default["default"].extend(tableProps, {
@@ -34340,10 +34228,8 @@ class TableEditor extends React__namespace.Component {
     });
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$1
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "numberOfColumns",
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$1, {
+      ref: this.numberOfColumns,
       value: this.props.columns,
       onChange: val => {
         if (val) {
@@ -35467,18 +35353,16 @@ var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, Dropdown
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextInput extends React__namespace.Component {
+  input = /*#__PURE__*/React__namespace.createRef();
   render() {
     return /*#__PURE__*/React__namespace.createElement("input", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
+      ref: this.input,
       value: this.props.value || "",
       onChange: this.changeValue
     });
   }
   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();
+    this.input.current?.focus();
     return true;
   };
   changeValue = e => {
@@ -35501,6 +35385,7 @@ class ExampleWidget extends React__namespace.Component {
   static defaultProps = {
     value: ""
   };
+  input = /*#__PURE__*/React__namespace.createRef();
 
   /**
    * This is the widget's grading function. simpleValidate generally
@@ -35545,10 +35430,8 @@ class ExampleWidget extends React__namespace.Component {
     };
   })();
   render() {
-    return /*#__PURE__*/React__namespace.createElement(TextInput
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
+    return /*#__PURE__*/React__namespace.createElement(TextInput, {
+      ref: this.input,
       value: this.props.value
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -35565,9 +35448,7 @@ class ExampleWidget extends React__namespace.Component {
    * focused on page load.
    */
   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();
+    this.input.current?.focus();
     return true;
   };