@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/{editor-page.jsx → editor-page.tsx}

@@ -1,12 +1,11 @@
-// @flow
 import {components, ApiOptions, ClassNames} from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
-import JsonEditor from "./components/json-editor.jsx";
-import ViewportResizer from "./components/viewport-resizer.jsx";
-import CombinedHintsEditor from "./hint-editor.jsx";
-import ItemEditor from "./item-editor.jsx";
+import JsonEditor from "./components/json-editor";
+import ViewportResizer from "./components/viewport-resizer";
+import CombinedHintsEditor from "./hint-editor";
+import ItemEditor from "./item-editor";
 
 import type {
     APIOptions,
@@ -22,76 +21,64 @@ import type {
 
 const {HUD} = components;
 
-type Props = {|
-    apiOptions?: APIOptions,
-
-    answerArea?: $FlowFixMe, // related to the question
-
+type Props = {
+    apiOptions?: APIOptions;
+    answerArea?: any; // related to the question,
     // TODO(CP-4838): Should this be a required prop?
-    contentPaths?: $ReadOnlyArray<string>,
-
+    contentPaths?: ReadonlyArray<string>;
     // Only used in the perseus demos. Consider removing.
-    developerMode: boolean,
-
+    developerMode: boolean;
     // Source HTML for the iframe to render
-    frameSource: string,
-
-    hints?: $ReadOnlyArray<Hint>, // related to the question
-
+    frameSource: string;
+    hints?: ReadonlyArray<Hint>; // related to the question,
     // A function which takes a file object (guaranteed to be an image) and
     // a callback, then calls the callback with the url where the image
     // will be hosted. Image drag and drop is disabled when imageUploader
     // is null.
-    imageUploader?: ImageUploader,
-
+    imageUploader?: ImageUploader;
     // Part of the question
-    itemDataVersion?: Version,
-
+    itemDataVersion?: Version;
     // The content ID of the AssessmentItem being edited.
-    itemId: string,
-
+    itemId: string;
     // Whether the question is displaying as JSON or if it is
     // showing the editor itself with the rendering
     // Only used in the perseus demos. Consider removing.
-    jsonMode: boolean,
-
+    jsonMode: boolean;
     // A function which is called with the new JSON blob of content
-    onChange: ChangeHandler,
-
-    onPreviewDeviceChange: (DeviceType) => mixed,
-    previewDevice: DeviceType,
-
+    onChange: ChangeHandler;
+    onPreviewDeviceChange: (arg1: DeviceType) => unknown;
+    previewDevice: DeviceType;
     // Initial value of the question being edited
-    question?: $FlowFixMe,
-
+    question?: any;
     // URL of the route to show on initial load of the preview frames.
-    previewURL: string,
-|};
-
-type PerseusJson = {|
-    question: $FlowFixMe,
-    answerArea: $FlowFixMe,
-    hints: $ReadOnlyArray<Hint>,
-    itemDataVersion?: Version,
-|};
-
-type State = {|
-    json: PerseusJson,
-    gradeMessage: string,
-    wasAnswered: boolean,
-    highlightLint: boolean,
-|};
+    previewURL: string;
+};
+
+type PerseusJson = {
+    question: any;
+    answerArea: any;
+    hints: ReadonlyArray<Hint>;
+    itemDataVersion?: Version;
+};
+
+type State = {
+    json: PerseusJson;
+    gradeMessage: string;
+    wasAnswered: boolean;
+    highlightLint: boolean;
+};
 
 class EditorPage extends React.Component<Props, State> {
     _isMounted: boolean;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'rendererMountNode' has no initializer and is not definitely assigned in the constructor.
     rendererMountNode: HTMLDivElement;
-    renderer: ?RendererInterface;
+    renderer: RendererInterface | null | undefined;
 
-    static defaultProps: {|
-        developerMode: boolean,
-        jsonMode: boolean,
-        onChange: () => void,
-    |} = {
+    static defaultProps: {
+        developerMode: boolean;
+        jsonMode: boolean;
+        onChange: () => void;
+    } = {
         developerMode: false,
         jsonMode: false,
         onChange: () => {},
@@ -101,6 +88,7 @@ class EditorPage extends React.Component<Props, State> {
         super(props);
 
         this.state = {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "hints" | "question" | "answerArea" | "itemDataVersion">' is not assignable to type 'PerseusJson'.
             json: _.pick(
                 this.props,
                 "question",
@@ -174,6 +162,7 @@ class EditorPage extends React.Component<Props, State> {
         };
 
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'triggerPreviewUpdate' does not exist on type 'ReactInstance'.
         this.refs.itemEditor.triggerPreviewUpdate({
             type: "question",
             data: _({
@@ -189,6 +178,7 @@ class EditorPage extends React.Component<Props, State> {
                 },
                 reviewMode: true,
                 // eslint-disable-next-line react/no-string-refs
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
                 legacyPerseusLint: this.refs.itemEditor.getSaveWarnings(),
             }).extend(
                 _(this.props).pick(
@@ -210,19 +200,23 @@ class EditorPage extends React.Component<Props, State> {
 
     getSaveWarnings(): any {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         const issues1 = this.refs.itemEditor.getSaveWarnings();
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         const issues2 = this.refs.hintsEditor.getSaveWarnings();
         return issues1.concat(issues2);
     }
 
-    serialize(options?: {|keepDeletedWidgets?: boolean|}): any | PerseusJson {
+    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusJson {
         if (this.props.jsonMode) {
             return this.state.json;
         }
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
         return _.extend(this.refs.itemEditor.serialize(options), {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
             hints: this.refs.hintsEditor.serialize(options),
         });
     }
@@ -237,12 +231,10 @@ class EditorPage extends React.Component<Props, State> {
         this.setState({
             json: newJson,
         });
-        // $FlowIgnore[prop-missing]
-        // $FlowIgnore[incompatible-call]: PerseusJson is incompatible with first param of ChangeHandler
         this.props.onChange(newJson);
     };
 
-    scorePreview(): ?KEScore {
+    scorePreview(): KEScore | null | undefined {
         // Do we actually ever set this.renderer anywhere in the codebase?
         if (this.renderer) {
             return this.renderer.scoreInput();
@@ -250,7 +242,7 @@ class EditorPage extends React.Component<Props, State> {
         return null;
     }
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         let className = "framework-perseus";
 
         const touch =