@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/widgets/image-editor.tsx

@@ -1,367 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
-import {
-    components,
-    icons,
-    Changeable,
-    EditorJsonify,
-    Util,
-} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-import BlurInput from "../components/blur-input";
-import Editor from "../editor";
-
-import type {APIOptions, Range, Size} from "@khanacademy/perseus";
-
-const {InfoTip, InlineIcon, RangeInput} = components;
-
-const defaultBoxSize = 400;
-const defaultRange = [0, 10] as const;
-const defaultBackgroundImage = {
-    url: null,
-    width: 0,
-    height: 0,
-} as const;
-
-// Match any image URL (including "web+graphie" links) that is hosted by KA.
-// We're somewhat generous in our AWS URL matching
-// ("ka-<something>.s3.amazonaws.com") so that we don't have to update Perseus
-// every time we add a new proxied AWS bucket.
-const INTERNALLY_HOSTED_DOMAINS =
-    "(" +
-    "ka-.*.s3.amazonaws.com|" +
-    "(fastly|cdn).kastatic.org|" +
-    "khanacademy.org|" +
-    "kasandbox.org" +
-    ")";
-const INTERNALLY_HOSTED_URL_RE = new RegExp(
-    "^(https?|web\\+graphie)://[^/]*" + INTERNALLY_HOSTED_DOMAINS,
-);
-
-/**
- * Alignment option for captions, relative to specified coordinates.
- */
-const captionAlignments = [
-    "center",
-    "above",
-    "above right",
-    "right",
-    "below right",
-    "below",
-    "below left",
-    "left",
-    "above left",
-];
-
-type Props = Changeable.ChangeableProps & {
-    apiOptions: APIOptions;
-
-    title: string;
-    range: [Readonly<Range>, Readonly<Range>];
-    box: Size;
-    backgroundImage: any;
-    labels: ReadonlyArray<string>;
-    alt: string;
-    caption: string;
-};
-
-type DefaultProps = {
-    title: NonNullable<Props["title"]>;
-    range: NonNullable<Props["range"]>;
-    box: NonNullable<Props["box"]>;
-    backgroundImage: NonNullable<Props["backgroundImage"]>;
-    labels: NonNullable<Props["labels"]>;
-    alt: NonNullable<Props["alt"]>;
-    caption: NonNullable<Props["caption"]>;
-};
-
-type State = {
-    backgroundImageError?: string;
-};
-
-class ImageEditor extends React.Component<Props> {
-    _isMounted = false;
-
-    static displayName = "ImageEditor";
-    static widgetName = "image";
-
-    static defaultProps: DefaultProps = {
-        title: "",
-        range: [defaultRange, defaultRange],
-        box: [defaultBoxSize, defaultBoxSize],
-        backgroundImage: defaultBackgroundImage,
-        labels: [],
-        alt: "",
-        caption: "",
-    };
-
-    state: State = {
-        backgroundImageError: "",
-    };
-
-    componentDidMount() {
-        // TODO(scottgrant): This is a hack to remove the deprecated call to
-        // this.isMounted() but is still considered an anti-pattern.
-        this._isMounted = true;
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    render() {
-        const backgroundImage = this.props.backgroundImage;
-
-        const imageSettings = (
-            <div className="image-settings">
-                {!Util.isLabeledSVG(backgroundImage.url) && (
-                    <div>
-                        <label>
-                            <div>Preview:</div>
-                            <img
-                                alt="Editor preview of image"
-                                src={backgroundImage.url}
-                                style={{
-                                    width: "100%",
-                                }}
-                            />
-                        </label>
-                    </div>
-                )}
-                <div>
-                    <label>
-                        <div>Dimensions:</div>
-                        <p>
-                            {backgroundImage.width}x{backgroundImage.height}
-                        </p>
-                    </label>
-                </div>
-
-                <div>
-                    <label>
-                        <div>
-                            Alt text:
-                            <InfoTip>
-                                This is important for screenreaders. The content
-                                of this alt text will be formatted as markdown
-                                (tables, emphasis, etc. are supported).
-                            </InfoTip>
-                        </div>
-                        <Editor
-                            apiOptions={this.props.apiOptions}
-                            content={this.props.alt}
-                            onChange={(props) => {
-                                if (props.content != null) {
-                                    this.change("alt", props.content);
-                                }
-                            }}
-                            widgetEnabled={false}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        <div>Caption:</div>
-                        <Editor
-                            apiOptions={this.props.apiOptions}
-                            content={this.props.caption}
-                            onChange={(props) => {
-                                if (props.content != null) {
-                                    this.change("caption", props.content);
-                                }
-                            }}
-                            widgetEnabled={false}
-                        />
-                    </label>
-                </div>
-            </div>
-        );
-
-        const backgroundImageErrorText = (
-            <div className="renderer-widget-error">
-                {this.state.backgroundImageError}
-            </div>
-        );
-
-        return (
-            <div className="perseus-image-editor">
-                <label>
-                    Image url:
-                    <InfoTip>Paste an image or graphie image URL.</InfoTip>
-                    {this.state.backgroundImageError &&
-                        backgroundImageErrorText}
-                    <BlurInput
-                        value={backgroundImage.url || ""}
-                        style={{width: 332}}
-                        onChange={(url) => this.onUrlChange(url, false)}
-                    />
-                </label>
-
-                {backgroundImage.url && imageSettings}
-            </div>
-        );
-    }
-
-    _renderRowForLabel(label, i) {
-        return (
-            <tr key={i}>
-                <td>
-                    <RangeInput
-                        value={label.coordinates}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.onCoordinateChange.bind(this, i)}
-                    />
-                </td>
-                <td style={{verticalAlign: "bottom", width: "5px"}}>
-                    <input
-                        type="text"
-                        className="graph-settings-axis-label"
-                        value={label.content}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.onContentChange.bind(this, i)}
-                    />
-                </td>
-                <td>
-                    <select
-                        className="perseus-widget-dropdown"
-                        value={label.alignment}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.onAlignmentChange.bind(this, i)}
-                    >
-                        {captionAlignments.map(function (alignment, i) {
-                            return (
-                                <option key={"" + i} value={alignment}>
-                                    {alignment}
-                                </option>
-                            );
-                        }, this)}
-                    </select>
-                </td>
-                <td>
-                    <a
-                        href="#"
-                        className="simple-button orange delete-label"
-                        title="Remove this label"
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onClick={this.removeLabel.bind(this, i)}
-                    >
-                        <InlineIcon {...icons.iconTrash} />
-                    </a>
-                </td>
-            </tr>
-        );
-    }
-
-    change(...args) {
-        return Changeable.change.apply(this, args);
-    }
-
-    removeLabel(labelIndex, e) {
-        e.preventDefault();
-        const labels = [...this.props.labels];
-        labels.splice(labelIndex, 1);
-        this.props.onChange({labels: labels});
-    }
-
-    onCoordinateChange(labelIndex, newCoordinates) {
-        const labels = this.props.labels.slice();
-        labels[labelIndex] = _.extend({}, labels[labelIndex], {
-            coordinates: newCoordinates,
-        });
-        this.props.onChange({labels: labels});
-    }
-
-    onContentChange(labelIndex, e) {
-        const newContent = e.target.value;
-        const labels = this.props.labels.slice();
-        labels[labelIndex] = _.extend({}, labels[labelIndex], {
-            content: newContent,
-        });
-        this.props.onChange({labels: labels});
-    }
-
-    onAlignmentChange(labelIndex, e) {
-        const newAlignment = e.target.value;
-        const labels = this.props.labels.slice();
-        labels[labelIndex] = _.extend({}, labels[labelIndex], {
-            alignment: newAlignment,
-        });
-        this.props.onChange({labels: labels});
-    }
-
-    setUrl(url, width, height, silent) {
-        // Because this calls into WidgetEditor._handleWidgetChange, which
-        // checks for this widget's ref to serialize it.
-        //
-        // Errors if you switch items before the `Image` from `onUrlChange`
-        // loads.
-        if (!this._isMounted) {
-            return;
-        }
-
-        const image = _.clone(this.props.backgroundImage);
-        image.url = url;
-        image.width = width;
-        image.height = height;
-        const box = [image.width, image.height];
-        this.props.onChange(
-            {
-                backgroundImage: image,
-                box: box,
-            },
-            null,
-            silent,
-        );
-    }
-
-    // silently load the image when the component mounts
-    // silently update url and sizes when the image loads
-    // noisily load the image in response to the author changing it
-    async onUrlChange(url: string | undefined | null, silent: boolean) {
-        // Check if we've been passed something that looks like a URL
-        if (!url) {
-            this.setUrl(url, 0, 0, silent);
-            return;
-        }
-
-        // All article content must be KA-owned!
-        if (!INTERNALLY_HOSTED_URL_RE.test(url)) {
-            this.setState({
-                backgroundImageError:
-                    "Images must be from sites hosted by Khan Academy. " +
-                    "Please input a Khan Academy-owned address, or use the " +
-                    "Add Image tool to rehost an existing image",
-            });
-            return;
-        }
-
-        // Clear previous errors
-        this.setState({backgroundImageError: ""});
-
-        try {
-            const size = await Util.getImageSizeModern(url);
-            this.setUrl(url, size[0], size[1], true);
-        } catch (error) {
-            this.setState({
-                backgroundImageError: `There was an error loading the image URL: ${JSON.stringify(
-                    error,
-                    null,
-                    2,
-                )}`,
-            });
-        }
-    }
-
-    onRangeChange(type, newRange) {
-        const range = this.props.range.slice();
-        range[type] = newRange;
-        this.props.onChange({range: range});
-    }
-
-    serialize() {
-        return EditorJsonify.serialize.call(this);
-    }
-}
-
-export default ImageEditor;

