@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/widgets/graded-group-editor.tsx

@@ -1,161 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
-import {components, icons, ApiOptions, Changeable} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {InlineIcon, TextInput} = components;
-const {iconPlus, iconTrash} = icons;
-
-type Props = any;
-
-class GradedGroupEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        title: PropTypes.string,
-        content: PropTypes.string,
-        widgets: PropTypes.object,
-        images: PropTypes.object,
-        apiOptions: ApiOptions.propTypes,
-    };
-
-    static widgetName = "graded-group" as const;
-
-    static defaultProps: Props = {
-        title: "",
-        content: "",
-        widgets: {},
-        images: {},
-        hint: null,
-    };
-
-    editor = React.createRef<Editor>();
-    hintEditor = React.createRef<Editor>();
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    handleAddHint: () => void = () => {
-        const hint = {content: ""} as const;
-        this.props.onChange({hint}, () => {
-            this.hintEditor.current?.focus();
-        });
-    };
-
-    handleRemoveHint: (arg1: React.MouseEvent) => void = (e) => {
-        this.props.onChange({hint: null});
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-group-editor">
-                <div className="perseus-widget-row">
-                    <label className={css(styles.title)}>
-                        Title:{" "}
-                        <TextInput
-                            value={this.props.title}
-                            className={css(styles.input)}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("title")}
-                        />
-                    </label>
-                </div>
-                <Editor
-                    ref={this.editor}
-                    content={this.props.content}
-                    widgets={this.props.widgets}
-                    apiOptions={this.props.apiOptions}
-                    images={this.props.images}
-                    widgetEnabled={true}
-                    immutableWidgets={false}
-                    onChange={this.props.onChange}
-                    warnNoPrompt={true}
-                    warnNoWidgets={true}
-                />
-                {!this.props.hint && (
-                    <button
-                        type="button"
-                        style={{marginTop: 10}}
-                        className="add-hint simple-button orange"
-                        onClick={this.handleAddHint}
-                    >
-                        <InlineIcon {...iconPlus} /> Add a hint
-                    </button>
-                )}
-                {this.props.hint && (
-                    <div className="perseus-hint-editor">
-                        <div className={css(styles.hintsTitle)}>Hint</div>
-                        <Editor
-                            ref={this.hintEditor}
-                            content={
-                                this.props.hint ? this.props.hint.content : ""
-                            }
-                            widgets={
-                                this.props.hint ? this.props.hint.widgets : {}
-                            }
-                            apiOptions={this.props.apiOptions}
-                            images={this.props.hint && this.props.hint.images}
-                            widgetEnabled={true}
-                            immutableWidgets={false}
-                            onChange={(props) => {
-                                // Copy all props over from the existing hint
-                                // and then add new props.
-                                // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-                                this.change(
-                                    "hint",
-                                    Object.assign({}, this.props.hint, props),
-                                );
-                            }}
-                        />
-                        <button
-                            type="button"
-                            className="remove-hint simple-button orange"
-                            onClick={this.handleRemoveHint}
-                        >
-                            <InlineIcon {...iconTrash} /> Remove this hint
-                        </button>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    getSaveWarnings: () => any = () => {
-        return this.editor.current?.getSaveWarnings();
-    };
-
-    serialize: () => {
-        title: string;
-        hint: any | null | undefined;
-    } = () => {
-        return {
-            title: this.props.title,
-            ...this.editor.current?.serialize(),
-            hint: this.hintEditor.current?.serialize(),
-        };
-    };
-}
-
-const styles = StyleSheet.create({
-    title: {
-        fontSize: 18,
-        fontWeight: "bold",
-    },
-
-    input: {
-        fontSize: 18,
-    },
-
-    hintsTitle: {
-        marginTop: 10,
-        fontSize: "110%",
-        fontWeight: "bold",
-    },
-});
-
-export default GradedGroupEditor;

package/src/widgets/graded-group-set-editor.tsx

