From 4199980fbff51a957e8ad1717d85a4980daf98aa Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 16 Sep 2024 12:40:04 -0700
Subject: [PATCH 01/20] Beginning of removing createReactClass.

---
 .../perseus/src/widgets/measurer/measurer.tsx | 149 +++++++++++-------
 1 file changed, 92 insertions(+), 57 deletions(-)

diff --git a/packages/perseus/src/widgets/measurer/measurer.tsx b/packages/perseus/src/widgets/measurer/measurer.tsx
index 0c81bba357..a74276c8a2 100644
--- a/packages/perseus/src/widgets/measurer/measurer.tsx
+++ b/packages/perseus/src/widgets/measurer/measurer.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @babel/no-invalid-this */
-import createReactClass from "create-react-class";
 import $ from "jquery";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -11,8 +10,12 @@ import {ApiOptions} from "../../perseus-api";
 import GraphUtils from "../../util/graph-utils";
 
 import type {Coord} from "../../interactive2/types";
-import type {WidgetExports} from "../../types";
+import type {WidgetExports, WidgetProps} from "../../types";
 import type {Interval} from "../../util/interval";
+import {
+    PerseusImageWidgetOptions,
+    PerseusMeasurerWidgetOptions,
+} from "../../perseus-types";
 
 const defaultImage = {
     url: null,
@@ -20,51 +23,69 @@ const defaultImage = {
     left: 0,
 } as const;
 
-const Measurer: any = createReactClass({
-    displayName: "Measurer",
+type RenderProps = PerseusMeasurerWidgetOptions; // there is no transform as part of exports
+type Rubric = {
+    protractorX: number;
+    protractorY: number;
+};
 
-    propTypes: {
-        apiOptions: ApiOptions.propTypes,
-        box: PropTypes.arrayOf(PropTypes.number),
-        image: PropTypes.shape({
-            url: PropTypes.string,
-            top: PropTypes.number,
-            left: PropTypes.number,
-        }),
-        showProtractor: PropTypes.bool,
-        protractorX: PropTypes.number,
-        protractorY: PropTypes.number,
-        showRuler: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-        rulerPixels: PropTypes.number,
-        rulerLength: PropTypes.number,
-    },
+type ExternalProps = WidgetProps<RenderProps, Rubric>;
 
-    getDefaultProps: function () {
-        return {
-            box: [480, 480],
-            image: {},
-            showProtractor: true,
-            protractorX: 7.5,
-            protractorY: 0.5,
-            showRuler: false,
-            rulerLabel: "",
-            rulerTicks: 10,
-            rulerPixels: 40,
-            rulerLength: 10,
-        };
-    },
+type Props = ExternalProps & {
+    apiOptions: NonNullable<ExternalProps["alignment"]>;
+    box: NonNullable<ExternalProps["box"]>;
+    image: ExternalProps["image"];
+    showProtractor: NonNullable<ExternalProps["showProtractor"]>;
+    protractorX: NonNullable<ExternalProps["protractorX"]>;
+    protractorY: NonNullable<ExternalProps["protractorY"]>;
+    showRuler: NonNullable<ExternalProps["showRuler"]>;
+    rulerLabel: NonNullable<ExternalProps["rulerLabel"]>;
+    rulerTicks: NonNullable<ExternalProps["rulerTicks"]>;
+    rulerPixels: NonNullable<ExternalProps["rulerPixels"]>;
+    rulerLength: NonNullable<ExternalProps["rulerLength"]>;
+};
+
+type DefaultProps = {
+    apiOptions: Props["apiOptions"];
+    box: Props["box"];
+    image: Props["image"];
+    showProtractor: Props["showProtractor"];
+    protractorX: Props["protractorX"];
+    protractorY: Props["protractorY"];
+    showRuler: Props["showRuler"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+    rulerPixels: Props["rulerPixels"];
+    rulerLength: Props["rulerLength"];
+};
+
+export class Measurer extends React.Component<Props> {
+    displayName: string = "Measurer";
 
-    getInitialState: function () {
+    static defaultProps: DefaultProps = {
+        box: [480, 480],
+        image: {},
+        showProtractor: true,
+        protractorX: 7.5,
+        protractorY: 0.5,
+        showRuler: false,
+        rulerLabel: "",
+        rulerTicks: 10,
+        rulerPixels: 40,
+        rulerLength: 10,
+    };
+
+    focus = $.noop;
+
+    getInitialState() {
         return {};
-    },
+    }
 
-    componentDidMount: function () {
+    componentDidMount() {
         this.setupGraphie();
-    },
+    }
 
-    componentDidUpdate: function (prevProps) {
+    componentDidUpdate(prevProps) {
         const shouldSetupGraphie = _.any(
             [
                 "box",
@@ -85,9 +106,9 @@ const Measurer: any = createReactClass({
         if (shouldSetupGraphie) {
             this.setupGraphie();
         }
-    },
+    }
 
-    setupGraphie: function () {
+    setupGraphie() {
         // eslint-disable-next-line react/no-string-refs
         const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
         // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
@@ -110,8 +131,8 @@ const Measurer: any = createReactClass({
                 this.props.apiOptions.setDrawingAreaAvailable,
         });
 
-        if (this.protractor) {
-            this.protractor.remove();
+        if (this.props.protractor) {
+            this.props.protractor.remove();
         }
 
         if (this.props.showProtractor) {
@@ -122,8 +143,8 @@ const Measurer: any = createReactClass({
             ]);
         }
 
-        if (this.ruler) {
-            this.ruler.remove();
+        if (this.props.ruler) {
+            this.props.ruler.remove();
         }
 
         if (this.props.showRuler) {
@@ -139,20 +160,27 @@ const Measurer: any = createReactClass({
                 units: this.props.rulerLength,
             });
         }
-    },
+    }
 
-    getUserInput: function () {
+    getUserInput() {
         return {};
-    },
+    }
 
-    simpleValidate: function (rubric) {
-        // TODO(joel) - I don't understand how this is useful!
-        return Measurer.validate(this.getUserInput(), rubric);
-    },
+    validate(state, rubric) {
+        return {
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        };
+    }
 
-    focus: $.noop,
+    simpleValidate(rubric) {
+        // TODO(joel) - I don't understand how this is useful!
+        return this.validate(this.getUserInput(), rubric);
+    }
 
-    render: function () {
+    render() {
         const image = _.extend({}, defaultImage, this.props.image);
 
         // TODO(scottgrant): This isn't a11y-friendly! We should insist on
@@ -181,8 +209,8 @@ const Measurer: any = createReactClass({
                 <div className="graphie" ref="graphieDiv" />
             </div>
         );
-    },
-});
+    }
+}
 
 _.extend(Measurer, {
     validate: function (state, rubric) {
@@ -219,3 +247,10 @@ export default {
     version: {major: 1, minor: 0},
     propUpgrades: propUpgrades,
 } as WidgetExports<typeof Measurer>;
+function getUserInput() {
+    throw new Error("Function not implemented.");
+}
+
+function simpleValidate(rubric: any) {
+    throw new Error("Function not implemented.");
+}

From 0987c84051ab4f999914363041dbdfbe081dfed1 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 23 Sep 2024 16:02:24 -0700
Subject: [PATCH 02/20] Migrated measure to class structure.

---
 .../perseus/src/widgets/measurer/measurer.tsx | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/perseus/src/widgets/measurer/measurer.tsx b/packages/perseus/src/widgets/measurer/measurer.tsx
index cf31ceb7c2..1b3cb9ead1 100644
--- a/packages/perseus/src/widgets/measurer/measurer.tsx
+++ b/packages/perseus/src/widgets/measurer/measurer.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @babel/no-invalid-this */
 import $ from "jquery";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -13,10 +12,7 @@ import noopValidator from "../__shared__/noop-validator";
 import type {Coord} from "../../interactive2/types";
 import type {WidgetExports, WidgetProps} from "../../types";
 import type {Interval} from "../../util/interval";
-import {
-    PerseusImageWidgetOptions,
-    PerseusMeasurerWidgetOptions,
-} from "../../perseus-types";
+import {PerseusMeasurerWidgetOptions} from "../../perseus-types";
 
 const defaultImage = {
     url: null,
@@ -25,20 +21,15 @@ const defaultImage = {
 } as const;
 
 type RenderProps = PerseusMeasurerWidgetOptions; // there is no transform as part of exports
-type Rubric = {
-    protractorX: number;
-    protractorY: number;
-};
+type Rubric = {};
 
 type ExternalProps = WidgetProps<RenderProps, Rubric>;
 
 type Props = ExternalProps & {
-    apiOptions: NonNullable<ExternalProps["alignment"]>;
+    apiOptions: NonNullable<ExternalProps["apiOptions"]>;
     box: NonNullable<ExternalProps["box"]>;
     image: ExternalProps["image"];
     showProtractor: NonNullable<ExternalProps["showProtractor"]>;
-    protractorX: NonNullable<ExternalProps["protractorX"]>;
-    protractorY: NonNullable<ExternalProps["protractorY"]>;
     showRuler: NonNullable<ExternalProps["showRuler"]>;
     rulerLabel: NonNullable<ExternalProps["rulerLabel"]>;
     rulerTicks: NonNullable<ExternalProps["rulerTicks"]>;
@@ -51,8 +42,6 @@ type DefaultProps = {
     box: Props["box"];
     image: Props["image"];
     showProtractor: Props["showProtractor"];
-    protractorX: Props["protractorX"];
-    protractorY: Props["protractorY"];
     showRuler: Props["showRuler"];
     rulerLabel: Props["rulerLabel"];
     rulerTicks: Props["rulerTicks"];
@@ -62,13 +51,16 @@ type DefaultProps = {
 
 export class Measurer extends React.Component<Props> {
     displayName: string = "Measurer";
+    protractorX: number = 7.5;
+    protractorY: number = 0.5;
 
     static defaultProps: DefaultProps = {
+        apiOptions: ApiOptions.defaults,
         box: [480, 480],
-        image: {},
+        image: {
+            url: null,
+        },
         showProtractor: true,
-        protractorX: 7.5,
-        protractorY: 0.5,
         showRuler: false,
         rulerLabel: "",
         rulerTicks: 10,
@@ -77,6 +69,8 @@ export class Measurer extends React.Component<Props> {
     };
 
     focus = $.noop;
+    protractor: any;
+    ruler: any;
 
     getInitialState() {
         return {};
@@ -132,25 +126,25 @@ export class Measurer extends React.Component<Props> {
                 this.props.apiOptions.setDrawingAreaAvailable,
         });
 
-        if (this.props.protractor) {
-            this.props.protractor.remove();
+        if (this.protractor) {
+            this.protractor.remove();
         }
 
         if (this.props.showProtractor) {
             // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
             this.protractor = graphie.protractor([
-                this.props.protractorX,
-                this.props.protractorY,
+                this.protractorX,
+                this.protractorY,
             ]);
         }
 
-        if (this.props.ruler) {
-            this.props.ruler.remove();
+        if (this.ruler) {
+            this.ruler.remove();
         }
 
         if (this.props.showRuler) {
             // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
-            this.ruler = graphie.ruler({
+            this._ruler = graphie.ruler({
                 center: [
                     (range[0][0] + range[0][1]) / 2,
                     (range[1][0] + range[1][1]) / 2,
@@ -167,7 +161,12 @@ export class Measurer extends React.Component<Props> {
         return {};
     }
 
-    validate(state, rubric) {
+    validate(
+        state: {
+            currentValue: string;
+        },
+        rubric: Rubric,
+    ) {
         return {
             type: "points",
             earned: 1,
@@ -176,9 +175,9 @@ export class Measurer extends React.Component<Props> {
         };
     }
 
-    simpleValidate: function () {
+    simpleValidate() {
         return noopValidator(1);
-    },
+    }
 
     render() {
         const image = _.extend({}, defaultImage, this.props.image);
@@ -241,6 +240,7 @@ export default {
     version: {major: 1, minor: 0},
     propUpgrades: propUpgrades,
 } as WidgetExports<typeof Measurer>;
+
 function getUserInput() {
     throw new Error("Function not implemented.");
 }

From 28517ff8aee55aaaefe2e35e73203afcb88520d0 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 23 Sep 2024 17:33:25 -0700
Subject: [PATCH 03/20] Removing createReactClass

---
 .../src/components/drag-target.tsx            |  79 ++++----
 .../src/components/json-editor.tsx            |  60 +++---
 .../src/components/sortable.tsx               | 171 +++++++++++-------
 .../src/stateful-editor-page.tsx              |  70 +++----
 4 files changed, 225 insertions(+), 155 deletions(-)

diff --git a/packages/perseus-editor/src/components/drag-target.tsx b/packages/perseus-editor/src/components/drag-target.tsx
index 4e78e7378f..887d0165f1 100644
--- a/packages/perseus-editor/src/components/drag-target.tsx
+++ b/packages/perseus-editor/src/components/drag-target.tsx
@@ -22,48 +22,61 @@
 // * custom styles for global drag and dragOver
 // * only respond to certain types of drags (only images for instance)!
 
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
 import * as React from "react";
 
-const DragTarget = createReactClass({
-    propTypes: {
-        // All props not listed here are forwarded to the root element without
-        // modification.
-        onDrop: PropTypes.func.isRequired,
-        component: PropTypes.any, // component type
-        shouldDragHighlight: PropTypes.func,
-        style: PropTypes.any,
-    },
-    getDefaultProps: function () {
-        return {
-            component: "div",
-            shouldDragHighlight: () => true,
-        };
-    },
-    getInitialState: function () {
+type Props = {
+    onDrop: (any) => boolean;
+    component: any;
+    shouldDragHighlight: (any) => boolean;
+    style: any;
+};
+
+type DefaultProps = {
+    onDrop: Props["onDrop"];
+    component: Props["component"];
+    shouldDragHighlight: Props["shouldDragHighlight"];
+    style: Props["style"];
+};
+
+export class DragTarget extends React.Component<Props> {
+    dragHover: any;
+
+    static defaultProps: DefaultProps = {
+        onDrop: () => true,
+        component: "div",
+        shouldDragHighlight: () => true,
+        style: {},
+    };
+
+    getInitialState() {
         return {dragHover: false};
-    },
-    handleDrop: function (e) {
+    }
+
+    handleDrop(e) {
         e.stopPropagation();
         e.preventDefault();
         this.setState({dragHover: false});
         this.props.onDrop(e);
-    },
-    handleDragEnd: function () {
+    }
+
+    handleDragEnd() {
         this.setState({dragHover: false});
-    },
-    handleDragOver: function (e) {
+    }
+
+    handleDragOver(e) {
         e.preventDefault();
-    },
-    handleDragLeave: function () {
+    }
+
+    handleDragLeave() {
         this.setState({dragHover: false});
-    },
-    handleDragEnter: function (e) {
+    }
+
+    handleDragEnter(e) {
         this.setState({dragHover: this.props.shouldDragHighlight(e)});
-    },
-    render: function () {
-        const opacity = this.state.dragHover ? {opacity: 0.3} : {};
+    }
+
+    render() {
+        const opacity = this.dragHover ? {opacity: 0.3} : {};
         const Component = this.props.component;
 
         const forwardProps = Object.assign({}, this.props);
@@ -81,7 +94,7 @@ const DragTarget = createReactClass({
                 onDragLeave={this.handleDragLeave}
             />
         );
-    },
-});
+    }
+}
 
 export default DragTarget;
diff --git a/packages/perseus-editor/src/components/json-editor.tsx b/packages/perseus-editor/src/components/json-editor.tsx
index 3c1f3186b9..98dd5827f1 100644
--- a/packages/perseus-editor/src/components/json-editor.tsx
+++ b/packages/perseus-editor/src/components/json-editor.tsx
@@ -1,30 +1,42 @@
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable react/no-unsafe */
-import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-const JsonEditor: any = createReactClass({
-    displayName: "JsonEditor",
+type Props = {
+    value: any;
+};
 
-    getInitialState: function () {
-        return {
-            currentValue: JSON.stringify(this.props.value, null, 4),
-            valid: true,
-        };
-    },
+type DefaultProps = {
+    value: Props["value"];
+};
 
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
+export class JsonEditor extends React.Component<Props> {
+    static displayName: "JsonEditor";
+    currentValue: string
+    valid: boolean;
+
+    static defaultProps: DefaultProps = {
+        value: 0
+    };
+
+    static getInitialState() {
+        currentValue: JSON.stringify(this.props.value, null, 4),
+        valid: true,
+    };
+
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
         const shouldReplaceContent =
-            !this.state.valid ||
-            !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue));
+            !this.valid ||
+            !_.isEqual(nextProps.value, JSON.parse(this.currentValue));
 
         if (shouldReplaceContent) {
             this.setState(this.getInitialState());
         }
-    },
+    };
 
-    handleKeyDown: function (e) {
+    handleKeyDown(e) {
         // This handler allows the tab character to be entered by pressing
         // tab, instead of jumping to the next (non-existant) field
         if (e.key === "Tab") {
@@ -39,9 +51,9 @@ const JsonEditor: any = createReactClass({
             e.preventDefault();
             this.handleChange(e);
         }
-    },
+    };
 
-    handleChange: function (e) {
+    handleChange(e) {
         const nextString = e.target.value;
         try {
             let json = JSON.parse(nextString);
@@ -68,11 +80,11 @@ const JsonEditor: any = createReactClass({
                 valid: false,
             });
         }
-    },
+    };
 
     // You can type whatever you want as you're typing, but if it's not valid
     // when you blur, it will revert to the last valid value.
-    handleBlur: function (e) {
+    handleBlur(e) {
         const nextString = e.target.value;
         try {
             let json = JSON.parse(nextString);
@@ -99,22 +111,22 @@ const JsonEditor: any = createReactClass({
                 valid: true,
             });
         }
-    },
+    };
 
-    render: function () {
+    render() {
         const classes =
-            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
+            "perseus-json-editor " + (this.valid ? "valid" : "invalid");
 
         return (
             <textarea
                 className={classes}
-                value={this.state.currentValue}
+                value={this.currentValue}
                 onChange={this.handleChange}
                 onKeyDown={this.handleKeyDown}
                 onBlur={this.handleBlur}
             />
         );
-    },
-});
+    };
+};
 
 export default JsonEditor;
diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index 6ecdcc07d8..5a84da4567 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -1,11 +1,27 @@
 import {css, StyleSheet} from "aphrodite";
-import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
 const PT = PropTypes;
 
+// Need to update these values.
+type Props = {
+    className: string;
+    components: any[];
+    onReorder: (i: any[]) => void;
+    style: any;
+    verify: (i: any) => boolean;
+};
+
+type DefaultProps = {
+    className: Props["className"];
+    components: Props["components"];
+    onReorder: Props["onReorder"];
+    style: Props["style"];
+    verify: Props["verify"];
+};
+
 /**
  * Takes an array of components to sort.
  * As of 08/05/24, there are two sortable components
@@ -13,57 +29,63 @@ const PT = PropTypes;
  * As far as I can tell, this one is only used in ExpressionEditor.
  */
 // eslint-disable-next-line react/no-unsafe
-const SortableArea = createReactClass({
-    propTypes: {
-        className: PT.string,
-        components: PT.arrayOf(PT.node).isRequired,
-        onReorder: PT.func.isRequired,
-        style: PT.any,
-        verify: PT.func,
-    },
-    getDefaultProps: function () {
-        return {verify: () => true};
-    },
-    getInitialState: function () {
+export class SortableArea extends React.Component<Props> {
+    dragging: any;
+    _dragItems: any;
+
+    static defaultProps: DefaultProps = {
+        className: "",
+        components: [],
+        onReorder: () => true,
+        style: {},
+        verify: () => true,
+    };
+
+    getInitialState() {
         return {
             // index of the component being dragged
             dragging: null,
             components: this.props.components,
         };
-    },
+    }
     // Firefox refuses to drag an element unless you set data on it. Hackily
     // add data each time an item is dragged.
-    componentDidMount: function () {
+    componentDidMount() {
         this._setDragEvents();
-    },
+    }
+
     // eslint-disable-next-line react/no-unsafe
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         this.setState({components: nextProps.components});
-    },
-    componentDidUpdate: function () {
+    }
+
+    componentDidUpdate() {
         this._setDragEvents();
-    },
+    }
+
     // Alternatively send each handler to each component individually,
     // partially applied
-    onDragStart: function (startIndex) {
+    onDragStart(startIndex) {
         this.setState({dragging: startIndex});
-    },
-    onDrop: function () {
+    }
+
+    onDrop() {
         // tell the parent component
         this.setState({dragging: null});
-        this.props.onReorder(this.state.components);
-    },
-    onDragEnter: function (enterIndex) {
+        this.props.onReorder(this.props.components);
+    }
+
+    onDragEnter(enterIndex) {
         // When a label is first dragged it triggers a dragEnter with itself,
         // which we don't care about.
-        if (this.state.dragging === enterIndex) {
+        if (this.dragging === enterIndex) {
             return;
         }
 
-        const newComponents = this.state.components.slice();
+        const newComponents = this.props.components.slice();
 
         // splice the tab out of its old position
-        const removed = newComponents.splice(this.state.dragging, 1);
+        const removed = newComponents.splice(this.dragging, 1);
         // ... and into its new position
         newComponents.splice(enterIndex, 0, removed[0]);
 
@@ -75,15 +97,18 @@ const SortableArea = createReactClass({
             });
         }
         return verified;
-    },
-    _listenEvent: function (e) {
+    }
+
+    _listenEvent(e) {
         e.dataTransfer.setData("hackhackhack", "because browsers!");
-    },
-    _cancelEvent: function (e) {
+    }
+
+    _cancelEvent(e) {
         // prevent the browser from redirecting to 'because browsers!'
         e.preventDefault();
-    },
-    _setDragEvents: function () {
+    }
+
+    _setDragEvents() {
         this._dragItems = this._dragItems || [];
         const items =
             // @ts-expect-error - TS2531 - Object is possibly 'null'
@@ -117,16 +142,17 @@ const SortableArea = createReactClass({
             dragItem.removeEventListener("dragstart", this._listenEvent);
             dragItem.removeEventListener("drop", this._cancelEvent);
         }
-    },
-    render: function () {
-        const sortables = this.state.components.map((component, index) => (
+    }
+
+    render() {
+        const sortables = this.props.components.map((component, index) => (
             <SortableItem
                 index={index}
                 component={component}
                 area={this}
                 key={component.key}
                 draggable={component.props.draggable}
-                dragging={index === this.state.dragging}
+                dragging={index === this.dragging}
             />
         ));
         return (
@@ -134,40 +160,57 @@ const SortableArea = createReactClass({
                 {sortables}
             </ol>
         );
-    },
-});
+    }
+}
+
+type ItemProps = {
+    area: any;
+    component: any;
+    dragging: boolean;
+    draggable: boolean;
+    index: number;
+};
+
+type DefaultItemProps = {
+    area: ItemProps["area"];
+    component: ItemProps["component"];
+    dragging: ItemProps["dragging"];
+    draggable: ItemProps["draggable"];
+    index: ItemProps["index"];
+};
 
 // An individual sortable item
-const SortableItem = createReactClass({
-    propTypes: {
-        area: PT.shape({
-            onDragEnter: PT.func.isRequired,
-            onDragStart: PT.func.isRequired,
-            onDrop: PT.func.isRequired,
-        }),
-        component: PT.node.isRequired,
-        dragging: PT.bool.isRequired,
-        draggable: PT.bool.isRequired,
-        index: PT.number.isRequired,
-    },
-    handleDragStart: function (e) {
+export class SortableItem extends React.Component<ItemProps> {
+    static defaultProps: DefaultItemProps = {
+        area: "",
+        component: {},
+        dragging: false,
+        draggable: false,
+        index: 0,
+    };
+
+    handleDragStart(e) {
         e.nativeEvent.dataTransfer.effectAllowed = "move";
         this.props.area.onDragStart(this.props.index);
-    },
-    handleDrop: function () {
+    }
+
+    handleDrop() {
         this.props.area.onDrop(this.props.index);
-    },
-    handleDragEnter: function (e) {
+    }
+
+    handleDragEnter(e) {
         const verified = this.props.area.onDragEnter(this.props.index);
         // Ideally this would change the cursor based on whether this is a
         // valid place to drop.
         e.nativeEvent.dataTransfer.effectAllowed = verified ? "move" : "none";
-    },
-    handleDragOver: function (e) {
+    }
+
+    handleDragOver(e) {
         // allow a drop by preventing default handling
         e.preventDefault();
-    },
-    render: function () {
+    }
+
+    render() {
         // I think these might be getting styles from Webapp
         let dragState = "sortable-disabled";
         if (this.props.dragging) {
@@ -188,8 +231,8 @@ const SortableItem = createReactClass({
                 {this.props.component}
             </li>
         );
-    },
-});
+    }
+}
 
 const styles = StyleSheet.create({
     sortableListItem: {
diff --git a/packages/perseus-editor/src/stateful-editor-page.tsx b/packages/perseus-editor/src/stateful-editor-page.tsx
index 96d1f2e699..e8a5bb01e9 100644
--- a/packages/perseus-editor/src/stateful-editor-page.tsx
+++ b/packages/perseus-editor/src/stateful-editor-page.tsx
@@ -1,11 +1,17 @@
 /* eslint-disable react/no-unsafe */
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import EditorPage from "./editor-page";
 
+type Props = {
+    componentClass: any;
+};
+
+type DefaultProps = {
+    componentClass: Props["componentClass"];
+};
+
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
  *
  * Normally the parent of EditorPage must pass it an onChange callback and then
@@ -13,35 +19,31 @@ import EditorPage from "./editor-page";
  * changes. With StatefulEditorPage changes are stored in state so you can
  * query them with serialize.
  */
-const StatefulEditorPage = createReactClass({
-    displayName: "StatefulEditorPage",
+export class StatefulEditorPage extends React.Component<Props> {
+    static displayName: "StatefulEditorPage";
 
-    propTypes: {
-        componentClass: PropTypes.func,
-    },
+    static defaultProps: DefaultProps = {
+        componentClass: EditorPage,
+    };
 
-    getDefaultProps: function () {
-        return {
-            componentClass: EditorPage,
-        };
-    },
+    _isMounted: any;
 
-    getInitialState: function () {
+    getInitialState() {
         return _({}).extend(_.omit(this.props, "componentClass"), {
             onChange: this.handleChange,
             ref: "editor",
         });
-    },
+    }
 
-    componentDidMount: function () {
+    componentDidMount() {
         this._isMounted = true;
-    },
+    }
 
     // getInitialState isn't called if the react component is re-rendered
     // in-place on the dom, in which case this is called instead, so we
     // need to update the state here.
     // (This component is currently re-rendered by the "Add image" button.)
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         this.setState(
             _(nextProps).pick(
                 "apiOptions",
@@ -52,37 +54,37 @@ const StatefulEditorPage = createReactClass({
                 "frameSource",
             ),
         );
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         this._isMounted = false;
-    },
+    }
 
-    getSaveWarnings: function () {
+    getSaveWarnings() {
         // eslint-disable-next-line react/no-string-refs
-        return this.refs.editor.getSaveWarnings();
-    },
+        return this.getSaveWarnings();
+    }
 
-    serialize: function () {
+    serialize() {
         // eslint-disable-next-line react/no-string-refs
-        return this.refs.editor.serialize();
-    },
+        return this.serialize();
+    }
 
-    handleChange: function (newState, cb) {
+    handleChange(newState, cb) {
         if (this._isMounted) {
             this.setState(newState, cb);
         }
-    },
+    }
 
-    scorePreview: function () {
+    scorePreview() {
         // eslint-disable-next-line react/no-string-refs
-        return this.refs.editor.scorePreview();
-    },
+        return this.scorePreview();
+    }
 
-    render: function () {
+    render() {
         const Component = this.props.componentClass;
         return <Component {...this.state} />;
-    },
-});
+    }
+}
 
 export default StatefulEditorPage;

From 2576372a948da8ae53757dd33a665c52d331376f Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 23 Sep 2024 17:49:20 -0700
Subject: [PATCH 04/20] graph settings updating.

---
 .../src/components/graph-settings.tsx         | 214 +++++++++---------
 1 file changed, 113 insertions(+), 101 deletions(-)

diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
index b65498183f..bd87ccd240 100644
--- a/packages/perseus-editor/src/components/graph-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -11,8 +11,6 @@ import {
     Util,
 } from "@khanacademy/perseus";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -28,70 +26,84 @@ const defaultBackgroundImage = {
 function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
-
-const GraphSettings = createReactClass({
-    displayName: "GraphSettings",
-
-    propTypes: {
-        ...Changeable.propTypes,
-        editableSettings: PropTypes.arrayOf(
-            PropTypes.oneOf(["canvas", "graph", "snap", "image", "measure"]),
-        ),
-        box: PropTypes.arrayOf(PropTypes.number),
-        labels: PropTypes.arrayOf(PropTypes.string),
-        range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-        step: PropTypes.arrayOf(PropTypes.number),
-        gridStep: PropTypes.arrayOf(PropTypes.number),
-        snapStep: PropTypes.arrayOf(PropTypes.number),
-        valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-        backgroundImage: PropTypes.object,
-        markings: PropTypes.oneOf(["graph", "grid", "none"]),
-        showProtractor: PropTypes.bool,
-        showRuler: PropTypes.bool,
-        showTooltips: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-    },
-
-    getDefaultProps: function () {
-        return {
-            editableSettings: ["graph", "snap", "image", "measure"],
-            box: [
-                interactiveSizes.defaultBoxSizeSmall,
-                interactiveSizes.defaultBoxSizeSmall,
-            ],
-            labels: ["x", "y"],
-            range: [
-                [-10, 10],
-                [-10, 10],
-            ],
-            step: [1, 1],
-            gridStep: [1, 1],
-            snapStep: [1, 1],
-            valid: true,
-            backgroundImage: defaultBackgroundImage,
-            markings: "graph",
-            showProtractor: false,
-            showRuler: false,
-            showTooltips: false,
-            rulerLabel: "",
-            rulerTicks: 10,
-        };
-    },
-
-    getInitialState: function () {
+type Props = {
+    editableSettings: any[];
+    box: any[];
+    labels: string[];
+    range: any[];
+    step: number[];
+    gridStep: number[];
+    snapStep: number[];
+    valid: any;
+    backgroundImage: any;
+    markings: any;
+    showProtractor: boolean;
+    showRuler: boolean;
+    showTooltips: boolean;
+    rulerLabel: string;
+    rulerTicks: number;
+};
+
+type DefaultProps = {
+    editableSettings: Props["editableSettings"];
+    box: Props["box"];
+    labels: Props["labels"];
+    range: Props["range"];
+    step: Props["step"];
+    gridStep: Props["gridStep"];
+    snapStep: Props["snapStep"];
+    valid: Props["valid"];
+    backgroundImage: Props["backgroundImage"];
+    markings: Props["markings"];
+    showProtractor: Props["showProtractor"];
+    showRuler: Props["showRuler"];
+    showTooltips: Props["showTooltips"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+};
+
+export class GraphSettings extends React.Component<Props> {
+    static displayName: "GraphSettings";
+
+    static defaultProps: DefaultProps = {
+        editableSettings: ["graph", "snap", "image", "measure"],
+        box: [
+            interactiveSizes.defaultBoxSizeSmall,
+            interactiveSizes.defaultBoxSizeSmall,
+        ],
+        labels: ["x", "y"],
+        range: [
+            [-10, 10],
+            [-10, 10],
+        ],
+        step: [1, 1],
+        gridStep: [1, 1],
+        snapStep: [1, 1],
+        valid: true,
+        backgroundImage: defaultBackgroundImage,
+        markings: "graph",
+        showProtractor: false,
+        showRuler: false,
+        showTooltips: false,
+        rulerLabel: "",
+        rulerTicks: 10,
+    };
+
+    _isMounted: any;
+
+    getInitialState() {
         return this.stateFromProps(this.props);
-    },
+    }
 
-    componentDidMount: function () {
+    componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
 
         this.changeGraph = _.debounce(this.changeGraph, 300);
-    },
+    }
 
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         // Make sure that state updates when switching
         // between different items in a multi-item editor.
         if (
@@ -104,13 +116,13 @@ const GraphSettings = createReactClass({
         ) {
             this.setState(this.stateFromProps(nextProps));
         }
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         this._isMounted = false;
-    },
+    }
 
-    stateFromProps: function (props) {
+    stateFromProps(props) {
         return {
             labelsTextbox: props.labels,
             gridStepTextbox: props.gridStep,
@@ -119,23 +131,23 @@ const GraphSettings = createReactClass({
             rangeTextbox: props.range,
             backgroundImage: _.clone(props.backgroundImage),
         };
-    },
+    }
 
     change(...args) {
         return Changeable.change.apply(this, args);
-    },
+    }
 
     // TODO(aria): Make either a wrapper for standard events to work
     // with this.change, or make these use some TextInput/NumberInput box
-    changeRulerLabel: function (e) {
+    changeRulerLabel(e) {
         this.change({rulerLabel: e.target.value});
-    },
+    }
 
-    changeRulerTicks: function (e) {
+    changeRulerTicks(e) {
         this.change({rulerTicks: +e.target.value});
-    },
+    }
 
-    changeBackgroundUrl: function (e) {
+    changeBackgroundUrl(e) {
         // Only continue on blur or "enter"
         if (e.type === "keypress" && e.key !== "Enter") {
             return;
@@ -166,9 +178,9 @@ const GraphSettings = createReactClass({
         } else {
             setUrl(null, 0, 0);
         }
-    },
+    }
 
-    renderLabelChoices: function (choices) {
+    renderLabelChoices(choices) {
         return _.map(choices, function ([name, value]) {
             return (
                 <option key={value} value={value}>
@@ -176,9 +188,9 @@ const GraphSettings = createReactClass({
                 </option>
             );
         });
-    },
+    }
 
-    validRange: function (range) {
+    validRange(range) {
         const numbers = _.every(range, function (num) {
             return _.isFinite(num);
         });
@@ -189,9 +201,9 @@ const GraphSettings = createReactClass({
             return "Range must have a higher number on the right";
         }
         return true;
-    },
+    }
 
-    validateStepValue: function (settings) {
+    validateStepValue(settings) {
         const {step, range, name, minTicks, maxTicks} = settings;
 
         if (!_.isFinite(step)) {
@@ -215,9 +227,9 @@ const GraphSettings = createReactClass({
             );
         }
         return true;
-    },
+    }
 
-    validSnapStep: function (step, range) {
+    validSnapStep(step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -225,9 +237,9 @@ const GraphSettings = createReactClass({
             minTicks: 5,
             maxTicks: 60,
         });
-    },
+    }
 
-    validGridStep: function (step, range) {
+    validGridStep(step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -235,9 +247,9 @@ const GraphSettings = createReactClass({
             minTicks: 3,
             maxTicks: 60,
         });
-    },
+    }
 
-    validStep: function (step, range) {
+    validStep(step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -245,9 +257,9 @@ const GraphSettings = createReactClass({
             minTicks: 3,
             maxTicks: 20,
         });
-    },
+    }
 
-    validBackgroundImageSize: function (image) {
+    validBackgroundImageSize(image) {
         // Ignore empty images
         if (!image.url) {
             return true;
@@ -259,9 +271,9 @@ const GraphSettings = createReactClass({
             return "Image must be smaller than 450px x 450px.";
         }
         return true;
-    },
+    }
 
-    validateGraphSettings: function (range, step, gridStep, snapStep, image) {
+    validateGraphSettings(range, step, gridStep, snapStep, image) {
         const self = this;
         let msg;
         const goodRange = _.every(range, function (range) {
@@ -298,16 +310,16 @@ const GraphSettings = createReactClass({
             return msg;
         }
         return true;
-    },
+    }
 
-    changeLabel: function (i, e) {
+    changeLabel(i, e) {
         const val = e.target.value;
         const labels = this.state.labelsTextbox.slice();
         labels[i] = val;
         this.setState({labelsTextbox: labels}, this.changeGraph);
-    },
+    }
 
-    changeRange: function (i, values) {
+    changeRange(i, values) {
         const ranges = this.state.rangeTextbox.slice();
         ranges[i] = values;
         const step = this.state.stepTextbox.slice();
@@ -328,17 +340,17 @@ const GraphSettings = createReactClass({
             },
             this.changeGraph,
         );
-    },
+    }
 
-    changeStep: function (step) {
+    changeStep(step) {
         this.setState({stepTextbox: step}, this.changeGraph);
-    },
+    }
 
-    changeSnapStep: function (snapStep) {
+    changeSnapStep(snapStep) {
         this.setState({snapStepTextbox: snapStep}, this.changeGraph);
-    },
+    }
 
-    changeGridStep: function (gridStep) {
+    changeGridStep(gridStep) {
         this.setState(
             {
                 gridStepTextbox: gridStep,
@@ -348,9 +360,9 @@ const GraphSettings = createReactClass({
             },
             this.changeGraph,
         );
-    },
+    }
 
-    changeGraph: function () {
+    changeGraph() {
         const labels = this.state.labelsTextbox;
         const range = _.map(this.state.rangeTextbox, function (range) {
             return _.map(range, Number);
@@ -389,9 +401,9 @@ const GraphSettings = createReactClass({
                 valid: validationResult, // a string message, not false
             });
         }
-    },
+    }
 
-    render: function () {
+    render() {
         const scale = [
             KhanMath.roundTo(
                 2,
@@ -647,7 +659,7 @@ const GraphSettings = createReactClass({
                 )}
             </div>
         );
-    },
-});
+    }
+}
 
 export default GraphSettings;

From f494bc269cb98422dd3bf0cacf2021e3cbca794b Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 20 Nov 2024 10:47:28 -0800
Subject: [PATCH 05/20] undoing measurer changes.

---
 packages/perseus/src/widgets/measurer/measurer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/perseus/src/widgets/measurer/measurer.tsx b/packages/perseus/src/widgets/measurer/measurer.tsx
index 166ae64d64..4347ec677e 100644
--- a/packages/perseus/src/widgets/measurer/measurer.tsx
+++ b/packages/perseus/src/widgets/measurer/measurer.tsx
@@ -121,8 +121,8 @@ class Measurer extends React.Component<Props> implements Widget {
         if (this.props.showProtractor) {
             // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
             this.protractor = graphie.protractor([
-                this.protractorX,
-                this.protractorY,
+                this.props.protractorX,
+                this.props.protractorY,
             ]);
         }
 
@@ -132,7 +132,7 @@ class Measurer extends React.Component<Props> implements Widget {
 
         if (this.props.showRuler) {
             // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
-            this._ruler = graphie.ruler({
+            this.ruler = graphie.ruler({
                 center: [
                     (range[0][0] + range[0][1]) / 2,
                     (range[1][0] + range[1][1]) / 2,

From 1d3a1de63d8ecdecfcfae40dcb2acf667df8e62c Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 20 Nov 2024 11:34:35 -0800
Subject: [PATCH 06/20] reverting json-editor.tsx

---
 .../src/components/json-editor.tsx            | 60 ++++++++-----------
 1 file changed, 24 insertions(+), 36 deletions(-)

diff --git a/packages/perseus-editor/src/components/json-editor.tsx b/packages/perseus-editor/src/components/json-editor.tsx
index 98dd5827f1..3c1f3186b9 100644
--- a/packages/perseus-editor/src/components/json-editor.tsx
+++ b/packages/perseus-editor/src/components/json-editor.tsx
@@ -1,42 +1,30 @@
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable react/no-unsafe */
+import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-type Props = {
-    value: any;
-};
+const JsonEditor: any = createReactClass({
+    displayName: "JsonEditor",
 
-type DefaultProps = {
-    value: Props["value"];
-};
+    getInitialState: function () {
+        return {
+            currentValue: JSON.stringify(this.props.value, null, 4),
+            valid: true,
+        };
+    },
 
-export class JsonEditor extends React.Component<Props> {
-    static displayName: "JsonEditor";
-    currentValue: string
-    valid: boolean;
-
-    static defaultProps: DefaultProps = {
-        value: 0
-    };
-
-    static getInitialState() {
-        currentValue: JSON.stringify(this.props.value, null, 4),
-        valid: true,
-    };
-
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
         const shouldReplaceContent =
-            !this.valid ||
-            !_.isEqual(nextProps.value, JSON.parse(this.currentValue));
+            !this.state.valid ||
+            !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue));
 
         if (shouldReplaceContent) {
             this.setState(this.getInitialState());
         }
-    };
+    },
 
-    handleKeyDown(e) {
+    handleKeyDown: function (e) {
         // This handler allows the tab character to be entered by pressing
         // tab, instead of jumping to the next (non-existant) field
         if (e.key === "Tab") {
@@ -51,9 +39,9 @@ export class JsonEditor extends React.Component<Props> {
             e.preventDefault();
             this.handleChange(e);
         }
-    };
+    },
 
-    handleChange(e) {
+    handleChange: function (e) {
         const nextString = e.target.value;
         try {
             let json = JSON.parse(nextString);
@@ -80,11 +68,11 @@ export class JsonEditor extends React.Component<Props> {
                 valid: false,
             });
         }
-    };
+    },
 
     // You can type whatever you want as you're typing, but if it's not valid
     // when you blur, it will revert to the last valid value.
-    handleBlur(e) {
+    handleBlur: function (e) {
         const nextString = e.target.value;
         try {
             let json = JSON.parse(nextString);
@@ -111,22 +99,22 @@ export class JsonEditor extends React.Component<Props> {
                 valid: true,
             });
         }
-    };
+    },
 
-    render() {
+    render: function () {
         const classes =
-            "perseus-json-editor " + (this.valid ? "valid" : "invalid");
+            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
 
         return (
             <textarea
                 className={classes}
-                value={this.currentValue}
+                value={this.state.currentValue}
                 onChange={this.handleChange}
                 onKeyDown={this.handleKeyDown}
                 onBlur={this.handleBlur}
             />
         );
-    };
-};
+    },
+});
 
 export default JsonEditor;

From 5acba42c860d4a1e14e3c0e6e339d27f35737c45 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 20 Nov 2024 11:35:29 -0800
Subject: [PATCH 07/20] reverting graph-settings.tsx

---
 .../src/components/graph-settings.tsx         | 214 +++++++++---------
 1 file changed, 101 insertions(+), 113 deletions(-)

diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
index bd87ccd240..b65498183f 100644
--- a/packages/perseus-editor/src/components/graph-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -11,6 +11,8 @@ import {
     Util,
 } from "@khanacademy/perseus";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
+import createReactClass from "create-react-class";
+import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -26,84 +28,70 @@ const defaultBackgroundImage = {
 function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
-type Props = {
-    editableSettings: any[];
-    box: any[];
-    labels: string[];
-    range: any[];
-    step: number[];
-    gridStep: number[];
-    snapStep: number[];
-    valid: any;
-    backgroundImage: any;
-    markings: any;
-    showProtractor: boolean;
-    showRuler: boolean;
-    showTooltips: boolean;
-    rulerLabel: string;
-    rulerTicks: number;
-};
-
-type DefaultProps = {
-    editableSettings: Props["editableSettings"];
-    box: Props["box"];
-    labels: Props["labels"];
-    range: Props["range"];
-    step: Props["step"];
-    gridStep: Props["gridStep"];
-    snapStep: Props["snapStep"];
-    valid: Props["valid"];
-    backgroundImage: Props["backgroundImage"];
-    markings: Props["markings"];
-    showProtractor: Props["showProtractor"];
-    showRuler: Props["showRuler"];
-    showTooltips: Props["showTooltips"];
-    rulerLabel: Props["rulerLabel"];
-    rulerTicks: Props["rulerTicks"];
-};
-
-export class GraphSettings extends React.Component<Props> {
-    static displayName: "GraphSettings";
-
-    static defaultProps: DefaultProps = {
-        editableSettings: ["graph", "snap", "image", "measure"],
-        box: [
-            interactiveSizes.defaultBoxSizeSmall,
-            interactiveSizes.defaultBoxSizeSmall,
-        ],
-        labels: ["x", "y"],
-        range: [
-            [-10, 10],
-            [-10, 10],
-        ],
-        step: [1, 1],
-        gridStep: [1, 1],
-        snapStep: [1, 1],
-        valid: true,
-        backgroundImage: defaultBackgroundImage,
-        markings: "graph",
-        showProtractor: false,
-        showRuler: false,
-        showTooltips: false,
-        rulerLabel: "",
-        rulerTicks: 10,
-    };
-
-    _isMounted: any;
-
-    getInitialState() {
+
+const GraphSettings = createReactClass({
+    displayName: "GraphSettings",
+
+    propTypes: {
+        ...Changeable.propTypes,
+        editableSettings: PropTypes.arrayOf(
+            PropTypes.oneOf(["canvas", "graph", "snap", "image", "measure"]),
+        ),
+        box: PropTypes.arrayOf(PropTypes.number),
+        labels: PropTypes.arrayOf(PropTypes.string),
+        range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+        step: PropTypes.arrayOf(PropTypes.number),
+        gridStep: PropTypes.arrayOf(PropTypes.number),
+        snapStep: PropTypes.arrayOf(PropTypes.number),
+        valid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+        backgroundImage: PropTypes.object,
+        markings: PropTypes.oneOf(["graph", "grid", "none"]),
+        showProtractor: PropTypes.bool,
+        showRuler: PropTypes.bool,
+        showTooltips: PropTypes.bool,
+        rulerLabel: PropTypes.string,
+        rulerTicks: PropTypes.number,
+    },
+
+    getDefaultProps: function () {
+        return {
+            editableSettings: ["graph", "snap", "image", "measure"],
+            box: [
+                interactiveSizes.defaultBoxSizeSmall,
+                interactiveSizes.defaultBoxSizeSmall,
+            ],
+            labels: ["x", "y"],
+            range: [
+                [-10, 10],
+                [-10, 10],
+            ],
+            step: [1, 1],
+            gridStep: [1, 1],
+            snapStep: [1, 1],
+            valid: true,
+            backgroundImage: defaultBackgroundImage,
+            markings: "graph",
+            showProtractor: false,
+            showRuler: false,
+            showTooltips: false,
+            rulerLabel: "",
+            rulerTicks: 10,
+        };
+    },
+
+    getInitialState: function () {
         return this.stateFromProps(this.props);
-    }
+    },
 
-    componentDidMount() {
+    componentDidMount: function () {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
 
         this.changeGraph = _.debounce(this.changeGraph, 300);
-    }
+    },
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
         // Make sure that state updates when switching
         // between different items in a multi-item editor.
         if (
@@ -116,13 +104,13 @@ export class GraphSettings extends React.Component<Props> {
         ) {
             this.setState(this.stateFromProps(nextProps));
         }
-    }
+    },
 
-    componentWillUnmount() {
+    componentWillUnmount: function () {
         this._isMounted = false;
-    }
+    },
 
-    stateFromProps(props) {
+    stateFromProps: function (props) {
         return {
             labelsTextbox: props.labels,
             gridStepTextbox: props.gridStep,
@@ -131,23 +119,23 @@ export class GraphSettings extends React.Component<Props> {
             rangeTextbox: props.range,
             backgroundImage: _.clone(props.backgroundImage),
         };
-    }
+    },
 
     change(...args) {
         return Changeable.change.apply(this, args);
-    }
+    },
 
     // TODO(aria): Make either a wrapper for standard events to work
     // with this.change, or make these use some TextInput/NumberInput box
-    changeRulerLabel(e) {
+    changeRulerLabel: function (e) {
         this.change({rulerLabel: e.target.value});
-    }
+    },
 
-    changeRulerTicks(e) {
+    changeRulerTicks: function (e) {
         this.change({rulerTicks: +e.target.value});
-    }
+    },
 
-    changeBackgroundUrl(e) {
+    changeBackgroundUrl: function (e) {
         // Only continue on blur or "enter"
         if (e.type === "keypress" && e.key !== "Enter") {
             return;
@@ -178,9 +166,9 @@ export class GraphSettings extends React.Component<Props> {
         } else {
             setUrl(null, 0, 0);
         }
-    }
+    },
 
-    renderLabelChoices(choices) {
+    renderLabelChoices: function (choices) {
         return _.map(choices, function ([name, value]) {
             return (
                 <option key={value} value={value}>
@@ -188,9 +176,9 @@ export class GraphSettings extends React.Component<Props> {
                 </option>
             );
         });
-    }
+    },
 
-    validRange(range) {
+    validRange: function (range) {
         const numbers = _.every(range, function (num) {
             return _.isFinite(num);
         });
@@ -201,9 +189,9 @@ export class GraphSettings extends React.Component<Props> {
             return "Range must have a higher number on the right";
         }
         return true;
-    }
+    },
 
-    validateStepValue(settings) {
+    validateStepValue: function (settings) {
         const {step, range, name, minTicks, maxTicks} = settings;
 
         if (!_.isFinite(step)) {
@@ -227,9 +215,9 @@ export class GraphSettings extends React.Component<Props> {
             );
         }
         return true;
-    }
+    },
 
-    validSnapStep(step, range) {
+    validSnapStep: function (step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -237,9 +225,9 @@ export class GraphSettings extends React.Component<Props> {
             minTicks: 5,
             maxTicks: 60,
         });
-    }
+    },
 
-    validGridStep(step, range) {
+    validGridStep: function (step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -247,9 +235,9 @@ export class GraphSettings extends React.Component<Props> {
             minTicks: 3,
             maxTicks: 60,
         });
-    }
+    },
 
-    validStep(step, range) {
+    validStep: function (step, range) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -257,9 +245,9 @@ export class GraphSettings extends React.Component<Props> {
             minTicks: 3,
             maxTicks: 20,
         });
-    }
+    },
 
-    validBackgroundImageSize(image) {
+    validBackgroundImageSize: function (image) {
         // Ignore empty images
         if (!image.url) {
             return true;
@@ -271,9 +259,9 @@ export class GraphSettings extends React.Component<Props> {
             return "Image must be smaller than 450px x 450px.";
         }
         return true;
-    }
+    },
 
-    validateGraphSettings(range, step, gridStep, snapStep, image) {
+    validateGraphSettings: function (range, step, gridStep, snapStep, image) {
         const self = this;
         let msg;
         const goodRange = _.every(range, function (range) {
@@ -310,16 +298,16 @@ export class GraphSettings extends React.Component<Props> {
             return msg;
         }
         return true;
-    }
+    },
 
-    changeLabel(i, e) {
+    changeLabel: function (i, e) {
         const val = e.target.value;
         const labels = this.state.labelsTextbox.slice();
         labels[i] = val;
         this.setState({labelsTextbox: labels}, this.changeGraph);
-    }
+    },
 
-    changeRange(i, values) {
+    changeRange: function (i, values) {
         const ranges = this.state.rangeTextbox.slice();
         ranges[i] = values;
         const step = this.state.stepTextbox.slice();
@@ -340,17 +328,17 @@ export class GraphSettings extends React.Component<Props> {
             },
             this.changeGraph,
         );
-    }
+    },
 
-    changeStep(step) {
+    changeStep: function (step) {
         this.setState({stepTextbox: step}, this.changeGraph);
-    }
+    },
 
-    changeSnapStep(snapStep) {
+    changeSnapStep: function (snapStep) {
         this.setState({snapStepTextbox: snapStep}, this.changeGraph);
-    }
+    },
 
-    changeGridStep(gridStep) {
+    changeGridStep: function (gridStep) {
         this.setState(
             {
                 gridStepTextbox: gridStep,
@@ -360,9 +348,9 @@ export class GraphSettings extends React.Component<Props> {
             },
             this.changeGraph,
         );
-    }
+    },
 
-    changeGraph() {
+    changeGraph: function () {
         const labels = this.state.labelsTextbox;
         const range = _.map(this.state.rangeTextbox, function (range) {
             return _.map(range, Number);
@@ -401,9 +389,9 @@ export class GraphSettings extends React.Component<Props> {
                 valid: validationResult, // a string message, not false
             });
         }
-    }
+    },
 
-    render() {
+    render: function () {
         const scale = [
             KhanMath.roundTo(
                 2,
@@ -659,7 +647,7 @@ export class GraphSettings extends React.Component<Props> {
                 )}
             </div>
         );
-    }
-}
+    },
+});
 
 export default GraphSettings;

From 177277470caafd9900cac08bf7e384c594ef310f Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 20 Nov 2024 13:41:06 -0800
Subject: [PATCH 08/20] Add changeset.

---
 .changeset/khaki-keys-approve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/khaki-keys-approve.md

diff --git a/.changeset/khaki-keys-approve.md b/.changeset/khaki-keys-approve.md
new file mode 100644
index 0000000000..57858e31c7
--- /dev/null
+++ b/.changeset/khaki-keys-approve.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Removing usage of createReactClass from several component files.

From a23968f5e5c898148d4947d71daeda97f95aafe3 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 20 Nov 2024 14:00:37 -0800
Subject: [PATCH 09/20] Adding some more typing.

---
 packages/perseus-editor/src/editor.tsx                    | 2 +-
 packages/perseus-editor/src/stateful-editor-page.tsx      | 2 +-
 packages/perseus-editor/src/widgets/expression-editor.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
index f42d0a4607..9047d21f95 100644
--- a/packages/perseus-editor/src/editor.tsx
+++ b/packages/perseus-editor/src/editor.tsx
@@ -19,7 +19,7 @@ import "./katex-mhchem";
 import * as React from "react";
 import _ from "underscore";
 
-import DragTarget from "./components/drag-target";
+import {DragTarget} from "./components/drag-target";
 import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
 import TexErrorView from "./tex-error-view";
diff --git a/packages/perseus-editor/src/stateful-editor-page.tsx b/packages/perseus-editor/src/stateful-editor-page.tsx
index 607b0580ea..f62574e43b 100644
--- a/packages/perseus-editor/src/stateful-editor-page.tsx
+++ b/packages/perseus-editor/src/stateful-editor-page.tsx
@@ -5,7 +5,7 @@ import _ from "underscore";
 import EditorPage from "./editor-page";
 
 type Props = {
-    componentClass: any;
+    componentClass: React.ComponentType;
 };
 
 type DefaultProps = {
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index d5db27d7f5..a7e40eef21 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -20,7 +20,7 @@ import lens from "hubble";
 import * as React from "react";
 import _ from "underscore";
 
-import SortableArea from "../components/sortable";
+import {SortableArea} from "../components/sortable";
 
 import type {
     PerseusExpressionWidgetOptions,

From 0ab55ed336b0b4802487060c33e2ec2eeacee1fa Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 14:13:42 -0800
Subject: [PATCH 10/20] Fixing some structure to drag-target.tsx

---
 .../src/components/drag-target.tsx            | 36 +++++++++++--------
 .../src/stateful-editor-page.tsx              |  2 +-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/perseus-editor/src/components/drag-target.tsx b/packages/perseus-editor/src/components/drag-target.tsx
index 887d0165f1..a03f85f266 100644
--- a/packages/perseus-editor/src/components/drag-target.tsx
+++ b/packages/perseus-editor/src/components/drag-target.tsx
@@ -25,10 +25,12 @@
 import * as React from "react";
 
 type Props = {
-    onDrop: (any) => boolean;
+    onDrop: (e: DragEvent) => void;
     component: any;
     shouldDragHighlight: (any) => boolean;
     style: any;
+    children: any;
+    className: string;
 };
 
 type DefaultProps = {
@@ -36,23 +38,26 @@ type DefaultProps = {
     component: Props["component"];
     shouldDragHighlight: Props["shouldDragHighlight"];
     style: Props["style"];
+    children: Props["children"];
+    className: Props["className"];
 };
 
-export class DragTarget extends React.Component<Props> {
-    dragHover: any;
-
+type State = {
+    dragHover: boolean;
+};
+export class DragTarget extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
-        onDrop: () => true,
+        onDrop: () => {},
         component: "div",
         shouldDragHighlight: () => true,
         style: {},
+        children: {},
+        className: "",
     };
 
-    getInitialState() {
-        return {dragHover: false};
-    }
+    state: State = {dragHover: false};
 
-    handleDrop(e) {
+    handleDrop(e: DragEvent) {
         e.stopPropagation();
         e.preventDefault();
         this.setState({dragHover: false});
@@ -76,12 +81,13 @@ export class DragTarget extends React.Component<Props> {
     }
 
     render() {
-        const opacity = this.dragHover ? {opacity: 0.3} : {};
-        const Component = this.props.component;
-
-        const forwardProps = Object.assign({}, this.props);
-        delete forwardProps.component;
-        delete forwardProps.shouldDragHighlight;
+        const opacity = this.state.dragHover ? {opacity: 0.3} : {};
+        const {
+            component: Component,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            shouldDragHighlight,
+            ...forwardProps
+        } = this.props;
 
         return (
             <Component
diff --git a/packages/perseus-editor/src/stateful-editor-page.tsx b/packages/perseus-editor/src/stateful-editor-page.tsx
index f62574e43b..607b0580ea 100644
--- a/packages/perseus-editor/src/stateful-editor-page.tsx
+++ b/packages/perseus-editor/src/stateful-editor-page.tsx
@@ -5,7 +5,7 @@ import _ from "underscore";
 import EditorPage from "./editor-page";
 
 type Props = {
-    componentClass: React.ComponentType;
+    componentClass: any;
 };
 
 type DefaultProps = {

From 4c613b7ece9fff513b46c9f15afb0a6877c8c98d Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 14:16:36 -0800
Subject: [PATCH 11/20] removing prop types import.

---
 packages/perseus-editor/src/components/sortable.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index 5a84da4567..fb08df53c2 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -1,10 +1,7 @@
 import {css, StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-const PT = PropTypes;
-
 // Need to update these values.
 type Props = {
     className: string;

From cd38ae906033691994a9072908dd5b9f4028cc58 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 15:44:40 -0800
Subject: [PATCH 12/20] Adding more typing and binding to drag-target.tsx.

---
 .../src/components/drag-target.tsx            | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/perseus-editor/src/components/drag-target.tsx b/packages/perseus-editor/src/components/drag-target.tsx
index a03f85f266..f4a4b9b08a 100644
--- a/packages/perseus-editor/src/components/drag-target.tsx
+++ b/packages/perseus-editor/src/components/drag-target.tsx
@@ -26,20 +26,16 @@ import * as React from "react";
 
 type Props = {
     onDrop: (e: DragEvent) => void;
-    component: any;
+    component?: any;
     shouldDragHighlight: (any) => boolean;
-    style: any;
-    children: any;
-    className: string;
+    style?: any;
+    children?: any;
+    className?: string;
 };
 
 type DefaultProps = {
-    onDrop: Props["onDrop"];
     component: Props["component"];
     shouldDragHighlight: Props["shouldDragHighlight"];
-    style: Props["style"];
-    children: Props["children"];
-    className: Props["className"];
 };
 
 type State = {
@@ -47,15 +43,22 @@ type State = {
 };
 export class DragTarget extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
-        onDrop: () => {},
         component: "div",
         shouldDragHighlight: () => true,
-        style: {},
-        children: {},
-        className: "",
     };
 
-    state: State = {dragHover: false};
+    constructor(props) {
+        super(props);
+        this.state = {
+            dragHover: false,
+        };
+
+        this.handleDrop = this.handleDrop.bind(this);
+        this.handleDragEnd = this.handleDragEnd.bind(this);
+        this.handleDragOver = this.handleDragOver.bind(this);
+        this.handleDragLeave = this.handleDragLeave.bind(this);
+        this.handleDragEnter = this.handleDragEnter.bind(this);
+    }
 
     handleDrop(e: DragEvent) {
         e.stopPropagation();

From 72566c4db5db9e020f2841fad57f99fcc0ba0aa7 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 15:56:19 -0800
Subject: [PATCH 13/20] Fixing some sortable constructor.

---
 .../src/components/sortable.tsx               | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index fb08df53c2..4936b45a51 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -4,21 +4,22 @@ import ReactDOM from "react-dom";
 
 // Need to update these values.
 type Props = {
-    className: string;
+    className?: string;
     components: any[];
     onReorder: (i: any[]) => void;
-    style: any;
+    style?: any;
     verify: (i: any) => boolean;
 };
 
 type DefaultProps = {
-    className: Props["className"];
-    components: Props["components"];
-    onReorder: Props["onReorder"];
-    style: Props["style"];
     verify: Props["verify"];
 };
 
+type State = {
+    dragging: number;
+    components: any[];
+};
+
 /**
  * Takes an array of components to sort.
  * As of 08/05/24, there are two sortable components
@@ -26,25 +27,26 @@ type DefaultProps = {
  * As far as I can tell, this one is only used in ExpressionEditor.
  */
 // eslint-disable-next-line react/no-unsafe
-export class SortableArea extends React.Component<Props> {
-    dragging: any;
+export class SortableArea extends React.Component<Props, State> {
     _dragItems: any;
 
     static defaultProps: DefaultProps = {
-        className: "",
-        components: [],
-        onReorder: () => true,
-        style: {},
         verify: () => true,
     };
 
-    getInitialState() {
-        return {
+    constructor(props) {
+        super(props);
+        this.state = {
             // index of the component being dragged
-            dragging: null,
+            dragging: -1,
             components: this.props.components,
         };
+
+        this.onDrop = this.onDrop.bind(this);
+        this.onDragStart = this.onDragStart.bind(this);
+        this.onDragEnter = this.onDragEnter.bind(this);
     }
+
     // Firefox refuses to drag an element unless you set data on it. Hackily
     // add data each time an item is dragged.
     componentDidMount() {
@@ -68,21 +70,21 @@ export class SortableArea extends React.Component<Props> {
 
     onDrop() {
         // tell the parent component
-        this.setState({dragging: null});
+        this.setState({dragging: -1});
         this.props.onReorder(this.props.components);
     }
 
     onDragEnter(enterIndex) {
         // When a label is first dragged it triggers a dragEnter with itself,
         // which we don't care about.
-        if (this.dragging === enterIndex) {
+        if (this.state.dragging === enterIndex) {
             return;
         }
 
         const newComponents = this.props.components.slice();
 
         // splice the tab out of its old position
-        const removed = newComponents.splice(this.dragging, 1);
+        const removed = newComponents.splice(this.state.dragging, 1);
         // ... and into its new position
         newComponents.splice(enterIndex, 0, removed[0]);
 
@@ -149,7 +151,7 @@ export class SortableArea extends React.Component<Props> {
                 area={this}
                 key={component.key}
                 draggable={component.props.draggable}
-                dragging={index === this.dragging}
+                dragging={index === this.state.dragging}
             />
         ));
         return (

From 984f9e00bfef4f57852274dd61d2f762f937621c Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 16:01:23 -0800
Subject: [PATCH 14/20] Cleaning up sortable.tsx file!

---
 .../src/components/sortable.tsx               | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index 4936b45a51..009034f393 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -164,29 +164,17 @@ export class SortableArea extends React.Component<Props, State> {
 
 type ItemProps = {
     area: any;
-    component: any;
+    component: React.ReactNode;
     dragging: boolean;
     draggable: boolean;
     index: number;
 };
 
-type DefaultItemProps = {
-    area: ItemProps["area"];
-    component: ItemProps["component"];
-    dragging: ItemProps["dragging"];
-    draggable: ItemProps["draggable"];
-    index: ItemProps["index"];
-};
-
 // An individual sortable item
 export class SortableItem extends React.Component<ItemProps> {
-    static defaultProps: DefaultItemProps = {
-        area: "",
-        component: {},
-        dragging: false,
-        draggable: false,
-        index: 0,
-    };
+    constructor(props) {
+        super(props);
+    }
 
     handleDragStart(e) {
         e.nativeEvent.dataTransfer.effectAllowed = "move";

From 61c0cb538dc06eb005f8d995de10e5b4e9c1e3b3 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 25 Nov 2024 16:11:29 -0800
Subject: [PATCH 15/20] removing stateful-editor-page.

---
 packages/perseus-editor/src/index.ts          |  1 -
 .../src/stateful-editor-page.tsx              | 85 -------------------
 2 files changed, 86 deletions(-)
 delete mode 100644 packages/perseus-editor/src/stateful-editor-page.tsx

diff --git a/packages/perseus-editor/src/index.ts b/packages/perseus-editor/src/index.ts
index 14438825fe..73e1b5921f 100644
--- a/packages/perseus-editor/src/index.ts
+++ b/packages/perseus-editor/src/index.ts
@@ -11,7 +11,6 @@ export {default as Editor} from "./editor";
 export {default as i18n} from "./i18n";
 export {default as IframeContentRenderer} from "./iframe-content-renderer";
 export {default as MultiRendererEditor} from "./multirenderer-editor";
-export {default as StatefulEditorPage} from "./stateful-editor-page";
 
 import "./styles/perseus-editor.less";
 
diff --git a/packages/perseus-editor/src/stateful-editor-page.tsx b/packages/perseus-editor/src/stateful-editor-page.tsx
deleted file mode 100644
index 607b0580ea..0000000000
--- a/packages/perseus-editor/src/stateful-editor-page.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable react/no-unsafe */
-import * as React from "react";
-import _ from "underscore";
-
-import EditorPage from "./editor-page";
-
-type Props = {
-    componentClass: any;
-};
-
-type DefaultProps = {
-    componentClass: Props["componentClass"];
-};
-
-/* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
- *
- * Normally the parent of EditorPage must pass it an onChange callback and then
- * respond to any changes by modifying the EditorPage props to reflect those
- * changes. With StatefulEditorPage changes are stored in state so you can
- * query them with serialize.
- */
-export class StatefulEditorPage extends React.Component<Props> {
-    static displayName: "StatefulEditorPage";
-
-    static defaultProps: DefaultProps = {
-        componentClass: EditorPage,
-    };
-
-    _isMounted: any;
-
-    getInitialState() {
-        return _({}).extend(_.omit(this.props, "componentClass"), {
-            onChange: this.handleChange,
-            ref: "editor",
-        });
-    }
-
-    componentDidMount() {
-        this._isMounted = true;
-    }
-
-    // getInitialState isn't called if the react component is re-rendered
-    // in-place on the dom, in which case this is called instead, so we
-    // need to update the state here.
-    // (This component is currently re-rendered by the "Add image" button.)
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.setState(
-            _(nextProps).pick(
-                "apiOptions",
-                "imageUploader",
-                "developerMode",
-                "problemNum",
-                "previewDevice",
-                "frameSource",
-            ),
-        );
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    getSaveWarnings() {
-        // eslint-disable-next-line react/no-string-refs
-        return this.getSaveWarnings();
-    }
-
-    serialize() {
-        // eslint-disable-next-line react/no-string-refs
-        return this.serialize();
-    }
-
-    handleChange(newState, cb) {
-        if (this._isMounted) {
-            this.setState(newState, cb);
-        }
-    }
-
-    render() {
-        const Component = this.props.componentClass;
-        return <Component {...this.state} />;
-    }
-}
-
-export default StatefulEditorPage;

From d2a26789991c18f08e4315f55da711b762d26ccb Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 26 Nov 2024 08:57:34 -0800
Subject: [PATCH 16/20] Adding comment on broken file and link to issue.

---
 packages/perseus-editor/src/components/sortable.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index 009034f393..3a28fbb9f4 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -21,6 +21,11 @@ type State = {
 };
 
 /**
+ * TODO(LEMS-2667): 11/26/24, at the time of writing this comment
+ * it has been identified that this file has been broken long before
+ * the refactoring of createReactClass. Future implementation need
+ * to determine how to fix this functionality or deprecate it.
+ * *
  * Takes an array of components to sort.
  * As of 08/05/24, there are two sortable components
  * (one in perseus and one in perseus-editor).

From 680795284d27957727e75cd519393c1bdca4d498 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 26 Nov 2024 09:01:25 -0800
Subject: [PATCH 17/20] Fixing a few types and using state vs. props.

---
 packages/perseus-editor/src/components/sortable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index 3a28fbb9f4..d70b928fd7 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -5,7 +5,7 @@ import ReactDOM from "react-dom";
 // Need to update these values.
 type Props = {
     className?: string;
-    components: any[];
+    components: React.ReactElement[];
     onReorder: (i: any[]) => void;
     style?: any;
     verify: (i: any) => boolean;
@@ -17,7 +17,7 @@ type DefaultProps = {
 
 type State = {
     dragging: number;
-    components: any[];
+    components: React.ReactElement[];
 };
 
 /**
@@ -76,7 +76,7 @@ export class SortableArea extends React.Component<Props, State> {
     onDrop() {
         // tell the parent component
         this.setState({dragging: -1});
-        this.props.onReorder(this.props.components);
+        this.props.onReorder(this.state.components);
     }
 
     onDragEnter(enterIndex) {
@@ -86,7 +86,7 @@ export class SortableArea extends React.Component<Props, State> {
             return;
         }
 
-        const newComponents = this.props.components.slice();
+        const newComponents = this.state.components.slice();
 
         // splice the tab out of its old position
         const removed = newComponents.splice(this.state.dragging, 1);
@@ -149,7 +149,7 @@ export class SortableArea extends React.Component<Props, State> {
     }
 
     render() {
-        const sortables = this.props.components.map((component, index) => (
+        const sortables = this.state.components.map((component, index) => (
             <SortableItem
                 index={index}
                 component={component}

From 658efd089744e026387f85ce74d444a2c65912ba Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 26 Nov 2024 09:01:49 -0800
Subject: [PATCH 18/20] removing unnecessary comment.

---
 packages/perseus-editor/src/components/sortable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index d70b928fd7..d8489c9db0 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -2,7 +2,6 @@ import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-// Need to update these values.
 type Props = {
     className?: string;
     components: React.ReactElement[];

From a92c58dfa65a408ad63bf7da0693ade83a9841fe Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 27 Nov 2024 15:08:37 -0800
Subject: [PATCH 19/20] Removing unnecessary constructor.

---
 packages/perseus-editor/src/components/sortable.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index d8489c9db0..e2fa134536 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -176,10 +176,6 @@ type ItemProps = {
 
 // An individual sortable item
 export class SortableItem extends React.Component<ItemProps> {
-    constructor(props) {
-        super(props);
-    }
-
     handleDragStart(e) {
         e.nativeEvent.dataTransfer.effectAllowed = "move";
         this.props.area.onDragStart(this.props.index);

From 9db28260152effefbf1b6ad72e71a7d2c1642d28 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 27 Nov 2024 15:14:12 -0800
Subject: [PATCH 20/20] using default exports.

---
 packages/perseus-editor/src/components/drag-target.tsx    | 2 +-
 packages/perseus-editor/src/components/sortable.tsx       | 4 ++--
 packages/perseus-editor/src/editor.tsx                    | 2 +-
 packages/perseus-editor/src/widgets/expression-editor.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/perseus-editor/src/components/drag-target.tsx b/packages/perseus-editor/src/components/drag-target.tsx
index f4a4b9b08a..6319ccbcb4 100644
--- a/packages/perseus-editor/src/components/drag-target.tsx
+++ b/packages/perseus-editor/src/components/drag-target.tsx
@@ -41,7 +41,7 @@ type DefaultProps = {
 type State = {
     dragHover: boolean;
 };
-export class DragTarget extends React.Component<Props, State> {
+class DragTarget extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         component: "div",
         shouldDragHighlight: () => true,
diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
index e2fa134536..a1228350be 100644
--- a/packages/perseus-editor/src/components/sortable.tsx
+++ b/packages/perseus-editor/src/components/sortable.tsx
@@ -31,7 +31,7 @@ type State = {
  * As far as I can tell, this one is only used in ExpressionEditor.
  */
 // eslint-disable-next-line react/no-unsafe
-export class SortableArea extends React.Component<Props, State> {
+class SortableArea extends React.Component<Props, State> {
     _dragItems: any;
 
     static defaultProps: DefaultProps = {
@@ -175,7 +175,7 @@ type ItemProps = {
 };
 
 // An individual sortable item
-export class SortableItem extends React.Component<ItemProps> {
+class SortableItem extends React.Component<ItemProps> {
     handleDragStart(e) {
         e.nativeEvent.dataTransfer.effectAllowed = "move";
         this.props.area.onDragStart(this.props.index);
diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
index 583d91b4fa..003f30bbaf 100644
--- a/packages/perseus-editor/src/editor.tsx
+++ b/packages/perseus-editor/src/editor.tsx
@@ -19,7 +19,7 @@ import "./katex-mhchem";
 import * as React from "react";
 import _ from "underscore";
 
-import {DragTarget} from "./components/drag-target";
+import DragTarget from "./components/drag-target";
 import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
 import TexErrorView from "./tex-error-view";
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 3d13e27c68..d5d7723170 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -20,7 +20,7 @@ import lens from "hubble";
 import * as React from "react";
 import _ from "underscore";
 
-import {SortableArea} from "../components/sortable";
+import SortableArea from "../components/sortable";
 
 import type {
     PerseusExpressionWidgetOptions,