@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/diffs/article-diff.jsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-unsafe */
+// @flow
+/**
+ * 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.jsx";
+
+const rendererProps = PropTypes.shape({
+    content: PropTypes.string,
+    images: PropTypes.objectOf(PropTypes.any),
+    widgets: PropTypes.objectOf(PropTypes.any),
+});
+
+type Props = $FlowFixMe;
+type State = $FlowFixMe;
+
+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: (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.Node {
+        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.jsx

@@ -0,0 +1,77 @@
+// @flow
+/**
+ * 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.jsx";
+import WidgetDiff from "./widget-diff.jsx";
+
+const itemProps = PropTypes.shape({
+    question: PropTypes.shape({}).isRequired,
+    answerArea: PropTypes.shape({}).isRequired,
+    hints: PropTypes.arrayOf(PropTypes.any).isRequired,
+});
+
+type Props = $FlowFixMe;
+
+class ItemDiff extends React.Component<Props> {
+    static propTypes = {
+        after: itemProps.isRequired,
+        before: itemProps.isRequired,
+    };
+
+    render(): React.Node {
+        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.jsx

@@ -0,0 +1,143 @@
+// @flow
+/**
+ * A side by side diff view for Perseus renderers.
+ */
+import {Widgets} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import TextDiff from "./text-diff.jsx";
+import WidgetDiff from "./widget-diff.jsx";
+
+import type {PerseusRenderer} from "@khanacademy/perseus";
+
+// In diffs, only show the widgetInfo props that can change
+const filterWidgetInfo = function (widgetInfo, showAlignmentOptions) {
+    const {alignment, graded, options, type} = widgetInfo || {};
+
+    const filteredWidgetInfo = {options};
+
+    // Show alignment options iff multiple valid ones exist for this widget
+    if (
+        showAlignmentOptions &&
+        Widgets.getSupportedAlignments(type).length > 1
+    ) {
+        // $FlowFixMe[prop-missing]
+        filteredWidgetInfo.alignment = alignment;
+    }
+
+    if (type === "transformer") {
+        // $FlowFixMe[prop-missing]
+        filteredWidgetInfo.graded = graded;
+    }
+
+    if (Widgets.supportsStaticMode(type)) {
+        // $FlowFixMe[prop-missing]
+        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"],
+    images: ?PerseusRenderer["images"],
+|};
+
+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: $Rest<Props, {|title: string|}> = {
+        after: {
+            content: "",
+            images: {},
+            widgets: {},
+        },
+        before: {
+            content: "",
+            images: {},
+            widgets: {},
+        },
+        showAlignmentOptions: false,
+        showSeparator: false,
+    };
+
+    render(): React.Node {
+        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.jsx

@@ -0,0 +1,30 @@
+// @flow
+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: $FlowFixMe): $FlowFixMe {
+    const lines = [];
+    let currentLine = [];
+    _.each(diffEntries, (entry) => {
+        const values = entry.value.split("\n");
+        _.each(values, (value, i) => {
+            const isNewline = i > 0;
+            if (isNewline) {
+                lines.push(currentLine);
+                currentLine = [];
+            }
+            const newEntry = _.extend({}, entry, {value: value});
+            currentLine.push(newEntry);
+        });
+    });
+
+    if (currentLine.length) {
+        lines.push(currentLine);
+    }
+    return lines;
+};
+
+export default splitDiff;

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

@@ -0,0 +1,75 @@
+// @flow
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jsdiff from "jsdiff";
+import _ from "underscore";
+
+const statusFor = function (chunk) {
+    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) =>
+    _.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, fn) {
+    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) => 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) => 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 {
+    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.jsx

@@ -0,0 +1,269 @@
+// @flow
+/**
+ * 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.jsx";
+import TagsDiff from "./tags-diff.jsx";
+
+import type {Item, Path, Shape} from "@khanacademy/perseus";
+
+type ItemList = [mixed, 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 = [];
+    for (let i = 0; i < path.length; i++) {
+        if (typeof path[i] === "number") {
+            title.push((path[i] + 1).toString() + ":");
+        } else {
+            title.push(path[i]);
+        }
+    }
+    return title.join(" ");
+}
+
+type Tag = {
+    idToName: (string) => string,
+    nameToId: (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(
+        // eslint-disable-next-line flowtype/no-mutable-array
+        beforeList: Array<ItemList>,
+        // eslint-disable-next-line flowtype/no-mutable-array
+        afterList: Array<ItemList>,
+        // eslint-disable-next-line flowtype/no-mutable-array
+        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.Element<"div"> {
+        const {before, after, shape, tags} = this.props;
+
+        const beforeList = [];
+        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()
+            .setContentMapper((c, _, p) => afterList.push([c, p]))
+            .setHintMapper((c, _, p) => afterList.push([c, p]))
+            .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 = [];
+        StructuredItemDiff.generateCompletePathsList(
+            beforeListModified,
+            afterListModified,
+            allDiffPaths,
+            shape,
+            [],
+        );
+
+        const diffCount = allDiffPaths.length;
+
+        const diffs: React.Node = 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) {
+                    after = [[], path];
+                }
+
+                const beforeTags = [];
+                if (Array.isArray(before[0])) {
+                    before[0].forEach((tagId) => {
+                        if (typeof tagId === "string") {
+                            beforeTags.push(tags.idToName(tagId));
+                        }
+                    });
+                }
+                const afterTags = [];
+                if (Array.isArray(after[0])) {
+                    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) {
+                after = [buildEmptyItemTreeForShape(shapes.content), path];
+            }
+            return (
+                <RendererDiff
+                    before={(before[0]: $FlowFixMe)}
+                    after={(after[0]: $FlowFixMe)}
+                    title={currentTitle}
+                    showAlignmentOptions={false}
+                    showSeparator={n < diffCount - 1}
+                    key={n}
+                />
+            );
+        });
+
+        return <div className="framework-perseus">{diffs}</div>;
+    }
+}
+
+export default StructuredItemDiff;