@khanacademy/perseus-editor 0.0.1 → 0.1.0

package/src/widgets/image-editor.jsx

@@ -0,0 +1,326 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
+// @flow
+import {
+    components,
+    icons,
+    Changeable,
+    EditorJsonify,
+    Util,
+} from "@khanacademy/perseus";
+import createReactClass from "create-react-class";
+import * as React from "react";
+import _ from "underscore";
+
+import BlurInput from "../components/blur-input.jsx";
+import Editor from "../editor.jsx";
+
+const {InfoTip, InlineIcon, RangeInput} = components;
+
+const defaultBoxSize = 400;
+const defaultRange = [0, 10];
+const defaultBackgroundImage = {
+    url: null,
+    width: 0,
+    height: 0,
+};
+
+// Match any image URL (including "web+graphie" links) that is hosted by KA.
+// We're somewhat generous in our AWS URL matching
+// ("ka-<something>.s3.amazonaws.com") so that we don't have to update Perseus
+// every time we add a new proxied AWS bucket.
+const INTERNALLY_HOSTED_DOMAINS =
+    "(" +
+    "ka-.*.s3.amazonaws.com|" +
+    "(fastly|cdn).kastatic.org|" +
+    "khanacademy.org|" +
+    "kasandbox.org" +
+    ")";
+const INTERNALLY_HOSTED_URL_RE = new RegExp(
+    "^(https?|web\\+graphie)://[^/]*" + INTERNALLY_HOSTED_DOMAINS,
+);
+
+/**
+ * Alignment option for captions, relative to specified coordinates.
+ */
+const captionAlignments = [
+    "center",
+    "above",
+    "above right",
+    "right",
+    "below right",
+    "below",
+    "below left",
+    "left",
+    "above left",
+];
+
+const ImageEditor: $FlowFixMe = createReactClass({
+    displayName: "ImageEditor",
+
+    propTypes: {
+        ...Changeable.propTypes,
+    },
+
+    statics: {
+        widgetName: "image",
+    },
+
+    componentDidMount: function () {
+        // TODO(scottgrant): This is a hack to remove the deprecated call to
+        // this.isMounted() but is still considered an anti-pattern.
+        this._isMounted = true;
+    },
+
+    componentWillUnmount: function () {
+        this._isMounted = false;
+    },
+
+    getDefaultProps: function () {
+        return {
+            title: "",
+            range: [defaultRange, defaultRange],
+            box: [defaultBoxSize, defaultBoxSize],
+            backgroundImage: defaultBackgroundImage,
+            labels: [],
+            alt: "",
+            caption: "",
+        };
+    },
+
+    getInitialState: function () {
+        return {
+            backgroundImageError: "",
+        };
+    },
+
+    render: function () {
+        const backgroundImage = this.props.backgroundImage;
+
+        const imageSettings = (
+            <div className="image-settings">
+                <div>
+                    <label>
+                        <div>
+                            Alt text:
+                            <InfoTip>
+                                This is important for screenreaders. The content
+                                of this alt text will be formatted as markdown
+                                (tables, emphasis, etc. are supported).
+                            </InfoTip>
+                        </div>
+                        <Editor
+                            apiOptions={this.props.apiOptions}
+                            content={this.props.alt}
+                            onChange={(props) => {
+                                if (props.content != null) {
+                                    this.change("alt", props.content);
+                                }
+                            }}
+                            widgetEnabled={false}
+                        />
+                    </label>
+                </div>
+                <div>
+                    <label>
+                        <div>Caption:</div>
+                        <Editor
+                            apiOptions={this.props.apiOptions}
+                            content={this.props.caption}
+                            onChange={(props) => {
+                                if (props.content != null) {
+                                    this.change("caption", props.content);
+                                }
+                            }}
+                            widgetEnabled={false}
+                        />
+                    </label>
+                </div>
+            </div>
+        );
+
+        const backgroundImageErrorText = (
+            <div className="renderer-widget-error">
+                {this.state.backgroundImageError}
+            </div>
+        );
+
+        return (
+            <div className="perseus-image-editor">
+                <label>
+                    Image url:
+                    <InfoTip>Paste an image or graphie image URL.</InfoTip>
+                    {this.state.backgroundImageError &&
+                        backgroundImageErrorText}
+                    <BlurInput
+                        value={backgroundImage.url || ""}
+                        style={{width: 332}}
+                        onChange={(url) => this.onUrlChange(url, false)}
+                    />
+                </label>
+
+                {backgroundImage.url && imageSettings}
+            </div>
+        );
+    },
+
+    _renderRowForLabel: function (label, i) {
+        return (
+            <tr key={i}>
+                <td>
+                    <RangeInput
+                        value={label.coordinates}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.onCoordinateChange.bind(this, i)}
+                    />
+                </td>
+                <td style={{verticalAlign: "bottom", width: "5px"}}>
+                    <input
+                        type="text"
+                        className="graph-settings-axis-label"
+                        value={label.content}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.onContentChange.bind(this, i)}
+                    />
+                </td>
+                <td>
+                    <select
+                        className="perseus-widget-dropdown"
+                        value={label.alignment}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.onAlignmentChange.bind(this, i)}
+                    >
+                        {captionAlignments.map(function (alignment, i) {
+                            return (
+                                <option key={"" + i} value={alignment}>
+                                    {alignment}
+                                </option>
+                            );
+                        }, this)}
+                    </select>
+                </td>
+                <td>
+                    <a
+                        href="#"
+                        className="simple-button orange delete-label"
+                        title="Remove this label"
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick={this.removeLabel.bind(this, i)}
+                    >
+                        <InlineIcon {...icons.iconTrash} />
+                    </a>
+                </td>
+            </tr>
+        );
+    },
+
+    change(...args) {
+        // $FlowFixMe[object-this-reference]
+        return Changeable.change.apply(this, args);
+    },
+
+    removeLabel: function (labelIndex, e) {
+        e.preventDefault();
+        const labels = _(this.props.labels).clone();
+        labels.splice(labelIndex, 1);
+        this.props.onChange({labels: labels});
+    },
+
+    onCoordinateChange: function (labelIndex, newCoordinates) {
+        const labels = this.props.labels.slice();
+        labels[labelIndex] = _.extend({}, labels[labelIndex], {
+            coordinates: newCoordinates,
+        });
+        this.props.onChange({labels: labels});
+    },
+
+    onContentChange: function (labelIndex, e) {
+        const newContent = e.target.value;
+        const labels = this.props.labels.slice();
+        labels[labelIndex] = _.extend({}, labels[labelIndex], {
+            content: newContent,
+        });
+        this.props.onChange({labels: labels});
+    },
+
+    onAlignmentChange: function (labelIndex, e) {
+        const newAlignment = e.target.value;
+        const labels = this.props.labels.slice();
+        labels[labelIndex] = _.extend({}, labels[labelIndex], {
+            alignment: newAlignment,
+        });
+        this.props.onChange({labels: labels});
+    },
+
+    setUrl: function (url, width, height, silent) {
+        // Because this calls into WidgetEditor._handleWidgetChange, which
+        // checks for this widget's ref to serialize it.
+        //
+        // Errors if you switch items before the `Image` from `onUrlChange`
+        // loads.
+        if (!this._isMounted) {
+            return;
+        }
+
+        const image = _.clone(this.props.backgroundImage);
+        image.url = url;
+        image.width = width;
+        image.height = height;
+        const box = [image.width, image.height];
+        this.props.onChange(
+            {
+                backgroundImage: image,
+                box: box,
+            },
+            null,
+            silent,
+        );
+    },
+
+    // silently load the image when the component mounts
+    // silently update url and sizes when the image loads
+    // noisily load the image in response to the author changing it
+    onUrlChange: function (url, silent) {
+        // All article content must be KA-owned!
+        if (!INTERNALLY_HOSTED_URL_RE.test(url)) {
+            this.setState({
+                backgroundImageError:
+                    "Images must be from sites hosted by Khan Academy. " +
+                    "Please input a Khan Academy-owned address, or use the " +
+                    "Add Image tool to rehost an existing image",
+            });
+            return;
+        }
+        this.setState({backgroundImageError: ""});
+
+        // We update our background image prop after the image loads below. To
+        // avoid weirdness when we change to a very slow URL, then a much
+        // faster URL, we keep track of the URL we're trying to change to.
+        this._leadingUrl = url;
+
+        if (!url) {
+            this.setUrl(url, 0, 0, silent);
+            return;
+        }
+
+        Util.getImageSize(url, (width, height) => {
+            if (this._leadingUrl !== url) {
+                return;
+            }
+
+            this.setUrl(url, width, height, true);
+        });
+    },
+
+    onRangeChange: function (type, newRange) {
+        const range = this.props.range.slice();
+        range[type] = newRange;
+        this.props.onChange({range: range});
+    },
+
+    serialize() {
+        // $FlowFixMe[object-this-reference]
+        return EditorJsonify.serialize.call(this);
+    },
+});
+
+export default ImageEditor;

