@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/testing-widgets.js

@@ -0,0 +1,12 @@
+// @flow
+import ExampleGraphieWidget from "./widgets/example-graphie-widget.jsx";
+import ExampleWidget from "./widgets/example-widget.jsx";
+import SimpleMarkdownTester from "./widgets/simple-markdown-tester.jsx";
+
+import type {WidgetExports} from "@khanacademy/perseus";
+
+export default ([
+    ExampleGraphieWidget,
+    ExampleWidget,
+    SimpleMarkdownTester,
+]: $ReadOnlyArray<WidgetExports<>>);

package/src/util/register-all-widgets-and-editors-for-testing.js

@@ -0,0 +1,15 @@
+// @flow
+/**
+ * Some tests require some or all of the widgets and editors to be registered
+ * in order for them to work. Requiring this file will register all of the
+ * widgets and editors.
+ */
+import {Widgets} from "@khanacademy/perseus";
+
+import allEditors from "../all-editors.js";
+import allWidgets from "../all-widgets.js";
+
+export const registerAllWidgetsAndEditorsForTesting = () => {
+    Widgets.registerWidgets(allWidgets);
+    Widgets.registerEditors(allEditors);
+};

package/src/util/register-all-widgets-and-editors-for-testing_test.js

@@ -0,0 +1,18 @@
+// @flow
+import {Widgets} from "@khanacademy/perseus";
+
+import {registerAllWidgetsAndEditorsForTesting} from "./register-all-widgets-and-editors-for-testing.js";
+
+describe("Registering all widgets and editors", () => {
+    it("should have an editor for every widget", () => {
+        registerAllWidgetsAndEditorsForTesting();
+
+        const allWidgetsTypes = Widgets.getAllWidgetTypes();
+
+        expect(allWidgetsTypes).not.toContain("undefined");
+
+        for (const widgetType of allWidgetsTypes) {
+            expect(Widgets.getEditor(widgetType)).toBeTruthy();
+        }
+    });
+});

package/src/widgets/__stories__/label-image-editor.stories.jsx

@@ -0,0 +1,97 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import LabelImageEditor from "../label-image-editor.jsx";
+
+import type {MarkerType} from "@khanacademy/perseus";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Editor/Widgets/Label Image Editor",
+}: Story);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+    },
+});
+
+type State = {|
+    imageAlt: string,
+    choices: $ReadOnlyArray<string>,
+    imageUrl: string,
+    imageWidth: number,
+    imageHeight: number,
+    markers: $ReadOnlyArray<MarkerType>,
+|};
+
+class WithState extends React.Component<Empty, State> {
+    _widget: LabelImageEditor;
+
+    state = {
+        imageAlt: "Map of Europe",
+        choices: [
+            "Lamborghini",
+            "BMW",
+            "Volkswagen",
+            "Fiat",
+            "Porsche",
+            "Ferrari",
+        ],
+        imageUrl:
+            "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
+        imageWidth: 1280,
+        imageHeight: 1024,
+        markers: [
+            {
+                answers: ["BMW", "Volkswagen", "Porsche"],
+                label: "Germany",
+                x: 37.3,
+                y: 53.6,
+            },
+            {
+                answers: [],
+                label: "",
+                x: 21,
+                y: 46,
+            },
+            {
+                answers: ["Lamborghini", "Fiat", "Ferrari"],
+                label: "Italy",
+                x: 41.4,
+                y: 78.8,
+            },
+        ],
+    };
+
+    render(): React.Node {
+        return (
+            <div className={css(styles.wrapper)}>
+                <LabelImageEditor
+                    {...this.state}
+                    onChange={(props) =>
+                        this.setState({
+                            ...this._widget.serialize(),
+                            ...props,
+                        })
+                    }
+                    // TODO(mdr): We found a new Flow error when upgrading:
+                    //     "widget (null) This type is incompatible with this._widget (LabelImageEditor)"
+                    // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
+                    ref={(widget) => (this._widget = widget)}
+                />
+            </div>
+        );
+    }
+}
+
+export const Default = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};

package/src/widgets/categorizer-editor.jsx

