@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/orderer-editor.jsx

@@ -0,0 +1,166 @@
+/* eslint-disable one-var, react/forbid-prop-types, react/sort-comp */
+// @flow
+import {components} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {InfoTip, TextListEditor} = components;
+
+const NORMAL = "normal",
+    AUTO = "auto",
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical";
+
+type Props = $FlowFixMe;
+
+class OrdererEditor extends React.Component<Props> {
+    static propTypes = {
+        correctOptions: PropTypes.array,
+        otherOptions: PropTypes.array,
+        height: PropTypes.oneOf([NORMAL, AUTO]),
+        layout: PropTypes.oneOf([HORIZONTAL, VERTICAL]),
+        onChange: PropTypes.func.isRequired,
+    };
+
+    static widgetName: "orderer" = "orderer";
+
+    static defaultProps: Props = {
+        correctOptions: [{content: "$x$"}],
+        otherOptions: [{content: "$y$"}],
+        height: NORMAL,
+        layout: HORIZONTAL,
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-widget-orderer">
+                <div>
+                    {" "}
+                    Correct answer:{" "}
+                    <InfoTip>
+                        <p>
+                            Place the cards in the correct order. The same card
+                            can be used more than once in the answer but will
+                            only be displayed once at the top of a stack of
+                            identical cards.
+                        </p>
+                    </InfoTip>
+                </div>
+                <TextListEditor
+                    options={_.pluck(this.props.correctOptions, "content")}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={this.onOptionsChange.bind(this, "correctOptions")}
+                    layout={this.props.layout}
+                />
+
+                <div>
+                    {" "}
+                    Other cards:{" "}
+                    <InfoTip>
+                        <p>Create cards that are not part of the answer.</p>
+                    </InfoTip>
+                </div>
+                <TextListEditor
+                    options={_.pluck(this.props.otherOptions, "content")}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={this.onOptionsChange.bind(this, "otherOptions")}
+                    layout={this.props.layout}
+                />
+
+                <div>
+                    <label>
+                        {" "}
+                        Layout:{" "}
+                        <select
+                            value={this.props.layout}
+                            onChange={this.onLayoutChange}
+                        >
+                            <option value={HORIZONTAL}>Horizontal</option>
+                            <option value={VERTICAL}>Vertical</option>
+                        </select>
+                    </label>
+                    <InfoTip>
+                        <p>
+                            Use the horizontal layout for short text and small
+                            images. The vertical layout is best for longer text
+                            (e.g. proofs).
+                        </p>
+                    </InfoTip>
+                </div>
+                <div>
+                    <label>
+                        {" "}
+                        Height:{" "}
+                        <select
+                            value={this.props.height}
+                            onChange={this.onHeightChange}
+                        >
+                            <option value={NORMAL}>Normal</option>
+                            <option value={AUTO}>Automatic</option>
+                        </select>
+                    </label>
+                    <InfoTip>
+                        <p>Use "Normal" for text, "Automatic" for images.</p>
+                    </InfoTip>
+                </div>
+            </div>
+        );
+    }
+
+    onOptionsChange: (
+        "correctOptions" | "otherOptions",
+        $FlowFixMe,
+        $FlowFixMe,
+    ) => $FlowFixMe = (whichOptions, options, cb) => {
+        const props = {};
+        props[whichOptions] = _.map(options, function (option) {
+            return {content: option};
+        });
+        this.props.onChange(props, cb);
+    };
+
+    onLayoutChange: (SyntheticInputEvent<>) => void = (e) => {
+        this.props.onChange({layout: e.target.value});
+    };
+
+    onHeightChange: (SyntheticInputEvent<>) => void = (e) => {
+        this.props.onChange({height: e.target.value});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        // We combine the correct answer and the other cards by merging them,
+        // removing duplicates and empty cards, and sorting them into
+        // categories based on their content
+        const options = _.chain(_.pluck(this.props.correctOptions, "content"))
+            .union(_.pluck(this.props.otherOptions, "content"))
+            .uniq()
+            .reject(function (content) {
+                return content === "";
+            })
+            .sort()
+            .sortBy(function (content) {
+                if (/\d/.test(content)) {
+                    return 0;
+                }
+                if (/^\$?[a-zA-Z]+\$?$/.test(content)) {
+                    return 2;
+                }
+                return 1;
+            })
+            .map(function (content) {
+                return {content: content};
+            })
+            .value();
+
+        return {
+            options: options,
+            correctOptions: this.props.correctOptions,
+            otherOptions: this.props.otherOptions,
+            height: this.props.height,
+            layout: this.props.layout,
+        };
+    };
+}
+
+export default OrdererEditor;

package/src/widgets/passage-editor.jsx