package/src/widgets/input-number-editor.tsx

@@ -1,288 +0,0 @@
-/* eslint-disable react/sort-comp */
-import {components, Util} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-import BlurInput from "../components/blur-input";
-
-import type {ParsedValue, InputNumber} from "@khanacademy/perseus";
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-const {InfoTip} = components;
-
-const answerTypes = {
-    number: {
-        name: "Numbers",
-        forms: "integer, decimal, proper, improper, mixed",
-    },
-    decimal: {
-        name: "Decimals",
-        forms: "decimal",
-    },
-    integer: {
-        name: "Integers",
-        forms: "integer",
-    },
-    rational: {
-        name: "Fractions and mixed numbers",
-        forms: "integer, proper, improper, mixed",
-    },
-    improper: {
-        name: "Improper numbers (no mixed)",
-        forms: "integer, proper, improper",
-    },
-    mixed: {
-        name: "Mixed numbers (no improper)",
-        forms: "integer, proper, mixed",
-    },
-    percent: {
-        name: "Numbers or percents",
-        forms: "integer, decimal, proper, improper, mixed, percent",
-    },
-    pi: {
-        name: "Numbers with pi",
-        forms: "pi",
-    },
-} as const;
-
-type Props = {
-    value: number;
-    simplify: PropsFor<typeof InputNumber.widget>["simplify"];
-    size: PropsFor<typeof InputNumber.widget>["size"];
-    inexact: PropsFor<typeof InputNumber.widget>["reviewModeRubric"]["inexact"];
-    maxError: PropsFor<
-        typeof InputNumber.widget
-    >["reviewModeRubric"]["maxError"];
-    answerType: PropsFor<typeof InputNumber.widget>["answerType"];
-    rightAlign: PropsFor<typeof InputNumber.widget>["rightAlign"];
-    onChange: (arg1: {
-        value?: ParsedValue | 0;
-        simplify?: Props["simplify"];
-        size?: Props["size"];
-        inexact?: Props["inexact"];
-        maxError?: Props["maxError"];
-        answerType?: Props["answerType"];
-        rightAlign?: Props["rightAlign"];
-    }) => void;
-};
-
-type DefaultProps = {
-    value: Props["value"];
-    simplify: Props["simplify"];
-    size: Props["size"];
-    inexact: Props["inexact"];
-    maxError: Props["maxError"];
-    answerType: Props["answerType"];
-    rightAlign: Props["rightAlign"];
-};
-
-class InputNumberEditor extends React.Component<Props> {
-    static widgetName = "input-number" as const;
-
-    static defaultProps: DefaultProps = {
-        value: 0,
-        simplify: "required",
-        size: "normal",
-        inexact: false,
-        maxError: 0.1,
-        answerType: "number",
-        rightAlign: false,
-    };
-
-    input = React.createRef<BlurInput>();
-
-    handleAnswerChange: (arg1: string) => void = (str) => {
-        const value = Util.firstNumericalParse(str) || 0;
-        this.props.onChange({value: value});
-    };
-
-    render(): React.ReactNode {
-        const answerTypeOptions = _.map(
-            answerTypes,
-            function (v, k) {
-                return (
-                    <option value={k} key={k}>
-                        {v.name}
-                    </option>
-                );
-            },
-            this,
-        );
-
-        return (
-            <div>
-                <div>
-                    <label>
-                        Correct answer:{" "}
-                        <BlurInput
-                            value={"" + this.props.value}
-                            onChange={this.handleAnswerChange}
-                            ref={this.input}
-                        />
-                    </label>
-                </div>
-
-                <div>
-                    <label>
-                        Unsimplified answers{" "}
-                        <select
-                            value={this.props.simplify}
-                            onChange={(e) => {
-                                this.props.onChange({
-                                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"optional" | "required" | "enforced" | undefined'.
-                                    simplify: e.target.value,
-                                });
-                            }}
-                        >
-                            <option value="required">will not be graded</option>
-                            <option value="optional">will be accepted</option>
-                            <option value="enforced">
-                                will be marked wrong
-                            </option>
-                        </select>
-                    </label>
-                    <InfoTip>
-                        <p>
-                            Normally select "will not be graded". This will give
-                            the user a message saying the answer is correct but
-                            not simplified. The user will then have to simplify
-                            it and re-enter, but will not be penalized. (5th
-                            grade and anything after)
-                        </p>
-                        <p>
-                            Select "will be accepted" only if the user is not
-                            expected to know how to simplify fractions yet.
-                            (Anything prior to 5th grade)
-                        </p>
-                        <p>
-                            Select "will be marked wrong" only if we are
-                            specifically assessing the ability to simplify.
-                        </p>
-                    </InfoTip>
-                </div>
-
-                <div>
-                    <label>
-                        <input
-                            type="checkbox"
-                            checked={this.props.inexact}
-                            onChange={(e) => {
-                                this.props.onChange({
-                                    inexact: e.target.checked,
-                                });
-                            }}
-                        />{" "}
-                        Allow inexact answers
-                    </label>
-
-                    <label>
-                        <input /* TODO(emily): don't use a hidden checkbox
-                        for alignment */
-                            type="checkbox"
-                            style={{visibility: "hidden"}}
-                        />
-                        Max error:{" "}
-                        <input
-                            type="text"
-                            disabled={!this.props.inexact}
-                            defaultValue={this.props.maxError}
-                            aria-label="Max error"
-                            onBlur={(e) => {
-                                const ans =
-                                    "" +
-                                    (Util.firstNumericalParse(e.target.value) ||
-                                        0);
-                                e.target.value = ans;
-                                this.props.onChange({maxError: ans});
-                            }}
-                        />
-                    </label>
-                </div>
-
-                <div>
-                    Answer type:{" "}
-                    <select
-                        value={this.props.answerType}
-                        onChange={(e) => {
-                            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"number" | "integer" | "mixed" | "decimal" | "improper" | "percent" | "pi" | "rational" | undefined'.
-                            this.props.onChange({answerType: e.target.value});
-                        }}
-                        aria-label="Answer type"
-                    >
-                        {answerTypeOptions}
-                    </select>
-                    <InfoTip>
-                        <p>
-                            Use the default "Numbers" unless the answer must be
-                            in a specific form (e.g., question is about
-                            converting decimals to fractions).
-                        </p>
-                    </InfoTip>
-                </div>
-
-                <div>
-                    <label>
-                        Width{" "}
-                        <select
-                            value={this.props.size}
-                            onChange={(e) => {
-                                // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
-                                this.props.onChange({size: e.target.value});
-                            }}
-                        >
-                            <option value="normal">Normal (80px)</option>
-                            <option value="small">Small (40px)</option>
-                        </select>
-                    </label>
-                    <InfoTip>
-                        <p>
-                            Use size "Normal" for all text boxes, unless there
-                            are multiple text boxes in one line and the answer
-                            area is too narrow to fit them.
-                        </p>
-                    </InfoTip>
-                </div>
-
-                <div>
-                    <label>
-                        <input
-                            type="checkbox"
-                            checked={this.props.rightAlign}
-                            onChange={(e) => {
-                                this.props.onChange({
-                                    rightAlign: e.target.checked,
-                                });
-                            }}
-                        />{" "}
-                        Right alignment
-                    </label>
-                </div>
-            </div>
-        );
-    }
-
-    focus: () => boolean = () => {
-        this.input.current?.focus();
-        return true;
-    };
-
-    serialize: () => {
-        value: Props["value"];
-        simplify: Props["simplify"];
-        size: Props["size"];
-        inexact: Props["inexact"];
-        maxError: Props["maxError"];
-        answerType: Props["answerType"];
-        rightAlign: Props["rightAlign"];
-    } = () => ({
-        value: this.props.value,
-        simplify: this.props.simplify,
-        size: this.props.size,
-        inexact: this.props.inexact,
-        maxError: this.props.maxError,
-        answerType: this.props.answerType,
-        rightAlign: this.props.rightAlign,
-    });
-}
-
-export default InputNumberEditor;