@khanacademy/perseus-editor 4.1.5 → 4.1.7

package/src/widgets/cs-program-editor.tsx

@@ -1,256 +0,0 @@
-/* eslint-disable no-useless-escape */
-/**
- * This editor is for embedding Khan Academy CS programs.
- */
-
-import {
-    components,
-    Changeable,
-    Dependencies,
-    EditorJsonify,
-    Errors,
-    Log,
-} from "@khanacademy/perseus";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import BlurInput from "../components/blur-input";
-
-const {InfoTip, PropCheckBox} = components;
-
-const DEFAULT_WIDTH = 400;
-const DEFAULT_HEIGHT = 400;
-
-/**
- * This is used for editing a name/value pair.
- */
-class PairEditor extends React.Component<any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        name: PropTypes.string,
-        value: PropTypes.string,
-    };
-
-    static defaultProps = {
-        name: "",
-        value: "",
-    };
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <fieldset className="pair-editor">
-                <label>
-                    Name:{" "}
-                    <BlurInput
-                        value={this.props.name}
-                        onChange={this.change("name")}
-                    />
-                </label>
-                <label>
-                    {" "}
-                    Value:{" "}
-                    <BlurInput
-                        value={this.props.value}
-                        onChange={this.change("value")}
-                    />
-                </label>
-            </fieldset>
-        );
-    }
-}
-
-/**
- * This is used for editing a set of name/value pairs.
- */
-class PairsEditor extends React.Component<any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        pairs: PropTypes.arrayOf(
-            PropTypes.shape({
-                name: PropTypes.string,
-                value: PropTypes.string,
-            }),
-        ).isRequired,
-    };
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    handlePairChange = (pairIndex, pair: any) => {
-        // If they're both non empty, add a new one
-        const pairs = this.props.pairs.slice();
-        pairs[pairIndex] = pair;
-
-        const lastPair = pairs[pairs.length - 1];
-        if (lastPair.name && lastPair.value) {
-            pairs.push({name: "", value: ""});
-        }
-        this.change("pairs", pairs);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        const editors = _.map(this.props.pairs, (pair, i) => {
-            return (
-                <PairEditor
-                    key={i}
-                    name={pair.name}
-                    value={pair.value}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this.handlePairChange.bind(this, i)}
-                />
-            );
-        });
-        return <div>{editors}</div>;
-    }
-}
-
-const KA_PROGRAM_URL = /khanacademy\.org\/computer-programming\/[^\/]+\/(\d+)/;
-
-/**
- * Given a program URL from the site, extract its program ID.
- * If the input does not match the known URL patterns, it is assumed to be
- * a program ID.
- */
-function isolateProgramID(programUrl: string) {
-    const match = KA_PROGRAM_URL.exec(programUrl);
-    if (match) {
-        programUrl = match[1];
-    }
-
-    return programUrl;
-}
-
-/**
- * This is the main editor for this widget, to specify all the options.
- */
-class CSProgramEditor extends React.Component<any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "cs-program" as const;
-
-    static defaultProps: any = {
-        programID: "",
-        programType: null,
-        settings: [{name: "", value: ""}],
-        showEditor: false,
-        showButtons: false,
-        width: DEFAULT_WIDTH,
-        height: DEFAULT_HEIGHT,
-    };
-
-    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);
-    };
-
-    _handleSettingsChange: (arg1: any) => void = (settings) => {
-        this.change({settings: settings.pairs});
-    };
-
-    _handleProgramIDChange: (arg1: string) => void = (programID) => {
-        programID = isolateProgramID(programID);
-        const {isDevServer, InitialRequestUrl} = Dependencies.getDependencies();
-
-        const host = isDevServer
-            ? InitialRequestUrl.origin
-            : "https://www.khanacademy.org";
-        const baseUrl = `${host}/api/internal/scratchpads/${programID}`;
-
-        $.getJSON(baseUrl)
-            .done((programInfo) => {
-                const programType = programInfo.userAuthoredContentType;
-                this.change({
-                    width: programInfo.width,
-                    height: programInfo.height,
-                    programID: programID,
-                    programType: programType,
-                });
-            })
-            .fail((jqxhr, textStatus, error) => {
-                Log.error(
-                    "Error retrieving scratchpad info for program ID ",
-                    Errors.TransientService,
-                    {
-                        // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'Error | null | undefined'.
-                        cause: error,
-                        loggedMetadata: {
-                            textStatus,
-                            programID,
-                        },
-                    },
-                );
-                this.change({
-                    width: DEFAULT_WIDTH,
-                    height: DEFAULT_HEIGHT,
-                    programID: programID,
-                    programType: null,
-                });
-            });
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <label>
-                    Url or Program ID:{" "}
-                    <BlurInput
-                        value={this.props.programID}
-                        onChange={this._handleProgramIDChange}
-                    />
-                </label>
-                <br />
-                <PropCheckBox
-                    label="Show Editor"
-                    showEditor={this.props.showEditor}
-                    onChange={this.props.onChange}
-                />
-                <InfoTip>
-                    If you show the editor, you should use the "full-width"
-                    alignment to make room for the width of the editor.
-                </InfoTip>
-                <br />
-                <PropCheckBox
-                    label="Show Buttons"
-                    showButtons={this.props.showButtons}
-                    onChange={this.props.onChange}
-                />
-                <br />
-                <label>
-                    Settings:
-                    <PairsEditor
-                        name="settings"
-                        pairs={this.props.settings}
-                        onChange={this._handleSettingsChange}
-                    />
-                    <InfoTip>
-                        Settings that you add here are available to the program
-                        as an object returned by <code>Program.settings()</code>
-                    </InfoTip>
-                </label>
-            </div>
-        );
-    }
-}
-
-export default CSProgramEditor;

