@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/widgets/{example-graphie-widget.jsx → example-graphie-widget.tsx}

@@ -1,5 +1,4 @@
-/* eslint-disable no-unused-vars, react/forbid-prop-types, react/sort-comp */
-// @flow
+/* eslint-disable @typescript-eslint/no-unused-vars, react/forbid-prop-types, react/sort-comp */
 /**
  * This is an example graphie-using widget
  *
@@ -22,10 +21,10 @@ import type {Coord, WidgetExports} from "@khanacademy/perseus";
 
 const {Graphie} = components;
 
-// $FlowFixMe[prop-missing]
+// @ts-expect-error [FEI-5003] - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint = Graphie.MovablePoint;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 /**
  * This is the widget's renderer. It shows up in the right column
@@ -64,7 +63,7 @@ class ExampleGraphieWidget extends React.Component<Props> {
     /**
      * This is the widget's grading function
      */
-    static validate(state: $FlowFixMe, rubric: $FlowFixMe): $FlowFixMe {
+    static validate(state: any, rubric: any): any {
         if (state.coord == null) {
             return {
                 type: "invalid",
@@ -87,11 +86,11 @@ class ExampleGraphieWidget extends React.Component<Props> {
         };
     }
 
-    getUserInput: () => $FlowFixMe = () => {
+    getUserInput: () => any = () => {
         return WidgetJsonifyDeprecated.getUserInput.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <Graphie
                 // eslint-disable-next-line react/no-string-refs
@@ -117,17 +116,18 @@ class ExampleGraphieWidget extends React.Component<Props> {
         );
     }
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    movePoint: (Coord) => void = (newCoord) => {
+    movePoint: (arg1: Coord) => void = (newCoord) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({
             coord: newCoord,
         });
     };
 
-    _getGridConfig: ($FlowFixMe) => $FlowFixMe = (options) => {
+    _getGridConfig: (arg1: any) => any = (options) => {
         return _.map(options.step, function (step, i) {
             return Util.gridDimensionConfig(
                 step,
@@ -138,10 +138,7 @@ class ExampleGraphieWidget extends React.Component<Props> {
         });
     };
 
-    setupGraphie: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
-        graphie,
-        options,
-    ) => {
+    setupGraphie: (arg1: any, arg2: any) => any = (graphie, options) => {
         const gridConfig = this._getGridConfig(options);
         graphie.graphInit({
             range: options.range,
@@ -158,7 +155,7 @@ class ExampleGraphieWidget extends React.Component<Props> {
         graphie.label([0, options.range[1][1]], options.labels[1], "above");
     };
 
-    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+    simpleValidate: (arg1: any) => any = (rubric) => {
         return ExampleGraphieWidget.validate(this.getUserInput(), rubric);
     };
 }
@@ -167,9 +164,9 @@ class ExampleGraphieWidget extends React.Component<Props> {
  * For this widget to work, we must export it.
  * We also must import this file in src/all-widgets.js
  */
-export default ({
+export default {
     name: "example-graphie-widget",
     displayName: "Example Graphie Widget",
     hidden: true, // Hides this widget from the Perseus.Editor widget select
     widget: ExampleGraphieWidget,
-}: WidgetExports<typeof ExampleGraphieWidget>);
+} as WidgetExports<typeof ExampleGraphieWidget>;

package/src/widgets/{example-widget-editor.jsx → example-widget-editor.tsx}

@@ -1,9 +1,8 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {Changeable, EditorJsonify} from "@khanacademy/perseus";
 import * as React from "react";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 /**
  * This is the widget's editor. This is what shows up on the left side
@@ -14,19 +13,22 @@ class ExampleWidgetEditor extends React.Component<Props> {
         ...Changeable.propTypes,
     };
 
-    static widgetName: "example-widget" = "example-widget";
+    static widgetName = "example-widget" as const;
 
     static defaultProps: Props = {
         correct: "",
     };
 
-    handleAnswerChange: (SyntheticInputEvent<>) => void = (event) => {
+    handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        event,
+    ) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({
             correct: event.target.value,
         });
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <label>
@@ -42,17 +44,18 @@ class ExampleWidgetEditor extends React.Component<Props> {
         );
     }
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
     focus: () => boolean = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
         return true;
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 }

package/src/widgets/{example-widget.jsx → example-widget.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 /**
  * This is a simple number-entry widget
  * It is not as powerful as number-input, but has a simpler, more
@@ -15,8 +14,8 @@ import _ from "underscore";
 
 import type {WidgetExports} from "@khanacademy/perseus";
 
-class TextInput extends React.Component<$FlowFixMe> {
-    render(): React.Node {
+class TextInput extends React.Component<any> {
+    render(): React.ReactNode {
         return (
             <input
                 // eslint-disable-next-line react/no-string-refs
@@ -29,11 +28,12 @@ class TextInput extends React.Component<$FlowFixMe> {
 
     focus = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
         return true;
     };
 
-    changeValue = (e) => {
+    changeValue = (e: any) => {
         // Translating from the js event e to the value
         // of the textbox to send to onChange
         this.props.onChange(e.target.value);
@@ -45,13 +45,13 @@ class TextInput extends React.Component<$FlowFixMe> {
  * in the demo, and is what is visible to users, and where
  * users enter their answers.
  */
-class ExampleWidget extends React.Component<$FlowFixMe> {
+class ExampleWidget extends React.Component<any> {
     static propTypes = {
         ...Changeable.propTypes,
         value: PropTypes.string,
     };
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         value: "",
     };
 
@@ -62,7 +62,7 @@ class ExampleWidget extends React.Component<$FlowFixMe> {
      * value is usually the result of getUserInput on the widget
      * rubric is the result of calling serialize() on the editor
      */
-    static validate(value: string, rubric: $FlowFixMe): $FlowFixMe {
+    static validate(value: string, rubric: any): any {
         if (value === "") {
             return {
                 type: "invalid",
@@ -90,16 +90,17 @@ class ExampleWidget extends React.Component<$FlowFixMe> {
     /**
      * Tell our parent to update our props.
      */
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <TextInput
                 // eslint-disable-next-line react/no-string-refs
                 ref="input"
                 value={this.props.value}
+                // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                 onChange={this.change("value")}
             />
         );
@@ -116,6 +117,7 @@ class ExampleWidget extends React.Component<$FlowFixMe> {
      */
     focus: () => boolean = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus();
         return true;
     };
@@ -132,7 +134,7 @@ class ExampleWidget extends React.Component<$FlowFixMe> {
      *     message: null
      * }
      */
-    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+    simpleValidate: (arg1: any) => any = (rubric) => {
         return ExampleWidget.validate(this.getUserInput(), rubric);
     };
 }
@@ -140,7 +142,7 @@ class ExampleWidget extends React.Component<$FlowFixMe> {
 /**
  * For this widget to work, we must import this file in src/all-widgets.js
  */
-export default ({
+export default {
     name: "example-widget",
     displayName: "Example Widget",
 
@@ -150,4 +152,4 @@ export default ({
 
     hidden: true, // Hides this widget from the Perseus.Editor widget select
     widget: ExampleWidget,
-}: WidgetExports<typeof ExampleWidget>);
+} as WidgetExports<typeof ExampleWidget>;

package/src/widgets/{explanation-editor.jsx → explanation-editor.tsx}

@@ -1,11 +1,10 @@
 /* eslint-disable react/forbid-prop-types */
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import Editor from "../editor.jsx";
+import Editor from "../editor";
 
 const {TextInput} = components;
 
@@ -14,10 +13,10 @@ const defaultExplanationProps = {
     hidePrompt: "Hide explanation",
     explanation: "explanation goes here\n\nmore explanation",
     widgets: {},
-};
+} as const;
 
-type Props = $FlowFixMe;
-type State = $FlowFixMe;
+type Props = any;
+type State = any;
 
 class ExplanationEditor extends React.Component<Props, State> {
     static propTypes = {
@@ -29,19 +28,19 @@ class ExplanationEditor extends React.Component<Props, State> {
         apiOptions: PropTypes.any,
     };
 
-    static widgetName: "explanation" = "explanation";
+    static widgetName = "explanation" as const;
     static defaultProps: Props = defaultExplanationProps;
     state: State = {};
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-widget-explanation-editor">
                 <div className="perseus-widget-row">
@@ -49,6 +48,7 @@ class ExplanationEditor extends React.Component<Props, State> {
                         Prompt to show explanation:{" "}
                         <TextInput
                             value={this.props.showPrompt}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("showPrompt")}
                         />
                     </label>
@@ -58,6 +58,7 @@ class ExplanationEditor extends React.Component<Props, State> {
                         Prompt to hide explanation:{" "}
                         <TextInput
                             value={this.props.hidePrompt}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("hidePrompt")}
                         />
                     </label>
@@ -70,13 +71,14 @@ class ExplanationEditor extends React.Component<Props, State> {
                         widgetEnabled={true}
                         immutableWidgets={false}
                         onChange={(props) => {
-                            const newProps = {};
+                            const newProps: Record<string, any> = {};
                             if (_.has(props, "content")) {
                                 newProps.explanation = props.content;
                             }
                             if (_.has(props, "widgets")) {
                                 newProps.widgets = props.widgets;
                             }
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             this.change(newProps);
                         }}
                     />

package/src/widgets/{expression-editor.jsx → expression-editor.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable one-var, react/forbid-prop-types, react/sort-comp */
-// @flow
 import * as KAS from "@khanacademy/kas";
 import {
     components,
@@ -13,7 +12,7 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import SortableArea from "../components/sortable.jsx";
+import SortableArea from "../components/sortable";
 
 const {InfoTip, PropCheckBox, TexButtons} = components;
 const {getDependencies} = Dependencies;
@@ -29,11 +28,11 @@ const answerFormType = PropTypes.shape({
 });
 
 // Pick a key that isn't currently used by an answer in answerForms
-const _makeNewKey = (answerForms) => {
+const _makeNewKey = (answerForms: any) => {
     // first note all the currently used keys in an array, used like a map :3
     // note that this automatically updates the array's length property to
     // be one past the largest key.
-    const usedKeys = [];
+    const usedKeys: Array<boolean> = [];
     answerForms.forEach((ans) => {
         usedKeys[ans.key] = true;
     });
@@ -50,7 +49,7 @@ const _makeNewKey = (answerForms) => {
     return usedKeys.length;
 };
 
-class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
+class ExpressionEditor extends React.Component<any, any> {
     static propTypes = {
         ...Changeable.propTypes,
         answerForms: PropTypes.arrayOf(answerFormType),
@@ -59,16 +58,16 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
         functions: PropTypes.arrayOf(PropTypes.string),
     };
 
-    static widgetName: "expression" = "expression";
+    static widgetName = "expression" as const;
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         answerForms: [],
         times: false,
         buttonSets: ["basic"],
         functions: ["f", "g", "h"],
     };
 
-    constructor(props: $FlowFixMe) {
+    constructor(props: any) {
         super(props);
         // Is the format of `value` TeX or plain text?
         // TODO(alex): Remove after backfilling everything to TeX
@@ -94,11 +93,11 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
         this.state = {isTex};
     }
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const answerOptions = this.props.answerForms
             .map((obj, index) => {
                 const expressionProps = {
@@ -118,7 +117,7 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
                     trackInteraction: () => {},
 
                     widgetId: this.props.widgetId + "-" + index,
-                };
+                } as const;
 
                 return lens(obj)
                     .merge([], {
@@ -253,7 +252,7 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
         );
     }
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         const formSerializables = [
             "value",
             "form",
@@ -280,8 +279,8 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
             .freeze();
     };
 
-    getSaveWarnings: () => $FlowFixMe = () => {
-        const issues = [];
+    getSaveWarnings: () => any = () => {
+        const issues: Array<any | string> = [];
 
         if (this.props.answerForms.length === 0) {
             issues.push("No answers specified");
@@ -324,7 +323,7 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
         return issues;
     };
 
-    _newEmptyAnswerForm: () => $FlowFixMe = () => {
+    _newEmptyAnswerForm: () => any = () => {
         return {
             considered: "correct",
             form: false,
@@ -341,26 +340,29 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
     newAnswer: () => void = () => {
         const answerForms = this.props.answerForms.slice();
         answerForms.push(this._newEmptyAnswerForm());
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({answerForms});
     };
 
-    handleRemoveForm: (number) => void = (i) => {
+    handleRemoveForm: (arg1: number) => void = (i) => {
         const answerForms = this.props.answerForms.slice();
         answerForms.splice(i, 1);
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({answerForms});
     };
 
     // called when the options (including the expression itself) to an answer
     // form change
-    updateForm: (number, $FlowFixMe) => void = (i, props) => {
+    updateForm: (arg1: number, arg2: any) => void = (i, props) => {
         const answerForms = lens(this.props.answerForms)
             .merge([i], props)
             .freeze();
 
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({answerForms});
     };
 
-    handleReorder: ($FlowFixMe) => void = (components) => {
+    handleReorder: (arg1: any) => void = (components) => {
         const answerForms = _(components).map((component) => {
             const form = _(component.props).pick(
                 "considered",
@@ -368,15 +370,17 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
                 "simplify",
                 "value",
             );
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type 'Pick<any, "form" | "value" | "simplify" | "considered">'.
             form.key = component.key;
             return form;
         });
 
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({answerForms});
     };
 
     // called when the selected buttonset changes
-    handleButtonSet: (string) => void = (changingName) => {
+    handleButtonSet: (arg1: string) => void = (changingName) => {
         const buttonSetNames = _(TexButtons.buttonSets).keys();
 
         // Filter to preserve order - using .union and .difference would always
@@ -409,31 +413,35 @@ class ExpressionEditor extends React.Component<$FlowFixMe, $FlowFixMe> {
             .reject((set) => set === remove)
             .concat(keep);
 
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
         this.change("buttonSets", buttonSets);
     };
 
     // called when the correct answer changes
-    handleTexInsert: (string) => void = (str) => {
+    handleTexInsert: (arg1: string) => void = (str) => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
         this.refs.expression.insert(str);
     };
 
     // called when the function variables change
-    handleFunctions: (SyntheticInputEvent<>) => void = (e) => {
-        const newProps = {};
+    handleFunctions: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
+        const newProps: Record<string, any> = {};
         newProps.functions = _.compact(e.target.value.split(/[ ,]+/));
         this.props.onChange(newProps);
     };
 }
 
 // Find the next element in arr after val, wrapping around to the first.
-const findNextIn = function (arr, val) {
+const findNextIn = function (arr: Array<string>, val: any) {
     let ix = _(arr).indexOf(val);
     ix = (ix + 1) % arr.length;
     return arr[ix];
 };
 
-class AnswerOption extends React.Component<$FlowFixMe, $FlowFixMe> {
+class AnswerOption extends React.Component<any, any> {
     static propTypes = {
         ...Changeable.propTypes,
         considered: PropTypes.oneOf(CONSIDERED).isRequired,
@@ -449,7 +457,7 @@ class AnswerOption extends React.Component<$FlowFixMe, $FlowFixMe> {
         onDelete: PropTypes.func.isRequired,
     };
 
-    state: $FlowFixMe = {deleteFocused: false};
+    state: any = {deleteFocused: false};
 
     handleDeleteBlur = () => {
         this.setState({deleteFocused: false});
@@ -459,9 +467,10 @@ class AnswerOption extends React.Component<$FlowFixMe, $FlowFixMe> {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         let removeButton = null;
         if (this.state.deleteFocused) {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
             removeButton = (
                 <button
                     type="button"
@@ -473,6 +482,7 @@ class AnswerOption extends React.Component<$FlowFixMe, $FlowFixMe> {
                 </button>
             );
         } else {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
             removeButton = (
                 <button
                     type="button"

package/src/widgets/{graded-group-editor.jsx → graded-group-editor.tsx}

@@ -1,17 +1,16 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
-// @flow
 import {components, icons, ApiOptions, Changeable} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import Editor from "../editor.jsx";
+import Editor from "../editor";
 
 const {InlineIcon, TextInput} = components;
 const {iconPlus, iconTrash} = icons;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class GradedGroupEditor extends React.Component<Props> {
     static propTypes = {
@@ -23,7 +22,7 @@ class GradedGroupEditor extends React.Component<Props> {
         apiOptions: ApiOptions.propTypes,
     };
 
-    static widgetName: "graded-group" = "graded-group";
+    static widgetName = "graded-group" as const;
 
     static defaultProps: Props = {
         title: "",
@@ -33,23 +32,24 @@ class GradedGroupEditor extends React.Component<Props> {
         hint: null,
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
     handleAddHint: () => void = () => {
-        const hint = {content: ""};
+        const hint = {content: ""} as const;
         this.props.onChange({hint}, () => {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
             this.refs["hint-editor"].focus();
         });
     };
 
-    handleRemoveHint: (SyntheticMouseEvent<>) => void = (e) => {
+    handleRemoveHint: (arg1: React.MouseEvent) => void = (e) => {
         this.props.onChange({hint: null});
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-group-editor">
                 <div className="perseus-widget-row">
@@ -58,6 +58,7 @@ class GradedGroupEditor extends React.Component<Props> {
                         <TextInput
                             value={this.props.title}
                             className={css(styles.input)}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("title")}
                         />
                     </label>
@@ -104,6 +105,7 @@ class GradedGroupEditor extends React.Component<Props> {
                             onChange={(props) => {
                                 // Copy all props over from the existing hint
                                 // and then add new props.
+                                // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
                                 this.change(
                                     "hint",
                                     Object.assign({}, this.props.hint, props),
@@ -123,20 +125,26 @@ class GradedGroupEditor extends React.Component<Props> {
         );
     }
 
-    getSaveWarnings: () => $FlowFixMe = () => {
+    getSaveWarnings: () => any = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         return this.refs.editor.getSaveWarnings();
     };
 
-    serialize: () => {|title: string, hint: ?$FlowFixMe|} = () => {
+    serialize: () => {
+        title: string;
+        hint: any | null | undefined;
+    } = () => {
         return {
             title: this.props.title,
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - 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 [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
                 this.refs["hint-editor"].serialize(),
         };
     };