@@ -0,0 +1,103 @@
+// @flow
+import {
+    components,
+    ApiOptions,
+    Categorizer as CategorizerWidget,
+    Changeable,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {PropCheckBox, TextListEditor} = components;
+const Categorizer = CategorizerWidget.widget;
+
+type Props = $FlowFixMe;
+
+class CategorizerEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        apiOptions: ApiOptions.propTypes,
+        items: PropTypes.arrayOf(PropTypes.string),
+        categories: PropTypes.arrayOf(PropTypes.string),
+        values: PropTypes.arrayOf(PropTypes.number),
+        randomizeItems: PropTypes.bool,
+    };
+
+    static widgetName: string = "categorizer";
+
+    static defaultProps: Props = {
+        items: [],
+        categories: [],
+        values: [],
+        randomizeItems: false,
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                <div className="perseus-widget-row">
+                    <PropCheckBox
+                        label="Randomize item order"
+                        labelAlignment="right"
+                        randomizeItems={this.props.randomizeItems}
+                        onChange={this.props.onChange}
+                    />
+                </div>
+                Categories:
+                <TextListEditor
+                    options={this.props.categories}
+                    onChange={(cat) => {
+                        this.change("categories", cat);
+                    }}
+                    layout="horizontal"
+                />
+                Items:
+                <TextListEditor
+                    options={this.props.items}
+                    onChange={(items) => {
+                        this.change({
+                            items: items,
+                            // TODO(eater): This truncates props.values so there
+                            // are never more correct answers than items,
+                            // ensuring the widget is possible to answer
+                            // correctly. It doesn't necessarly keep each
+                            // answer with its corresponding item if an item
+                            // is deleted from the middle. Inconvenient, but
+                            // it's at least possible for content creators to
+                            // catch and fix.
+                            values: _.first(this.props.values, items.length),
+                        });
+                    }}
+                    layout="vertical"
+                />
+                {/* There are a bunch of props that renderer.jsx passes to each widget
+                    via widget-container.jsx that we aren't passing to Categorizer here.
+                    See perseus-all-package/types.js#WidgetProps for details. */}
+                {/* $FlowFixMe[prop-missing] */}
+                <Categorizer
+                    apiOptions={this.props.apiOptions}
+                    items={this.props.items}
+                    categories={this.props.categories}
+                    values={this.props.values}
+                    onChange={(newProps) => {
+                        this.props.onChange(newProps);
+                    }}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    trackInteraction={function () {}}
+                />
+            </div>
+        );
+    }
+}
+
+export default CategorizerEditor;

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

@@ -0,0 +1,258 @@
+/* eslint-disable no-useless-escape */
+// @flow
+/**
+ * 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.jsx";
+
+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<$FlowFixMe> {
+    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.Node {
+        return (
+            <fieldset className="pair-editor">
+                <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>
+        );
+    }
+}
+
+/**
+ * This is used for editing a set of name/value pairs.
+ */
+class PairsEditor extends React.Component<$FlowFixMe> {
+    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) => {
+        // 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.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>;
+    }
+}
+
+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) {
+    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<$FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+    };
+
+    static widgetName: string = "cs-program";
+
+    static defaultProps: $FlowFixMe = {
+        programID: "",
+        programType: null,
+        settings: [{name: "", value: ""}],
+        showEditor: false,
+        showButtons: false,
+        width: DEFAULT_WIDTH,
+        height: DEFAULT_HEIGHT,
+    };
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    _handleSettingsChange: ($FlowFixMe) => void = (settings) => {
+        this.change({settings: settings.pairs});
+    };
+
+    _handleProgramIDChange: (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,
+                    {
+                        cause: error,
+                        loggedMetadata: {
+                            textStatus,
+                            programID,
+                        },
+                    },
+                );
+                this.change({
+                    width: DEFAULT_WIDTH,
+                    height: DEFAULT_HEIGHT,
+                    programID: programID,
+                    programType: null,
+                });
+            });
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        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.jsx

@@ -0,0 +1,75 @@
+// @flow
+import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import Editor from "../editor.jsx";
+
+const {TextInput} = components;
+
+type Props = $FlowFixMe;
+
+class DefinitionEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        togglePrompt: PropTypes.string,
+        definition: PropTypes.string,
+        apiOptions: PropTypes.any,
+    };
+
+    static widgetName: string = "definition";
+
+    static defaultProps: Props = {
+        togglePrompt: "",
+        definition: "",
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        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}
+                            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 = {};
+                            if (_.has(props, "content")) {
+                                newProps.definition = props.content;
+                            }
+                            this.change(newProps);
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default DefinitionEditor;