package/src/widgets/definition-editor.tsx

@@ -1,77 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {TextInput} = components;
-
-type Props = any;
-
-class DefinitionEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        togglePrompt: PropTypes.string,
-        definition: PropTypes.string,
-        apiOptions: PropTypes.any,
-    };
-
-    static widgetName = "definition" as const;
-
-    static defaultProps: Props = {
-        togglePrompt: "",
-        definition: "",
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-widget-definition-editor">
-                <a
-                    href="https://docs.google.com/document/d/1udaPef4imOfTMhmLDlWq4SM0mxL0r3YHFZE-5J1uGfo"
-                    target="_blank"
-                >
-                    Definition style guide
-                </a>
-                <div className="perseus-widget-row">
-                    <label>
-                        Word to be defined:{" "}
-                        <TextInput
-                            value={this.props.togglePrompt}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("togglePrompt")}
-                            placeholder="define me"
-                        />
-                    </label>
-                </div>
-                <div className="perseus-widget-row">
-                    <Editor
-                        apiOptions={this.props.apiOptions}
-                        content={this.props.definition}
-                        widgetEnabled={false}
-                        placeholder="definition goes here"
-                        onChange={(props) => {
-                            const newProps: Record<string, any> = {};
-                            if (_.has(props, "content")) {
-                                newProps.definition = props.content;
-                            }
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            this.change(newProps);
-                        }}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export default DefinitionEditor;

package/src/widgets/deprecated-standin-editor.tsx

@@ -1,29 +0,0 @@
-import {EditorJsonify} from "@khanacademy/perseus";
-import * as React from "react";
-
-type Props = {
-    // Callback for when a widget prop is changed.
-    onChange: (options: any) => void;
-};
-
-class DeprecatedStandinEditor extends React.Component<Props> {
-    static widgetName = "deprecated-standin" as const;
-
-    serialize(): any {
-        return EditorJsonify.serialize.call(this);
-    }
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <p>This widget has been deprecated and removed</p>
-                <p>
-                    Learners will see a message and they will not be graded on
-                    this part. Please replace this widget with a supported one.
-                </p>
-            </div>
-        );
-    }
-}
-
-export default DeprecatedStandinEditor;

package/src/widgets/dropdown-editor.tsx

