@khanacademy/perseus-editor 0.0.1 → 0.1.0

package/src/hint-editor.jsx

@@ -0,0 +1,447 @@
+/* eslint-disable @babel/no-invalid-this */
+// @flow
+/**
+ * Collection of classes for rendering the hint editor area,
+ * hint editor boxes, and hint previews
+ */
+import {components, icons} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import DeviceFramer from "./components/device-framer.jsx";
+import Editor from "./editor.jsx";
+import IframeContentRenderer from "./iframe-content-renderer.jsx";
+
+import type {
+    APIOptions,
+    WidgetDict,
+    ImageDict,
+    Hint,
+    ChangeHandler,
+    DeviceType,
+} from "@khanacademy/perseus";
+
+const {InfoTip, InlineIcon} = components;
+const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
+
+type ImageUploader = (file: string, callback: (url: string) => mixed) => mixed;
+
+type HintEditorProps = {|
+    itemId?: string,
+    apiOptions?: APIOptions,
+    className: string,
+    imageUploader?: ImageUploader,
+    showMoveButtons?: boolean,
+    showRemoveButton?: boolean,
+    showTitle?: boolean,
+    content?: ?string,
+    replace?: ?boolean,
+    widgets?: ?WidgetDict,
+    images?: ?ImageDict,
+    isLast: boolean,
+    isFirst: boolean,
+    onMove: (direction: number) => mixed,
+    onRemove: () => mixed,
+    onChange: ChangeHandler,
+    __type?: "hint",
+|};
+
+/* Renders a hint editor box
+ *
+ * This includes:
+ *  ~ A "Hint" title
+ *  ~ the textarea for the hint
+ *  ~ the "remove this hint" box
+ *  ~ the move hint up/down arrows
+ */
+export class HintEditor extends React.Component<HintEditorProps> {
+    static defaultProps: {|
+        className: string,
+        content: string,
+        replace: boolean,
+        showMoveButtons: boolean,
+        showRemoveButton: boolean,
+        showTitle: boolean,
+    |} = {
+        className: "",
+        content: "",
+        replace: false,
+        showMoveButtons: true,
+        showTitle: true,
+        showRemoveButton: true,
+    };
+
+    handleChange: (e: SyntheticInputEvent<>) => void = (
+        e: SyntheticInputEvent<>,
+    ) => {
+        this.props.onChange({replace: e.target.checked});
+    };
+
+    focus: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.editor.focus();
+    };
+
+    getSaveWarnings: () => any = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    };
+
+    serialize: (options: any) => any = (options: $FlowFixMe) => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.serialize(options);
+    };
+
+    render(): React.Element<"div"> {
+        return (
+            <div className={"perseus-hint-editor " + this.props.className}>
+                {this.props.showTitle && <div className="pod-title">Hint</div>}
+                <Editor
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="editor"
+                    // Using the AssessmentItem content ID as the key
+                    // ensures that when the user navigates to another
+                    // item in the Sidebar, the question editor is
+                    // re-rendered by React.
+                    key={this.props.itemId}
+                    apiOptions={this.props.apiOptions}
+                    widgets={this.props.widgets || undefined}
+                    content={this.props.content || undefined}
+                    images={this.props.images}
+                    replace={this.props.replace}
+                    placeholder="Type your hint here..."
+                    imageUploader={this.props.imageUploader}
+                    onChange={this.props.onChange}
+                />
+                <div className="hint-controls-container clearfix">
+                    {this.props.showMoveButtons && (
+                        <span className="reorder-hints">
+                            <button
+                                type="button"
+                                className={this.props.isLast ? "hidden" : ""}
+                                onClick={_.partial(this.props.onMove, 1)}
+                            >
+                                <InlineIcon {...iconCircleArrowDown} />
+                            </button>{" "}
+                            <button
+                                type="button"
+                                className={this.props.isFirst ? "hidden" : ""}
+                                onClick={_.partial(this.props.onMove, -1)}
+                            >
+                                <InlineIcon {...iconCircleArrowUp} />
+                            </button>{" "}
+                            {this.props.isLast && (
+                                <InfoTip>
+                                    <p>
+                                        The last hint is automatically bolded.
+                                    </p>
+                                </InfoTip>
+                            )}
+                        </span>
+                    )}
+                    <input
+                        type="checkbox"
+                        checked={this.props.replace}
+                        onChange={this.handleChange}
+                    />
+                    Replace previous hint
+                    {this.props.showRemoveButton && (
+                        <button
+                            type="button"
+                            className="remove-hint simple-button orange"
+                            onClick={this.props.onRemove}
+                        >
+                            <InlineIcon {...iconTrash} />
+                            Remove this hint{" "}
+                        </button>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+type CombinedHintEditorProps = {|
+    itemId?: string,
+    apiOptions?: APIOptions,
+    deviceType: DeviceType,
+    frameSource: string,
+    imageUploader?: ImageUploader,
+    highlightLint?: boolean,
+    isLast: boolean,
+    isFirst: boolean,
+    hint: Hint,
+    pos: number, // position
+    contentPaths: $ReadOnlyArray<string>,
+    onMove: (direction: number) => mixed,
+    onRemove: () => mixed,
+    onChange: ChangeHandler,
+|};
+
+/* A single hint-row containing a hint editor and preview */
+class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
+    static defaultProps = {
+        highlightLint: false,
+    };
+
+    componentDidMount() {
+        this.updatePreview();
+    }
+
+    componentDidUpdate() {
+        this.updatePreview();
+    }
+
+    updatePreview = () => {
+        const shouldBold =
+            this.props.isLast && !/\*\*/.test(this.props.hint.content);
+
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.frame.sendNewData({
+            type: "hint",
+            data: {
+                hint: this.props.hint,
+                bold: shouldBold,
+                pos: this.props.pos,
+                apiOptions: this.props.apiOptions,
+                linterContext: {
+                    contentType: "hint",
+                    highlightLint: this.props.highlightLint,
+                    paths: this.props.contentPaths,
+                },
+            },
+        });
+    };
+
+    getSaveWarnings = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    };
+
+    serialize = (options: $FlowFixMe) => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.serialize(options);
+    };
+
+    focus = () => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.editor.focus();
+    };
+
+    render(): React.Node {
+        const isMobile =
+            this.props.deviceType === "phone" ||
+            this.props.deviceType === "tablet";
+        return (
+            <div
+                className={
+                    "perseus-combined-hint-editor " + "perseus-editor-row"
+                }
+            >
+                <div className="perseus-editor-left-cell">
+                    <HintEditor
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="editor"
+                        itemId={this.props.itemId}
+                        isFirst={this.props.isFirst}
+                        isLast={this.props.isLast}
+                        widgets={this.props.hint.widgets}
+                        content={this.props.hint.content}
+                        images={this.props.hint.images}
+                        replace={this.props.hint.replace}
+                        imageUploader={this.props.imageUploader}
+                        onChange={this.props.onChange}
+                        onRemove={this.props.onRemove}
+                        onMove={this.props.onMove}
+                        apiOptions={this.props.apiOptions}
+                    />
+                </div>
+                <div className="perseus-editor-right-cell">
+                    <DeviceFramer
+                        deviceType={this.props.deviceType}
+                        nochrome={true}
+                    >
+                        <IframeContentRenderer
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="frame"
+                            content={this.props.frameSource}
+                            datasetKey="mobile"
+                            datasetValue={isMobile}
+                            seamless={true}
+                        />
+                    </DeviceFramer>
+                </div>
+            </div>
+        );
+    }
+}
+
+type CombinedHintsEditorProps = {|
+    apiOptions?: APIOptions,
+    deviceType: DeviceType,
+    frameSource: string,
+    imageUploader?: ImageUploader,
+    highlightLint?: boolean,
+    hints: $ReadOnlyArray<Hint>,
+    onChange: ChangeHandler,
+
+    // The content ID of the AssessmentItem being edited. It may not be set
+    // for non-content library exercise questions.
+    itemId?: string,
+|};
+
+/* The entire hints editing/preview area
+ *
+ * Includes:
+ *  ~ All the hint edit boxes, move and remove buttons
+ *  ~ All the hint previews
+ *  ~ The "add a hint" button
+ */
+class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
+    static HintEditor: typeof HintEditor = HintEditor;
+
+    static defaultProps: {|
+        highlightLint: boolean,
+        hints: $ReadOnlyArray<any>,
+        onChange: () => void,
+    |} = {
+        onChange: () => {},
+        hints: [],
+        highlightLint: false,
+    };
+
+    handleHintChange: (
+        i: number,
+        newProps: CombinedHintsEditorProps,
+        cb: () => mixed,
+        silent: boolean,
+    ) => void = (
+        i: number,
+        newProps: CombinedHintsEditorProps,
+        cb: () => mixed,
+        silent: boolean,
+    ) => {
+        // TODO(joel) - lens
+        const hints = _(this.props.hints).clone();
+        hints[i] = _.extend(
+            {},
+            this.serializeHint(i, {keepDeletedWidgets: true}),
+            newProps,
+        );
+
+        this.props.onChange({hints: hints}, cb, silent);
+    };
+
+    handleHintRemove: (i: number) => void = (i: number) => {
+        const hints = _(this.props.hints).clone();
+        hints.splice(i, 1);
+        this.props.onChange({hints: hints});
+    };
+
+    handleHintMove: (i: number, dir: number) => void = (
+        i: number,
+        dir: number,
+    ) => {
+        const hints = _(this.props.hints).clone();
+        const hint = hints.splice(i, 1)[0];
+        hints.splice(i + dir, 0, hint);
+        this.props.onChange({hints: hints}, () => {
+            // eslint-disable-next-line react/no-string-refs
+            this.refs["hintEditor" + (i + dir)].focus();
+        });
+    };
+
+    addHint: () => void = () => {
+        const hints = _(this.props.hints)
+            .clone()
+            .concat([{content: ""}]);
+        this.props.onChange({hints: hints}, () => {
+            const i = hints.length - 1;
+            // eslint-disable-next-line react/no-string-refs
+            this.refs["hintEditor" + i].focus();
+        });
+    };
+
+    getSaveWarnings: () => any = () => {
+        return _.chain(this.props.hints)
+            .map((hint, i) => {
+                return _.map(
+                    // eslint-disable-next-line react/no-string-refs
+                    this.refs["hintEditor" + i].getSaveWarnings(),
+                    (issue) => "Hint " + (i + 1) + ": " + issue,
+                );
+            })
+            .flatten(true)
+            .value();
+    };
+
+    serialize: (options: any) => $ReadOnlyArray<string> = (
+        options: $FlowFixMe,
+    ) => {
+        return this.props.hints.map((hint, i) => {
+            return this.serializeHint(i, options);
+        });
+    };
+
+    serializeHint: (index: number, options: any) => string = (
+        index: number,
+        options: $FlowFixMe,
+    ): string => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs["hintEditor" + index].serialize(options);
+    };
+
+    render(): React.Element<"div"> {
+        const {itemId, hints} = this.props;
+        const hintElems = _.map(
+            hints,
+            function (hint, i) {
+                return (
+                    <CombinedHintEditor
+                        ref={"hintEditor" + i}
+                        key={"hintEditor" + i}
+                        isFirst={i === 0}
+                        isLast={i + 1 === hints.length}
+                        itemId={itemId}
+                        hint={hint}
+                        pos={i}
+                        imageUploader={this.props.imageUploader}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onChange={this.handleHintChange.bind(this, i)}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onRemove={this.handleHintRemove.bind(this, i)}
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onMove={this.handleHintMove.bind(this, i)}
+                        deviceType={this.props.deviceType}
+                        apiOptions={this.props.apiOptions}
+                        frameSource={this.props.frameSource}
+                        highlightLint={this.props.highlightLint}
+                        // TODO(CP-4838): what should be passed here?
+                        contentPaths={[]}
+                    />
+                );
+            },
+            this,
+        );
+
+        return (
+            <div className="perseus-hints-editor perseus-editor-table">
+                {hintElems}
+                <div className="perseus-editor-row">
+                    <div className="add-hint-container perseus-editor-left-cell">
+                        <button
+                            type="button"
+                            className="add-hint simple-button orange"
+                            onClick={this.addHint}
+                        >
+                            <InlineIcon {...iconPlus} /> Add a hint
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+        /* eslint-enable max-len */
+    }
+}
+
+export default CombinedHintsEditor;

