@khanacademy/perseus-editor 4.1.5 → 4.1.7

package/src/diffs/article-diff.tsx

@@ -1,69 +0,0 @@
-/* eslint-disable react/no-unsafe */
-/**
- * A side by side diff view for Perseus articles.
- */
-
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import RendererDiff from "./renderer-diff";
-
-const rendererProps = PropTypes.shape({
-    content: PropTypes.string,
-    images: PropTypes.objectOf(PropTypes.any),
-    widgets: PropTypes.objectOf(PropTypes.any),
-});
-
-type Props = any;
-type State = any;
-
-class ArticleDiff extends React.Component<Props, State> {
-    static propTypes = {
-        // TODO(alex): Check whether we still have any Perseus articles whose
-        // top-level json is an object, not an array. If not, simplify here.
-        after: PropTypes.oneOfType([
-            rendererProps,
-            PropTypes.arrayOf(rendererProps),
-        ]).isRequired,
-        before: PropTypes.oneOfType([
-            rendererProps,
-            PropTypes.arrayOf(rendererProps),
-        ]).isRequired,
-    };
-
-    static _stateFromProps: (arg1: Props) => State = (props) => {
-        const {before, after} = props;
-        return {
-            before: Array.isArray(before) ? before : [before],
-            after: Array.isArray(after) ? after : [after],
-        };
-    };
-
-    state: State = ArticleDiff._stateFromProps(this.props);
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        this.setState(ArticleDiff._stateFromProps(nextProps));
-    }
-
-    render(): React.ReactNode {
-        const {before, after} = this.state;
-
-        const sectionCount = Math.max(before.length, after.length);
-
-        const sections = _.times(sectionCount, (n) => (
-            <RendererDiff
-                before={n < before.length ? before[n] : undefined}
-                after={n < after.length ? after[n] : undefined}
-                title={`Section ${n + 1}`}
-                showAlignmentOptions={true}
-                showSeparator={n < sectionCount - 1}
-                key={n}
-            />
-        ));
-
-        return <div className="framework-perseus">{sections}</div>;
-    }
-}
-
-export default ArticleDiff;

package/src/diffs/item-diff.tsx

@@ -1,76 +0,0 @@
-/**
- * A side by side diff view for Perseus exercise items
- * in the standard layout.
- */
-
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import RendererDiff from "./renderer-diff";
-import WidgetDiff from "./widget-diff";
-
-const itemProps = PropTypes.shape({
-    question: PropTypes.shape({}).isRequired,
-    answerArea: PropTypes.shape({}).isRequired,
-    hints: PropTypes.arrayOf(PropTypes.any).isRequired,
-});
-
-type Props = any;
-
-class ItemDiff extends React.Component<Props> {
-    static propTypes = {
-        after: itemProps.isRequired,
-        before: itemProps.isRequired,
-    };
-
-    render(): React.ReactNode {
-        const {before, after} = this.props;
-
-        const hintCount = Math.max(before.hints.length, after.hints.length);
-
-        const question = (
-            <RendererDiff
-                before={before.question}
-                after={after.question}
-                title="Question"
-                showAlignmentOptions={false}
-                showSeparator={true}
-            />
-        );
-
-        const extras = (
-            <WidgetDiff
-                before={before.answerArea}
-                after={after.answerArea}
-                title="Question extras"
-            />
-        );
-
-        const hints = _.times(hintCount, function (n) {
-            return (
-                <RendererDiff
-                    before={
-                        n < before.hints.length ? before.hints[n] : undefined
-                    }
-                    after={n < after.hints.length ? after.hints[n] : undefined}
-                    title={`Hint ${n + 1}`}
-                    showAlignmentOptions={false}
-                    showSeparator={n < hintCount - 1}
-                    key={n}
-                />
-            );
-        });
-
-        return (
-            <div className="framework-perseus">
-                {question}
-                {extras}
-                {hints && <div className="diff-separator" />}
-                {hints}
-            </div>
-        );
-    }
-}
-
-export default ItemDiff;

