@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/diffs/tags-diff.jsx

@@ -0,0 +1,50 @@
+// @flow
+/**
+ * A side by side diff view for general passage layout tags.
+ */
+
+import * as React from "react";
+
+import TextDiff from "./text-diff.jsx";
+
+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,
+    |} = {
+        afterOnly: [],
+        beforeOnly: [],
+        showSeparator: false,
+        title: "Question tags",
+    };
+
+    render(): React.Element<"div"> {
+        const {afterOnly, beforeOnly, intersection, showSeparator} = this.props;
+
+        const beforeTags = intersection.concat(beforeOnly).join("\n") + "\n";
+        const afterTags = intersection.concat(afterOnly).join("\n") + "\n";
+
+        return (
+            <div>
+                <TextDiff
+                    before={beforeTags}
+                    after={afterTags}
+                    title={this.props.title}
+                />
+                {showSeparator && <div className="diff-separator" />}
+            </div>
+        );
+    }
+}
+
+export default TagsDiff;

package/src/diffs/text-diff.jsx

@@ -0,0 +1,194 @@
+/* eslint-disable react/no-unsafe */
+// @flow
+import {components} from "@khanacademy/perseus";
+import classNames from "classnames";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import jsdiff from "jsdiff";
+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";
+
+const {SvgImage} = components;
+
+const BEFORE = "before";
+const AFTER = "after";
+
+const IMAGE_REGEX = /http.*?\.png|web\+graphie[^)]*/g;
+
+const imagesInString = function (str) {
+    return str.match(IMAGE_REGEX) || [];
+};
+
+const classFor = function (entry, ifAdded, ifRemoved) {
+    if (entry.added) {
+        return ifAdded;
+    }
+    if (entry.removed) {
+        return ifRemoved;
+    }
+    return "";
+};
+
+class ImageDiffSide extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        images: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                {_.map(this.props.images, (entry, index) => {
+                    const className = classNames({
+                        image: true,
+                        "image-unchanged": entry.status === "unchanged",
+                        "image-added": entry.status === "added",
+                        "image-removed": entry.status === "removed",
+                    });
+                    return (
+                        <div key={index}>
+                            <div className={className}>
+                                {/* $FlowFixMe[prop-missing]: the alt prop is missing */}
+                                <SvgImage
+                                    src={entry.value}
+                                    title={entry.value}
+                                />
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+class TextDiff extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        after: PropTypes.string,
+        before: PropTypes.string,
+        title: PropTypes.string.isRequired,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        after: "",
+        before: "",
+    };
+
+    state: $FlowFixMe = {
+        collapsed: this.props.before === this.props.after,
+    };
+
+    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
+        this.setState({
+            collapsed: nextProps.before === nextProps.after,
+        });
+    }
+
+    handleExpand: () => void = () => {
+        this.setState({collapsed: false});
+    };
+
+    render(): React.Node {
+        const diffed = jsdiff.diffWords(this.props.before, this.props.after);
+
+        const lines = splitDiff(diffed);
+
+        const beforeImages = imagesInString(this.props.before);
+        const afterImages = imagesInString(this.props.after);
+        const images = stringArrayDiff(beforeImages, afterImages);
+
+        const renderedLines = _.map(lines, (line) => {
+            const contents = {};
+
+            contents.before = _(line).map(function (entry, i) {
+                return (
+                    <span
+                        key={i}
+                        className={classFor(
+                            entry,
+                            "not-present",
+                            "removed dark",
+                        )}
+                    >
+                        {entry.value}
+                    </span>
+                );
+            });
+
+            contents.after = _(line).map(function (entry, i) {
+                return (
+                    <span
+                        key={i}
+                        className={classFor(entry, "added dark", "not-present")}
+                    >
+                        {entry.value}
+                    </span>
+                );
+            });
+
+            return contents;
+        });
+
+        const className = classNames({
+            "diff-row": true,
+            collapsed: this.state.collapsed,
+        });
+
+        return (
+            <div>
+                <div className="diff-header">{this.props.title}</div>
+                <div className="diff-header">{this.props.title}</div>
+                <div className="diff-body ui-helper-clearfix">
+                    {_.map([BEFORE, AFTER], (side, index) => {
+                        return (
+                            <div className={"diff-row " + side} key={index}>
+                                {!this.state.collapsed &&
+                                    _.map(renderedLines, (line, lineNum) => {
+                                        const changed = line[side].length > 1;
+                                        const lineClass = classNames({
+                                            "diff-line": true,
+                                            added: side === AFTER && changed,
+                                            removed: side === BEFORE && changed,
+                                        });
+                                        return (
+                                            <div
+                                                className={lineClass}
+                                                key={lineNum}
+                                            >
+                                                {line[side]}
+                                            </div>
+                                        );
+                                    })}
+                                {!this.state.collapsed && (
+                                    <ImageDiffSide images={images[side]} />
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+                {_.map([BEFORE, AFTER], (side, index) => {
+                    return (
+                        <div
+                            className={className + " " + side}
+                            key={index}
+                            onClick={this.handleExpand}
+                        >
+                            {this.state.collapsed && (
+                                <span>
+                                    <span className="expand-button">
+                                        {" "}
+                                        [ show unmodified ]{" "}
+                                    </span>
+                                </span>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+export default TextDiff;

package/src/diffs/widget-diff-performer.jsx

@@ -0,0 +1,74 @@
+// @flow
+import _ from "underscore";
+
+const UNCHANGED = "unchanged";
+const CHANGED = "changed";
+const ADDED = "added";
+const REMOVED = "removed";
+
+// For values which do not have further values nested within them (strings,
+// numbers, and booleans)
+const valueEntry = function (before, after, key) {
+    let status;
+    if (before === after) {
+        status = UNCHANGED;
+    } else if (before === undefined) {
+        status = ADDED;
+    } else if (after === undefined) {
+        status = REMOVED;
+    } else {
+        status = CHANGED;
+    }
+
+    return {
+        after: JSON.stringify(after),
+        before: JSON.stringify(before),
+        children: [],
+        key: key,
+        status: status,
+    };
+};
+
+// For values which require a more granular diff (objects and arrays)
+const objectEntry = function (before, after, key) {
+    const beforeKeys = _.isObject(before) ? _(before).keys() : [];
+    const afterKeys = _.isObject(after) ? _(after).keys() : [];
+    const keys = _.union(beforeKeys, afterKeys);
+
+    const children = _.map(keys, function (key) {
+        return performDiff((before || {})[key], (after || {})[key], key);
+    });
+
+    let status;
+    if (before === undefined) {
+        status = ADDED;
+    } else if (after === undefined) {
+        status = REMOVED;
+    } else {
+        const changed = _.any(children, function (child) {
+            return child.status !== UNCHANGED;
+        });
+        status = changed ? CHANGED : UNCHANGED;
+    }
+
+    return {
+        after: "",
+        before: "",
+        children: children,
+        key: key,
+        status: status,
+    };
+};
+
+const performDiff = function (
+    before: $FlowFixMe,
+    after: $FlowFixMe,
+    key?: $FlowFixMe,
+): $FlowFixMe {
+    if (typeof before === "object" || typeof after === "object") {
+        return objectEntry(before, after, key);
+    }
+    return valueEntry(before, after, key);
+};
+
+export default performDiff;

package/src/diffs/widget-diff.jsx

@@ -0,0 +1,291 @@
+// @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";
+
+const {SvgImage} = components;
+
+const indentationFromDepth = function (depth) {
+    return (depth - 1) * 20;
+};
+
+const BEFORE = "before";
+const AFTER = "after";
+
+const UNCHANGED = "unchanged";
+
+class DiffSide extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        className: PropTypes.string.isRequired,
+        depth: PropTypes.number.isRequired,
+        propKey: PropTypes.string.isRequired,
+        showKey: PropTypes.bool.isRequired,
+        side: PropTypes.oneOf([BEFORE, AFTER]).isRequired,
+        value: PropTypes.string,
+    };
+
+    render(): React.Node {
+        const className = classNames(this.props.className, {
+            "diff-row": true,
+            before: this.props.side === BEFORE,
+            after: this.props.side === AFTER,
+        });
+        return (
+            <div className={className}>
+                <div
+                    style={{
+                        paddingLeft: indentationFromDepth(this.props.depth),
+                    }}
+                >
+                    {this.props.showKey && this.props.propKey + ": "}
+                    <span
+                        className={"inner-value dark " + this.props.className}
+                    >
+                        {this.props.value}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+}
+
+class CollapsedRow extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        depth: PropTypes.number,
+        onClick: PropTypes.func.isRequired,
+    };
+
+    static defaultProps = {
+        depth: 0,
+    };
+
+    render(): React.Node {
+        const self = this;
+        return (
+            <div onClick={self.props.onClick} style={{clear: "both"}}>
+                {_.map([BEFORE, AFTER], function (side) {
+                    return (
+                        <div
+                            className={"diff-row collapsed " + side}
+                            key={side}
+                        >
+                            <div
+                                style={{
+                                    paddingLeft: indentationFromDepth(
+                                        self.props.depth,
+                                    ),
+                                }}
+                            >
+                                <span> [ show unmodified ] </span>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+// Component representing a single property that may be nested.
+class DiffEntry extends React.Component<$FlowFixMe, $FlowFixMe> {
+    static propTypes = {
+        depth: PropTypes.number,
+        entry: PropTypes.shape({
+            after: PropTypes.string,
+            before: PropTypes.string,
+            children: PropTypes.arrayOf(PropTypes.any),
+            key: PropTypes.string,
+        }),
+        expanded: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        depth: 0,
+    };
+
+    state = {
+        expanded: this.props.expanded,
+    };
+
+    expand = () => {
+        this.setState({expanded: true});
+    };
+
+    render(): React.Node {
+        const entry = this.props.entry;
+        const propertyDeleted = entry.status === "removed";
+        const propertyAdded = entry.status === "added";
+        const propertyChanged = entry.status === "changed";
+
+        const hasChildren = entry.children.length > 0;
+
+        const leftClass = classNames({
+            removed: propertyDeleted || (propertyChanged && !hasChildren),
+            dark: propertyDeleted,
+            "blank-space": propertyAdded,
+        });
+
+        const rightClass = classNames({
+            added: propertyAdded || (propertyChanged && !hasChildren),
+            dark: propertyAdded,
+            "blank-space": propertyDeleted,
+        });
+
+        let shownChildren;
+        if (this.state.expanded) {
+            shownChildren = entry.children;
+        } else {
+            shownChildren = _(entry.children).select(function (child) {
+                return child.status !== UNCHANGED;
+            });
+        }
+
+        let collapsed = shownChildren.length < entry.children.length;
+
+        // don't hide just one entry
+        if (entry.children.length === shownChildren.length + 1) {
+            shownChildren = entry.children;
+            collapsed = false;
+        }
+
+        const self = this;
+        return (
+            <div>
+                {entry.key && (
+                    <div style={{clear: "both"}}>
+                        <DiffSide
+                            side={BEFORE}
+                            className={leftClass}
+                            depth={this.props.depth}
+                            propKey={entry.key}
+                            showKey={!propertyAdded}
+                            value={entry.before}
+                        />
+                        <DiffSide
+                            side={AFTER}
+                            className={rightClass}
+                            depth={this.props.depth}
+                            propKey={entry.key}
+                            showKey={!propertyDeleted}
+                            value={entry.after}
+                        />
+                    </div>
+                )}
+                {_.map(shownChildren, function (child) {
+                    return (
+                        <DiffEntry
+                            key={child.key}
+                            depth={self.props.depth + 1}
+                            entry={child}
+                            expanded={self.state.expanded}
+                        />
+                    );
+                })}
+                {collapsed && (
+                    <CollapsedRow
+                        depth={this.props.depth + 1}
+                        onClick={this.expand}
+                    />
+                )}
+            </div>
+        );
+    }
+}
+
+// For image widgets, show the actual image
+class ImageWidgetDiff extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        after: PropTypes.shape({
+            options: PropTypes.objectOf(PropTypes.any),
+        }).isRequired,
+        before: PropTypes.shape({
+            options: PropTypes.objectOf(PropTypes.any),
+        }).isRequired,
+    };
+
+    render(): React.Node {
+        const {before, after} = this.props;
+        const beforeSrc =
+            before.options && before.options.backgroundImage
+                ? before.options.backgroundImage.url
+                : "";
+        const afterSrc =
+            after.options && after.options.backgroundImage
+                ? after.options.backgroundImage.url
+                : "";
+        return (
+            <div>
+                <div className="diff-row before">
+                    {beforeSrc && (
+                        <div
+                            className={classNames({
+                                image: true,
+                                "image-unchanged": beforeSrc === afterSrc,
+                                "image-removed": beforeSrc !== afterSrc,
+                            })}
+                        >
+                            {/* $FlowFixMe[prop-missing]: the alt props is missing */}
+                            <SvgImage src={beforeSrc} title={beforeSrc} />
+                        </div>
+                    )}
+                </div>
+                <div className="diff-row after">
+                    {afterSrc && (
+                        <div
+                            className={classNames({
+                                image: true,
+                                "image-unchanged": beforeSrc === afterSrc,
+                                "image-added": beforeSrc !== afterSrc,
+                            })}
+                        >
+                            {/* $FlowFixMe[prop-missing]: the alt props is missing */}
+                            <SvgImage src={afterSrc} title={afterSrc} />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+class WidgetDiff extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        after: PropTypes.shape({
+            options: PropTypes.objectOf(PropTypes.any),
+        }),
+        before: PropTypes.shape({
+            options: PropTypes.objectOf(PropTypes.any),
+        }),
+        title: PropTypes.string.isRequired,
+        type: PropTypes.string,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        after: {},
+        before: {},
+        type: "",
+    };
+
+    render(): React.Node {
+        const {after, before, title, type} = this.props;
+        const diff = performDiff(before, after);
+        return (
+            <div>
+                <div className="diff-header">{title}</div>
+                <div className="diff-header">{title}</div>
+                <div className="diff-body ui-helper-clearfix">
+                    {type === "image" && (
+                        <ImageWidgetDiff before={before} after={after} />
+                    )}
+                    <DiffEntry entry={diff} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default WidgetDiff;