@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/iframe-content-renderer.jsx

@@ -0,0 +1,201 @@
+// @flow
+/**
+ * Displays the given content in an iframe, isolating it from the parent page
+ *
+ * To simulate the environment of content rendered by itself, content previews
+ * are rendered inside iframes, where components such as the math keypad work
+ * because the body of the document is not the body of the editor. To make this
+ * work, this component renders an iframe and can communicate objects to it
+ * through postMessage. The recipient then needs to listen for these messages
+ * and pull out the appropriate object stored in the parent's iframeDataStore
+ * to get the data to render. When the iframe is loaded, it's javascript calls
+ * its requestIframeData function in the parent, which triggers the parent to
+ * send the current data.
+ */
+
+import {Log} from "@khanacademy/perseus";
+import createReactClass from "create-react-class";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+let nextIframeID = 0;
+const requestIframeData = {};
+const updateIframeHeight = {};
+window.iframeDataStore = {};
+
+// This is called once after Perseus is loaded and the iframe
+// is ready to render content, then twice a second afterwards
+// to capture the result of animations.
+window.addEventListener("message", (event) => {
+    if (typeof event.data === "string") {
+        // In Perseus, we expect the callback to exist, as it is added by
+        // `IframeContentRenderer.componentDidMount()`. Unfortunately, this
+        // event listener also gets added in Manticore (since we include Perseus
+        // from there), and Crowdin fires its own "message" events. So we'll
+        // just have to ignore the event when we can't find the callback.
+        const callback = requestIframeData[event.data];
+        if (callback) {
+            callback();
+        }
+    } else if (event.data.id) {
+        if (event.data.height !== undefined) {
+            updateIframeHeight[event.data.id](event.data.height);
+        } else if (event.data.lintWarnings) {
+            // This is a lint report being sent back from the linter.
+            // TODO:
+            // We'll want to display the number of warnings in the HUD.
+            // But for now, we just log it to the console
+            Log.log("LINTER REPORT", {
+                lintWarnings: JSON.stringify(event.data.lintWarnings),
+            });
+        }
+    }
+});
+
+const IframeContentRenderer: $FlowFixMe = createReactClass({
+    displayName: "IframeContentRenderer",
+
+    propTypes: {
+        // The HTML content to render to the iframe
+        content: PropTypes.string.isRequired,
+
+        // The data-* suffix for passing information to the iframe's JS
+        datasetKey: PropTypes.any,
+
+        // The value of the data-* attribute
+        datasetValue: PropTypes.any,
+
+        // Whether to make the iframe's height match its content's height,
+        // used to prevent scrolling inside the iframe.
+        seamless: PropTypes.bool,
+    },
+
+    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;
+
+        this.iframeID = nextIframeID;
+        nextIframeID++;
+
+        this._prepareFrame();
+        requestIframeData[this.iframeID] = () => {
+            this.sendNewData(this._lastData);
+        };
+
+        updateIframeHeight[this.iframeID] = (height) => {
+            this._lastHeight = height;
+            if (this._isMounted && this.props.seamless) {
+                // eslint-disable-next-line react/no-string-refs
+                this.refs.container.style.height = height + "px";
+            }
+        };
+    },
+
+    shouldComponentUpdate: function (nextProps) {
+        return (
+            nextProps.content !== this.props.content ||
+            nextProps.datasetValue !== this.props.datasetValue ||
+            nextProps.seamless !== this.props.seamless
+        );
+    },
+
+    componentDidUpdate: function (prevProps) {
+        if (!this.props.seamless) {
+            // eslint-disable-next-line react/no-string-refs
+            this.refs.container.style.height = "100%";
+        } else {
+            // eslint-disable-next-line react/no-string-refs
+            this.refs.container.style.height = this._lastHeight + "px";
+        }
+
+        if (
+            prevProps.content !== this.props.content ||
+            prevProps.datasetValue !== this.props.datasetValue
+        ) {
+            // Not just a change in seamless
+            this._prepareFrame();
+        }
+    },
+
+    componentWillUnmount: function () {
+        requestIframeData[this.iframeID] = null;
+        updateIframeHeight[this.iframeID] = null;
+
+        this._isMounted = false;
+    },
+
+    _prepareFrame: function () {
+        // Don't initialize the iframe until the page has loaded
+        if (this._frame) {
+            // eslint-disable-next-line react/no-string-refs
+            this.refs.container.removeChild(this._frame);
+        }
+
+        this._frame = document.createElement("iframe");
+        this._frame.style.width = "100%";
+        this._frame.style.height = "100%";
+
+        if (this.props.datasetKey) {
+            // If the user has specified a data-* attribute to place on the
+            // iframe, we set it here. Right now, this is used to
+            // communicate if the iframe should be enabling touch emulation.
+            this._frame.dataset[this.props.datasetKey] =
+                this.props.datasetValue;
+        }
+        this._frame.dataset.id = this.iframeID;
+
+        if (this.props.seamless) {
+            // The seamless prop is the same as the "nochrome" prop that
+            // gets passed to DeviceFramer. If it is set, then we're going
+            // to be displaying editor previews and want to leave some room
+            // for lint indicators in the right margin. We use the dataset
+            // as above to pass this information on to the perseus-frame
+            // component inside the iframe
+            this._frame.dataset.lintGutter = "true";
+        }
+
+        // To make sure the value of location.href inside the iframe is the
+        // same as the location of the parent, we wait for the iframe to
+        // load before writing contents. Without the wait, the location
+        // inside the iframe becomes "about:blank", which causes problems
+        // with loading $LAB.
+        this._frame.onload = () => {
+            this._frame.onload = null;
+
+            // To prevent an issue with the contents of the iframe not being
+            // loaded properly, where the javascript inside the iframe is
+            // not executed, we push the content window write to the end
+            // of the event queue.
+            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
+            // eslint-disable-next-line no-restricted-syntax
+            setTimeout(() => {
+                this._frame.contentWindow.document.open();
+                this._frame.contentWindow.document.write(this.props.content);
+                this._frame.contentWindow.document.close();
+            });
+        };
+
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.container.appendChild(this._frame);
+    },
+
+    sendNewData: function (data) {
+        if (this._isMounted && data && this._frame.contentWindow) {
+            this._lastData = data;
+
+            // We can't use JSON.stringify/parse for this because the apiOptions
+            // includes the functions GroupMetadataEditor, groupAnnotator,
+            // onFocusChange, and onInputError.
+            window.iframeDataStore[this.iframeID] = data;
+            this._frame.contentWindow.postMessage(this.iframeID, "*");
+        }
+    },
+
+    render: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return <div ref="container" style={{width: "100%", height: "100%"}} />;
+    },
+});
+
+export default IframeContentRenderer;

