@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/all-editors.ts

@@ -0,0 +1,83 @@
+import CategorizerEditor from "./widgets/categorizer-editor";
+import CSProgramEditor from "./widgets/cs-program-editor";
+import DefinitionEditor from "./widgets/definition-editor";
+import DropdownEditor from "./widgets/dropdown-editor";
+import ExampleGraphieWidgetEditor from "./widgets/example-graphie-widget-editor";
+import ExampleWidgetEditor from "./widgets/example-widget-editor";
+import ExplanationEditor from "./widgets/explanation-editor";
+import ExpressionEditor from "./widgets/expression-editor";
+import GradedGroupEditor from "./widgets/graded-group-editor";
+import GradedGroupSetEditor from "./widgets/graded-group-set-editor";
+import GrapherEditor from "./widgets/grapher-editor";
+import GroupEditor from "./widgets/group-editor";
+import IframeEditor from "./widgets/iframe-editor";
+import ImageEditor from "./widgets/image-editor";
+import InputNumberEditor from "./widgets/input-number-editor";
+import InteractionEditor from "./widgets/interaction-editor";
+import InteractiveGraphEditor from "./widgets/interactive-graph-editor";
+import LabelImageEditor from "./widgets/label-image-editor";
+import LightsPuzzleEditor from "./widgets/lights-puzzle-editor";
+import MatcherEditor from "./widgets/matcher-editor";
+import MatrixEditor from "./widgets/matrix-editor";
+import MeasurerEditor from "./widgets/measurer-editor";
+import MoleculeEditor from "./widgets/molecule-editor";
+import NumberLineEditor from "./widgets/number-line-editor";
+import NumericInputEditor from "./widgets/numeric-input-editor";
+import OrdererEditor from "./widgets/orderer-editor";
+import PassageEditor from "./widgets/passage-editor";
+import PassageRefEditor from "./widgets/passage-ref-editor";
+import PassageRefTargetEditor from "./widgets/passage-ref-target-editor";
+import PlotterEditor from "./widgets/plotter-editor";
+import RadioEditor from "./widgets/radio/editor";
+import ReactionDiagramEditor from "./widgets/reaction-diagram-editor";
+import SequenceEditor from "./widgets/sequence-editor";
+import SimpleMarkdownTesterEditor from "./widgets/simple-markdown-tester-editor";
+import SimulatorEditor from "./widgets/simulator-editor";
+import SorterEditor from "./widgets/sorter-editor";
+import TableEditor from "./widgets/table-editor";
+import TransformerEditor from "./widgets/transformer-editor";
+import UnitEditor from "./widgets/unit-editor";
+import VideoEditor from "./widgets/video-editor";
+
+export default [
+    CategorizerEditor,
+    CSProgramEditor,
+    DefinitionEditor,
+    DropdownEditor,
+    ExampleGraphieWidgetEditor,
+    ExampleWidgetEditor,
+    ExplanationEditor,
+    ExpressionEditor,
+    GradedGroupEditor,
+    GradedGroupSetEditor,
+    GrapherEditor,
+    GroupEditor,
+    IframeEditor,
+    ImageEditor,
+    InputNumberEditor,
+    InteractionEditor,
+    InteractiveGraphEditor,
+    LabelImageEditor,
+    LightsPuzzleEditor,
+    MatcherEditor,
+    MatrixEditor,
+    MeasurerEditor,
+    MoleculeEditor,
+    NumberLineEditor,
+    NumericInputEditor,
+    OrdererEditor,
+    PassageEditor,
+    PassageRefEditor,
+    PassageRefTargetEditor,
+    PlotterEditor,
+    ReactionDiagramEditor,
+    SequenceEditor,
+    SimpleMarkdownTesterEditor,
+    SimulatorEditor,
+    SorterEditor,
+    TableEditor,
+    TransformerEditor,
+    UnitEditor,
+    VideoEditor,
+    RadioEditor,
+];

package/src/all-widgets.ts

@@ -0,0 +1,7 @@
+import {widgets} from "@khanacademy/perseus";
+
+import testingWidgets from "./testing-widgets";
+
+import type {WidgetExports} from "@khanacademy/perseus";
+
+export default [...widgets, ...testingWidgets] as ReadonlyArray<WidgetExports>;

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