package/src/diffs/renderer-diff.tsx

@@ -1,137 +0,0 @@
-import {Widgets} from "@khanacademy/perseus";
-/**
- * A side by side diff view for Perseus renderers.
- */
-import * as React from "react";
-import _ from "underscore";
-
-import TextDiff from "./text-diff";
-import WidgetDiff from "./widget-diff";
-
-import type {PerseusRenderer} from "@khanacademy/perseus";
-
-// In diffs, only show the widgetInfo props that can change
-const filterWidgetInfo = function (widgetInfo, showAlignmentOptions: boolean) {
-    const {alignment, graded, options, type} = widgetInfo || {};
-
-    const filteredWidgetInfo = {options} as const;
-
-    // Show alignment options iff multiple valid ones exist for this widget
-    if (
-        showAlignmentOptions &&
-        Widgets.getSupportedAlignments(type).length > 1
-    ) {
-        // @ts-expect-error - TS2339 - Property 'alignment' does not exist on type '{ readonly options: any; }'.
-        filteredWidgetInfo.alignment = alignment;
-    }
-
-    if (type === "transformer") {
-        // @ts-expect-error - TS2339 - Property 'graded' does not exist on type '{ readonly options: any; }'.
-        filteredWidgetInfo.graded = graded;
-    }
-
-    if (Widgets.supportsStaticMode(type)) {
-        // @ts-expect-error - TS2339 - Property 'static' does not exist on type '{ readonly options: any; }'.
-        filteredWidgetInfo.static = widgetInfo?.static ?? undefined;
-    }
-
-    return filteredWidgetInfo;
-};
-
-// TODO(michaelpolyak): This type is very similar to `PerseusRenderer` type
-// found in `perseus-all-package/perseus-type.js`, consider just using it.
-type RendererProps = {
-    content: string;
-    // NOTE: images and widgets may not be set for some items hints,
-    // specifically in old revisions, which may only be loaded for diffing.
-    widgets: PerseusRenderer["widgets"] | null | undefined;
-    images: PerseusRenderer["images"] | null | undefined;
-};
-
-type Props = {
-    // The "after" props of the renderer. Will be displayed on the right.
-    after: RendererProps;
-    // The "before" props of the renderer. Will be displayed on the left.
-    before: RendererProps;
-    // If true, show widget alignment options in the diff.
-    showAlignmentOptions: boolean;
-    // If true, render a horizontal rule after this diff.
-    showSeparator: boolean;
-    // The heading to render above the side by side diff.
-    // (In a code review tool this would be the filename.)
-    title: string;
-};
-
-class RendererDiff extends React.Component<Props> {
-    static defaultProps: Partial<Omit<Props, "title">> = {
-        after: {
-            content: "",
-            images: {},
-            widgets: {},
-        },
-        before: {
-            content: "",
-            images: {},
-            widgets: {},
-        },
-        showAlignmentOptions: false,
-        showSeparator: false,
-    };
-
-    render(): React.ReactNode {
-        const {after, before, showAlignmentOptions, showSeparator, title} =
-            this.props;
-
-        let textDiff;
-        let widgetsDiff;
-
-        if (before.content || after.content) {
-            textDiff = (
-                <TextDiff
-                    before={before.content}
-                    after={after.content}
-                    title={title}
-                />
-            );
-        }
-
-        const beforeWidgets = Object.keys(before.widgets ?? {}).filter(
-            (widget) => before.content.includes(widget),
-        );
-        const afterWidgets = Object.keys(after.widgets ?? {}).filter((widget) =>
-            after.content.includes(widget),
-        );
-
-        if (beforeWidgets.length || afterWidgets.length) {
-            const widgets = _.union(beforeWidgets, afterWidgets);
-            widgetsDiff = widgets.map((widget) => (
-                <WidgetDiff
-                    before={filterWidgetInfo(
-                        before.widgets?.[widget],
-                        showAlignmentOptions,
-                    )}
-                    after={filterWidgetInfo(
-                        after.widgets?.[widget],
-                        showAlignmentOptions,
-                    )}
-                    title={widget}
-                    type={
-                        (before.widgets?.[widget] ?? {}).type ||
-                        (after.widgets?.[widget] ?? {}).type
-                    }
-                    key={widget}
-                />
-            ));
-        }
-
-        return (
-            <div>
-                {textDiff}
-                {widgetsDiff}
-                {showSeparator && <div className="diff-separator" />}
-            </div>
-        );
-    }
-}
-
-export default RendererDiff;