package/src/i18n.jsx

@@ -0,0 +1,139 @@
+// @flow
+/**
+ * Functions for extracting data from items for use in i18n.
+ */
+import {traverse, MultiItems, PerseusMarkdown} from "@khanacademy/perseus";
+import _ from "underscore";
+
+const {findContentNodesInItem, findHintNodesInItem, inferItemShape} =
+    MultiItems;
+
+// Takes a renderer content and parses the markdown for images
+function findImagesInContent(content, images) {
+    const parsed = PerseusMarkdown.parse(content);
+
+    PerseusMarkdown.traverseContent(parsed, function (node) {
+        if (node.type === "image") {
+            images.push(node.target);
+        }
+    });
+}
+
+// Background images in some widgets are annoying to deal with because
+// sometimes the objects aren't full when there isn't an image. So, we do some
+// extra checking to make sure we don't cause an error or push an empty image.
+function handleBackgroundImage(graph, images) {
+    if (graph && graph.backgroundImage && graph.backgroundImage.url) {
+        images.push(graph.backgroundImage.url);
+    }
+}
+
+// The callback called for each widget. We check each of the areas of each
+// widget where they contain a renderer for images by calling
+// findImagesInContent. We don't have to recurse through child widgets, because
+// traverseRendererDeep does that for us.
+function widgetCallback(widgetInfo, images) {
+    if (!widgetInfo.options) {
+        return;
+    }
+
+    // TODO(emily/aria): Move this into the widget files, so we don't have the
+    // logic out here.
+    if (widgetInfo.type === "categorizer") {
+        _.each(widgetInfo.options.items, function (item) {
+            findImagesInContent(item, images);
+        });
+        _.each(widgetInfo.options.categories, function (category) {
+            findImagesInContent(category, images);
+        });
+    } else if (widgetInfo.type === "image") {
+        findImagesInContent(widgetInfo.options.title, images);
+        findImagesInContent(widgetInfo.options.caption, images);
+    } else if (widgetInfo.type === "matcher") {
+        _.each(widgetInfo.options.left, function (option) {
+            findImagesInContent(option, images);
+        });
+        _.each(widgetInfo.options.right, function (option) {
+            findImagesInContent(option, images);
+        });
+        _.each(widgetInfo.options.labels, function (label) {
+            findImagesInContent(label, images);
+        });
+    } else if (widgetInfo.type === "matrix") {
+        findImagesInContent(widgetInfo.options.prefix, images);
+        findImagesInContent(widgetInfo.options.suffix, images);
+    } else if (widgetInfo.type === "orderer") {
+        _.each(widgetInfo.options.options, function (option) {
+            findImagesInContent(option.content, images);
+        });
+    } else if (widgetInfo.type === "passage") {
+        findImagesInContent(widgetInfo.options.passageTitle, images);
+    } else if (widgetInfo.type === "radio") {
+        _.each(widgetInfo.options.choices, function (choice) {
+            findImagesInContent(choice.content, images);
+        });
+    } else if (widgetInfo.type === "sorter") {
+        _.each(widgetInfo.options.correct, function (option) {
+            findImagesInContent(option, images);
+        });
+    } else if (widgetInfo.type === "table") {
+        _.each(widgetInfo.options.headers, function (header) {
+            findImagesInContent(header, images);
+        });
+    }
+
+    if (widgetInfo.type === "grapher") {
+        handleBackgroundImage(widgetInfo.options.graph, images);
+    } else if (widgetInfo.type === "image") {
+        handleBackgroundImage(widgetInfo.options, images);
+    } else if (widgetInfo.type === "interactive-graph") {
+        handleBackgroundImage(widgetInfo.options, images);
+    } else if (widgetInfo.type === "measurer" && widgetInfo.options.image) {
+        images.push(widgetInfo.options.image.url);
+    } else if (widgetInfo.type === "plotter") {
+        images.push(widgetInfo.options.picUrl);
+    } else if (widgetInfo.type === "transformer") {
+        handleBackgroundImage(widgetInfo.options.graph, images);
+    }
+}
+
+function findImagesInRenderers(renderers) {
+    const images = [];
+
+    _.each(renderers, (renderer) => {
+        traverse(
+            renderer,
+            (content) => {
+                findImagesInContent(content, images);
+            },
+            (widget) => widgetCallback(widget, images),
+        );
+    });
+
+    return images;
+}
+
+// Calls findImagesInContent on all of the different content areas for
+// assessment items
+function findImagesInItemData(itemData: $FlowFixMe): $FlowFixMe {
+    let renderers = [];
+    if (itemData._multi) {
+        const shape = inferItemShape(itemData);
+        findContentNodesInItem(itemData, shape, (node) => renderers.push(node));
+        findHintNodesInItem(itemData, shape, (node) => renderers.push(node));
+    } else {
+        renderers = [itemData.question, ...itemData.hints];
+    }
+    return findImagesInRenderers(renderers);
+}
+
+// Calls findImagesInContent on all of the different content areas for
+// articles
+function findImagesInArticles(perseusContent: $FlowFixMe): $FlowFixMe {
+    return findImagesInRenderers(perseusContent);
+}
+
+export default {
+    findImagesInArticles: findImagesInArticles,
+    findImagesInItemData: findImagesInItemData,
+};