@@ -0,0 +1,115 @@
+// @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 {InfoTip, PropCheckBox} = components;
+
+type Props = $FlowFixMe;
+
+class PassageEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        passageTitle: PropTypes.string,
+        passageText: PropTypes.string,
+        footnotes: PropTypes.string,
+        showLineNumbers: PropTypes.bool,
+    };
+
+    static widgetName: "passage" = "passage";
+
+    static defaultProps: Props = {
+        passageTitle: "",
+        passageText: "",
+        footnotes: "",
+        showLineNumbers: true,
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        const passageEditor = (
+            <Editor
+                // eslint-disable-next-line react/no-string-refs
+                ref="passage-editor"
+                apiOptions={this.props.apiOptions}
+                content={this.props.passageText}
+                widgetEnabled={false}
+                placeholder="Type passage here..."
+                onChange={(newProps) => {
+                    this.change({passageText: newProps.content});
+                }}
+                showWordCount={true}
+            />
+        );
+        const footnotesEditor = (
+            <Editor
+                // eslint-disable-next-line react/no-string-refs
+                ref="passage-footnotes-editor"
+                apiOptions={this.props.apiOptions}
+                content={this.props.footnotes}
+                widgetEnabled={false}
+                placeholder="Type footnotes here..."
+                onChange={(newProps) => {
+                    this.change({footnotes: newProps.content});
+                }}
+            />
+        );
+        return (
+            <div className="perseus-widget-passage-editor">
+                <div className="perseus-widget-row">
+                    <PropCheckBox
+                        label="Show line numbers"
+                        labelAlignment="right"
+                        showLineNumbers={this.props.showLineNumbers}
+                        onChange={this.props.onChange}
+                    />
+                </div>
+                <div>
+                    Passage title:
+                    <InfoTip>
+                        <p>
+                            An optional title that will appear directly above
+                            the passage in the same font style. (E.g. Passage 1)
+                        </p>
+                    </InfoTip>
+                    <div>
+                        <input
+                            type="text"
+                            defaultValue={this.props.passageTitle}
+                            onChange={(e) => {
+                                this.change({passageTitle: e.target.value});
+                            }}
+                        />
+                    </div>
+                </div>
+                <div>
+                    Passage Text:
+                    {passageEditor}
+                </div>
+                <div>
+                    Footnotes:
+                    <InfoTip>
+                        <p>
+                            To add footnotes, add ^ characters where they belong
+                            in the passage. Then, add ^ in the footnotes area to
+                            reference the footnotes in the passage.
+                        </p>
+                    </InfoTip>
+                    {footnotesEditor}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PassageEditor;

package/src/widgets/passage-ref-editor.jsx

@@ -0,0 +1,77 @@
+// @flow
+import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const {InfoTip, NumberInput, TextInput} = components;
+
+type Props = $FlowFixMe;
+
+class PassageRefEditor extends React.Component<Props> {
+    static propTypes: Props = {
+        ...Changeable.propTypes,
+        passageNumber: PropTypes.number,
+        referenceNumber: PropTypes.number,
+        summaryText: PropTypes.string,
+    };
+
+    static widgetName: "passage-ref" = "passage-ref";
+
+    static defaultProps: Props = {
+        passageNumber: 1,
+        referenceNumber: 1,
+        summaryText: "",
+    };
+
+    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>
+                    <label>
+                        {"Passage Number: "}
+                        <NumberInput
+                            value={this.props.passageNumber}
+                            onChange={this.change("passageNumber")}
+                        />
+                    </label>
+                </div>
+                <div>
+                    <label>
+                        {"Reference Number: "}
+                        <NumberInput
+                            value={this.props.referenceNumber}
+                            onChange={this.change("referenceNumber")}
+                        />
+                    </label>
+                </div>
+                <div>
+                    <label>
+                        {"Summary Text: "}
+                        <TextInput
+                            value={this.props.summaryText}
+                            onChange={this.change("summaryText")}
+                        />
+                        <InfoTip>
+                            <p>
+                                Short summary of the referenced section. This
+                                will be included in parentheses and quotes
+                                automatically.
+                            </p>
+                            <p>Ex: The start ... the end</p>
+                        </InfoTip>
+                    </label>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PassageRefEditor;

package/src/widgets/passage-ref-target-editor.jsx

@@ -0,0 +1,47 @@
+// @flow
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+type Props = $FlowFixMe;
+
+class PassageRefTargetEditor extends React.Component<Props> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        content: PropTypes.string,
+    };
+
+    static widgetName: "passage-ref-target" = "passage-ref-target";
+
+    static defaultProps: Props = {
+        content: "",
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    handleContentChange: (SyntheticInputEvent<>) => void = (e) => {
+        this.change({content: e.target.value});
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.Node {
+        return (
+            <div>
+                Content:
+                <input
+                    type="text"
+                    value={this.props.content}
+                    onChange={this.handleContentChange}
+                />
+            </div>
+        );
+    }
+}
+
+export default PassageRefTargetEditor;