@khanacademy/perseus-editor 2.15.7 → 2.16.0

package/dist/item-editor.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
+import Editor from "./editor";
+import IframeContentRenderer from "./iframe-content-renderer";
+import ItemExtrasEditor from "./item-extras-editor";
 import type { APIOptions, ImageUploader, ChangeHandler } from "@khanacademy/perseus";
 type Props = {
     apiOptions?: APIOptions;
@@ -18,6 +21,9 @@ declare class ItemEditor extends React.Component<Props> {
         onChange: () => void;
         question: Record<any, any>;
     };
+    frame: React.RefObject<IframeContentRenderer>;
+    questionEditor: React.RefObject<Editor>;
+    itemExtrasEditor: React.RefObject<ItemExtrasEditor>;
     updateProps: ChangeHandler;
     triggerPreviewUpdate: (newData?: any) => void;
     handleEditorChange: ChangeHandler;

package/dist/widgets/example-widget-editor.d.ts

@@ -10,6 +10,7 @@ declare class ExampleWidgetEditor extends React.Component<Props> {
     };
     static widgetName: "example-widget";
     static defaultProps: Props;
+    input: React.RefObject<HTMLInputElement>;
     handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
     render(): React.ReactNode;
     change: (arg1: any, arg2: any, arg3: any) => any;

package/dist/widgets/example-widget.d.ts

@@ -1,5 +1,11 @@
 import PropTypes from "prop-types";
 import * as React from "react";
+declare class TextInput extends React.Component<any> {
+    input: React.RefObject<HTMLInputElement>;
+    render(): React.ReactNode;
+    focus: () => boolean;
+    changeValue: (e: any) => void;
+}
 /**
  * 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
@@ -11,6 +17,7 @@ declare class ExampleWidget extends React.Component<any> {
         onChange: PropTypes.Validator<(...args: any[]) => any>;
     };
     static defaultProps: any;
+    input: React.RefObject<TextInput>;
     /**
      * This is the widget's grading function. simpleValidate generally
      * defers to this function.

package/dist/widgets/graded-group-editor.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import * as React from "react";
+import Editor from "../editor";
 type Props = any;
 declare class GradedGroupEditor extends React.Component<Props> {
     static propTypes: {
@@ -40,6 +41,8 @@ declare class GradedGroupEditor extends React.Component<Props> {
     };
     static widgetName: "graded-group";
     static defaultProps: Props;
+    editor: React.RefObject<Editor>;
+    hintEditor: React.RefObject<Editor>;
     change: (arg1: any, arg2: any, arg3: any) => any;
     handleAddHint: () => void;
     handleRemoveHint: (arg1: React.MouseEvent) => void;

package/dist/widgets/group-editor.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import * as React from "react";
+import Editor from "../editor";
 type Props = any;
 declare class GroupEditor extends React.Component<Props> {
     static propTypes: {
@@ -40,6 +41,7 @@ declare class GroupEditor extends React.Component<Props> {
     };
     static widgetName: "group";
     static defaultProps: Props;
+    editor: React.RefObject<Editor>;
     render(): React.ReactNode;
     _renderMetadataEditor: () => React.ReactElement;
     change: (arg1: any, arg2: any, arg3: any) => any;

package/dist/widgets/input-number-editor.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import BlurInput from "../components/blur-input";
 import type { ParsedValue, InputNumber } from "@khanacademy/perseus";
 import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 type Props = {
@@ -31,6 +32,7 @@ type DefaultProps = {
 declare class InputNumberEditor extends React.Component<Props> {
     static widgetName: "input-number";
     static defaultProps: DefaultProps;
+    input: React.RefObject<BlurInput>;
     handleAnswerChange: (arg1: string) => void;
     render(): React.ReactNode;
     focus: () => boolean;

package/dist/widgets/simple-markdown-tester-editor.d.ts

@@ -1,4 +1,10 @@
 import * as React from "react";
+type TextAreaProps = any;
+declare class TextArea extends React.Component<TextAreaProps> {
+    render(): React.ReactNode;
+    focus: () => boolean;
+    changeValue: (e: any) => void;
+}
 type SimpleMarkdownTesterEditorProps = any;
 declare class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEditorProps> {
     static propTypes: {
@@ -6,6 +12,7 @@ declare class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownT
     };
     static widgetName: "simple-markdown-tester";
     static defaultProps: SimpleMarkdownTesterEditorProps;
+    input: React.RefObject<TextArea>;
     render(): React.ReactNode;
     change: (arg1: any, arg2: any, arg3: any) => any;
     focus: () => boolean;

package/dist/widgets/table-editor.d.ts

@@ -1,3 +1,4 @@
+import { components } from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 type Props = any;
@@ -10,6 +11,7 @@ declare class TableEditor extends React.Component<Props> {
     };
     static widgetName: "table";
     static defaultProps: Props;
+    numberOfColumns: React.RefObject<components.NumberInput>;
     focus: () => void;
     render(): React.ReactNode;
     onSizeInput: (arg1: number, arg2: number) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.15.7",
+    "version": "2.16.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,19 +24,19 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.4.0",
-        "@khanacademy/perseus": "^17.6.0",
+        "@khanacademy/math-input": "^16.4.1",
+        "@khanacademy/perseus": "^17.6.1",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-icon": "4.0.0",
+        "@khanacademy/wonder-blocks-icon": "4.0.1",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -51,14 +51,14 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-icon": "4.0.0",
+        "@khanacademy/wonder-blocks-icon": "4.0.1",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",

package/src/components/__tests__/blur-input.test.tsx

@@ -0,0 +1,67 @@
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import BlurInput from "../blur-input";
+
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+describe("BlurInput", () => {
+    it("should render", () => {
+        render(<BlurInput value="Hello world!" onChange={() => {}} />);
+    });
+
+    it("should call onChange prop on blur", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.type(screen.getByRole("textbox"), "Hello Khan Academy!");
+        userEvent.tab();
+
+        // Assert
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onChange prop when typing into input", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.type(screen.getByRole("textbox"), "Hello Khan Academy!");
+        // NO TAB
+
+        // Assert
+        expect(onChange).not.toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onChange prop when pasting into input", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.paste(screen.getByRole("textbox"), "Hello Khan Academy!");
+        // NO TAB
+
+        // Assert
+        expect(onChange).not.toHaveBeenCalledTimes(1);
+    });
+
+    it("should focus input through focus function", () => {
+        const ref = React.createRef<BlurInput>();
+
+        // Arrange
+        render(
+            <BlurInput ref={ref} value="Hello world!" onChange={() => {}} />,
+        );
+
+        // Act
+        ref.current?.focus();
+
+        // Assert
+        expect(screen.getByRole("textbox")).toHaveFocus();
+    });
+});

package/src/components/blur-input.tsx

@@ -27,6 +27,8 @@ type State = {
  */
 // eslint-disable-next-line react/no-unsafe
 class BlurInput extends React.Component<Props, State> {
+    input = React.createRef<HTMLInputElement>();
+
     constructor(props: Props) {
         super(props);
         this.state = {value: this.props.value};
@@ -45,9 +47,14 @@ class BlurInput extends React.Component<Props, State> {
         this.props.onChange(e.target.value);
     };
 
+    focus() {
+        this.input.current?.focus();
+    }
+
     render(): React.ReactNode {
         return (
             <input
+                ref={this.input}
                 className={this.props.className}
                 style={this.props.style}
                 type="text"

package/src/editor-page.tsx

@@ -63,10 +63,11 @@ type State = {
 
 class EditorPage extends React.Component<Props, State> {
     _isMounted: boolean;
-    // @ts-expect-error - TS2564 - Property 'rendererMountNode' has no initializer and is not definitely assigned in the constructor.
-    rendererMountNode: HTMLDivElement;
     renderer: any;
 
+    itemEditor = React.createRef<ItemEditor>();
+    hintsEditor = React.createRef<CombinedHintsEditor>();
+
     static defaultProps: {
         developerMode: boolean;
         jsonMode: boolean;
@@ -102,7 +103,6 @@ class EditorPage extends React.Component<Props, State> {
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
 
-        this.rendererMountNode = document.createElement("div");
         this.updateRenderer();
     }
 
@@ -154,9 +154,7 @@ class EditorPage extends React.Component<Props, State> {
             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: _({
                 item: this.serialize(),
@@ -170,9 +168,7 @@ class EditorPage extends React.Component<Props, State> {
                     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(
                 _(this.props).pick(
                     "workAreaSelector",
@@ -192,12 +188,8 @@ class EditorPage extends React.Component<Props, State> {
     }
 
     getSaveWarnings(): any {
-        // 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);
     }
 
@@ -205,12 +197,8 @@ class EditorPage extends React.Component<Props, State> {
         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.current?.serialize(options), {
+            hints: this.hintsEditor.current?.serialize(options),
         });
     }
 
@@ -302,8 +290,7 @@ class EditorPage extends React.Component<Props, State> {
 
                 {(!this.props.developerMode || !this.props.jsonMode) && (
                     <ItemEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="itemEditor"
+                        ref={this.itemEditor}
                         itemId={this.props.itemId}
                         question={this.props.question}
                         answerArea={this.props.answerArea}
@@ -319,8 +306,7 @@ class EditorPage extends React.Component<Props, State> {
 
                 {(!this.props.developerMode || !this.props.jsonMode) && (
                     <CombinedHintsEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="hintsEditor"
+                        ref={this.hintsEditor}
                         itemId={this.props.itemId}
                         hints={this.props.hints}
                         imageUploader={this.props.imageUploader}

package/src/editor.tsx

@@ -18,7 +18,6 @@ import katex from "katex";
 // eslint-disable-next-line import/no-unassigned-import
 import "./katex-mhchem";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import DragTarget from "./components/drag-target";
@@ -88,8 +87,7 @@ const IMAGE_REGEX = /!\[[^\]]*\]\(([^\s)]+)[^)]*\)/g;
  * ignores captures. If you don't need captures, use String::match
  */
 const allMatches = function (regex: RegExp, str: string) {
-    // @ts-expect-error - TS2702 - 'RegExp' only refers to a type, but is being used as a namespace here.
-    const result: Array<any | RegExp.matchResult> = [];
+    const result: Array<RegExpExecArray> = [];
     // eslint-disable-next-line no-constant-condition
     while (true) {
         const match = regex.exec(str);
@@ -106,7 +104,7 @@ const allMatches = function (regex: RegExp, str: string) {
  * markdown.
  */
 const imageUrlsFromContent = function (content: string) {
-    return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
+    return allMatches(IMAGE_REGEX, content).map((capture) => capture[1]);
 };
 
 type Props = Readonly<{
@@ -157,6 +155,9 @@ class Editor extends React.Component<Props, State> {
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
 
+    underlay = React.createRef<HTMLDivElement>();
+    textarea = React.createRef<HTMLTextAreaElement>();
+
     static defaultProps: DefaultProps = {
         content: "",
         placeholder: "",
@@ -183,11 +184,14 @@ class Editor extends React.Component<Props, State> {
         // 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)
+            // @ts-expect-error - TS2769 - No overload matches this call.
             .on("paste", this._maybePasteWidgets);
     }
 
@@ -200,9 +204,7 @@ class Editor extends React.Component<Props, State> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        // 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.
@@ -211,20 +213,11 @@ class Editor extends React.Component<Props, State> {
         // 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",
@@ -234,7 +227,6 @@ class Editor extends React.Component<Props, State> {
             ) {
                 // 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;
@@ -293,11 +285,9 @@ class Editor extends React.Component<Props, State> {
     };
 
     _handleWidgetEditorRemove: (id: string) => void = (id: string) => {
-        // 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, "")});
+        this.props.onChange({content: textarea?.value.replace(re, "")});
     };
 
     /**
@@ -450,11 +440,12 @@ class Editor extends React.Component<Props, State> {
         // 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);
+            // 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!;
 
-            // 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'.
             const word = Util.textarea.getWordBeforeCursor(textarea);
             const matches = word.string.toLowerCase().match(shortcutRegexp);
 
@@ -645,9 +636,6 @@ class Editor extends React.Component<Props, State> {
         cursorRange: ReadonlyArray<number>,
         widgetType: string,
     ) => {
-        // 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.
@@ -710,11 +698,13 @@ class Editor extends React.Component<Props, State> {
                 content: newContent,
                 widgets: newWidgets,
             },
-            function () {
+            () => {
+                if (!this.textarea.current) {
+                    return;
+                }
+
                 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,
+                    this.textarea.current,
                     // We want to put the cursor after the widget
                     // and after any added newlines
                     newContent.length - postlude.length,
@@ -724,21 +714,21 @@ class Editor extends React.Component<Props, State> {
     };
 
     _addWidget: (widgetType: string) => void = (widgetType: string) => {
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = this.refs.textarea;
+        const textarea = this.textarea.current;
+        if (!textarea) {
+            return;
+        }
 
         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'.
         textarea.focus();
     };
 
-    addTemplate: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: React.SyntheticEvent<HTMLTextAreaElement>,
+    addTemplate: (e: React.SyntheticEvent<HTMLSelectElement>) => void = (
+        e: React.SyntheticEvent<HTMLSelectElement>,
     ) => {
         const templateType = e.currentTarget.value;
         if (templateType === "") {
@@ -820,32 +810,17 @@ class Editor extends React.Component<Props, State> {
     };
 
     focus: () => void = () => {
-        // 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();
         }
     };
 
     focusAndMoveToEnd: () => void = () => {
         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;
         }
     };
@@ -1003,7 +978,6 @@ class Editor extends React.Component<Props, State> {
 
             const insertTemplateString = "Insert template\u2026";
             templatesDropDown = (
-                // @ts-expect-error - TS2322 - Type '(e: SyntheticEvent<HTMLTextAreaElement, Event>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                 <select onChange={this.addTemplate}>
                     <option value="">{insertTemplateString}</option>
                     <option disabled>--</option>
@@ -1044,15 +1018,13 @@ class Editor extends React.Component<Props, State> {
         const completeTextarea = [
             <div
                 className="perseus-textarea-underlay"
-                // eslint-disable-next-line react/no-string-refs
-                ref="underlay"
+                ref={this.underlay}
                 key="underlay"
             >
                 {underlayPieces}
             </div>,
             <textarea
-                // eslint-disable-next-line react/no-string-refs
-                ref="textarea"
+                ref={this.textarea}
                 key="textarea"
                 onChange={this.handleChange}
                 onKeyDown={this._handleKeyDown}