@@ -1,104 +0,0 @@
-/* eslint-disable react/forbid-prop-types, react/no-unsafe */
-import {ApiOptions, Changeable} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import GradedGroupEditor from "./graded-group-editor";
-
-type Props = any;
-
-class GradedGroupSetEditor extends React.Component<Props> {
-    // @ts-expect-error - TS2564 - Property '_editors' has no initializer and is not definitely assigned in the constructor.
-    _editors: Array<any>;
-
-    static propTypes = {
-        ...Changeable.propTypes,
-        apiOptions: ApiOptions.propTypes,
-        gradedGroups: PropTypes.array,
-        onChange: PropTypes.func.isRequired,
-    };
-
-    static widgetName = "graded-group-set" as const;
-
-    static defaultProps: Props = {
-        gradedGroups: [],
-    };
-
-    // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-    UNSAFE_componentWillMount() {
-        this._editors = [];
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    getSaveWarnings: () => ReadonlyArray<any> = () => {
-        return [].concat(
-            ...this._editors.map((editor) =>
-                editor ? editor.getSaveWarnings() : [],
-            ),
-        );
-    };
-
-    serialize: () => {
-        gradedGroups: any;
-    } = () => {
-        return {
-            gradedGroups: this.props.gradedGroups,
-        };
-    };
-
-    renderGroups: () => React.ReactElement = () => {
-        if (!this.props.gradedGroups) {
-            return null;
-        }
-        return this.props.gradedGroups.map((group, i) => (
-            <GradedGroupEditor
-                key={i}
-                ref={(el) => (this._editors[i] = el)}
-                {...group}
-                apiOptions={this.props.apiOptions}
-                widgetEnabled={true}
-                immutableWidgets={false}
-                onChange={(data) =>
-                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-                    this.change(
-                        "gradedGroups",
-                        setArrayItem(this.props.gradedGroups, i, {
-                            ...this.props.gradedGroups[i],
-                            ...data,
-                        }),
-                    )
-                }
-            />
-        ));
-    };
-
-    addGroup: () => void = () => {
-        const groups = this.props.gradedGroups || [];
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-        this.change(
-            "gradedGroups",
-            groups.concat([GradedGroupEditor.defaultProps]),
-        );
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-group-editor">
-                {this.renderGroups()}
-                <button onClick={this.addGroup}>Add group</button>
-            </div>
-        );
-    }
-}
-
-const setArrayItem = (list, i: any, value) => [
-    ...list.slice(0, i),
-    value,
-    ...list.slice(i + 1),
-];
-
-export default GradedGroupSetEditor;

