@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/widgets/sequence-editor.tsx

@@ -1,205 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid, no-alert, react/sort-comp */
-import {components, icons, ApiOptions} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {InlineIcon} = components;
-const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
-
-type StepControlButtonProps = any;
-
-class StepControlButton extends React.Component<StepControlButtonProps> {
-    render(): React.ReactNode {
-        return (
-            <a
-                href="#"
-                className={
-                    "step-control-button " +
-                    "simple-button " +
-                    "simple-button--small " +
-                    "orange"
-                }
-                onClick={(e) => {
-                    e.preventDefault();
-                    this.props.onClick();
-                }}
-            >
-                <InlineIcon {...this.props.icon} />
-            </a>
-        );
-    }
-}
-
-type SequenceEditorProps = any;
-
-class SequenceEditor extends React.Component<SequenceEditorProps> {
-    static propTypes = {
-        json: PropTypes.arrayOf(
-            PropTypes.shape({
-                content: PropTypes.string,
-                widgets: PropTypes.objectOf(PropTypes.any),
-                images: PropTypes.objectOf(PropTypes.any),
-            }),
-        ),
-        apiOptions: ApiOptions.propTypes,
-        onChange: PropTypes.func.isRequired,
-    };
-
-    static widgetName = "sequence" as const;
-
-    static defaultProps: SequenceEditorProps = {
-        json: [
-            {
-                content: "",
-                widgets: {},
-                images: {},
-            },
-        ],
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-sequence-editor">
-                {_.map(this.props.json, (json, i) => {
-                    return (
-                        <div key={i}>
-                            Step {i + 1}
-                            <div
-                                style={{
-                                    display: "inline-block",
-                                    float: "right",
-                                }}
-                            >
-                                {i + 1 < this.props.json.length && (
-                                    <StepControlButton
-                                        icon={iconCircleArrowDown}
-                                        onClick={() => {
-                                            this._handleMoveStepLater(i);
-                                        }}
-                                    />
-                                )}
-                                {i > 0 && (
-                                    <StepControlButton
-                                        icon={iconCircleArrowUp}
-                                        onClick={() => {
-                                            this._handleMoveStepEarlier(i);
-                                        }}
-                                    />
-                                )}
-                                <StepControlButton
-                                    icon={iconTrash}
-                                    onClick={() => {
-                                        const msg =
-                                            "Are you sure you " +
-                                            "want to remove step " +
-                                            (i + 1) +
-                                            "?";
-                                        if (confirm(msg)) {
-                                            this._handleRemoveStep(i);
-                                        }
-                                    }}
-                                />
-                                <StepControlButton
-                                    icon={iconPlus}
-                                    onClick={() => {
-                                        this._handleAddStepAfter(i);
-                                    }}
-                                />
-                            </div>
-                            <Editor
-                                ref={"editor" + i}
-                                apiOptions={this.props.apiOptions}
-                                content={json.content}
-                                widgets={json.widgets}
-                                images={json.images}
-                                widgetEnabled={true}
-                                immutableWidgets={false}
-                                onChange={_.partial(
-                                    this._handleEditorChange,
-                                    i,
-                                )}
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-
-    _handleEditorChange: (arg1: number, arg2: any) => void = (i, newProps) => {
-        const steps = _.clone(this.props.json);
-        steps[i] = _.extend({}, steps[i], newProps);
-        this.props.onChange({json: steps});
-    };
-
-    serialize: () => any = () => {
-        return {
-            json: _.times(this.props.json.length, (i) => {
-                // eslint-disable-next-line react/no-string-refs
-                // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-                return this.refs["editor" + i].serialize();
-            }),
-        };
-    };
-
-    _handleMoveStepEarlier: (arg1: number) => void = (i) => {
-        if (i === 0) {
-            return;
-        }
-        const steps = _.clone(this.props.json);
-        const step = steps[i];
-        steps.splice(i, 1);
-        steps.splice(i - 1, 0, step);
-        this.props.onChange({
-            json: steps,
-        });
-    };
-
-    _handleMoveStepLater: (arg1: number) => void = (i) => {
-        const steps = _.clone(this.props.json);
-        if (i + 1 === steps.length) {
-            return;
-        }
-        const step = steps[i];
-        steps.splice(i, 1);
-        steps.splice(i + 1, 0, step);
-        this.props.onChange({
-            json: steps,
-        });
-    };
-
-    _handleAddStepAfter: (arg1: number) => void = (i) => {
-        // We do a full serialization here because we
-        // might be copying widgets:
-        const steps = _.clone(this.props.json);
-        // Here we do magic to allow you to copy-paste
-        // things from the previous section into the new
-        // section while preserving widgets.
-        // To enable this, we preserve the widgets
-        // object for the new section, but wipe out
-        // the content.
-        const newStep =
-            i >= 0
-                ? {
-                      widgets: steps[i].widgets,
-                  }
-                : {};
-        steps.splice(i + 1, 0, newStep);
-        this.props.onChange({
-            json: steps,
-        });
-    };
-
-    _handleRemoveStep: (arg1: number) => void = (i) => {
-        const steps = _.clone(this.props.json);
-        steps.splice(i, 1);
-        this.props.onChange({
-            json: steps,
-        });
-    };
-}
-
-export default SequenceEditor;

package/src/widgets/simple-markdown-tester-editor.tsx

@@ -1,86 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-/**
- * This is the editor for the simple-markdown-tester widget. This is what shows
- * up on the left side of the screen in the demo. Only the question writer
- * sees this.
- */
-import {Changeable, EditorJsonify} from "@khanacademy/perseus";
-import * as React from "react";
-
-type TextAreaProps = any;
-
-class TextArea extends React.Component<TextAreaProps> {
-    render(): React.ReactNode {
-        return (
-            <textarea
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
-                value={this.props.value || ""}
-                onChange={this.changeValue}
-            />
-        );
-    }
-
-    focus = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
-        return true;
-    };
-
-    changeValue = (e: any) => {
-        // Translating from the js event e to the value
-        // of the textbox to send to onChange
-        this.props.onChange(e.target.value);
-    };
-}
-
-type SimpleMarkdownTesterEditorProps = any;
-
-class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "simple-markdown-tester" as const;
-
-    static defaultProps: SimpleMarkdownTesterEditorProps = {
-        value: "",
-    };
-
-    input = React.createRef<TextArea>();
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <label>
-                    <div>Simple markdown contents:</div>
-                    <div>
-                        <TextArea
-                            value={this.props.value}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("value")}
-                            ref={this.input}
-                        />
-                    </div>
-                </label>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    focus: () => boolean = () => {
-        this.input.current?.focus();
-        return true;
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default SimpleMarkdownTesterEditor;

package/src/widgets/simple-markdown-tester.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable react/sort-comp */
-import {Changeable, PerseusMarkdown} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const mdParse = PerseusMarkdown.parse;
-const mdOutput = PerseusMarkdown.basicOutput;
-
-type Props = any;
-
-class SimpleMarkdownTester extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-    };
-
-    static defaultProps: Props = {
-        value: "",
-    };
-
-    /**
-     * This is the widget's grading function.
-     *
-     * simpleValidate generally defers to this function
-     *
-     * state is usually the result of toJSON on the widget
-     * rubric is the result of calling toJSON() on the editor
-     */
-    static validate(state: any, rubric: any): any {
-        return {
-            type: "points",
-            earned: 0,
-            total: 0,
-            message: null,
-        };
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    toJSON: () => Record<any, any> = () => {
-        return {};
-    };
-
-    render(): React.ReactNode {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const parsed = mdParse(this.props.value);
-        const output = mdOutput(parsed);
-        return <div>{output}</div>;
-    }
-
-    /**
-     * Widgets that are focusable should add a focus method that returns
-     * true if focusing succeeded. The first such widget found will be
-     * focused on page load.
-     */
-    focus: () => boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
-        return true;
-    };
-
-    /**
-     * simpleValidate is called for grading. Rubric is the result of calling
-     * toJSON() on the editor that created this widget.
-     *
-     * Should return an object representing the grading result, such as
-     * {
-     *     type: "points",
-     *     earned: 1,
-     *     total: 1,
-     *     message: null
-     * }
-     */
-    simpleValidate: (arg1: any) => any = (rubric) => {
-        return SimpleMarkdownTester.validate(this.toJSON(), rubric);
-    };
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-export default {
-    name: "simple-markdown-tester",
-    displayName: "Simple Markdown Tester",
-    hidden: true, // Hides this widget from the Perseus.Editor widget select
-    widget: SimpleMarkdownTester,
-    transform: _.identity,
-};

package/src/widgets/simulator-editor.tsx

@@ -1,146 +0,0 @@
-/* eslint-disable react/sort-comp */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, NumberInput} = components;
-
-const maxTrials = 5000;
-
-type Props = any;
-
-class SimulatorEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        xAxisLabel: PropTypes.string,
-        yAxisLabel: PropTypes.string,
-        numTrials: PropTypes.number,
-        proportionLabel: PropTypes.string,
-        proportionOrPercentage: PropTypes.string,
-    };
-
-    static widgetName = "simulator" as const;
-
-    static defaultProps: Props = {
-        xAxisLabel: "Proportion (%)",
-        yAxisLabel: "Number of times seen",
-        numTrials: 100,
-        proportionLabel: "Underlying proportion",
-        proportionOrPercentage: "proportion",
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-widget-simulator">
-                <div>
-                    {i18n._("X-Axis Label")}:
-                    <input
-                        type="text"
-                        className="graph-settings-axis-label"
-                        value={this.props.xAxisLabel}
-                        onChange={_.partial(
-                            this.handleTargetValueChange,
-                            "xAxisLabel",
-                        )}
-                    />
-                </div>
-                <div>
-                    {i18n._("Y-Axis Label")}:
-                    <input
-                        type="text"
-                        className="graph-settings-axis-label"
-                        value={this.props.yAxisLabel}
-                        onChange={_.partial(
-                            this.handleTargetValueChange,
-                            "yAxisLabel",
-                        )}
-                    />
-                </div>
-                <div>
-                    {i18n._('"True Proportion" Label')}:
-                    <input
-                        type="text"
-                        className="graph-settings-axis-label"
-                        value={this.props.proportionLabel}
-                        onChange={_.partial(
-                            this.handleTargetValueChange,
-                            "proportionLabel",
-                        )}
-                    />
-                    <InfoTip>
-                        <p>
-                            This text will be displayed next to the box in which
-                            the user enters the sample proportion for their
-                            simulation. For example, if your question is about
-                            surveying for approval ratings, you might want this
-                            to say "Sample approval rating".
-                        </p>
-                    </InfoTip>
-                </div>
-                <div>
-                    {i18n._("Proportion or Percentage")}:
-                    <select
-                        className="perseus-widget-dropdown"
-                        value={this.props.proportionOrPercentage}
-                        onChange={_.partial(
-                            this.handleTargetValueChange,
-                            "proportionOrPercentage",
-                        )}
-                    >
-                        <option key="proportion" value="proportion">
-                            Proportion
-                        </option>
-                        <option key="percentage" value="percentage">
-                            Percentage
-                        </option>
-                    </select>
-                    <InfoTip>
-                        <p>
-                            Do you want the user to describe their simulation in
-                            terms of a proportion or a percentage?
-                        </p>
-                    </InfoTip>
-                </div>
-                <div>
-                    {i18n._("Number of trials")}:
-                    <NumberInput
-                        value={this.props.numTrials}
-                        checkValidity={(val) => {
-                            return val >= 0 && val <= maxTrials;
-                        }}
-                        onChange={this.change("numTrials")}
-                    />
-                    <InfoTip>
-                        <p>
-                            This controls the number of trials used in the
-                            simulation. For example, if you set this to 50, then
-                            the survey will be conducted 50 times. Warning:
-                            setting this too high (i.e., greater than 5000 or
-                            so) will freeze the page.
-                        </p>
-                    </InfoTip>
-                </div>
-            </div>
-        );
-    }
-
-    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-        return Changeable.change.apply(this, args);
-    };
-
-    handleTargetValueChange: (arg1: string, arg2: any) => void = (
-        propName,
-        e,
-    ) => {
-        this.change(propName, e.target.value);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default SimulatorEditor;

package/src/widgets/sorter-editor.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/forbid-prop-types */
-import {components} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, PropCheckBox, TextListEditor} = components;
-
-const HORIZONTAL = "horizontal";
-const VERTICAL = "vertical";
-
-type Props = any;
-
-class SorterEditor extends React.Component<Props> {
-    static propTypes = {
-        correct: PropTypes.array,
-        layout: PropTypes.oneOf([HORIZONTAL, VERTICAL]),
-        padding: PropTypes.bool,
-    };
-
-    static widgetName = "sorter" as const;
-
-    static defaultProps: Props = {
-        correct: ["$x$", "$y$", "$z$"],
-        layout: HORIZONTAL,
-        padding: true,
-    };
-
-    onLayoutChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        this.props.onChange({layout: e.target.value});
-    };
-
-    serialize: (arg1: any) => void = () => {
-        return _.pick(this.props, "correct", "layout", "padding");
-    };
-
-    render(): React.ReactNode {
-        const editor = this;
-
-        return (
-            <div>
-                <div>
-                    {" "}
-                    Correct answer:{" "}
-                    <InfoTip>
-                        <p>
-                            Enter the correct answer (in the correct order)
-                            here. The preview on the right will have the cards
-                            in a randomized order, which is how the student will
-                            see them.
-                        </p>
-                    </InfoTip>
-                </div>
-                <TextListEditor
-                    options={this.props.correct}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={function (options, cb) {
-                        editor.props.onChange({correct: options}, cb);
-                    }}
-                    layout={this.props.layout}
-                />
-                <div>
-                    <label>
-                        {" "}
-                        Layout:{" "}
-                        <select
-                            value={this.props.layout}
-                            // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-                            onChange={this.onLayoutChange}
-                        >
-                            <option value={HORIZONTAL}>Horizontal</option>
-                            <option value={VERTICAL}>Vertical</option>
-                        </select>
-                    </label>
-                    <InfoTip>
-                        <p>
-                            Use the horizontal layout for short text and small
-                            images. The vertical layout is best for longer text
-                            and larger images.
-                        </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>
-        );
-    }
-}
-
-export default SorterEditor;