@khanacademy/perseus-editor 2.15.6 → 2.16.0

package/src/hint-editor.tsx

@@ -74,6 +74,8 @@ export class HintEditor extends React.Component<HintEditorProps> {
         showRemoveButton: true,
     };
 
+    editor = React.createRef<Editor>();
+
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void = (
         e: React.ChangeEvent<HTMLInputElement>,
     ) => {
@@ -81,21 +83,15 @@ export class HintEditor extends React.Component<HintEditorProps> {
     };
 
     focus: () => void = () => {
-        // 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: () => any = () => {
-        // 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?: any) => any = (options: any) => {
-        // 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(): React.ReactNode {
@@ -103,8 +99,7 @@ export class HintEditor extends React.Component<HintEditorProps> {
             <div className={"perseus-hint-editor " + this.props.className}>
                 {this.props.showTitle && <div className="pod-title">Hint</div>}
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="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
@@ -192,6 +187,9 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
         highlightLint: false,
     };
 
+    editor = React.createRef<HintEditor>();
+    frame = React.createRef<IframeContentRenderer>();
+
     componentDidMount() {
         this.updatePreview();
     }
@@ -204,9 +202,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
         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,
@@ -223,21 +219,15 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
     };
 
     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: any) => {
-        // 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(): React.ReactNode {
@@ -252,8 +242,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
             >
                 <div className="perseus-editor-left-cell">
                     <HintEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="editor"
+                        ref={this.editor}
                         itemId={this.props.itemId}
                         isFirst={this.props.isFirst}
                         isLast={this.props.isLast}
@@ -274,8 +263,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
                         nochrome={true}
                     >
                         <IframeContentRenderer
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="frame"
+                            ref={this.frame}
                             datasetKey="mobile"
                             datasetValue={isMobile}
                             seamless={true}

package/src/iframe-content-renderer.tsx

@@ -66,6 +66,8 @@ type Props = {
 
 class IframeContentRenderer extends React.Component<Props> {
     _frame: HTMLIFrameElement | null | undefined;
+    container = React.createRef<HTMLDivElement>();
+
     // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     _isMounted: boolean;
     _lastData: any;
@@ -89,10 +91,12 @@ class IframeContentRenderer extends React.Component<Props> {
 
         updateIframeHeight[this.iframeID] = (height: any) => {
             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";
             }
         };
     }
@@ -105,14 +109,12 @@ class IframeContentRenderer extends React.Component<Props> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        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) {
@@ -131,9 +133,7 @@ class IframeContentRenderer extends React.Component<Props> {
     _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");
@@ -159,9 +159,7 @@ class IframeContentRenderer extends React.Component<Props> {
             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;
     }
@@ -181,8 +179,9 @@ class IframeContentRenderer extends React.Component<Props> {
     }
 
     render(): React.ReactNode {
-        // eslint-disable-next-line react/no-string-refs
-        return <div ref="container" style={{width: "100%", height: "100%"}} />;
+        return (
+            <div ref={this.container} style={{width: "100%", height: "100%"}} />
+        );
     }
 }
 

package/src/item-editor.tsx

@@ -42,6 +42,10 @@ class ItemEditor extends React.Component<Props> {
         answerArea: {},
     };
 
+    frame = React.createRef<IframeContentRenderer>();
+    questionEditor = React.createRef<Editor>();
+    itemExtrasEditor = React.createRef<ItemExtrasEditor>();
+
     // Notify the parent that the question or answer area has been updated.
     updateProps: ChangeHandler = (newProps, cb, silent) => {
         const props = _(this.props).pick("question", "answerArea");
@@ -50,9 +54,7 @@ class ItemEditor extends React.Component<Props> {
     };
 
     triggerPreviewUpdate: (newData?: any) => void = (newData: any) => {
-        // 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: ChangeHandler = (newProps, cb, silent) => {
@@ -66,9 +68,7 @@ class ItemEditor extends React.Component<Props> {
     };
 
     getSaveWarnings: () => any = () => {
-        // 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?: any) => {
@@ -80,12 +80,8 @@ class ItemEditor extends React.Component<Props> {
         question: any;
     } = (options: any) => {
         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,
         };
     };
@@ -100,8 +96,7 @@ class ItemEditor extends React.Component<Props> {
                     <div className="perseus-editor-left-cell">
                         <div className="pod-title">Question</div>
                         <Editor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="questionEditor"
+                            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
@@ -124,8 +119,7 @@ class ItemEditor extends React.Component<Props> {
                                 nochrome={true}
                             >
                                 <IframeContentRenderer
-                                    // eslint-disable-next-line react/no-string-refs
-                                    ref="frame"
+                                    ref={this.frame}
                                     key={this.props.deviceType}
                                     datasetKey="mobile"
                                     datasetValue={isMobile}
@@ -146,8 +140,7 @@ class ItemEditor extends React.Component<Props> {
                     <div className="perseus-editor-left-cell">
                         <div className="pod-title">Question extras</div>
                         <ItemExtrasEditor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="itemExtrasEditor"
+                            ref={this.itemExtrasEditor}
                             onChange={this.handleItemExtrasChange}
                             {...this.props.answerArea}
                         />

package/src/util/register-all-widgets-and-editors-for-testing.test.ts

@@ -6,7 +6,9 @@ describe("Registering all widgets and editors", () => {
     it("should have an editor for every widget", () => {
         registerAllWidgetsAndEditorsForTesting();
 
-        const allWidgetsTypes = Widgets.getAllWidgetTypes();
+        const allWidgetsTypes = Widgets.getAllWidgetTypes()
+            // Auto correct is a special kind of widget, it DOES NOT need an editor
+            .filter((a) => a !== "deprecated-standin");
 
         expect(allWidgetsTypes).not.toContain("undefined");
 

package/src/widgets/example-widget-editor.tsx

@@ -19,6 +19,8 @@ class ExampleWidgetEditor extends React.Component<Props> {
         correct: "",
     };
 
+    input = React.createRef<HTMLInputElement>();
+
     handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
         event,
     ) => {
@@ -36,8 +38,7 @@ class ExampleWidgetEditor extends React.Component<Props> {
                     <input
                         value={this.props.correct}
                         onChange={this.handleAnswerChange}
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="input"
+                        ref={this.input}
                     />
                 </label>
             </div>
@@ -49,9 +50,7 @@ class ExampleWidgetEditor extends React.Component<Props> {
     };
 
     focus: () => boolean = () => {
-        // 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;
     };
 

package/src/widgets/example-widget.tsx

@@ -16,11 +16,12 @@ import _ from "underscore";
 import type {WidgetExports} from "@khanacademy/perseus";
 
 class TextInput extends React.Component<any> {
+    input = React.createRef<HTMLInputElement>();
+
     render(): React.ReactNode {
         return (
             <input
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={this.input}
                 value={this.props.value || ""}
                 onChange={this.changeValue}
             />
@@ -28,9 +29,7 @@ class TextInput extends React.Component<any> {
     }
 
     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;
     };
 
@@ -56,6 +55,8 @@ class ExampleWidget extends React.Component<any> {
         value: "",
     };
 
+    input = React.createRef<TextInput>();
+
     /**
      * This is the widget's grading function. simpleValidate generally
      * defers to this function.
@@ -98,8 +99,7 @@ class ExampleWidget extends React.Component<any> {
     render(): React.ReactNode {
         return (
             <TextInput
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={this.input}
                 value={this.props.value}
                 // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                 onChange={this.change("value")}
@@ -117,9 +117,7 @@ class ExampleWidget extends React.Component<any> {
      * focused on page load.
      */
     focus: () => boolean = () => {
-        // 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;
     };
 

package/src/widgets/graded-group-editor.tsx

@@ -33,6 +33,9 @@ class GradedGroupEditor extends React.Component<Props> {
         hint: null,
     };
 
+    editor = React.createRef<Editor>();
+    hintEditor = React.createRef<Editor>();
+
     change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
@@ -40,9 +43,7 @@ class GradedGroupEditor extends React.Component<Props> {
     handleAddHint: () => void = () => {
         const hint = {content: ""} as const;
         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();
         });
     };
 
@@ -65,8 +66,7 @@ class GradedGroupEditor extends React.Component<Props> {
                     </label>
                 </div>
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="editor"
+                    ref={this.editor}
                     content={this.props.content}
                     widgets={this.props.widgets}
                     apiOptions={this.props.apiOptions}
@@ -91,8 +91,7 @@ class GradedGroupEditor extends React.Component<Props> {
                     <div className="perseus-hint-editor">
                         <div className={css(styles.hintsTitle)}>Hint</div>
                         <Editor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="hint-editor"
+                            ref={this.hintEditor}
                             content={
                                 this.props.hint ? this.props.hint.content : ""
                             }
@@ -127,9 +126,7 @@ class GradedGroupEditor extends React.Component<Props> {
     }
 
     getSaveWarnings: () => any = () => {
-        // 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: () => {
@@ -138,15 +135,8 @@ class GradedGroupEditor extends React.Component<Props> {
     } = () => {
         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(),
         };
     };
 }

package/src/widgets/group-editor.tsx

@@ -30,6 +30,8 @@ class GroupEditor extends React.Component<Props> {
         metadata: undefined,
     };
 
+    editor = React.createRef<Editor>();
+
     render(): React.ReactNode {
         return (
             <div className="perseus-group-editor">
@@ -39,8 +41,7 @@ class GroupEditor extends React.Component<Props> {
                     {this._renderMetadataEditor()}
                 </div>
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="editor"
+                    ref={this.editor}
                     content={this.props.content}
                     widgets={this.props.widgets}
                     apiOptions={this.props.apiOptions}
@@ -69,15 +70,11 @@ class GroupEditor extends React.Component<Props> {
     };
 
     getSaveWarnings: () => ReadonlyArray<any> = () => {
-        // 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: () => any = () => {
-        // 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(), {
+        return _.extend({}, this.editor.current?.serialize(), {
             metadata: this.props.metadata,
         });
     };

package/src/widgets/input-number-editor.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/sort-comp */
 import {components, Util} from "@khanacademy/perseus";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
@@ -90,6 +89,8 @@ class InputNumberEditor extends React.Component<Props> {
         rightAlign: false,
     };
 
+    input = React.createRef<BlurInput>();
+
     handleAnswerChange: (arg1: string) => void = (str) => {
         const value = Util.firstNumericalParse(str) || 0;
         this.props.onChange({value: value});
@@ -116,8 +117,7 @@ class InputNumberEditor extends React.Component<Props> {
                         <BlurInput
                             value={"" + this.props.value}
                             onChange={this.handleAnswerChange}
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="input"
+                            ref={this.input}
                         />
                     </label>
                 </div>
@@ -262,8 +262,7 @@ class InputNumberEditor extends React.Component<Props> {
     }
 
     focus: () => boolean = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+        this.input.current?.focus();
         return true;
     };
 

package/src/widgets/simple-markdown-tester-editor.tsx

@@ -49,6 +49,8 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
         value: "",
     };
 
+    input = React.createRef<TextArea>();
+
     render(): React.ReactNode {
         return (
             <div>
@@ -59,8 +61,7 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
                             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"
+                            ref={this.input}
                         />
                     </div>
                 </label>
@@ -73,9 +74,7 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
     };
 
     focus: () => boolean = () => {
-        // 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;
     };
 

package/src/widgets/table-editor.tsx

@@ -2,7 +2,6 @@
 import {components, TableWidget, Util} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import Editor from "../editor";
@@ -36,9 +35,10 @@ class TableEditor extends React.Component<Props> {
         };
     })();
 
+    numberOfColumns = React.createRef<components.NumberInput>();
+
     focus: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.numberOfColumns).focus(); // eslint-disable-line react/no-string-refs
+        this.numberOfColumns.current?.focus();
     };
 
     render(): React.ReactNode {
@@ -63,8 +63,7 @@ class TableEditor extends React.Component<Props> {
                     <label>
                         Number of columns:{" "}
                         <NumberInput
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="numberOfColumns"
+                            ref={this.numberOfColumns}
                             value={this.props.columns}
                             onChange={(val) => {
                                 if (val) {