package/src/diffs/split-diff.ts

@@ -1,31 +0,0 @@
-import _ from "underscore";
-
-// Split a word-wise diff generated by jsdiff into multiple lines, for the
-// purpose of breaking up the diffs into lines, so that modified lines can be
-// faintly highlighted
-
-const splitDiff = function (diffEntries: any): any {
-    const lines = [];
-    let currentLine: Array<any> = [];
-    _.each(diffEntries, (entry) => {
-        const values = entry.value.split("\n");
-        _.each(values, (value, i) => {
-            const isNewline = i > 0;
-            if (isNewline) {
-                // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never'.
-                lines.push(currentLine);
-                currentLine = [];
-            }
-            const newEntry = _.extend({}, entry, {value: value});
-            currentLine.push(newEntry);
-        });
-    });
-
-    if (currentLine.length) {
-        // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never'.
-        lines.push(currentLine);
-    }
-    return lines;
-};
-
-export default splitDiff;

package/src/diffs/string-array-diff.ts

@@ -1,74 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import jsdiff from "jsdiff";
-import _ from "underscore";
-
-const statusFor = function (chunk: any) {
-    if (chunk.added) {
-        return "added";
-    }
-    if (chunk.removed) {
-        return "removed";
-    }
-    return "unchanged";
-};
-
-// 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: any) =>
-    _.map(chunk.value, (value) => {
-        return {
-            value: value,
-            status: statusFor(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: any, fn: (chunk?: any) => any) {
-    return _.flatten(_.map(lst, fn), true /* only flatten one level */);
-};
-
-// > ArrayDiff.diff([1,2,3], [2,3,4]);
-// = [{ "value": [1],
-//      "removed": true },
-//    { "value": [2, 3] },
-//    { "value": [4],
-//      "added": true }]
-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: any) => a.concat(b);
-// By default jsDiff uses ===
-ArrayDiff.equals = _.isEqual;
-
-// Take the output of jsdiff's function (which concatenates adjacent entries)
-// and make it just one entry per chunk
-// > flattenChunks([{ "value": [1],
-//                    "removed": true },
-//                  { "value": [2, 3] },
-//                  { "value": [4],
-//                    "added": true }])
-// = [{ "value":1, "status":"removed"},
-//    { "value":2, "status":"unchanged"},
-//    { "value":3, "status":"unchanged"},
-//    { "value":4, "status":"added"}]
-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<any>,
-    b: ReadonlyArray<any>,
-): any {
-    const diffResult = ArrayDiff.diff(a, b);
-    const flattened = flattenChunks(diffResult);
-
-    return {
-        before: _.filter(flattened, (entry) => entry.status !== "added"),
-        after: _.filter(flattened, (entry) => entry.status !== "removed"),
-    };
-};
-
-export default stringArrayDiff;

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

@@ -1,275 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/**
- * A side by side diff view for Perseus exercise items
- * that do not have the standard question layout.
- */
-import {
-    buildEmptyItemTreeForShape,
-    buildMapper,
-    itemToTree,
-    shapes,
-} from "@khanacademy/perseus";
-import * as React from "react";
-
-import RendererDiff from "./renderer-diff";
-import TagsDiff from "./tags-diff";
-
-import type {Item, Path, Shape} from "@khanacademy/perseus";
-
-type ItemList = [unknown, Path];
-
-/**
- * Outputs true if path begins with beginPath, false otherwise.
- */
-function beginsWith(path: Path, beginPath: Path): boolean {
-    let matches = true;
-    for (let i = 0; i < beginPath.length; i++) {
-        if (i >= path.length) {
-            return false;
-        }
-        if (beginPath[i] !== path[i]) {
-            matches = false;
-        }
-    }
-    return matches;
-}
-
-/**
- * Outputs true if beforePath and afterPath are the same.
- */
-function checkPath(beforePath: Path, afterPath: Path): boolean {
-    if (beforePath.length !== afterPath.length) {
-        return false;
-    }
-    for (let i = 0, l = beforePath.length; i < l; i++) {
-        if (beforePath[i] !== afterPath[i]) {
-            return false;
-        }
-    }
-    return true;
-}
-
-/**
- * Given a path, returns a title. Puts colons after numbers in the path.
- */
-function getTitle(path: Path): string {
-    const title: Array<string> = [];
-    for (let i = 0; i < path.length; i++) {
-        if (typeof path[i] === "number") {
-            // @ts-expect-error - TS2365 - Operator '+' cannot be applied to types 'string | number' and 'number'.
-            title.push((path[i] + 1).toString() + ":");
-        } else {
-            // @ts-expect-error - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
-            title.push(path[i]);
-        }
-    }
-    return title.join(" ");
-}
-
-type Tag = {
-    idToName: (arg1: string) => string;
-    nameToId: (arg1: string) => string;
-    names: ReadonlyArray<string>;
-};
-
-type Props = {
-    after: Item;
-    before: Item;
-    shape: Shape;
-    tags: Tag;
-};
-
-class StructuredItemDiff extends React.Component<Props> {
-    /**
-     * Traverses the given shape and adds paths that are present in
-     * beforeList and afterList to result. Note that this method assumes
-     * the order of elements in beforeList and afterList, which are
-     * from buildMapper(), is the same order they appear in in the shape.
-     */
-    static generateCompletePathsList(
-        beforeList: Array<ItemList>,
-        afterList: Array<ItemList>,
-        result: Array<Path>,
-        shape: Shape,
-        path: ReadonlyArray<any>,
-    ): void {
-        if (
-            shape.type === "content" ||
-            shape.type === "hint" ||
-            shape.type === "tags"
-        ) {
-            const beforePath =
-                beforeList.length > 0 && checkPath(path, beforeList[0][1]);
-            const afterPath =
-                afterList.length > 0 && checkPath(path, afterList[0][1]);
-            if (beforePath && afterPath) {
-                result.push(path);
-                beforeList.splice(0, 1);
-                afterList.splice(0, 1);
-            } else if (beforePath) {
-                result.push(path);
-                beforeList.splice(0, 1);
-            } else if (afterPath) {
-                result.push(path);
-                afterList.splice(0, 1);
-            }
-        } else if (shape.type === "array") {
-            let index = 0;
-            let newPath = path.concat(index);
-
-            // For array types, the paths will be in the form [<path>, n],
-            // where n is an integer > 0 and increments.
-            // As long as either beforeList or afterList has a next element that
-            // matches [<path>, n], we recurse into that item with the new path.
-            while (
-                (beforeList.length > 0 &&
-                    beginsWith(beforeList[0][1], newPath)) ||
-                (afterList.length > 0 && beginsWith(afterList[0][1], newPath))
-            ) {
-                StructuredItemDiff.generateCompletePathsList(
-                    beforeList,
-                    afterList,
-                    result,
-                    shape.elementShape,
-                    newPath,
-                );
-                index++;
-                newPath = path.concat(index);
-            }
-        } else if (shape.type === "object") {
-            const keys = Object.keys(shape.shape);
-            for (let i = 0; i < keys.length; i++) {
-                const newPath = path.concat([keys[i]]);
-                StructuredItemDiff.generateCompletePathsList(
-                    beforeList,
-                    afterList,
-                    result,
-                    shape.shape[keys[i]],
-                    newPath,
-                );
-            }
-        }
-    }
-
-    render(): React.ReactNode {
-        const {before, after, shape, tags} = this.props;
-
-        const beforeList: Array<ItemList> = [];
-        const afterList = [];
-
-        buildMapper()
-            .setContentMapper((c, _, p) => beforeList.push([c, p]))
-            .setHintMapper((c, _, p) => beforeList.push([c, p]))
-            .setTagsMapper((c, _, p) => beforeList.push([c, p]))
-            .mapTree(itemToTree(before), shape);
-
-        buildMapper()
-            // @ts-expect-error - 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 - 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 - 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);
-
-        // These are used in generateCompletePathsList()
-        // and are modified in that method.
-        const beforeListModified = beforeList.slice();
-        const afterListModified = afterList.slice();
-
-        const allDiffPaths: Array<Path> = [];
-        StructuredItemDiff.generateCompletePathsList(
-            beforeListModified,
-            afterListModified,
-            allDiffPaths,
-            shape,
-            [],
-        );
-
-        const diffCount = allDiffPaths.length;
-
-        const diffs: React.ReactNode = allDiffPaths.map((path, n) => {
-            const isTag = path[path.length - 1] === "tags";
-            const currentTitle = getTitle(path);
-
-            let before = beforeList.find((e) => {
-                return checkPath(e[1], path);
-            });
-            let after = afterList.find((e) => {
-                return checkPath(e[1], path);
-            });
-
-            if (isTag) {
-                if (!before) {
-                    before = [[], path];
-                }
-                if (!after) {
-                    // @ts-expect-error - TS2322 - Type 'Path[]' is not assignable to type 'undefined'.
-                    after = [[], path];
-                }
-
-                const beforeTags: Array<string> = [];
-                if (Array.isArray(before[0])) {
-                    before[0].forEach((tagId) => {
-                        if (typeof tagId === "string") {
-                            beforeTags.push(tags.idToName(tagId));
-                        }
-                    });
-                }
-                const afterTags: Array<string> = [];
-                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                if (Array.isArray(after[0])) {
-                    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                    after[0].forEach((tagId) => {
-                        if (typeof tagId === "string") {
-                            afterTags.push(tags.idToName(tagId));
-                        }
-                    });
-                }
-
-                const intersection = beforeTags.filter((tag) =>
-                    afterTags.includes(tag),
-                );
-                const beforeOnly = beforeTags.filter(
-                    (tag) => !afterTags.includes(tag),
-                );
-                const afterOnly = afterTags.filter(
-                    (tag) => !beforeTags.includes(tag),
-                );
-
-                return (
-                    <TagsDiff
-                        beforeOnly={beforeOnly}
-                        afterOnly={afterOnly}
-                        intersection={intersection}
-                        title={currentTitle}
-                        showSeparator={n < diffCount - 1}
-                        key={n}
-                    />
-                );
-            }
-            if (!before) {
-                before = [buildEmptyItemTreeForShape(shapes.content), path];
-            }
-            if (!after) {
-                // @ts-expect-error - TS2322 - Type 'any[]' is not assignable to type 'undefined'.
-                after = [buildEmptyItemTreeForShape(shapes.content), path];
-            }
-            return (
-                <RendererDiff
-                    before={before[0] as any}
-                    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                    after={after[0] as any}
-                    title={currentTitle}
-                    showAlignmentOptions={false}
-                    showSeparator={n < diffCount - 1}
-                    key={n}
-                />
-            );
-        });
-
-        return <div className="framework-perseus">{diffs}</div>;
-    }
-}
-
-export default StructuredItemDiff;