package/src/index.js

@@ -1,9 +1,28 @@
 // @flow
-import {foo} from "@khanacademy/perseus";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-
-export const bar = (): void => {
-    const msg = i18n._("foo() = %(foo)s", {foo: foo()});
-    // eslint-disable-next-line no-console
-    console.log(msg);
-};
+export * as Perseus from "@khanacademy/perseus";
+
+export {default as ArticleEditor} from "./article-editor.jsx";
+export {default as DeviceFramer} from "./components/device-framer.jsx";
+export {default as ViewportResizer} from "./components/viewport-resizer.jsx";
+export {default as ArticleDiff} from "./diffs/article-diff.jsx";
+export {default as ItemDiff} from "./diffs/item-diff.jsx";
+export {default as StructuredItemDiff} from "./diffs/structured-item-diff.jsx";
+export {default as EditorPage} from "./editor-page.jsx";
+export {default as Editor} from "./editor.jsx";
+export {default as i18n} from "./i18n.jsx";
+export {default as IframeContentRenderer} from "./iframe-content-renderer.jsx";
+export {default as MultiRendererEditor} from "./multirenderer-editor.jsx";
+export {default as StatefulArticleEditor} from "./stateful-article-editor.jsx";
+export {default as StatefulEditorPage} from "./stateful-editor-page.jsx";
+
+import "./styles/perseus-editor.less";
+
+// eslint-disable-next-line import/order
+import {Widgets} from "@khanacademy/perseus";
+import AllEditors from "./all-editors.js";
+import AllWidgets from "./all-widgets.js";
+
+Widgets.registerEditors(AllEditors);
+Widgets.registerWidgets(AllWidgets);
+
+export {AllEditors, AllWidgets};

package/src/item-editor.jsx