@@ -1,6 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-// @flow
-
 /**
  * An article editor. Articles are long-form pieces of content, composed of
  * multiple (Renderer) sections concatenated together.
@@ -18,47 +16,47 @@ import {
 import * as React from "react";
 import _ from "underscore";
 
-import DeviceFramer from "./components/device-framer.jsx";
-import JsonEditor from "./components/json-editor.jsx";
-import Editor from "./editor.jsx";
-import IframeContentRenderer from "./iframe-content-renderer.jsx";
-import SectionControlButton from "./section-control-button.jsx";
+import DeviceFramer from "./components/device-framer";
+import JsonEditor from "./components/json-editor";
+import Editor from "./editor";
+import IframeContentRenderer from "./iframe-content-renderer";
+import SectionControlButton from "./section-control-button";
 
 import type {APIOptions} from "@khanacademy/perseus";
 
 const {HUD, InlineIcon} = components;
 const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
 
-type RendererProps = {|
-    content?: string,
-    widgets?: Object,
-    images?: Object,
-|};
-
-type JsonType = RendererProps | $ReadOnlyArray<RendererProps>;
-type DefaultProps = {|
-    contentPaths?: $ReadOnlyArray<string>,
-    json: JsonType,
-    mode: "diff" | "edit" | "json" | "preview",
-    screen: "phone" | "tablet" | "desktop",
-    sectionImageUploadGenerator: (i: number) => React$Element<"span">,
-    useNewStyles: boolean,
-|};
-type PerseusArticleEditorProps = {|
-    ...DefaultProps,
-    apiOptions?: APIOptions,
-    imageUploader?: (string, (string) => mixed) => mixed,
+type RendererProps = {
+    content?: string;
+    widgets?: any;
+    images?: any;
+};
+
+type JsonType = RendererProps | ReadonlyArray<RendererProps>;
+type DefaultProps = {
+    contentPaths?: ReadonlyArray<string>;
+    json: JsonType;
+    mode: "diff" | "edit" | "json" | "preview";
+    screen: "phone" | "tablet" | "desktop";
+    sectionImageUploadGenerator: (
+        i: number,
+    ) => React.ReactElement<React.ComponentProps<"span">>;
+    useNewStyles: boolean;
+};
+type PerseusArticleEditorProps = DefaultProps & {
+    apiOptions?: APIOptions;
+    imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
     // URL of the route to show on initial load of the preview frames.
-    previewURL: string,
-    ...Changeable.ChangeableProps,
-|};
+    previewURL: string;
+} & Changeable.ChangeableProps;
 
-type State = {|
-    highlightLint: boolean,
-|};
+type State = {
+    highlightLint: boolean;
+};
 export default class ArticleEditor extends React.Component<
     PerseusArticleEditorProps,
-    State,
+    State
 > {
     static defaultProps: DefaultProps = {
         contentPaths: [],
@@ -85,6 +83,7 @@ export default class ArticleEditor extends React.Component<
     _updatePreviewFrames() {
         if (this.props.mode === "preview") {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
             this.refs["frame-all"].sendNewData({
                 type: "article-all",
                 data: this._sections().map((section, i) => {
@@ -94,6 +93,7 @@ export default class ArticleEditor extends React.Component<
         } else if (this.props.mode === "edit") {
             this._sections().forEach((section, i) => {
                 // eslint-disable-next-line react/no-string-refs
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
                 this.refs["frame-" + i].sendNewData({
                     type: "article",
                     data: this._apiOptionsForSection(section, i),
@@ -122,17 +122,18 @@ export default class ArticleEditor extends React.Component<
                 highlightLint: this.state.highlightLint,
                 paths: this.props.contentPaths,
             },
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
             legacyPerseusLint: editor ? editor.getSaveWarnings() : [],
         };
     }
 
-    _sections(): $ReadOnlyArray<RendererProps> {
+    _sections(): ReadonlyArray<RendererProps> {
         return Array.isArray(this.props.json)
             ? this.props.json
             : [this.props.json];
     }
 
-    _renderEditor(): React$Element<"div"> {
+    _renderEditor(): React.ReactElement<React.ComponentProps<"div">> {
         const {imageUploader, sectionImageUploadGenerator} = this.props;
 
         const apiOptions = {
@@ -142,7 +143,7 @@ export default class ArticleEditor extends React.Component<
             // Alignment options are always available in article editors
             showAlignmentOptions: true,
             isArticle: true,
-        };
+        } as const;
 
         const {KatexProvider} = Dependencies.getDependencies();
 
@@ -240,7 +241,7 @@ export default class ArticleEditor extends React.Component<
         /* eslint-enable max-len */
     }
 