package/src/widgets/grapher-editor.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-import {
-    components,
-    Changeable,
-    GrapherUtil,
-    GrapherWidget,
-    SizingUtils,
-} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-import GraphSettings from "../components/graph-settings";
-
-const {InfoTip, MultiButtonGroup} = components;
-const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
-const Grapher = GrapherWidget.widget;
-const {
-    DEFAULT_GRAPHER_PROPS,
-    allTypes,
-    chooseType,
-    defaultPlotProps,
-    getEquationString,
-    typeToButton,
-} = GrapherUtil;
-
-type Props = any;
-
-class GrapherEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "grapher" as const;
-
-    static defaultProps: Props = {
-        correct: DEFAULT_GRAPHER_PROPS.plot,
-        graph: DEFAULT_GRAPHER_PROPS.graph,
-        availableTypes: DEFAULT_GRAPHER_PROPS.availableTypes,
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    render(): React.ReactNode {
-        const sizeClass = containerSizeClass.SMALL;
-        let equationString;
-        let graph;
-        if (this.props.graph.valid === true) {
-            const graphProps = {
-                graph: this.props.graph,
-                plot: this.props.correct,
-                availableTypes: this.props.availableTypes,
-                onChange: (newProps, cb) => {
-                    let correct = this.props.correct;
-                    if (correct.type === newProps.plot?.type) {
-                        correct = _.extend({}, correct, newProps.plot);
-                    } else {
-                        // Clear options from previous graph
-                        correct = newProps.plot;
-                    }
-                    this.props.onChange({correct: correct}, cb);
-                },
-                trackInteraction: function () {},
-            } as const;
-
-            graph = (
-                // NOTE(jeremy): This editor doesn't pass in a bunch of
-                // standard props that the Renderer provides normally (eg.
-                // alignment, findWidgets, etc).
-                // @ts-expect-error - TS2769 - No overload matches this call.
-                <Grapher
-                    {...graphProps}
-                    apiOptions={this.props.apiOptions}
-                    containerSizeClass={sizeClass}
-                />
-            );
-            equationString = getEquationString(graphProps);
-        } else {
-            graph = (
-                <div className="perseus-error">{this.props.graph.valid}</div>
-            );
-        }
-
-        return (
-            <div>
-                <div>
-                    Correct answer{" "}
-                    <InfoTip>
-                        <p>
-                            Graph the correct answer in the graph below and
-                            ensure the equation or point coordinates displayed
-                            represent the correct answer.
-                        </p>
-                    </InfoTip>{" "}
-                    : {equationString}
-                </div>
-
-                <GraphSettings
-                    editableSettings={["graph", "snap", "image"]}
-                    box={getInteractiveBoxFromSizeClass(sizeClass)}
-                    range={this.props.graph.range}
-                    labels={this.props.graph.labels}
-                    step={this.props.graph.step}
-                    gridStep={this.props.graph.gridStep}
-                    snapStep={this.props.graph.snapStep}
-                    valid={this.props.graph.valid}
-                    backgroundImage={this.props.graph.backgroundImage}
-                    markings={this.props.graph.markings}
-                    rulerLabel={this.props.graph.rulerLabel}
-                    rulerTicks={this.props.graph.rulerTicks}
-                    showTooltips={this.props.graph.showTooltips}
-                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                    onChange={this.change("graph")}
-                />
-                <div className="perseus-widget-row">
-                    <label>Available functions: </label>
-                    <MultiButtonGroup
-                        allowEmpty={false}
-                        values={this.props.availableTypes}
-                        buttons={_.map(allTypes, typeToButton)}
-                        onChange={this.handleAvailableTypesChange}
-                    />
-                </div>
-                {graph}
-            </div>
-        );
-    }
-
-    handleAvailableTypesChange = (newAvailableTypes: Array<any>) => {
-        let correct = this.props.correct;
-
-        // If the currently 'correct' type is removed from the list of types,
-        // we need to change it to avoid impossible questions.
-        if (!_.contains(newAvailableTypes, this.props.correct.type)) {
-            const graph = this.props.graph;
-            const newType = chooseType(newAvailableTypes);
-            correct = defaultPlotProps(newType, graph);
-        }
-        this.props.onChange({
-            availableTypes: newAvailableTypes,
-            correct: correct,
-        });
-    };
-
-    serialize: () => any = () => {
-        return _.chain(this.props)
-            .pick("correct", "availableTypes")
-            .extend({graph: _.omit(this.props.graph, "box")})
-            .value();
-    };
-}
-
-export default GrapherEditor;

package/src/widgets/group-editor.tsx

