@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/diffs/{string-array-diff.jsx → string-array-diff.ts}

@@ -1,9 +1,8 @@
-// @flow
 // eslint-disable-next-line import/no-extraneous-dependencies
 import jsdiff from "jsdiff";
 import _ from "underscore";
 
-const statusFor = function (chunk) {
+const statusFor = function (chunk: any) {
     if (chunk.added) {
         return "added";
     }
@@ -15,7 +14,7 @@ const statusFor = function (chunk) {
 
 // Turn a chunk (which contains an array of values and a status)
 // into an array of values, each with the same status
-const splitUpChunk = (chunk) =>
+const splitUpChunk = (chunk: any) =>
     _.map(chunk.value, (value) => {
         return {
             value: value,
@@ -25,7 +24,7 @@ const splitUpChunk = (chunk) =>
 
 // Apply `fn` to every element in `lst` and then concatenate all the results
 // http://clojuredocs.org/clojure_core/clojure.core/mapcat
-const mapcat = function (lst, fn) {
+const mapcat = function (lst: any, fn: (chunk?: any) => any) {
     return _.flatten(_.map(lst, fn), true /* only flatten one level */);
 };
 
@@ -39,7 +38,7 @@ const ArrayDiff = new jsdiff.Diff();
 ArrayDiff.tokenize = (array) => _.map(array, (elem) => [elem]);
 // The default is `+` for string concatenation, which doesn't work for array
 // concatenation.
-ArrayDiff.join = (a, b) => a.concat(b);
+ArrayDiff.join = (a, b: any) => a.concat(b);
 // By default jsDiff uses ===
 ArrayDiff.equals = _.isEqual;
 
@@ -54,15 +53,15 @@ ArrayDiff.equals = _.isEqual;
 //    { "value":2, "status":"unchanged"},
 //    { "value":3, "status":"unchanged"},
 //    { "value":4, "status":"added"}]
-const flattenChunks = (chunks) => mapcat(chunks, splitUpChunk);
+const flattenChunks = (chunks: any) => mapcat(chunks, splitUpChunk);
 
 // Take two arrays and create a diff for them. The result is two arrays of
 // objects, one for the things that should be included in a 'before', and one
 // for 'after'
 const stringArrayDiff = function (
-    a: $ReadOnlyArray<$FlowFixMe>,
-    b: $ReadOnlyArray<$FlowFixMe>,
-): $FlowFixMe {
+    a: ReadonlyArray<any>,
+    b: ReadonlyArray<any>,
+): any {
     const diffResult = ArrayDiff.diff(a, b);
     const flattened = flattenChunks(diffResult);
 

package/src/diffs/{structured-item-diff.jsx → structured-item-diff.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A side by side diff view for Perseus exercise items
  * that do not have the standard question layout.
@@ -11,12 +10,12 @@ import {
 } from "@khanacademy/perseus";
 import * as React from "react";
 
-import RendererDiff from "./renderer-diff.jsx";
-import TagsDiff from "./tags-diff.jsx";
+import RendererDiff from "./renderer-diff";
+import TagsDiff from "./tags-diff";
 
 import type {Item, Path, Shape} from "@khanacademy/perseus";
 
-type ItemList = [mixed, Path];
+type ItemList = [unknown, Path];
 
 /**
  * Outputs true if path begins with beginPath, false otherwise.
@@ -53,11 +52,13 @@ function checkPath(beforePath: Path, afterPath: Path): boolean {
  * Given a path, returns a title. Puts colons after numbers in the path.
  */
 function getTitle(path: Path): string {
-    const title = [];
+    const title: Array<string> = [];
     for (let i = 0; i < path.length; i++) {
         if (typeof path[i] === "number") {
+            // @ts-expect-error [FEI-5003] - TS2365 - Operator '+' cannot be applied to types 'string | number' and 'number'.
             title.push((path[i] + 1).toString() + ":");
         } else {
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
             title.push(path[i]);
         }
     }
@@ -65,18 +66,17 @@ function getTitle(path: Path): string {
 }
 
 type Tag = {
-    idToName: (string) => string,
-    nameToId: (string) => string,
-    names: $ReadOnlyArray<string>,
-    ...
+    idToName: (arg1: string) => string;
+    nameToId: (arg1: string) => string;
+    names: ReadonlyArray<string>;
 };
 
-type Props = {|
-    after: Item,
-    before: Item,
-    shape: Shape,
-    tags: Tag,
-|};
+type Props = {
+    after: Item;
+    before: Item;
+    shape: Shape;
+    tags: Tag;
+};
 
 class StructuredItemDiff extends React.Component<Props> {
     /**
@@ -86,14 +86,11 @@ class StructuredItemDiff extends React.Component<Props> {
      * from buildMapper(), is the same order they appear in in the shape.
      */
     static generateCompletePathsList(
-        // eslint-disable-next-line ft-flow/no-mutable-array
         beforeList: Array<ItemList>,
-        // eslint-disable-next-line ft-flow/no-mutable-array
         afterList: Array<ItemList>,
-        // eslint-disable-next-line ft-flow/no-mutable-array
         result: Array<Path>,
         shape: Shape,
-        path: $ReadOnlyArray<any>,
+        path: ReadonlyArray<any>,
     ): void {
         if (
             shape.type === "content" ||
@@ -153,10 +150,10 @@ class StructuredItemDiff extends React.Component<Props> {
         }
     }
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {before, after, shape, tags} = this.props;
 
-        const beforeList = [];
+        const beforeList: Array<ItemList> = [];
         const afterList = [];
 
         buildMapper()
@@ -166,8 +163,11 @@ class StructuredItemDiff extends React.Component<Props> {
             .mapTree(itemToTree(before), shape);
 
         buildMapper()
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'unknown' is not assignable to type 'never'. | TS2322 - Type 'Path' is not assignable to type 'never'.
             .setContentMapper((c, _, p) => afterList.push([c, p]))
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'unknown' is not assignable to type 'never'. | TS2322 - Type 'Path' is not assignable to type 'never'.
             .setHintMapper((c, _, p) => afterList.push([c, p]))
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'unknown' is not assignable to type 'never'. | TS2322 - Type 'Path' is not assignable to type 'never'.
             .setTagsMapper((c, _, p) => afterList.push([c, p]))
             .mapTree(itemToTree(after), shape);
 
@@ -176,7 +176,7 @@ class StructuredItemDiff extends React.Component<Props> {
         const beforeListModified = beforeList.slice();
         const afterListModified = afterList.slice();
 
-        const allDiffPaths = [];
+        const allDiffPaths: Array<Path> = [];
         StructuredItemDiff.generateCompletePathsList(
             beforeListModified,
             afterListModified,
@@ -187,7 +187,7 @@ class StructuredItemDiff extends React.Component<Props> {
 
         const diffCount = allDiffPaths.length;
 
-        const diffs: React.Node = allDiffPaths.map((path, n) => {
+        const diffs: React.ReactNode = allDiffPaths.map((path, n) => {
             const isTag = path[path.length - 1] === "tags";
             const currentTitle = getTitle(path);
 
@@ -203,10 +203,11 @@ class StructuredItemDiff extends React.Component<Props> {
                     before = [[], path];
                 }
                 if (!after) {
+                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'Path[]' is not assignable to type 'undefined'.
                     after = [[], path];
                 }
 
-                const beforeTags = [];
+                const beforeTags: Array<string> = [];
                 if (Array.isArray(before[0])) {
                     before[0].forEach((tagId) => {
                         if (typeof tagId === "string") {
@@ -214,8 +215,10 @@ class StructuredItemDiff extends React.Component<Props> {
                         }
                     });
                 }
-                const afterTags = [];
+                const afterTags: Array<string> = [];
+                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                 if (Array.isArray(after[0])) {
+                    // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                     after[0].forEach((tagId) => {
                         if (typeof tagId === "string") {
                             afterTags.push(tags.idToName(tagId));
@@ -248,12 +251,14 @@ class StructuredItemDiff extends React.Component<Props> {
                 before = [buildEmptyItemTreeForShape(shapes.content), path];
             }
             if (!after) {
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'any[]' is not assignable to type 'undefined'.
                 after = [buildEmptyItemTreeForShape(shapes.content), path];
             }
             return (
                 <RendererDiff
-                    before={(before[0]: $FlowFixMe)}
-                    after={(after[0]: $FlowFixMe)}
+                    before={before[0] as any}
+                    // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                    after={after[0] as any}
                     title={currentTitle}
                     showAlignmentOptions={false}
                     showSeparator={n < diffCount - 1}

package/src/diffs/{tags-diff.jsx → tags-diff.tsx}

@@ -1,34 +1,33 @@
-// @flow
 /**
  * A side by side diff view for general passage layout tags.
  */
 
 import * as React from "react";
 
-import TextDiff from "./text-diff.jsx";
+import TextDiff from "./text-diff";
 
-type Props = {|
-    afterOnly: $ReadOnlyArray<string>,
-    beforeOnly: $ReadOnlyArray<string>,
-    intersection: $ReadOnlyArray<string>,
-    showSeparator: boolean,
-    title: string,
-|};
+type Props = {
+    afterOnly: ReadonlyArray<string>;
+    beforeOnly: ReadonlyArray<string>;
+    intersection: ReadonlyArray<string>;
+    showSeparator: boolean;
+    title: string;
+};
 
 class TagsDiff extends React.Component<Props> {
-    static defaultProps: {|
-        afterOnly: $ReadOnlyArray<any>,
-        beforeOnly: $ReadOnlyArray<any>,
-        showSeparator: boolean,
-        title: string,
-    |} = {
+    static defaultProps: {
+        afterOnly: ReadonlyArray<any>;
+        beforeOnly: ReadonlyArray<any>;
+        showSeparator: boolean;
+        title: string;
+    } = {
         afterOnly: [],
         beforeOnly: [],
         showSeparator: false,
         title: "Question tags",
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {afterOnly, beforeOnly, intersection, showSeparator} = this.props;
 
         const beforeTags = intersection.concat(beforeOnly).join("\n") + "\n";

package/src/diffs/{text-diff.jsx → text-diff.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unsafe */
-// @flow
 import {components} from "@khanacademy/perseus";
 import classNames from "classnames";
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -8,8 +7,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import splitDiff from "./split-diff.jsx";
-import stringArrayDiff from "./string-array-diff.jsx";
+import splitDiff from "./split-diff";
+import stringArrayDiff from "./string-array-diff";
 
 const {SvgImage} = components;
 
@@ -18,11 +17,11 @@ const AFTER = "after";
 
 const IMAGE_REGEX = /http.*?\.png|web\+graphie[^)]*/g;
 
-const imagesInString = function (str) {
+const imagesInString = function (str: any) {
     return str.match(IMAGE_REGEX) || [];
 };
 
-const classFor = function (entry, ifAdded, ifRemoved) {
+const classFor = function (entry: any, ifAdded: string, ifRemoved: string) {
     if (entry.added) {
         return ifAdded;
     }
@@ -32,12 +31,12 @@ const classFor = function (entry, ifAdded, ifRemoved) {
     return "";
 };
 
-class ImageDiffSide extends React.Component<$FlowFixMe> {
+class ImageDiffSide extends React.Component<any> {
     static propTypes = {
         images: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 {_.map(this.props.images, (entry, index) => {
@@ -51,6 +50,7 @@ class ImageDiffSide extends React.Component<$FlowFixMe> {
                         <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}
                                     title={entry.value}
@@ -64,23 +64,23 @@ class ImageDiffSide extends React.Component<$FlowFixMe> {
     }
 }
 
-class TextDiff extends React.Component<$FlowFixMe, $FlowFixMe> {
+class TextDiff extends React.Component<any, any> {
     static propTypes = {
         after: PropTypes.string,
         before: PropTypes.string,
         title: PropTypes.string.isRequired,
     };
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         after: "",
         before: "",
     };
 
-    state: $FlowFixMe = {
+    state: any = {
         collapsed: this.props.before === this.props.after,
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
+    UNSAFE_componentWillReceiveProps(nextProps: any) {
         this.setState({
             collapsed: nextProps.before === nextProps.after,
         });
@@ -90,7 +90,7 @@ class TextDiff extends React.Component<$FlowFixMe, $FlowFixMe> {
         this.setState({collapsed: false});
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const diffed = jsdiff.diffWords(this.props.before, this.props.after);
 
         const lines = splitDiff(diffed);
@@ -100,7 +100,7 @@ class TextDiff extends React.Component<$FlowFixMe, $FlowFixMe> {
         const images = stringArrayDiff(beforeImages, afterImages);
 
         const renderedLines = _.map(lines, (line) => {
-            const contents = {};
+            const contents: Record<string, any> = {};
 
             contents.before = _(line).map(function (entry, i) {
                 return (

package/src/diffs/{widget-diff-performer.jsx → widget-diff-performer.ts}

@@ -1,4 +1,3 @@
-// @flow
 import _ from "underscore";
 
 const UNCHANGED = "unchanged";
@@ -8,7 +7,7 @@ const REMOVED = "removed";
 
 // For values which do not have further values nested within them (strings,
 // numbers, and booleans)
-const valueEntry = function (before, after, key) {
+const valueEntry = function (before: any, after: any, key) {
     let status;
     if (before === after) {
         status = UNCHANGED;
@@ -30,7 +29,7 @@ const valueEntry = function (before, after, key) {
 };
 
 // For values which require a more granular diff (objects and arrays)
-const objectEntry = function (before, after, key) {
+const objectEntry = function (before: any, after: any, key) {
     const beforeKeys = _.isObject(before) ? _(before).keys() : [];
     const afterKeys = _.isObject(after) ? _(after).keys() : [];
     const keys = _.union(beforeKeys, afterKeys);
@@ -60,11 +59,7 @@ const objectEntry = function (before, after, key) {
     };
 };
 
-const performDiff = function (
-    before: $FlowFixMe,
-    after: $FlowFixMe,
-    key?: $FlowFixMe,
-): $FlowFixMe {
+const performDiff = function (before: any, after: any, key?: any): any {
     if (typeof before === "object" || typeof after === "object") {
         return objectEntry(before, after, key);
     }

package/src/diffs/{widget-diff.jsx → widget-diff.tsx}

@@ -1,15 +1,14 @@
-// @flow
 import {components} from "@khanacademy/perseus";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import performDiff from "./widget-diff-performer.jsx";
+import performDiff from "./widget-diff-performer";
 
 const {SvgImage} = components;
 
-const indentationFromDepth = function (depth) {
+const indentationFromDepth = function (depth: any) {
     return (depth - 1) * 20;
 };
 
@@ -18,7 +17,7 @@ const AFTER = "after";
 
 const UNCHANGED = "unchanged";
 
-class DiffSide extends React.Component<$FlowFixMe> {
+class DiffSide extends React.Component<any> {
     static propTypes = {
         className: PropTypes.string.isRequired,
         depth: PropTypes.number.isRequired,
@@ -28,7 +27,7 @@ class DiffSide extends React.Component<$FlowFixMe> {
         value: PropTypes.string,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const className = classNames(this.props.className, {
             "diff-row": true,
             before: this.props.side === BEFORE,
@@ -53,7 +52,7 @@ class DiffSide extends React.Component<$FlowFixMe> {
     }
 }
 
-class CollapsedRow extends React.Component<$FlowFixMe> {
+class CollapsedRow extends React.Component<any> {
     static propTypes = {
         depth: PropTypes.number,
         onClick: PropTypes.func.isRequired,
@@ -63,7 +62,7 @@ class CollapsedRow extends React.Component<$FlowFixMe> {
         depth: 0,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const self = this;
         return (
             <div onClick={self.props.onClick} style={{clear: "both"}}>
@@ -91,7 +90,7 @@ class CollapsedRow extends React.Component<$FlowFixMe> {
 }
 
 // Component representing a single property that may be nested.
-class DiffEntry extends React.Component<$FlowFixMe, $FlowFixMe> {
+class DiffEntry extends React.Component<any, any> {
     static propTypes = {
         depth: PropTypes.number,
         entry: PropTypes.shape({
@@ -115,7 +114,7 @@ class DiffEntry extends React.Component<$FlowFixMe, $FlowFixMe> {
         this.setState({expanded: true});
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const entry = this.props.entry;
         const propertyDeleted = entry.status === "removed";
         const propertyAdded = entry.status === "added";
@@ -197,7 +196,7 @@ class DiffEntry extends React.Component<$FlowFixMe, $FlowFixMe> {
 }
 
 // For image widgets, show the actual image
-class ImageWidgetDiff extends React.Component<$FlowFixMe> {
+class ImageWidgetDiff extends React.Component<any> {
     static propTypes = {
         after: PropTypes.shape({
             options: PropTypes.objectOf(PropTypes.any),
@@ -207,7 +206,7 @@ class ImageWidgetDiff extends React.Component<$FlowFixMe> {
         }).isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {before, after} = this.props;
         const beforeSrc =
             before.options && before.options.backgroundImage
@@ -229,6 +228,7 @@ class ImageWidgetDiff extends React.Component<$FlowFixMe> {
                             })}
                         >
                             {/* $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>
                     )}
@@ -243,6 +243,7 @@ class ImageWidgetDiff extends React.Component<$FlowFixMe> {
                             })}
                         >
                             {/* $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>
                     )}
@@ -252,7 +253,7 @@ class ImageWidgetDiff extends React.Component<$FlowFixMe> {
     }
 }
 
-class WidgetDiff extends React.Component<$FlowFixMe> {
+class WidgetDiff extends React.Component<any> {
     static propTypes = {
         after: PropTypes.shape({
             options: PropTypes.objectOf(PropTypes.any),
@@ -264,13 +265,13 @@ class WidgetDiff extends React.Component<$FlowFixMe> {
         type: PropTypes.string,
     };
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         after: {},
         before: {},
         type: "",
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {after, before, title, type} = this.props;
         const diff = performDiff(before, after);
         return (