-    _renderAddSection(): React$Element<"div"> {
+    _renderAddSection(): React.ReactElement<React.ComponentProps<"div">> {
         return (
             <div className="perseus-editor-row">
                 <div className="perseus-editor-left-cell">
@@ -260,7 +261,7 @@ export default class ArticleEditor extends React.Component<
         );
     }
 
-    _renderLinterHUD(): React$Element<any> {
+    _renderLinterHUD(): React.ReactElement<any> {
         return (
             <HUD
                 message="Style warnings"
@@ -277,7 +278,7 @@ export default class ArticleEditor extends React.Component<
     _renderIframePreview(
         i: number | string,
         nochrome: boolean,
-    ): React$Element<any> {
+    ): React.ReactElement<any> {
         const isMobile =
             this.props.screen === "phone" || this.props.screen === "tablet";
 
@@ -295,7 +296,7 @@ export default class ArticleEditor extends React.Component<
         );
     }
 
-    _renderPreviewMode(): React$Element<"div"> {
+    _renderPreviewMode(): React.ReactElement<React.ComponentProps<"div">> {
         return (
             <div className="standalone-preview">
                 {this._renderIframePreview("all", false)}
@@ -312,6 +313,7 @@ export default class ArticleEditor extends React.Component<
         newProps,
     ) => {
         const sections = _.clone(this._sections());
+        // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type 'readonly RendererProps[]' only permits reading.
         sections[i] = _.extend({}, sections[i], newProps);
         this.props.onChange({json: sections});
     };
@@ -322,7 +324,9 @@ export default class ArticleEditor extends React.Component<
         }
         const sections = _.clone(this._sections());
         const section = sections[i];
+        // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly RendererProps[]'. Did you mean 'slice'?
         sections.splice(i, 1);
+        // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly RendererProps[]'. Did you mean 'slice'?
         sections.splice(i - 1, 0, section);
         this.props.onChange({
             json: sections,
@@ -335,7 +339,9 @@ export default class ArticleEditor extends React.Component<
             return;
         }
         const section = sections[i];
+        // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly RendererProps[]'. Did you mean 'slice'?
         sections.splice(i, 1);
+        // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly RendererProps[]'. Did you mean 'slice'?
         sections.splice(i + 1, 0, section);
         this.props.onChange({
             json: sections,
@@ -358,6 +364,7 @@ export default class ArticleEditor extends React.Component<
                       widgets: sections[i].widgets,
                   }
                 : {};
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'splice' does not exist on type 'JsonType'.
         sections.splice(i + 1, 0, newSection);
         this.props.onChange({
             json: sections,
@@ -366,6 +373,7 @@ export default class ArticleEditor extends React.Component<
 
     _handleRemoveSection(i: number) {
         const sections = _.clone(this._sections());
+        // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly RendererProps[]'. Did you mean 'slice'?
         sections.splice(i, 1);
         this.props.onChange({
             json: sections,
@@ -376,6 +384,7 @@ export default class ArticleEditor extends React.Component<
         if (this.props.mode === "edit") {
             return this._sections().map((section, i) => {
                 // eslint-disable-next-line react/no-string-refs
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
                 return this.refs["editor" + i].serialize();
             });
         }
@@ -394,7 +403,7 @@ export default class ArticleEditor extends React.Component<
      *
      * This function can currently only be called in edit mode.
      */
-    getSaveWarnings(): $ReadOnlyArray<RendererProps> {
+    getSaveWarnings(): ReadonlyArray<RendererProps> {
         if (this.props.mode !== "edit") {
             // TODO(joshuan): We should be able to get save warnings in
             // preview mode.
@@ -406,11 +415,12 @@ export default class ArticleEditor extends React.Component<
 
         return this._sections().map((section, i) => {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
             return this.refs["editor" + i].getSaveWarnings();
         });
     }
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="framework-perseus perseus-article-editor">
                 {this.props.mode === "edit" && this._renderEditor()}

package/src/components/__stories__/{blur-input.stories.jsx → blur-input.stories.tsx}

@@ -1,15 +1,13 @@
-// @flow
-
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
-import BlurInput from "../blur-input.jsx";
+import BlurInput from "../blur-input";
 
 export default {
     title: "Perseus/Editor/Components/Blur Input",
 };
 
-export const Default = (): React.Node => {
+export const Default = (): React.ReactElement => {
     const [value, setValue] = React.useState("");
 
     return (

package/src/components/{blur-input.jsx → blur-input.tsx}

@@ -1,18 +1,17 @@
-// @flow
 import * as React from "react";
 
 import type {CSSProperties} from "aphrodite";
 
-type Props = {|
-    value: string,
-    onChange: (string) => void,
-    className?: string,
-    style?: CSSProperties,
-|};
+type Props = {
+    value: string;
+    onChange: (arg1: string) => void;
+    className?: string;
+    style?: CSSProperties;
+};
 
-type State = {|
-    value: string,
-|};
+type State = {
+    value: string;
+};
 
 /* You know when you want to propagate input to a parent...
  * but then that parent does something with the input...
@@ -37,15 +36,15 @@ class BlurInput extends React.Component<Props, State> {
         this.setState({value: nextProps.value});
     }
 
-    handleChange: (e: $FlowFixMe) => void = (e) => {
+    handleChange: (e: any) => void = (e) => {
         this.setState({value: e.target.value});
     };
 
-    handleBlur: (e: $FlowFixMe) => void = (e) => {
+    handleBlur: (e: any) => void = (e) => {
         this.props.onChange(e.target.value);
     };
 
-    render(): React.Element<"input"> {
+    render(): React.ReactNode {
         return (
             <input
                 className={this.props.className}

package/src/components/{checkbox.jsx → checkbox.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Reusable checkbox component.
  **/
@@ -6,50 +5,49 @@ import {globalStyles} from "@khanacademy/perseus";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import HoverBehavior from "./hover-behavior.jsx";
+import HoverBehavior from "./hover-behavior";
 
 const {borderRadius, colors} = globalStyles;
 
 export type CheckboxProps = {
     // Whether or not the checkbox is checked.  The parent responsible for
     // responding to onChange events and updating this prop appropriately.
-    checked: boolean,
+    checked: boolean;
     // When disable the checkbox will appear faded out and will not
     // respond to events and cannot be tabbed to.
-    disabled?: boolean,
+    disabled?: boolean;
     // Appear as if disabled but allow it to respond to events and be
     // tabbed to.
     // This allows us to hook alternate responses into clicking on a
     // disabled checkbox.
-    appearDisabled?: boolean,
+    appearDisabled?: boolean;
     // Called when the value has changed.
-    onChange: (event: SyntheticInputEvent<>) => void,
-    tabIndex?: number | string,
-    style?: {|
-        marginTop: number,
-    |},
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    tabIndex?: number | string;
+    style?: {
+        marginTop: number;
+    };
     // For e2e test
-    dataTestId?: string,
+    dataTestId?: string;
     // Unique identifier for this checkbox.
-    id?: string,
-    ...
+    id?: string;
 };
 
 // NOTE(jangmi): Checkbox may have `onChange` depends on circumstances but lack
 // of onChange causes Dev only alert so we provide the no op func as default
 // to prevent that.
-const onChangeCheckboxNoop = (event: SyntheticInputEvent<>) => {};
+const onChangeCheckboxNoop = (event: React.ChangeEvent<HTMLInputElement>) => {};
 
 export default class Checkbox extends React.Component<CheckboxProps> {
-    static defaultProps: {|
-        checked: boolean,
-        onChange: (event: SyntheticInputEvent<>) => void,
-    |} = {
+    static defaultProps: {
+        checked: boolean;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    } = {
         checked: false,
         onChange: onChangeCheckboxNoop,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {
             checked,
             disabled,
@@ -132,6 +130,7 @@ export default class Checkbox extends React.Component<CheckboxProps> {
                             )}
                             disabled={disabled}
                             onChange={onChange}
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | number | undefined' is not assignable to type 'number | undefined'.
                             tabIndex={tabIndex}
                         />
                     </div>

package/src/components/{device-framer.jsx → device-framer.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A component that displays its contents inside a device frame.
  */
@@ -23,9 +22,9 @@ const SCREEN_SIZES = {
         height: 600,
         framedWidth: 688,
     },
-};
+} as const;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class DeviceFramer extends React.Component<Props> {
     static propTypes = {
@@ -39,7 +38,7 @@ class DeviceFramer extends React.Component<Props> {
         nochrome: PropTypes.bool,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const deviceType = this.props.deviceType;
 
         if (this.props.nochrome) {
@@ -78,7 +77,7 @@ class DeviceFramer extends React.Component<Props> {
             border: "solid 1px #CCC",
             margin: 8,
             zoom: scale,
-        };
+        } as const;
 
         return (
             <div key="screen" className="screen" style={screenStyle}>

package/src/components/{drag-target.jsx → drag-target.tsx}

@@ -1,4 +1,3 @@
-// @noflow
 /* This component makes its children a drag target. Example:
  *
  *     <DragTarget onDrop={this.handleDrop}>Drag to me</DragTarget>