@khanacademy/perseus-editor 1.1.1 → 2.0.0

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -11,12 +10,12 @@ const defaultImage = {
     url: null,
     top: 0,
     left: 0,
-};
+} as const;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class MeasurerEditor extends React.Component<Props> {
-    static widgetName: "measurer" = "measurer";
+    static widgetName = "measurer" as const;
 
     static propTypes = {
         ...Changeable.propTypes,
@@ -45,9 +44,9 @@ class MeasurerEditor extends React.Component<Props> {
         rulerLength: 10,
     };
 
-    className: string = "perseus-widget-measurer";
+    className = "perseus-widget-measurer";
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const image = _.extend({}, defaultImage, this.props.image);
 
         return (
@@ -95,6 +94,7 @@ class MeasurerEditor extends React.Component<Props> {
                 <div>
                     Containing area [width, height]:{" "}
                     <RangeInput
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("box")}
                         value={this.props.box}
                         useArrowKeys={true}
@@ -124,6 +124,7 @@ class MeasurerEditor extends React.Component<Props> {
                                 Ruler label:{" "}
                                 <select
                                     onChange={(e) =>
+                                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
                                         this.change(
                                             "rulerLabel",
                                             e.target.value,
@@ -157,6 +158,7 @@ class MeasurerEditor extends React.Component<Props> {
                                 Ruler ticks:{" "}
                                 <select
                                     onChange={(e) =>
+                                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
                                         this.change(
                                             "rulerTicks",
                                             +e.target.value,
@@ -179,6 +181,7 @@ class MeasurerEditor extends React.Component<Props> {
                                 Ruler pixels per unit:{" "}
                                 <NumberInput
                                     placeholder={40}
+                                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                                     onChange={this.change("rulerPixels")}
                                     value={this.props.rulerPixels}
                                     useArrowKeys={true}
@@ -190,6 +193,7 @@ class MeasurerEditor extends React.Component<Props> {
                                 Ruler length in units:{" "}
                                 <NumberInput
                                     placeholder={10}
+                                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                                     onChange={this.change("rulerLength")}
                                     value={this.props.rulerLength}
                                     useArrowKeys={true}
@@ -202,31 +206,34 @@ class MeasurerEditor 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);
     };
 
-    _changeUrl: (SyntheticInputEvent<>) => void = (e) => {
+    _changeUrl: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (e) => {
         this._changeImage("url", e.target.value);
     };
 
-    _changeTop: ($FlowFixMe) => void = (newTop) => {
+    _changeTop: (arg1: any) => void = (newTop) => {
         this._changeImage("top", newTop);
     };
 
-    _changeLeft: ($FlowFixMe) => void = (newLeft) => {
+    _changeLeft: (arg1: any) => void = (newLeft) => {
         this._changeImage("left", newLeft);
     };
 
-    _changeImage: (string, $FlowFixMe) => void = (subProp, newValue) => {
+    _changeImage: (arg1: string, arg2: any) => void = (subProp, newValue) => {
         const image = _.clone(this.props.image);
         image[subProp] = newValue;
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
         this.change("image", image);
     };
 
     renderLabelChoices: (
-        $ReadOnlyArray<[string, string]>,
-    ) => $ReadOnlyArray<React.Element<"option">> = (choices) => {
+        arg1: ReadonlyArray<[string, string]>,
+    ) => ReadonlyArray<React.ReactElement<React.ComponentProps<"option">>> = (
+        choices,
+    ) => {
         return _.map(choices, function (nameAndValue) {
             const [name, value] = nameAndValue;
             return (
@@ -237,7 +244,7 @@ class MeasurerEditor extends React.Component<Props> {
         });
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 }

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

@@ -1,11 +1,10 @@
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 
 const {NumberInput, TextInput} = components;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class MoleculeWidgetEditor extends React.Component<Props> {
     static propTypes = {
@@ -14,25 +13,27 @@ class MoleculeWidgetEditor extends React.Component<Props> {
         smiles: PropTypes.string,
     };
 
-    static widgetName: "molecule-renderer" = "molecule-renderer";
+    static widgetName = "molecule-renderer" as const;
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    updateMolecule: (string) => void = (newValue) => {
+    updateMolecule: (arg1: string) => void = (newValue) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({smiles: newValue});
     };
 
-    updateRotation: (string) => void = (newValue) => {
+    updateRotation: (arg1: string) => void = (newValue) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({rotationAngle: newValue});
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <div>

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

@@ -1,4 +1,3 @@
-// @flow
 import {number as knumber} from "@khanacademy/kmath";
 import {components, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
@@ -15,7 +14,7 @@ const bound = (x: number, gt: number, lt: number): number =>
 
 const EN_DASH = "\u2013";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class NumberLineEditor extends React.Component<Props> {
     static propTypes = {
@@ -41,7 +40,7 @@ class NumberLineEditor extends React.Component<Props> {
         showTooltips: PropTypes.bool,
     };
 
-    static widgetName: "number-line" = "number-line";
+    static widgetName = "number-line" as const;
 
     static defaultProps: Props = {
         range: [0, 10],
@@ -62,7 +61,7 @@ class NumberLineEditor extends React.Component<Props> {
         showTooltips: false,
     };
 
-    onRangeChange: (Range) => void = (range) => {
+    onRangeChange: (arg1: Range) => void = (range) => {
         // Changing the range constrains the initial position, as well as the
         // position of the answer and labels. Atm, it just marks them as
         // invalid and prevents the number line from showing; it was annoying
@@ -71,7 +70,7 @@ class NumberLineEditor extends React.Component<Props> {
         this.props.onChange({range: range});
     };
 
-    onLabelRangeChange: (number, number) => void = (i, num) => {
+    onLabelRangeChange: (arg1: number, arg2: number) => void = (i, num) => {
         let labelRange = this.props.labelRange.slice();
         const otherNum = labelRange[1 - i];
 
@@ -87,7 +86,7 @@ class NumberLineEditor extends React.Component<Props> {
         this.props.onChange({labelRange: labelRange});
     };
 
-    onDivisionRangeChange: (Range) => void = (divisionRange) => {
+    onDivisionRangeChange: (arg1: Range) => void = (divisionRange) => {
         let numDivisions = this.props.numDivisions;
         numDivisions = bound(numDivisions, divisionRange[0], divisionRange[1]);
         this.props.onChange({
@@ -96,16 +95,16 @@ class NumberLineEditor extends React.Component<Props> {
         });
     };
 
-    onNumChange: ("correctX" | "initialX" | "snapDivisions", number) => void = (
-        key,
-        value,
-    ) => {
-        const opts = {};
+    onNumChange: (
+        arg1: "correctX" | "initialX" | "snapDivisions",
+        arg2: number,
+    ) => void = (key, value) => {
+        const opts: Record<string, any> = {};
         opts[key] = value;
         this.props.onChange(opts);
     };
 
-    onNumDivisionsChange: (number) => void = (numDivisions) => {
+    onNumDivisionsChange: (arg1: number) => void = (numDivisions) => {
         const divRange = this.props.divisionRange.slice();
 
         // Don't allow a fraction for the number of divisions
@@ -130,14 +129,16 @@ class NumberLineEditor extends React.Component<Props> {
         }
     };
 
-    onTickStepChange: (number) => void = (tickStep) => {
+    onTickStepChange: (arg1: number) => void = (tickStep) => {
         this.props.onChange({
             numDivisions: null,
             tickStep: tickStep,
         });
     };
 
-    onChangeRelation: (SyntheticInputEvent<>) => void = (e) => {
+    onChangeRelation: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
         const value = e.target.value;
         this.props.onChange({
             correctRel: value,
@@ -145,17 +146,17 @@ class NumberLineEditor extends React.Component<Props> {
         });
     };
 
-    onLabelStyleChange: ($FlowFixMe) => void = (labelStyle) => {
+    onLabelStyleChange: (arg1: any) => void = (labelStyle) => {
         this.props.onChange({
             labelStyle: labelStyle,
         });
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const range = this.props.range;
         const labelRange = this.props.labelRange;
         const divisionRange = this.props.divisionRange;
@@ -210,6 +211,7 @@ class NumberLineEditor extends React.Component<Props> {
                     Correct x{" "}
                     <select
                         value={this.props.correctRel}
+                        // @ts-expect-error [FEI-5003] - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                         onChange={this.onChangeRelation}
                     >
                         <option value="eq"> = </option>

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

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
-// @flow
 import {
     components,
     icons,
@@ -11,7 +10,7 @@ import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-import Editor from "../editor.jsx";
+import Editor from "../editor";
 
 const {
     ButtonGroup,
@@ -38,7 +37,7 @@ const answerFormButtons = [
     {title: "Numbers with \u03C0", value: "pi", content: "\u03C0"},
 ];
 
-const initAnswer = (status) => {
+const initAnswer = (status: string) => {
     return {
         value: null,
         status: status,
@@ -82,7 +81,7 @@ const NumericInputEditor: any = createReactClass({
     render: function () {
         const answers = this.props.answers;
 
-        const unsimplifiedAnswers = (i) => (
+        const unsimplifiedAnswers = (i: any) => (
             <div className="perseus-widget-row">
                 <label>Unsimplified answers are</label>
                 <ButtonGroup
@@ -115,7 +114,7 @@ const NumericInputEditor: any = createReactClass({
             </div>
         );
 
-        const suggestedAnswerTypes = (i) => (
+        const suggestedAnswerTypes = (i: any) => (
             <div>
                 <div className="perseus-widget-row">
                     <label>Choose the suggested answer formats</label>
@@ -161,7 +160,7 @@ const NumericInputEditor: any = createReactClass({
             </div>
         );
 
-        const maxError = (i) => (
+        const maxError = (i: any) => (
             <div className="perseus-widget-row">
                 <label>
                     Max error{" "}
@@ -260,7 +259,7 @@ const NumericInputEditor: any = createReactClass({
             wrong: "(address the mistake/misconception)",
             ungraded: "(explain in detail to avoid confusion)",
             correct: "(reinforce the user's understanding)",
-        };
+        } as const;
 
         const generateInputAnswerEditors = () =>
             answers.map((answer, i) => {
@@ -443,7 +442,6 @@ const NumericInputEditor: any = createReactClass({
     },
 
     change(...args) {
-        // $FlowFixMe[object-this-reference]
         return Changeable.change.apply(this, args);
     },
 
@@ -464,6 +462,7 @@ const NumericInputEditor: any = createReactClass({
     onSpace: function (e, callback) {
         if (e.key === " ") {
             e.preventDefault(); // prevent page shifting
+            // eslint-disable-next-line prefer-rest-params
             const args = _.toArray(arguments).slice(2);
             callback.apply(this, args);
         }
@@ -494,7 +493,7 @@ const NumericInputEditor: any = createReactClass({
         if (!_.isObject(update)) {
             return _.partial(
                 (choiceIndex, key, value) => {
-                    const update = {};
+                    const update: Record<string, any> = {};
                     update[key] = value;
                     this.updateAnswer(choiceIndex, update);
                 },
@@ -529,6 +528,7 @@ const NumericInputEditor: any = createReactClass({
         // TODO(emily): This doesn't actually work, because the value is either
         // null or undefined when undefined, probably.
         if (_.contains(_.pluck(this.props.answers, "value"), "")) {
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
             warnings.push("One or more answers is empty");
         }
         this.props.answers.forEach((answer, i) => {
@@ -537,6 +537,7 @@ const NumericInputEditor: any = createReactClass({
                 (!answer.answerForms || answer.answerForms.length === 0);
             if (formatError) {
                 warnings.push(
+                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
                     `Answer ${i + 1} is set to string format ` +
                         "matching, but no format was selected",
                 );
@@ -546,7 +547,6 @@ const NumericInputEditor: any = createReactClass({
     },
 
     serialize() {
-        // $FlowFixMe[object-this-reference]
         return EditorJsonify.serialize.call(this);
     },
 });

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

@@ -1,5 +1,4 @@
 /* eslint-disable one-var, react/forbid-prop-types, react/sort-comp */
-// @flow
 import {components} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -12,7 +11,7 @@ const NORMAL = "normal",
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class OrdererEditor extends React.Component<Props> {
     static propTypes = {
@@ -23,7 +22,7 @@ class OrdererEditor extends React.Component<Props> {
         onChange: PropTypes.func.isRequired,
     };
 
-    static widgetName: "orderer" = "orderer";
+    static widgetName = "orderer" as const;
 
     static defaultProps: Props = {
         correctOptions: [{content: "$x$"}],
@@ -32,7 +31,7 @@ class OrdererEditor extends React.Component<Props> {
         layout: HORIZONTAL,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-widget-orderer">
                 <div>
@@ -74,6 +73,7 @@ class OrdererEditor extends React.Component<Props> {
                         Layout:{" "}
                         <select
                             value={this.props.layout}
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                             onChange={this.onLayoutChange}
                         >
                             <option value={HORIZONTAL}>Horizontal</option>
@@ -94,6 +94,7 @@ class OrdererEditor extends React.Component<Props> {
                         Height:{" "}
                         <select
                             value={this.props.height}
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                             onChange={this.onHeightChange}
                         >
                             <option value={NORMAL}>Normal</option>
@@ -109,26 +110,30 @@ class OrdererEditor extends React.Component<Props> {
     }
 
     onOptionsChange: (
-        "correctOptions" | "otherOptions",
-        $FlowFixMe,
-        $FlowFixMe,
-    ) => $FlowFixMe = (whichOptions, options, cb) => {
-        const props = {};
+        arg1: "correctOptions" | "otherOptions",
+        arg2: any,
+        arg3: any,
+    ) => any = (whichOptions, options, cb) => {
+        const props: Record<string, any> = {};
         props[whichOptions] = _.map(options, function (option) {
             return {content: option};
         });
         this.props.onChange(props, cb);
     };
 
-    onLayoutChange: (SyntheticInputEvent<>) => void = (e) => {
+    onLayoutChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
         this.props.onChange({layout: e.target.value});
     };
 
-    onHeightChange: (SyntheticInputEvent<>) => void = (e) => {
+    onHeightChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
         this.props.onChange({height: e.target.value});
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         // We combine the correct answer and the other cards by merging them,
         // removing duplicates and empty cards, and sorting them into
         // categories based on their content

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

@@ -1,14 +1,13 @@
-// @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 {InfoTip, PropCheckBox} = components;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class PassageEditor extends React.Component<Props> {
     static propTypes = {
@@ -19,7 +18,7 @@ class PassageEditor extends React.Component<Props> {
         showLineNumbers: PropTypes.bool,
     };
 
-    static widgetName: "passage" = "passage";
+    static widgetName = "passage" as const;
 
     static defaultProps: Props = {
         passageTitle: "",
@@ -28,15 +27,15 @@ class PassageEditor extends React.Component<Props> {
         showLineNumbers: true,
     };
 
-    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 {
         const passageEditor = (
             <Editor
                 // eslint-disable-next-line react/no-string-refs
@@ -46,6 +45,7 @@ class PassageEditor extends React.Component<Props> {
                 widgetEnabled={false}
                 placeholder="Type passage here..."
                 onChange={(newProps) => {
+                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                     this.change({passageText: newProps.content});
                 }}
                 showWordCount={true}
@@ -60,6 +60,7 @@ class PassageEditor extends React.Component<Props> {
                 widgetEnabled={false}
                 placeholder="Type footnotes here..."
                 onChange={(newProps) => {
+                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                     this.change({footnotes: newProps.content});
                 }}
             />
@@ -87,6 +88,7 @@ class PassageEditor extends React.Component<Props> {
                             type="text"
                             defaultValue={this.props.passageTitle}
                             onChange={(e) => {
+                                // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                                 this.change({passageTitle: e.target.value});
                             }}
                         />

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

@@ -1,11 +1,10 @@
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 
 const {InfoTip, NumberInput, TextInput} = components;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class PassageRefEditor extends React.Component<Props> {
     static propTypes: Props = {
@@ -15,7 +14,7 @@ class PassageRefEditor extends React.Component<Props> {
         summaryText: PropTypes.string,
     };
 
-    static widgetName: "passage-ref" = "passage-ref";
+    static widgetName = "passage-ref" as const;
 
     static defaultProps: Props = {
         passageNumber: 1,
@@ -23,15 +22,15 @@ class PassageRefEditor extends React.Component<Props> {
         summaryText: "",
     };
 
-    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>
                 <div>
@@ -39,6 +38,7 @@ class PassageRefEditor extends React.Component<Props> {
                         {"Passage Number: "}
                         <NumberInput
                             value={this.props.passageNumber}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("passageNumber")}
                         />
                     </label>
@@ -48,6 +48,7 @@ class PassageRefEditor extends React.Component<Props> {
                         {"Reference Number: "}
                         <NumberInput
                             value={this.props.referenceNumber}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("referenceNumber")}
                         />
                     </label>
@@ -57,6 +58,7 @@ class PassageRefEditor extends React.Component<Props> {
                         {"Summary Text: "}
                         <TextInput
                             value={this.props.summaryText}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("summaryText")}
                         />
                         <InfoTip>

package/src/widgets/{passage-ref-target-editor.jsx → passage-ref-target-editor.tsx}

@@ -1,10 +1,9 @@
-// @flow
 import {Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class PassageRefTargetEditor extends React.Component<Props> {
     static propTypes = {
@@ -12,25 +11,28 @@ class PassageRefTargetEditor extends React.Component<Props> {
         content: PropTypes.string,
     };
 
-    static widgetName: "passage-ref-target" = "passage-ref-target";
+    static widgetName = "passage-ref-target" as const;
 
     static defaultProps: Props = {
         content: "",
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    handleContentChange: (SyntheticInputEvent<>) => void = (e) => {
+    handleContentChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({content: e.target.value});
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 Content: