@khanacademy/perseus-editor 0.0.1 → 0.1.0

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

@@ -0,0 +1,162 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+// @flow
+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.jsx";
+
+const {InlineIcon, TextInput} = components;
+const {iconPlus, iconTrash} = icons;
+
+type Props = $FlowFixMe;
+
+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" = "graded-group";
+
+    static defaultProps: Props = {
+        title: "",
+        content: "",
+        widgets: {},
+        images: {},
+        hint: null,
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    handleAddHint: () => void = () => {
+        const hint = {content: ""};
+        this.props.onChange({hint}, () => {
+            // eslint-disable-next-line react/no-string-refs
+            this.refs["hint-editor"].focus();
+        });
+    };
+
+    handleRemoveHint: (SyntheticMouseEvent<>) => void = (e) => {
+        this.props.onChange({hint: null});
+    };
+
+    render(): React.Node {
+        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)}
+                            onChange={this.change("title")}
+                        />
+                    </label>
+                </div>
+                <Editor
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="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
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="hint-editor"
+                            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.
+                                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: () => $FlowFixMe = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    };
+
+    serialize: () => {|title: string, hint: ?$FlowFixMe|} = () => {
+        return {
+            title: this.props.title,
+            // eslint-disable-next-line react/no-string-refs
+            ...this.refs.editor.serialize(),
+            hint:
+                // eslint-disable-next-line react/no-string-refs
+                this.refs["hint-editor"] &&
+                // eslint-disable-next-line react/no-string-refs
+                this.refs["hint-editor"].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.jsx

@@ -0,0 +1,101 @@
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
+// @flow
+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.jsx";
+
+type Props = $FlowFixMe;
+
+class GradedGroupSetEditor extends React.Component<Props> {
+    // eslint-disable-next-line flowtype/no-mutable-array
+    _editors: Array<$FlowFixMe>;
+
+    static propTypes = {
+        ...Changeable.propTypes,
+        apiOptions: ApiOptions.propTypes,
+        gradedGroups: PropTypes.array,
+        onChange: PropTypes.func.isRequired,
+    };
+
+    static widgetName: "graded-group-set" = "graded-group-set";
+
+    static defaultProps: Props = {
+        gradedGroups: [],
+    };
+
+    // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
+    UNSAFE_componentWillMount() {
+        this._editors = [];
+    }
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    getSaveWarnings: () => $ReadOnlyArray<$FlowFixMe> = () => {
+        return [].concat(
+            ...this._editors.map((editor) =>
+                editor ? editor.getSaveWarnings() : [],
+            ),
+        );
+    };
+
+    serialize: () => {|gradedGroups: $FlowFixMe|} = () => {
+        return {
+            gradedGroups: this.props.gradedGroups,
+        };
+    };
+
+    renderGroups: () => React.Node = () => {
+        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) =>
+                    this.change(
+                        "gradedGroups",
+                        setArrayItem(this.props.gradedGroups, i, {
+                            ...this.props.gradedGroups[i],
+                            ...data,
+                        }),
+                    )
+                }
+            />
+        ));
+    };
+
+    addGroup: () => void = () => {
+        const groups = this.props.gradedGroups || [];
+        this.change(
+            "gradedGroups",
+            groups.concat([GradedGroupEditor.defaultProps]),
+        );
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-group-editor">
+                {this.renderGroups()}
+                <button onClick={this.addGroup}>Add group</button>
+            </div>
+        );
+    }
+}
+
+const setArrayItem = (list, i, value) => [
+    ...list.slice(0, i),
+    value,
+    ...list.slice(i + 1),
+];
+
+export default GradedGroupSetEditor;

package/src/widgets/grapher-editor.jsx

@@ -0,0 +1,154 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {
+    components,
+    Changeable,
+    GrapherUtil,
+    GrapherWidget,
+    SizingUtils,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import GraphSettings from "../components/graph-settings.jsx";
+
+const {InfoTip, MultiButtonGroup} = components;
+const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
+const Grapher = GrapherWidget.widget;
+const {
+    DEFAULT_GRAPHER_PROPS,
+    allTypes,
+    chooseType,
+    defaultPlotProps,
+    getEquationString,
+    typeToButton,
+} = GrapherUtil;
+
+type Props = $FlowFixMe;
+
+class GrapherEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName: "grapher" = "grapher";
+
+    static defaultProps: Props = {
+        correct: DEFAULT_GRAPHER_PROPS.plot,
+        graph: DEFAULT_GRAPHER_PROPS.graph,
+        availableTypes: DEFAULT_GRAPHER_PROPS.availableTypes,
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    render(): React.Node {
+        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 () {},
+            };
+
+            graph = (
+                // NOTE(jeremy): This editor doesn't pass in a bunch of
+                // standard props that the Renderer provides normally (eg.
+                // alignment, findWidgets, etc).
+                // $FlowFixMe[prop-missing]
+                <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}
+                    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: ($FlowFixMe) => void = (newAvailableTypes) => {
+        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: () => $FlowFixMe = () => {
+        return _.chain(this.props)
+            .pick("correct", "availableTypes")
+            .extend({graph: _.omit(this.props.graph, "box")})
+            .value();
+    };
+}
+
+export default GrapherEditor;

package/src/widgets/group-editor.jsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+// @flow
+import {ApiOptions, Changeable} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Editor from "../editor.jsx";
+
+type Props = $FlowFixMe;
+
+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" = "group";
+
+    static defaultProps: Props = {
+        content: "",
+        widgets: {},
+        images: {},
+        // `undefined` instead of `null` so that getDefaultProps works for
+        // `the GroupMetadataEditor`
+        metadata: undefined,
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-group-editor">
+                <div>
+                    {/* the metadata editor; used for tags on
+                    khanacademy.org */}
+                    {this._renderMetadataEditor()}
+                </div>
+                <Editor
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="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.Node = () => {
+        const GroupMetadataEditor = this.props.apiOptions.GroupMetadataEditor;
+        return (
+            <GroupMetadataEditor
+                value={this.props.metadata}
+                onChange={this.change("metadata")}
+            />
+        );
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    getSaveWarnings: () => $ReadOnlyArray<$FlowFixMe> = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return _.extend({}, this.refs.editor.serialize(), {
+            metadata: this.props.metadata,
+        });
+    };
+}
+
+export default GroupEditor;

package/src/widgets/iframe-editor.jsx

@@ -0,0 +1,200 @@
+/* eslint-disable react/sort-comp */
+// @flow
+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.jsx";
+
+const {PropCheckBox} = components;
+
+type PairEditorProps = $FlowFixMe;
+
+/**
+ * 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.Node {
+        return (
+            <fieldset>
+                <label>
+                    Name:
+                    <BlurInput
+                        value={this.props.name}
+                        // $FlowFixMe[incompatible-type] single-param call returns a callback
+                        onChange={this.change("name")}
+                    />
+                </label>
+                <label>
+                    Value:
+                    <BlurInput
+                        value={this.props.value}
+                        // $FlowFixMe[incompatible-type] single-param call returns a callback
+                        onChange={this.change("value")}
+                    />
+                </label>
+            </fieldset>
+        );
+    }
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+type PairsEditorProps = $FlowFixMe;
+
+/**
+ * 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.Node {
+        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, pair) => {
+        // 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 = $FlowFixMe;
+
+/**
+ * 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" = "iframe";
+
+    static defaultProps: IframeEditorProps = {
+        url: "",
+        settings: [{name: "", value: ""}],
+        width: "400",
+        height: "400",
+        allowFullScreen: false,
+        allowTopNavigation: false,
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    render(): React.Node {
+        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}
+                        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}
+                        onChange={this.change("width")}
+                    />
+                </label>
+                <label>
+                    Height:
+                    <BlurInput
+                        value={this.props.height}
+                        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: ($FlowFixMe) => void = (settings) => {
+        this.change({settings: settings.pairs});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+}
+
+export default IframeEditor;