@khanacademy/perseus-editor 2.0.1 → 2.0.3

package/dist/section-control-button.d.ts

@@ -1,5 +1,14 @@
 import * as React from "react";
-declare const InlineIcon: React.FC<import("../../perseus/src/components/inline-icon").InlineIconProps>;
+declare const InlineIcon: {
+    ({ path, width, height, style, title, }: import("../../perseus/src/components/inline-icon").InlineIconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    propTypes: {
+        path: import("prop-types").Validator<string>;
+        height: import("prop-types").Validator<number>;
+        width: import("prop-types").Validator<number>;
+        style: import("prop-types").Requireable<object>;
+        title: import("prop-types").Requireable<string>;
+    };
+};
 type InlineIconProps = JSX.LibraryManagedAttributes<typeof InlineIcon, React.ComponentProps<typeof InlineIcon>>;
 type SectionControlButtonProps = {
     icon: InlineIconProps;

package/dist/section-control-button.js.flow

@@ -5,8 +5,20 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon from "../../perseus/src/components/inline-icon";
+import * as $Flowgen$Import$prop_2d_types from "prop-types";
 import * as React from "react";
-declare var InlineIcon: React.StatelessFunctionalComponent<$Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon.InlineIconProps>;
+declare var InlineIcon: {|
+  (
+    x: $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon.InlineIconProps
+  ): React.Element<any, string | React.JSXElementConstructor<any>>,
+  propTypes: {|
+    path: $Flowgen$Import$prop_2d_types.Validator<string>,
+    height: $Flowgen$Import$prop_2d_types.Validator<number>,
+    width: $Flowgen$Import$prop_2d_types.Validator<number>,
+    style: $Flowgen$Import$prop_2d_types.Requireable<{ ... }>,
+    title: $Flowgen$Import$prop_2d_types.Requireable<string>,
+  |},
+|};
 declare type InlineIconProps = React.ElementConfig<typeof InlineIcon>;
 declare type SectionControlButtonProps = {|
   icon: InlineIconProps,

package/dist/widgets/label-image/answer-choices.d.ts

@@ -9,5 +9,5 @@ type AnswerChoicesProps = {
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare const AnswerChoices: React.FC<AnswerChoicesProps>;
+declare const AnswerChoices: ({ choices, onChange, }: AnswerChoicesProps) => React.ReactElement;
 export default AnswerChoices;

package/dist/widgets/label-image/answer-choices.js.flow

@@ -12,5 +12,5 @@ declare type AnswerChoicesProps = {|
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare var AnswerChoices: React.StatelessFunctionalComponent<AnswerChoicesProps>;
+declare var AnswerChoices: (x: AnswerChoicesProps) => React.Element<any>;
 declare export default typeof AnswerChoices;

package/dist/widgets/label-image/behavior.d.ts

@@ -2,7 +2,7 @@
  * Controlled component to display and change widget options.
  */
 import * as React from "react";
-type BehaviorProps = {
+type Props = {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
     onChange: (options: {
@@ -10,5 +10,5 @@ type BehaviorProps = {
         hideChoicesFromInstructions?: boolean;
     }) => void;
 };
-declare const Behavior: React.FC<BehaviorProps>;
+declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, onChange, }: Props) => React.ReactElement;
 export default Behavior;

package/dist/widgets/label-image/behavior.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-declare type BehaviorProps = {|
+declare type Props = {|
   multipleAnswers: boolean,
   hideChoicesFromInstructions: boolean,
   onChange: (options: {|
@@ -13,5 +13,5 @@ declare type BehaviorProps = {|
     hideChoicesFromInstructions?: boolean,
   |}) => void,
 |};
-declare var Behavior: React.StatelessFunctionalComponent<BehaviorProps>;
+declare var Behavior: (x: Props) => React.Element<any>;
 declare export default typeof Behavior;

package/dist/widgets/label-image/marker.d.ts

@@ -6,19 +6,19 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     choices: ReadonlyArray<string>;
     onChange: (marker: MarkerType) => void;
     onRemove: () => void;
 };
-type MarkerState = {
+type State = {
     showDropdown: boolean;
 };
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
-    constructor(props: MarkerProps);
+    constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentWillUnmount(): void;
     openDropdown(): void;
     updateMarker(props: any): void;

package/dist/widgets/label-image/marker.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type MarkerProps = {|
+declare type Props = {|
   ...MarkerType,
   ...{|
     choices: $ReadOnlyArray<string>,
@@ -14,16 +14,14 @@ declare type MarkerProps = {|
     onRemove: () => void,
   |},
 |};
-declare type MarkerState = {|
+declare type State = {|
   showDropdown: boolean,
 |};
-declare export default class Marker
-  extends React.Component<MarkerProps, MarkerState>
-{
+declare export default class Marker extends React.Component<Props, State> {
   _marker: HTMLElement | null | void;
-  constructor(props: MarkerProps): this;
+  constructor(props: Props): this;
   componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
   componentWillUnmount(): void;
   openDropdown(): void;
   updateMarker(props: any): void;

package/dist/widgets/label-image/question-markers.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-type QuestionMarkersProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageUrl: string;
     imageWidth: number;
@@ -13,7 +13,7 @@ type QuestionMarkersProps = {
     markers: ReadonlyArray<MarkerType>;
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined>;
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>): void;
     handleImageDoubleClick: (e: React.MouseEvent) => void;

package/dist/widgets/label-image/question-markers.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type QuestionMarkersProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageUrl: string,
   imageWidth: number,
@@ -15,9 +15,7 @@ declare type QuestionMarkersProps = {|
   markers: $ReadOnlyArray<MarkerType>,
   onChange: (markers: $ReadOnlyArray<MarkerType>) => void,
 |};
-declare export default class QuestionMarkers
-  extends React.Component<QuestionMarkersProps>
-{
+declare export default class QuestionMarkers extends React.Component<Props> {
   _markers: Array<Marker | null | void>;
   openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>): void;
   handleImageDoubleClick: (e: SyntheticMouseEvent<>) => void;

package/dist/widgets/label-image/select-image.d.ts

@@ -2,9 +2,9 @@
  * Controlled component for selecting the question image, for answer labeling.
  */
 import * as React from "react";
-type SelectImageProps = {
+type Props = {
     onChange: (url: string) => void;
     url: string;
 };
-declare const SelectImage: React.FC<SelectImageProps>;
+declare const SelectImage: ({ onChange, url }: Props) => React.ReactElement;
 export default SelectImage;

package/dist/widgets/label-image/select-image.js.flow

@@ -5,9 +5,9 @@
  * @flow
  */
 import * as React from "react";
-declare type SelectImageProps = {|
+declare type Props = {|
   onChange: (url: string) => void,
   url: string,
 |};
-declare var SelectImage: React.StatelessFunctionalComponent<SelectImageProps>;
+declare var SelectImage: (x: Props) => React.Element<any>;
 declare export default typeof SelectImage;

package/dist/widgets/label-image-editor.d.ts

@@ -8,7 +8,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-type LabelImageEditorProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageAlt: string;
     imageUrl: string;
@@ -19,7 +19,7 @@ type LabelImageEditorProps = {
     hideChoicesFromInstructions: boolean;
     onChange: (options: any) => void;
 };
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
     static defaultProps: {
         choices: ReadonlyArray<any>;
@@ -32,7 +32,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         multipleAnswers: boolean;
     };
     static widgetName: "label-image";
-    componentDidUpdate(prevProps: LabelImageEditorProps): void;
+    componentDidUpdate(prevProps: Props): void;
     getSaveWarnings: () => ReadonlyArray<any | string>;
     serialize(): any;
     handleImageChange: (url: string) => void;

package/dist/widgets/label-image-editor.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type LabelImageEditorProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageAlt: string,
   imageUrl: string,
@@ -18,7 +18,7 @@ declare type LabelImageEditorProps = {|
   hideChoicesFromInstructions: boolean,
   onChange: (options: any) => void,
 |};
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
   _questionMarkers: QuestionMarkers | null | void;
   static defaultProps: {|
     choices: $ReadOnlyArray<any>,
@@ -31,7 +31,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
     multipleAnswers: boolean,
   |};
   static widgetName: "label-image";
-  componentDidUpdate(prevProps: LabelImageEditorProps): void;
+  componentDidUpdate(prevProps: Props): void;
   getSaveWarnings: () => $ReadOnlyArray<any | string>;
   serialize(): any;
   handleImageChange: (url: string) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.1",
+    "version": "2.0.3",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/perseus": "^4.0.1"
+        "@khanacademy/perseus": "^5.0.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",

package/src/__stories__/section-control-button.stories.tsx

@@ -13,9 +13,9 @@ export default {
     title: "Perseus Editor/Widgets/Section Control Button",
 } as Story;
 
-export const ButtonForEditingSectionsOfContentWithInArticleEditor: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <SectionControlButton
             icon={icons.iconTrash}

package/src/article-editor.tsx

@@ -44,7 +44,7 @@ type DefaultProps = {
     ) => React.ReactElement<React.ComponentProps<"span">>;
     useNewStyles: boolean;
 };
-type PerseusArticleEditorProps = DefaultProps & {
+type Props = DefaultProps & {
     apiOptions?: APIOptions;
     imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
     // URL of the route to show on initial load of the preview frames.
@@ -54,13 +54,9 @@ type PerseusArticleEditorProps = DefaultProps & {
 type State = {
     highlightLint: boolean;
 };
-export default class ArticleEditor extends React.Component<
-    PerseusArticleEditorProps,
-    State
-> {
+export default class ArticleEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         contentPaths: [],
-        // $FlowFixMe[incompatible-exact]
         json: [{}],
         mode: "edit",
         screen: "desktop",

package/src/components/dropdown-option.tsx

@@ -31,7 +31,7 @@ const findAndFocusElement = (component?: Element | null) => {
     }
 };
 
-type OptionProps = {
+type Props = {
     // The value to use when the option is selected
     value: string;
     // The display of the option
@@ -65,7 +65,7 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
 
 export const optionHeight = 30;
 
-class Option extends React.Component<OptionProps> {
+class Option extends React.Component<Props> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 
@@ -113,9 +113,6 @@ class Option extends React.Component<OptionProps> {
 
         return (
             <button
-                // TODO(mdr): We found a new Flow error when upgrading:
-                //     "node (null) This type is incompatible with this.node (HTMLDivElement)"
-                // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLDivElement'.
                 ref={(node) => (this.node = node)}
                 value={value}
@@ -129,11 +126,6 @@ class Option extends React.Component<OptionProps> {
                 // @ts-expect-error [FEI-5003] - TS2322 - Type '(value: string) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
                 onClick={(value: string) => {
                     if (!disabled && onClick) {
-                        // TODO(mdr): We found a new Flow error here when upgrading
-                        //     from 0.35.0 to 0.52.0: "value (unused function
-                        //     argument)". This comment was automatically added to
-                        //     this file, to suppress the error for now. Please
-                        //     consider fixing!
                         // @ts-expect-error [FEI-5003] - TS2554 - Expected 0 arguments, but got 1.
                         onClick(value);
                     }

package/src/components/link.ts

@@ -24,7 +24,7 @@ type DefaultProps = {
     style: CSSProperties | Array<CSSProperties>;
 };
 
-type LinkProps = DefaultProps & {
+type Props = DefaultProps & {
     children?: React.ReactNode;
     // An additional class name to add. This is supported so-as to allow
     // Perseus to add class-based styles to links when using this
@@ -66,7 +66,7 @@ type LinkProps = DefaultProps & {
 /**
  * A wrapper that creates an anchor tag with normalized styles
  */
-class Link extends React.Component<LinkProps> {
+class Link extends React.Component<Props> {
     static defaultProps: DefaultProps = {
         highlighted: false,
         href: DEFAULT_HREF,

package/src/diffs/__stories__/perseus-diff-wrapper.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 
-const Wrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => {
+};
+
+const Wrapper = ({children}: Props): React.ReactElement => {
     return <div className="perseus-diff">{children}</div>;
 };
 

package/src/diffs/__stories__/structured-item-diff.stories.tsx

@@ -33,7 +33,7 @@ const tags = {
     c: "c tag",
 } as const;
 
-export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ContentAdded = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -175,8 +175,8 @@ export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
 };
 
 // second instance
-export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
-    args,
+export const ContentAddedRemovedAndChanged = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const props = {
         before: {
@@ -383,9 +383,7 @@ export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
 };
 
 // third instance
-export const MiscContentChanges: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MiscContentChanges = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -681,9 +679,7 @@ export const MiscContentChanges: React.FC<StoryArgs> = (
 };
 
 // fourth
-export const ContentRemoved: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ContentRemoved = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {

package/src/diffs/__stories__/tags-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TagsDiff
             title="tags"

package/src/diffs/__stories__/text-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TextDiff
             title="A day in the life of a text diff"

package/src/diffs/text-diff.tsx

@@ -49,7 +49,6 @@ class ImageDiffSide extends React.Component<any> {
                     return (
                         <div key={index}>
                             <div className={className}>
-                                {/* $FlowFixMe[prop-missing]: the alt prop is missing */}
                                 {/* @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; title: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
                                 <SvgImage
                                     src={entry.value}

package/src/diffs/widget-diff.tsx

@@ -227,7 +227,6 @@ class ImageWidgetDiff extends React.Component<any> {
                                 "image-removed": beforeSrc !== afterSrc,
                             })}
                         >
-                            {/* $FlowFixMe[prop-missing]: the alt props is missing */}
                             {/* @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; title: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
                             <SvgImage src={beforeSrc} title={beforeSrc} />
                         </div>
@@ -242,7 +241,6 @@ class ImageWidgetDiff extends React.Component<any> {
                                 "image-added": beforeSrc !== afterSrc,
                             })}
                         >
-                            {/* $FlowFixMe[prop-missing]: the alt props is missing */}
                             {/* @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; title: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
                             <SvgImage src={afterSrc} title={afterSrc} />
                         </div>

package/src/editor.tsx

@@ -127,9 +127,7 @@ type WidgetEditorState = {
     widgetInfo: WidgetInfo;
 };
 
-const _upgradeWidgetInfo: React.FC<WidgetEditorProps> = (
-    props,
-): React.ReactElement => {
+const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
     // We can't call serialize here because this.refs.widget
     // doesn't exist before this component is mounted.
     const filteredProps = _.omit(props, WIDGET_PROP_DENYLIST);
@@ -368,7 +366,7 @@ const imageUrlsFromContent = function (content: string) {
     return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
 };
 
-type EditorProps = Readonly<{
+type Props = Readonly<{
     apiOptions: any;
     className?: string;
     content: string;
@@ -406,14 +404,14 @@ type DeafultProps = {
     };
 };
 
-type EditorState = {
+type State = {
     showKatexErrors: boolean;
     textAreaValue: string;
     katex?: katex;
 };
 
 // eslint-disable-next-line react/no-unsafe
-class Editor extends React.Component<EditorProps, EditorState> {
+class Editor extends React.Component<Props, State> {
     lastUserValue: string | null | undefined;
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
@@ -431,7 +429,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
         warnNoWidgets: false,
     };
 
-    state: EditorState = {
+    state: State = {
         katex: undefined,
         showKatexErrors: false,
         textAreaValue: this.props.content,
@@ -463,13 +461,13 @@ class Editor extends React.Component<EditorProps, EditorState> {
     }
 
     // TODO(arun): This is a deprecated method, use the appropriate replacement
-    UNSAFE_componentWillReceiveProps(nextProps: EditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (this.props.content !== nextProps.content) {
             this.setState({textAreaValue: nextProps.content});
         }
     }
 
-    componentDidUpdate(prevProps: EditorProps) {
+    componentDidUpdate(prevProps: Props) {
         // TODO(alpert): Maybe fix React so this isn't necessary
         // eslint-disable-next-line react/no-string-refs
         const textarea = ReactDOM.findDOMNode(this.refs.textarea);
@@ -574,7 +572,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
      * Calculate the size of all the images in props.content, and send
      * those sizes to this.props.images using props.onChange.
      */
-    _sizeImages: (props: EditorProps) => void = (props: EditorProps) => {
+    _sizeImages: (props: Props) => void = (props: Props) => {
         const imageUrls = imageUrlsFromContent(props.content);
 
         // Discard any images in our dimension table that no
@@ -983,7 +981,6 @@ class Editor extends React.Component<EditorProps, EditorState> {
             function () {
                 Util.textarea.moveCursor(
                     // findDOMNode can return Text but we know this is Element
-                    // $FlowFixMe[incompatible-call]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
                     textarea,
                     // We want to put the cursor after the widget