package/src/widgets/input-number-editor.jsx

@@ -0,0 +1,269 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import {components, Util} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+import BlurInput from "../components/blur-input.jsx";
+
+const {InfoTip} = components;
+
+const answerTypes = {
+    number: {
+        name: "Numbers",
+        forms: "integer, decimal, proper, improper, mixed",
+    },
+    decimal: {
+        name: "Decimals",
+        forms: "decimal",
+    },
+    integer: {
+        name: "Integers",
+        forms: "integer",
+    },
+    rational: {
+        name: "Fractions and mixed numbers",
+        forms: "integer, proper, improper, mixed",
+    },
+    improper: {
+        name: "Improper numbers (no mixed)",
+        forms: "integer, proper, improper",
+    },
+    mixed: {
+        name: "Mixed numbers (no improper)",
+        forms: "integer, proper, mixed",
+    },
+    percent: {
+        name: "Numbers or percents",
+        forms: "integer, decimal, proper, improper, mixed, percent",
+    },
+    pi: {
+        name: "Numbers with pi",
+        forms: "pi",
+    },
+};
+
+type Props = $FlowFixMe;
+
+class InputNumberEditor extends React.Component<Props> {
+    static propTypes = {
+        value: PropTypes.number,
+        simplify: PropTypes.oneOf(["required", "optional", "enforced"]),
+        size: PropTypes.oneOf(["normal", "small"]),
+        inexact: PropTypes.bool,
+        maxError: PropTypes.number,
+        answerType: PropTypes.string,
+        rightAlign: PropTypes.bool,
+    };
+
+    static widgetName: "input-number" = "input-number";
+
+    static defaultProps: Props = {
+        value: 0,
+        simplify: "required",
+        size: "normal",
+        inexact: false,
+        maxError: 0.1,
+        answerType: "number",
+        rightAlign: false,
+    };
+
+    handleAnswerChange: (string) => void = (str) => {
+        const value = Util.firstNumericalParse(str) || 0;
+        this.props.onChange({value: value});
+    };
+
+    render(): React.Node {
+        const answerTypeOptions = _.map(
+            answerTypes,
+            function (v, k) {
+                return (
+                    <option value={k} key={k}>
+                        {v.name}
+                    </option>
+                );
+            },
+            this,
+        );
+
+        return (
+            <div>
+                <div>
+                    <label>
+                        Correct answer:{" "}
+                        <BlurInput
+                            value={"" + this.props.value}
+                            onChange={this.handleAnswerChange}
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="input"
+                        />
+                    </label>
+                </div>
+
+                <div>
+                    <label>
+                        Unsimplified answers{" "}
+                        <select
+                            value={this.props.simplify}
+                            onChange={(e) => {
+                                this.props.onChange({
+                                    simplify: e.target.value,
+                                });
+                            }}
+                        >
+                            <option value="required">will not be graded</option>
+                            <option value="optional">will be accepted</option>
+                            <option value="enforced">
+                                will be marked wrong
+                            </option>
+                        </select>
+                    </label>
+                    <InfoTip>
+                        <p>
+                            Normally select "will not be graded". This will give
+                            the user a message saying the answer is correct but
+                            not simplified. The user will then have to simplify
+                            it and re-enter, but will not be penalized. (5th
+                            grade and anything after)
+                        </p>
+                        <p>
+                            Select "will be accepted" only if the user is not
+                            expected to know how to simplify fractions yet.
+                            (Anything prior to 5th grade)
+                        </p>
+                        <p>
+                            Select "will be marked wrong" only if we are
+                            specifically assessing the ability to simplify.
+                        </p>
+                    </InfoTip>
+                </div>
+
+                <div>
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={this.props.inexact}
+                            onChange={(e) => {
+                                this.props.onChange({
+                                    inexact: e.target.checked,
+                                });
+                            }}
+                        />{" "}
+                        Allow inexact answers
+                    </label>
+
+                    <label>
+                        <input /* TODO(emily): don't use a hidden checkbox
+                        for alignment */
+                            type="checkbox"
+                            style={{visibility: "hidden"}}
+                        />
+                        Max error:{" "}
+                        <input
+                            type="text"
+                            disabled={!this.props.inexact}
+                            defaultValue={this.props.maxError}
+                            onBlur={(e) => {
+                                const ans =
+                                    "" +
+                                    // $FlowFixMe[incompatible-type]
+                                    (Util.firstNumericalParse(e.target.value) ||
+                                        0);
+                                e.target.value = ans;
+                                this.props.onChange({maxError: ans});
+                            }}
+                        />
+                    </label>
+                </div>
+
+                <div>
+                    Answer type:{" "}
+                    <select
+                        value={this.props.answerType}
+                        onChange={(e) => {
+                            this.props.onChange({answerType: e.target.value});
+                        }}
+                    >
+                        {answerTypeOptions}
+                    </select>
+                    <InfoTip>
+                        <p>
+                            Use the default "Numbers" unless the answer must be
+                            in a specific form (e.g., question is about
+                            converting decimals to fractions).
+                        </p>
+                    </InfoTip>
+                </div>
+
+                <div>
+                    <label>
+                        Width{" "}
+                        <select
+                            value={this.props.size}
+                            onChange={(e) => {
+                                this.props.onChange({size: e.target.value});
+                            }}
+                        >
+                            <option value="normal">Normal (80px)</option>
+                            <option value="small">Small (40px)</option>
+                        </select>
+                    </label>
+                    <InfoTip>
+                        <p>
+                            Use size "Normal" for all text boxes, unless there
+                            are multiple text boxes in one line and the answer
+                            area is too narrow to fit them.
+                        </p>
+                    </InfoTip>
+                </div>
+
+                <div>
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={this.props.rightAlign}
+                            onChange={(e) => {
+                                this.props.onChange({
+                                    rightAlign: e.target.checked,
+                                });
+                            }}
+                        />{" "}
+                        Right alignment
+                    </label>
+                </div>
+            </div>
+        );
+    }
+
+    focus: () => boolean = () => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+        return true;
+    };
+
+    serialize: () => {|
+        value: $FlowFixMe,
+        simplify: $FlowFixMe,
+        size: $FlowFixMe,
+        inexact: $FlowFixMe,
+        maxError: $FlowFixMe,
+        answerType: $FlowFixMe,
+        rightAlign: $FlowFixMe,
+    |} = () => {
+        return _.pick(
+            this.props,
+            "value",
+            "simplify",
+            "size",
+            "inexact",
+            "maxError",
+            "answerType",
+            "rightAlign",
+        );
+    };
+}
+
+export default InputNumberEditor;