@khanacademy/perseus-editor 4.1.5 → 4.1.7

package/src/widgets/label-image-editor.tsx

@@ -1,252 +0,0 @@
-/**
- * Direct image labeling widget editor.
- *
- * Label on image widget enables creating more natural, conceptual questions
- * that involve the use of images, and enable learners to demonstrate their
- * knowledge by directly interacting with the image.
- */
-
-import {EditorJsonify, Util} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import FormWrappedTextField from "../components/form-wrapped-text-field";
-
-import AnswerChoices from "./label-image/answer-choices";
-import Behavior from "./label-image/behavior";
-import QuestionMarkers from "./label-image/question-markers";
-import SelectImage from "./label-image/select-image";
-
-import type {MarkerType} from "@khanacademy/perseus";
-
-type Props = {
-    // List of answer choices to label question image with.
-    choices: ReadonlyArray<string>;
-    // The question image properties.
-    imageAlt: string;
-    imageUrl: string;
-    imageWidth: number;
-    imageHeight: number;
-    // The list of label markers on the question image.
-    markers: ReadonlyArray<MarkerType>;
-    // Whether multiple answer choices may be selected for markers.
-    multipleAnswers: boolean;
-    // Whether to hide answer choices from user instructions.
-    hideChoicesFromInstructions: boolean;
-    // Callback for when a widget prop is changed.
-    onChange: (options: any) => void;
-};
-
-class LabelImageEditor extends React.Component<Props> {
-    _questionMarkers: QuestionMarkers | null | undefined;
-
-    static defaultProps: {
-        choices: ReadonlyArray<any>;
-        hideChoicesFromInstructions: boolean;
-        imageAlt: string;
-        imageHeight: number;
-        imageUrl: string;
-        imageWidth: number;
-        markers: ReadonlyArray<any>;
-        multipleAnswers: boolean;
-    } = {
-        choices: [],
-        imageAlt: "",
-        imageUrl: "",
-        imageWidth: 0,
-        imageHeight: 0,
-        markers: [],
-        multipleAnswers: false,
-        hideChoicesFromInstructions: false,
-    };
-
-    static widgetName = "label-image" as const;
-
-    componentDidUpdate(prevProps: Props) {
-        const coordsToMarkers: Record<string, any> = {};
-
-        prevProps.markers.forEach(
-            (marker) => (coordsToMarkers[`${marker.x}.${marker.y}`] = marker),
-        );
-
-        // Find the newly added marker indices.
-        const newIndices = this.props.markers
-            .map((marker, index) =>
-                // eslint-disable-next-line no-prototype-builtins
-                coordsToMarkers.hasOwnProperty(`${marker.x}.${marker.y}`)
-                    ? -1
-                    : index,
-            )
-            .filter((index) => index !== -1);
-
-        // Automatically reveal their dropdowns as a prompt to the content
-        // creator to select answers and set the ARIA label.
-        if (newIndices.length && this._questionMarkers) {
-            this._questionMarkers.openDropdownForMarkerIndices(newIndices);
-        }
-    }
-
-    getSaveWarnings: () => ReadonlyArray<any | string> = () => {
-        const {choices, imageAlt, imageUrl, markers} = this.props;
-
-        const warnings: Array<string> = [];
-
-        if (choices.length < 2) {
-            warnings.push("Question requires at least two answer choices");
-        }
-
-        if (!imageUrl) {
-            warnings.push("Image is not specified for question");
-        } else if (!imageAlt) {
-            warnings.push("Question image has no alt text");
-        }
-
-        if (!markers.length) {
-            warnings.push("Question has no markers, to label answers on image");
-        } else {
-            let numNoAnswers = 0;
-            let numNoLabels = 0;
-
-            for (const marker of markers) {
-                if (!marker.answers.length) {
-                    numNoAnswers++;
-                }
-
-                if (!marker.label) {
-                    numNoLabels++;
-                }
-            }
-
-            if (numNoAnswers) {
-                warnings.push(
-                    `Question has ${numNoAnswers} markers with no ` +
-                        "answers selected",
-                );
-            }
-
-            if (numNoLabels) {
-                warnings.push(
-                    `Question has ${numNoLabels} markers with no ` +
-                        "ARIA label",
-                );
-            }
-        }
-
-        return warnings;
-    };
-
-    serialize(): any {
-        return EditorJsonify.serialize.call(this);
-    }
-
-    handleImageChange: (url: string) => void = (url: string) => {
-        this.props.onChange({
-            imageUrl: url,
-            // Initially reset image size when URL is changed so it can be later
-            // measured.
-            imageWidth: 0,
-            imageHeight: 0,
-        });
-
-        if (url) {
-            Util.getImageSize(url, (width, height) => {
-                this.props.onChange({
-                    imageWidth: width,
-                    imageHeight: height,
-                });
-            });
-        }
-    };
-
-    handleAltChange: (alt: string) => void = (alt: string) => {
-        this.props.onChange({imageAlt: alt});
-    };
-
-    handleChoicesChange: (choices: ReadonlyArray<string>) => void = (
-        choices: ReadonlyArray<string>,
-    ) => {
-        this.props.onChange({choices});
-    };
-
-    handleMarkersChange: (markers: ReadonlyArray<MarkerType>) => void = (
-        markers: ReadonlyArray<MarkerType>,
-    ) => {
-        this.props.onChange({markers});
-    };
-
-    handleBehaviorChange: (options?: any) => void = (options: any) => {
-        this.props.onChange(options);
-    };
-
-    render(): React.ReactNode {
-        const {
-            choices,
-            imageAlt,
-            imageUrl,
-            imageWidth,
-            imageHeight,
-            markers,
-            multipleAnswers,
-            hideChoicesFromInstructions,
-        } = this.props;
-
-        const imageSelected = imageUrl && imageWidth > 0 && imageHeight > 0;
-
-        return (
-            <div>
-                <SelectImage onChange={this.handleImageChange} url={imageUrl} />
-
-                <div className={css(styles.smallSpacer)} />
-
-                {imageSelected && (
-                    <FormWrappedTextField
-                        placeholder="Alt text (for screen readers)"
-                        onChange={(e) => this.handleAltChange(e.target.value)}
-                        value={imageAlt}
-                        width="100%"
-                    />
-                )}
-
-                <div className={css(styles.largeSpacer)} />
-
-                <QuestionMarkers
-                    choices={choices}
-                    imageUrl={imageSelected ? imageUrl : ""}
-                    imageWidth={imageWidth}
-                    imageHeight={imageHeight}
-                    markers={markers}
-                    onChange={this.handleMarkersChange}
-                    ref={(node) => (this._questionMarkers = node)}
-                />
-
-                <div className={css(styles.largeSpacer)} />
-
-                <AnswerChoices
-                    choices={choices}
-                    onChange={this.handleChoicesChange}
-                />
-
-                <div className={css(styles.largeSpacer)} />
-
-                <Behavior
-                    preferredPopoverDirection="NONE"
-                    multipleAnswers={multipleAnswers}
-                    hideChoicesFromInstructions={hideChoicesFromInstructions}
-                    onChange={this.handleBehaviorChange}
-                />
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    largeSpacer: {
-        height: 32,
-    },
-
-    smallSpacer: {
-        height: 16,
-    },
-});
-
-export default LabelImageEditor;

package/src/widgets/lights-puzzle-editor.tsx

@@ -1,278 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, NumberInput, PropCheckBox} = components;
-
-const MAX_SIZE = 8;
-
-// styling
-const CELL_PADDING = 5;
-
-const TABLE_STYLE = {
-    display: "table",
-    tableLayout: "fixed",
-} as const;
-
-const ROW_STYLE = {
-    display: "table-row",
-} as const;
-
-const CELL_STYLE = {
-    display: "table-cell",
-    padding: CELL_PADDING,
-} as const;
-
-const BASE_TILE_STYLE = {
-    borderRadius: 10,
-    cursor: "pointer",
-} as const;
-
-const PATTERNS = {
-    plus: () => [
-        [false, true, false],
-        [true, true, true],
-        [false, true, false],
-    ],
-    x: () => [
-        [true, false, true],
-        [false, true, false],
-        [true, false, true],
-    ],
-    "plus/x": (iter) => {
-        return iter % 2 ? PATTERNS.x() : PATTERNS.plus();
-    },
-} as const;
-
-/**
- * Clamps value to an integer in the range [min, max]
- */
-const clampToInt = function (value: number, min: number, max: number) {
-    value = Math.floor(value);
-    value = Math.max(value, min);
-    value = Math.min(value, max);
-    return value;
-};
-
-// Returns a copy of the tiles, with tiles flipped according to
-// whether or not their y, x position satisfies the predicate
-const flipTilesPredicate = (
-    oldCells: any,
-    predicate: (y?: any, x?: any) => boolean,
-) => {
-    return _.map(oldCells, (row, y) => {
-        return _.map(row, (cell, x) => {
-            return predicate(y, x) ? !cell : cell;
-        });
-    });
-};
-
-type TileProps = any;
-
-// A single glowy cell
-class Tile extends React.Component<TileProps> {
-    static propTypes = {
-        value: PropTypes.bool.isRequired,
-        size: PropTypes.number.isRequired,
-    };
-
-    render(): React.ReactNode {
-        const color = this.props.value ? "#55dd55" : "#115511";
-        const style = _.extend({}, BASE_TILE_STYLE, {
-            width: this.props.size,
-            height: this.props.size,
-            backgroundColor: color,
-        });
-        return <div style={style} onClick={this._flip} />;
-    }
-
-    _flip = () => {
-        this.props.onChange(!this.props.value);
-    };
-}
-
-type TileGridProps = any;
-
-// A grid of glowy cells
-class TileGrid extends React.Component<TileGridProps> {
-    static propTypes = {
-        cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)).isRequired,
-        size: PropTypes.number.isRequired,
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div style={TABLE_STYLE} className="no-select">
-                {_.map(this.props.cells, (row, y) => {
-                    return (
-                        <div key={y} style={ROW_STYLE}>
-                            {_.map(row, (cell, x) => {
-                                return (
-                                    <div key={x} style={CELL_STYLE}>
-                                        <Tile
-                                            value={cell}
-                                            size={this.props.size}
-                                            onChange={_.partial(
-                                                this.props.onChange,
-                                                y,
-                                                x,
-                                            )}
-                                        />
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-}
-
-type LightsPuzzleEditorProps = any;
-
-// The widget editor
-class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startCells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
-        flipPattern: PropTypes.string.isRequired,
-        gradeIncompleteAsWrong: PropTypes.bool.isRequired,
-    };
-
-    static widgetName = "lights-puzzle" as const;
-
-    static defaultProps: LightsPuzzleEditorProps = {
-        startCells: [
-            [false, false, false],
-            [false, false, false],
-            [false, false, false],
-        ],
-        flipPattern: "plus",
-        gradeIncompleteAsWrong: false,
-    };
-
-    _height: () => number = () => {
-        return this.props.startCells.length;
-    };
-
-    _width: () => number = () => {
-        if (this.props.startCells.length !== 0) {
-            return this.props.startCells[0].length;
-        }
-        return 0; // default to 0
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <div>
-                    Width:
-                    <NumberInput
-                        value={this._width()}
-                        placeholder={5}
-                        onChange={this._changeWidth}
-                    />
-                    {", "}
-                    Height:
-                    <NumberInput
-                        value={this._height()}
-                        placeholder={5}
-                        onChange={this._changeHeight}
-                    />
-                </div>
-                <div>
-                    Flip pattern:
-                    <select
-                        value={this.props.flipPattern}
-                        // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-                        onChange={this._handlePatternChange}
-                    >
-                        {_.map(_.keys(PATTERNS), (pattern, i) => {
-                            return (
-                                <option value={pattern} key={i}>
-                                    {pattern}
-                                </option>
-                            );
-                        })}
-                    </select>
-                </div>
-                <div>
-                    Grade incomplete puzzles as wrong:{" "}
-                    <PropCheckBox
-                        gradeIncompleteAsWrong={
-                            this.props.gradeIncompleteAsWrong
-                        }
-                        onChange={this.props.onChange}
-                    />
-                    <InfoTip>
-                        By default, incomplete puzzles are graded as empty.
-                    </InfoTip>
-                </div>
-                <div>Starting configuration:</div>
-                <div style={{overflowX: "auto"}}>
-                    <TileGrid
-                        cells={this.props.startCells}
-                        size={50}
-                        onChange={this._switchTile}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    _handlePatternChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void =
-        (e) => {
-            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-            this.change("flipPattern", e.target.value);
-        };
-
-    _changeWidth: (arg1: number) => void = (newWidth) => {
-        newWidth = clampToInt(newWidth, 1, MAX_SIZE);
-        this._truncateCells(newWidth, this._height());
-    };
-
-    _changeHeight: (arg1: number) => void = (newHeight) => {
-        newHeight = clampToInt(newHeight, 1, MAX_SIZE);
-        this._truncateCells(this._width(), newHeight);
-    };
-
-    _truncateCells: (arg1: number, arg2: number) => void = (
-        newWidth,
-        newHeight,
-    ) => {
-        const newCells = _.times(newHeight, (y) => {
-            return _.times(newWidth, (x) => {
-                // explicitly cast the result to a boolean with !!
-                return !!(
-                    this.props.startCells[y] && this.props.startCells[y][x]
-                );
-            });
-        });
-
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({startCells: newCells});
-    };
-
-    _switchTile: (arg1: number, arg2: number) => void = (tileY, tileX) => {
-        const newCells = flipTilesPredicate(this.props.startCells, (y, x) => {
-            return y === tileY && x === tileX;
-        });
-
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({startCells: newCells});
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default LightsPuzzleEditor;

package/src/widgets/matcher-editor.tsx

@@ -1,149 +0,0 @@
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
-import {components} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, PropCheckBox, TextListEditor} = components;
-
-type Props = any;
-
-class MatcherEditor extends React.Component<Props> {
-    static propTypes = {
-        left: PropTypes.array,
-        right: PropTypes.array,
-        labels: PropTypes.array,
-        orderMatters: PropTypes.bool,
-        padding: PropTypes.bool,
-    };
-
-    static widgetName = "matcher" as const;
-
-    static defaultProps: Props = {
-        left: ["$x$", "$y$", "$z$"],
-        right: ["$1$", "$2$", "$3$"],
-        labels: ["test", "label"],
-        orderMatters: false,
-        padding: true,
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-matcher-editor">
-                <div>
-                    {" "}
-                    Correct answer:{" "}
-                    <InfoTip>
-                        <p>
-                            Enter the correct answers here. The preview on the
-                            right will show the cards in a randomized order,
-                            which is how the student will see them.
-                        </p>
-                    </InfoTip>
-                </div>
-                <div className="perseus-clearfix">
-                    <TextListEditor
-                        options={this.props.left}
-                        onChange={(options, cb) => {
-                            this.props.onChange({left: options}, cb);
-                        }}
-                        layout="vertical"
-                    />
-                    <TextListEditor
-                        options={this.props.right}
-                        onChange={(options, cb) => {
-                            this.props.onChange({right: options}, cb);
-                        }}
-                        layout="vertical"
-                    />
-                </div>
-                <span>
-                    {" "}
-                    Labels:{" "}
-                    <InfoTip>
-                        <p>These are entirely optional.</p>
-                    </InfoTip>
-                </span>
-                <div>
-                    <input
-                        type="text"
-                        defaultValue={this.props.labels[0]}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.onLabelChange.bind(this, 0)}
-                    />
-                    <input
-                        type="text"
-                        defaultValue={this.props.labels[1]}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.onLabelChange.bind(this, 1)}
-                    />
-                </div>
-                <div>
-                    <PropCheckBox
-                        label="Order of the matched pairs matters:"
-                        orderMatters={this.props.orderMatters}
-                        onChange={this.props.onChange}
-                    />
-                    <InfoTip>
-                        <p>
-                            With this option enabled, only the order provided
-                            above will be treated as correct. This is useful
-                            when ordering is significant, such as in the context
-                            of a proof.
-                        </p>
-                        <p>
-                            If disabled, pairwise matching is sufficient. To
-                            make this clear, the left column becomes fixed in
-                            the provided order and only the cards in the right
-                            column can be moved.
-                        </p>
-                    </InfoTip>
-                </div>
-                <div>
-                    <PropCheckBox
-                        label="Padding:"
-                        padding={this.props.padding}
-                        onChange={this.props.onChange}
-                    />
-                    <InfoTip>
-                        <p>
-                            Padding is good for text, but not needed for images.
-                        </p>
-                    </InfoTip>
-                </div>
-            </div>
-        );
-    }
-
-    onLabelChange: (
-        arg1: number,
-        arg2: React.ChangeEvent<HTMLInputElement>,
-    ) => void = (index, e) => {
-        const labels = _.clone(this.props.labels);
-        labels[index] = e.target.value;
-        this.props.onChange({labels: labels});
-    };
-
-    getSaveWarnings: () => ReadonlyArray<string> = () => {
-        if (this.props.left.length !== this.props.right.length) {
-            return [
-                "The two halves of the matcher have different numbers" +
-                    " of cards.",
-            ];
-        }
-        return [];
-    };
-
-    serialize: any = () => {
-        return _.pick(
-            this.props,
-            "left",
-            "right",
-            "labels",
-            "orderMatters",
-            "padding",
-        );
-    };
-}
-
-export default MatcherEditor;