@@ -0,0 +1,159 @@
+// @flow
+import {itemDataVersion} 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 ItemExtrasEditor from "./item-extras-editor.jsx";
+
+import type {
+    APIOptions,
+    ImageUploader,
+    ChangeHandler,
+} from "@khanacademy/perseus";
+
+const ITEM_DATA_VERSION = itemDataVersion;
+
+type Props = {|
+    apiOptions?: APIOptions,
+    deviceType?: string,
+    frameSource: string,
+    gradeMessage?: string,
+    imageUploader?: ImageUploader,
+    wasAnswered?: boolean,
+    question?: $FlowFixMe,
+    answerArea?: $FlowFixMe,
+    onChange: ChangeHandler,
+
+    // The content ID of the AssessmentItem being edited. It may not be set
+    // for non-content library exercise questions.
+    itemId?: string,
+|};
+
+class ItemEditor extends React.Component<Props> {
+    static defaultProps: {|
+        answerArea: {...},
+        onChange: () => void,
+        question: {...},
+    |} = {
+        onChange: () => {},
+        question: {},
+        answerArea: {},
+    };
+
+    // Notify the parent that the question or answer area has been updated.
+    updateProps: ChangeHandler = (newProps, cb, silent) => {
+        const props = _(this.props).pick("question", "answerArea");
+
+        this.props.onChange(_(props).extend(newProps), cb, silent);
+    };
+
+    triggerPreviewUpdate: (newData: any) => void = (newData: $FlowFixMe) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.frame.sendNewData(newData);
+    };
+
+    handleEditorChange: ChangeHandler = (newProps, cb, silent) => {
+        const question = _.extend({}, this.props.question, newProps);
+        this.updateProps({question}, cb, silent);
+    };
+
+    handleItemExtrasChange: ChangeHandler = (newProps, cb, silent) => {
+        const answerArea = _.extend({}, this.props.answerArea, newProps);
+        this.updateProps({answerArea}, cb, silent);
+    };
+
+    getSaveWarnings: () => any = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.questionEditor.getSaveWarnings();
+    };
+
+    serialize: (options: any) => {|
+        answerArea: any,
+        itemDataVersion: {|major: number, minor: number|},
+        question: any,
+    |} = (options: $FlowFixMe) => {
+        return {
+            // eslint-disable-next-line react/no-string-refs
+            question: this.refs.questionEditor.serialize(options),
+            // eslint-disable-next-line react/no-string-refs
+            answerArea: this.refs.itemExtrasEditor.serialize(options),
+            itemDataVersion: ITEM_DATA_VERSION,
+        };
+    };
+
+    render(): React.Element<"div"> {
+        const isMobile =
+            this.props.deviceType === "phone" ||
+            this.props.deviceType === "tablet";
+        return (
+            <div className="perseus-editor-table">
+                <div className="perseus-editor-row perseus-question-container">
+                    <div className="perseus-editor-left-cell">
+                        <div className="pod-title">Question</div>
+                        <Editor
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="questionEditor"
+                            // 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}
+                            placeholder="Type your question here..."
+                            className="perseus-question-editor"
+                            imageUploader={this.props.imageUploader}
+                            onChange={this.handleEditorChange}
+                            apiOptions={this.props.apiOptions}
+                            showWordCount={true}
+                            {...this.props.question}
+                        />
+                    </div>
+
+                    <div className="perseus-editor-right-cell">
+                        <div id="problemarea">
+                            <DeviceFramer
+                                deviceType={this.props.deviceType}
+                                nochrome={true}
+                            >
+                                <IframeContentRenderer
+                                    // eslint-disable-next-line react/no-string-refs
+                                    ref="frame"
+                                    key={this.props.deviceType}
+                                    content={this.props.frameSource}
+                                    datasetKey="mobile"
+                                    datasetValue={isMobile}
+                                    seamless={true}
+                                />
+                            </DeviceFramer>
+                            <div
+                                id="hintsarea"
+                                className="hintsarea"
+                                style={{display: "none"}}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="perseus-editor-row perseus-answer-container">
+                    <div className="perseus-editor-left-cell">
+                        <div className="pod-title">Question extras</div>
+                        <ItemExtrasEditor
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="itemExtrasEditor"
+                            onChange={this.handleItemExtrasChange}
+                            {...this.props.answerArea}
+                        />
+                    </div>
+
+                    <div className="perseus-editor-right-cell">
+                        <div id="answer_area" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ItemEditor;

package/src/item-extras-editor.jsx

@@ -0,0 +1,150 @@
+// @flow
+import {components} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const {InfoTip} = components;
+
+type Props = $FlowFixMe;
+
+class ItemExtrasEditor extends React.Component<Props> {
+    static propTypes = {
+        calculator: PropTypes.bool,
+        chi2Table: PropTypes.bool,
+        onChange: PropTypes.func.isRequired,
+        periodicTable: PropTypes.bool,
+        tTable: PropTypes.bool,
+        zTable: PropTypes.bool,
+    };
+
+    static defaultProps: Props = {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    };
+
+    serialize: () => $FlowFixMe = () => {
+        return {
+            calculator: this.props.calculator,
+            chi2Table: this.props.chi2Table,
+            periodicTable: this.props.periodicTable,
+            tTable: this.props.tTable,
+            zTable: this.props.zTable,
+        };
+    };
+
+    render(): React.Node {
+        return (
+            <div className="perseus-answer-editor">
+                <div className="perseus-answer-options">
+                    <div>
+                        <label>
+                            Show calculator:{" "}
+                            <input
+                                type="checkbox"
+                                checked={this.props.calculator}
+                                onChange={(e) => {
+                                    this.props.onChange({
+                                        calculator: e.target.checked,
+                                    });
+                                }}
+                            />
+                        </label>
+                        <InfoTip>
+                            Use the calculator when completing difficult
+                            calculations is NOT the intent of the question.
+                            DON’T use the calculator when testing the student’s
+                            ability to complete different types of computations.
+                        </InfoTip>
+                    </div>
+
+                    <div>
+                        <label>
+                            Show periodic table:{" "}
+                            <input
+                                type="checkbox"
+                                checked={this.props.periodicTable}
+                                onChange={(e) => {
+                                    this.props.onChange({
+                                        periodicTable: e.target.checked,
+                                    });
+                                }}
+                            />
+                        </label>
+                        <InfoTip>
+                            This provides the student with the ability to view a
+                            periodic table of the elements, e.g., for answering
+                            chemistry questions.
+                        </InfoTip>
+                    </div>
+
+                    <div>
+                        <label>
+                            Show z table (statistics):{" "}
+                            <input
+                                type="checkbox"
+                                checked={this.props.zTable}
+                                onChange={(e) => {
+                                    this.props.onChange({
+                                        zTable: e.target.checked,
+                                    });
+                                }}
+                            />
+                        </label>
+                        <InfoTip>
+                            This provides the student with the ability to view a
+                            table of critical values for the z distribution,
+                            e.g. for answering statistics questions.
+                        </InfoTip>
+                    </div>
+
+                    <div>
+                        <label>
+                            Show t table (statistics):{" "}
+                            <input
+                                type="checkbox"
+                                checked={this.props.tTable}
+                                onChange={(e) => {
+                                    this.props.onChange({
+                                        tTable: e.target.checked,
+                                    });
+                                }}
+                            />
+                        </label>
+                        <InfoTip>
+                            This provides the student with the ability to view a
+                            table of critical values for the Student's t
+                            distribution, e.g. for answering statistics
+                            questions.
+                        </InfoTip>
+                    </div>
+
+                    <div>
+                        <label>
+                            Show chi-squared table (statistics):{" "}
+                            <input
+                                type="checkbox"
+                                checked={this.props.chi2Table}
+                                onChange={(e) => {
+                                    this.props.onChange({
+                                        chi2Table: e.target.checked,
+                                    });
+                                }}
+                            />
+                        </label>
+                        <InfoTip>
+                            This provides the student with the ability to view a
+                            table of critical values for the chi-squared
+                            distribution, e.g. for answering statistics
+                            questions.
+                        </InfoTip>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ItemExtrasEditor;

package/src/katex-error-view.jsx

@@ -0,0 +1,87 @@
+// @flow
+/**
+ * Displays a collapsable list of KaTeX rendering errors.
+ */
+import {css, StyleSheet} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+type Props = $FlowFixMe;
+type State = $FlowFixMe;
+
+class KatexErrorView extends React.Component<Props, State> {
+    static propTypes = {
+        errorList: PropTypes.arrayOf(
+            PropTypes.shape({
+                math: PropTypes.string.isRequired,
+                message: PropTypes.string.isRequired,
+            }),
+        ).isRequired,
+    };
+
+    state: State = {
+        showErrors: false,
+    };
+
+    handleToggleKatexErrors: (SyntheticMouseEvent<>) => void = (e) => {
+        this.setState({showErrors: !this.state.showErrors});
+    };
+
+    render(): React.Node {
+        const {errorList} = this.props;
+        const {showErrors} = this.state;
+
+        // TODO(riley) replace with SVG icons
+        const disclosureClass = showErrors
+            ? "icon-chevron-down"
+            : "icon-chevron-right";
+
+        return (
+            <div className={css(styles.errorContainer)}>
+                <div
+                    className={css(styles.title)}
+                    onClick={this.handleToggleKatexErrors}
+                >
+                    <i className={disclosureClass} style={{fontSize: 14}} />
+                    &nbsp; KaTeX Errors ({errorList.length})
+                </div>
+                {showErrors && (
+                    <div className={css(styles.errorExplanation)}>
+                        These errors will cause your LaTeX to load really slowly
+                        for the student. Please fix them if you can. If you
+                        can’t because KaTeX doesn’t support the feature you
+                        need, please message Cam.
+                    </div>
+                )}
+                {showErrors &&
+                    errorList.map((e, index) => (
+                        <div className={css(styles.error)} key={index}>
+                            <div style={{color: "red"}}>{e.math}</div>
+                            <div>{e.message}</div>
+                        </div>
+                    ))}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    title: {
+        backgroundColor: "#eee",
+        fontSize: "1.25em",
+        padding: "4px 10px",
+    },
+    errorContainer: {
+        border: "1px solid #ddd",
+        borderTop: "none",
+    },
+    errorExplanation: {
+        padding: "4px 10px",
+        backgroundColor: "pink",
+    },
+    error: {
+        padding: "4px 10px",
+    },
+});
+
+export default KatexErrorView;