@khanacademy/perseus-editor 4.1.5 → 4.1.7

package/src/diffs/tags-diff.tsx

@@ -1,49 +0,0 @@
-/**
- * A side by side diff view for general passage layout tags.
- */
-
-import * as React from "react";
-
-import TextDiff from "./text-diff";
-
-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.ReactNode {
-        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.tsx

@@ -1,193 +0,0 @@
-/* eslint-disable react/no-unsafe */
-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";
-import stringArrayDiff from "./string-array-diff";
-
-const {SvgImage} = components;
-
-const BEFORE = "before";
-const AFTER = "after";
-
-const IMAGE_REGEX = /http.*?\.png|web\+graphie[^)]*/g;
-
-const imagesInString = function (str: any) {
-    return str.match(IMAGE_REGEX) || [];
-};
-
-const classFor = function (entry: any, ifAdded: string, ifRemoved: string) {
-    if (entry.added) {
-        return ifAdded;
-    }
-    if (entry.removed) {
-        return ifRemoved;
-    }
-    return "";
-};
-
-class ImageDiffSide extends React.Component<any> {
-    static propTypes = {
-        images: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-    };
-
-    render(): React.ReactNode {
-        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}>
-                                {/* @ts-expect-error - 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}
-                                />
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-}
-
-class TextDiff extends React.Component<any, any> {
-    static propTypes = {
-        after: PropTypes.string,
-        before: PropTypes.string,
-        title: PropTypes.string.isRequired,
-    };
-
-    static defaultProps: any = {
-        after: "",
-        before: "",
-    };
-
-    state: any = {
-        collapsed: this.props.before === this.props.after,
-    };
-
-    UNSAFE_componentWillReceiveProps(nextProps: any) {
-        this.setState({
-            collapsed: nextProps.before === nextProps.after,
-        });
-    }
-
-    handleExpand: () => void = () => {
-        this.setState({collapsed: false});
-    };
-
-    render(): React.ReactNode {
-        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: Record<string, any> = {};
-
-            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.ts

@@ -1,69 +0,0 @@
-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: any, after: any, 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: any, after: any, 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: any, after: any, key?: any): any {
-    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.tsx

@@ -1,290 +0,0 @@
-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";
-
-const {SvgImage} = components;
-
-const indentationFromDepth = function (depth: any) {
-    return (depth - 1) * 20;
-};
-
-const BEFORE = "before";
-const AFTER = "after";
-
-const UNCHANGED = "unchanged";
-
-class DiffSide extends React.Component<any> {
-    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.ReactNode {
-        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<any> {
-    static propTypes = {
-        depth: PropTypes.number,
-        onClick: PropTypes.func.isRequired,
-    };
-
-    static defaultProps = {
-        depth: 0,
-    };
-
-    render(): React.ReactNode {
-        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<any, any> {
-    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.ReactNode {
-        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<any> {
-    static propTypes = {
-        after: PropTypes.shape({
-            options: PropTypes.objectOf(PropTypes.any),
-        }).isRequired,
-        before: PropTypes.shape({
-            options: PropTypes.objectOf(PropTypes.any),
-        }).isRequired,
-    };
-
-    render(): React.ReactNode {
-        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,
-                            })}
-                        >
-                            {/* @ts-expect-error - 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>
-                    )}
-                </div>
-                <div className="diff-row after">
-                    {afterSrc && (
-                        <div
-                            className={classNames({
-                                image: true,
-                                "image-unchanged": beforeSrc === afterSrc,
-                                "image-added": beforeSrc !== afterSrc,
-                            })}
-                        >
-                            {/* @ts-expect-error - 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>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-class WidgetDiff extends React.Component<any> {
-    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: any = {
-        after: {},
-        before: {},
-        type: "",
-    };
-
-    render(): React.ReactNode {
-        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;