@@ -1,211 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {components, icons, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-const {InfoTip, InlineIcon} = components;
-const {iconPlus, iconTrash} = icons;
-
-type Props = any;
-
-class DropdownEditor extends React.Component<Props> {
-    static propTypes = {
-        choices: PropTypes.arrayOf(
-            PropTypes.shape({
-                content: PropTypes.string,
-                correct: PropTypes.bool,
-            }),
-        ),
-        placeholder: PropTypes.string,
-    };
-
-    static widgetName = "dropdown" as const;
-
-    static defaultProps: Props = {
-        placeholder: "",
-        choices: [
-            {
-                content: "",
-                correct: false,
-            },
-        ],
-    };
-
-    onPlaceholderChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        const placeholder = e.target.value;
-        this.props.onChange({placeholder: placeholder});
-    };
-
-    onCorrectChange: (
-        arg1: number,
-        arg2: React.ChangeEvent<HTMLInputElement>,
-    ) => void = (choiceIndex) => {
-        const choices = _.map(this.props.choices, function (choice, i) {
-            return _.extend({}, choice, {
-                correct: i === choiceIndex,
-            });
-        });
-        this.props.onChange({choices: choices});
-    };
-
-    onContentChange: (
-        arg1: number,
-        arg2: React.ChangeEvent<HTMLInputElement>,
-    ) => void = (choiceIndex, e) => {
-        const choices = this.props.choices.slice();
-        const choice = _.clone(choices[choiceIndex]);
-        choice.content = e.target.value;
-        choices[choiceIndex] = choice;
-        this.props.onChange({choices: choices});
-    };
-
-    addChoice: (arg1: React.MouseEvent) => void = (e) => {
-        e.preventDefault();
-
-        const choices = this.props.choices;
-        const blankChoice = {content: "", correct: false} as const;
-        this.props.onChange(
-            {
-                choices: choices.concat([blankChoice]),
-            },
-            this.focus.bind(this, choices.length),
-        );
-    };
-
-    removeChoice: (arg1: number, arg2: React.MouseEvent) => void = (
-        choiceIndex,
-        e,
-    ) => {
-        e.preventDefault();
-        const choices = _(this.props.choices).clone();
-        choices.splice(choiceIndex, 1);
-        this.props.onChange({
-            choices: choices,
-        });
-    };
-
-    focus: (arg1: number) => boolean = (i) => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs["editor" + i]).focus(); // eslint-disable-line react/no-string-refs
-        return true;
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        const dropdownGroupName = _.uniqueId("perseus_dropdown_");
-        return (
-            <div className="perseus-widget-dropdown">
-                <div className="dropdown-info">
-                    Dropdown
-                    <InfoTip>
-                        <p>
-                            The drop down is useful for making inequalities in a
-                            custom format. We normally use the symbols {"<"},{" "}
-                            {">"}, ≤, ≥ (in that order) which you can copy into
-                            the choices. When possible, use the "multiple
-                            choice" answer type instead.
-                        </p>
-                    </InfoTip>
-                </div>
-                <div className="dropdown-placeholder">
-                    <input
-                        type="text"
-                        placeholder="Placeholder value"
-                        value={this.props.placeholder}
-                        onChange={this.onPlaceholderChange}
-                    />
-                    <InfoTip>
-                        <p>
-                            This value will appear as the drop down default. It
-                            should give the user some indication of the values
-                            available in the drop down itself, e.g.,
-                            Yes/No/Maybe.
-                        </p>
-                    </InfoTip>
-                </div>
-                <div className="clearfix" />
-                <ul className="dropdown-choices">
-                    {this.props.choices.map(function (choice, i) {
-                        const checkedClass = choice.correct
-                            ? "correct"
-                            : "incorrect";
-
-                        return (
-                            <li key={"" + i}>
-                                <div>
-                                    <input
-                                        ref={"radio" + i}
-                                        type="radio"
-                                        name={dropdownGroupName}
-                                        // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'boolean | undefined'.
-                                        checked={
-                                            choice.correct ? "checked" : ""
-                                        }
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                        onChange={this.onCorrectChange.bind(
-                                            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this,
-                                            i,
-                                        )}
-                                        value={i}
-                                    />
-                                    <input
-                                        type="text"
-                                        ref={"editor" + i}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                        onChange={this.onContentChange.bind(
-                                            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this,
-                                            i,
-                                        )}
-                                        className={checkedClass}
-                                        value={choice.content}
-                                    />
-                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                    <a
-                                        href="#"
-                                        className="simple-button orange"
-                                        aria-label="Delete choice"
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                        onClick={this.removeChoice.bind(
-                                            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this,
-                                            i,
-                                        )}
-                                    >
-                                        <span className="remove-choice">
-                                            <InlineIcon {...iconTrash} />
-                                        </span>
-                                    </a>
-                                </div>
-                            </li>
-                        );
-                    }, this)}
-                </ul>
-
-                <div className="add-choice-container">
-                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                    <a
-                        href="#"
-                        className="simple-button orange"
-                        onClick={this.addChoice}
-                    >
-                        <InlineIcon {...iconPlus} /> Add a choice{" "}
-                    </a>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default DropdownEditor;

package/src/widgets/example-graphie-widget-editor.tsx

@@ -1,70 +0,0 @@
-import {Changeable, EditorJsonify} from "@khanacademy/perseus";
-import * as React from "react";
-
-import ExampleGraphie from "./example-graphie-widget";
-
-const ExampleGraphieWidget = ExampleGraphie.widget;
-
-type Props = any;
-
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo page. Only the question writer sees this.
- */
-class ExampleGraphieWidgetEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "example-graphie-widget" as const;
-
-    static defaultProps: Props = {
-        correct: [4, 4],
-        graph: {
-            box: [340, 340],
-            labels: ["x", "y"],
-            range: [
-                [-10, 10],
-                [-10, 10],
-            ],
-            step: [1, 1],
-            gridStep: [1, 1],
-            valid: true,
-            backgroundImage: null,
-            markings: "grid",
-            showProtractor: false,
-        },
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    handleChange: (arg1: any) => void = (newProps) => {
-        if (newProps.coord) {
-            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-            this.change({
-                correct: newProps.coord,
-            });
-        }
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <ExampleGraphieWidget
-                    graph={this.props.graph}
-                    coord={this.props.correct}
-                    onChange={this.handleChange}
-                    apiOptions={this.props.apiOptions}
-                />
-            </div>
-        );
-    }
-}
-
-export default ExampleGraphieWidgetEditor;