@@ -1,83 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
-import {ApiOptions, Changeable} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-type Props = any;
-
-class GroupEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        content: PropTypes.string,
-        widgets: PropTypes.object,
-        images: PropTypes.object,
-        metadata: PropTypes.any,
-        apiOptions: ApiOptions.propTypes,
-    };
-
-    static widgetName = "group" as const;
-
-    static defaultProps: Props = {
-        content: "",
-        widgets: {},
-        images: {},
-        // `undefined` instead of `null` so that getDefaultProps works for
-        // `the GroupMetadataEditor`
-        metadata: undefined,
-    };
-
-    editor = React.createRef<Editor>();
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-group-editor">
-                <div>
-                    {/* the metadata editor; used for tags on
-                    khanacademy.org */}
-                    {this._renderMetadataEditor()}
-                </div>
-                <Editor
-                    ref={this.editor}
-                    content={this.props.content}
-                    widgets={this.props.widgets}
-                    apiOptions={this.props.apiOptions}
-                    images={this.props.images}
-                    widgetEnabled={true}
-                    immutableWidgets={false}
-                    onChange={this.props.onChange}
-                />
-            </div>
-        );
-    }
-
-    _renderMetadataEditor: () => React.ReactElement = () => {
-        const GroupMetadataEditor = this.props.apiOptions.GroupMetadataEditor;
-        return (
-            <GroupMetadataEditor
-                value={this.props.metadata}
-                // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                onChange={this.change("metadata")}
-            />
-        );
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    getSaveWarnings: () => ReadonlyArray<any> = () => {
-        return this.editor.current?.getSaveWarnings();
-    };
-
-    serialize: () => any = () => {
-        return _.extend({}, this.editor.current?.serialize(), {
-            metadata: this.props.metadata,
-        });
-    };
-}
-
-export default GroupEditor;

package/src/widgets/iframe-editor.tsx

@@ -1,202 +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";
-
-import BlurInput from "../components/blur-input";
-
-const {PropCheckBox} = components;
-
-type PairEditorProps = any;
-
-/**
- * This is used for editing a name/value pair.
- */
-class PairEditor extends React.Component<PairEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        name: PropTypes.string,
-        value: PropTypes.string,
-    };
-
-    static defaultProps: PairEditorProps = {
-        name: "",
-        value: "",
-    };
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <fieldset>
-                <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>
-        );
-    }
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type PairsEditorProps = any;
-
-/**
- * This is used for editing a set of name/value pairs.
- */
-class PairsEditor extends React.Component<PairsEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        pairs: PropTypes.arrayOf(
-            PropTypes.shape({
-                name: PropTypes.string,
-                value: PropTypes.string,
-            }),
-        ).isRequired,
-    };
-
-    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>;
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    handlePairChange = (pairIndex: any, 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);
-    };
-}
-
-type IframeEditorProps = any;
-
-/**
- * This is the main editor for this widget, to specify all the options.
- */
-class IframeEditor extends React.Component<IframeEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "iframe" as const;
-
-    static defaultProps: IframeEditorProps = {
-        url: "",
-        settings: [{name: "", value: ""}],
-        width: "400",
-        height: "400",
-        allowFullScreen: false,
-        allowTopNavigation: false,
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <div style={{fontWeight: "bold", textAlign: "center"}}>
-                    This widget is deprecated! <br />
-                    Try using the Video or CS Program widgets instead.
-                </div>
-                <label>
-                    Url or Program ID:
-                    <BlurInput
-                        value={this.props.url}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("url")}
-                    />
-                </label>
-                <br />
-                <label>
-                    Settings:
-                    <PairsEditor
-                        name="settings"
-                        pairs={this.props.settings}
-                        onChange={this.handleSettingsChange}
-                    />
-                </label>
-                <br />
-                <label>
-                    Width:
-                    <BlurInput
-                        value={this.props.width}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("width")}
-                    />
-                </label>
-                <label>
-                    Height:
-                    <BlurInput
-                        value={this.props.height}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("height")}
-                    />
-                </label>
-                <PropCheckBox
-                    label="Allow full screen"
-                    allowFullScreen={this.props.allowFullScreen}
-                    onChange={this.props.onChange}
-                />
-                <br />
-                <PropCheckBox
-                    label="Allow iframe content to redirect the page"
-                    allowTopNavigation={this.props.allowTopNavigation}
-                    onChange={this.props.onChange}
-                />
-            </div>
-        );
-    }
-
-    handleSettingsChange: (arg1: any) => void = (settings) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({settings: settings.pairs});
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default IframeEditor;