@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/section-control-button.jsx

@@ -0,0 +1,53 @@
+// @flow
+
+import {components} from "@khanacademy/perseus";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+const {InlineIcon} = components;
+
+type InlineIconProps = React.ElementConfig<typeof InlineIcon>;
+
+type SectionControlButtonProps = {|
+    icon: InlineIconProps,
+    onClick: () => mixed,
+    title: string,
+|};
+
+export default class SectionControlButton extends React.Component<SectionControlButtonProps> {
+    render(): React$Element<typeof Clickable> {
+        const {icon, onClick, title} = this.props;
+
+        return (
+            <Clickable
+                className={
+                    "section-control-button " +
+                    "simple-button " +
+                    "simple-button--small "
+                }
+                onClick={(e) => {
+                    e.preventDefault();
+                    onClick();
+                }}
+                role="button"
+                hideDefaultFocusRing={true}
+                aria-label={title}
+                style={styles.button}
+            >
+                {({hovered, focused, pressed}) => <InlineIcon {...icon} />}
+            </Clickable>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: Color.gold,
+        margin: 2,
+        paddingRight: 10,
+        paddingLeft: 10,
+        paddingBottom: 2,
+    },
+});

package/src/stateful-article-editor.jsx

@@ -0,0 +1,176 @@
+/* eslint-disable react/no-unsafe */
+// @flow
+
+/**
+ * Renders an ArticleEditor as a non-controlled component.
+ *
+ * Normally the parent of ArticleEditor must pass it an onChange callback and
+ * then respond to any changes by modifying the ArticleEditor props to reflect
+ * those changes. With StatefulArticleEditor changes are stored in state so you
+ * can query them with serialize.
+ */
+
+import createReactClass from "create-react-class";
+import * as React from "react";
+import _ from "underscore";
+
+import ArticleEditor from "./article-editor.jsx";
+
+// $FlowFixMe[signature-verification-failure]
+const StatefulArticleEditor = createReactClass({
+    displayName: "StatefulArticleEditor",
+
+    getInitialState: function () {
+        return _({}).extend(this.props, {
+            mode: "edit",
+            onChange: this.handleChange,
+            ref: "editor",
+            screen: "phone",
+        });
+    },
+
+    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;
+    },
+
+    // getInitialState isn't called if the react component is re-rendered
+    // in-place on the dom, in which case this is called instead, so we
+    // need to update the state here.
+    // (This component is currently re-rendered by the "Add image" button.)
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
+        // be careful not to overwrite our onChange and ref
+        this.setState(_(nextProps).omit("onChange", "ref"));
+    },
+
+    componentWillUnmount: function () {
+        this._isMounted = false;
+    },
+
+    getSaveWarnings: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    },
+
+    serialize: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.serialize();
+    },
+
+    handleChange: function (newState, cb) {
+        if (this._isMounted) {
+            this.setState(newState, cb);
+        }
+    },
+
+    scorePreview: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.scorePreview();
+    },
+
+    render: function () {
+        const {mode, screen} = this.state;
+        return (
+            <div>
+                <div style={styles.controlBar}>
+                    <span style={styles.controls}>
+                        Mode:{" "}
+                        <span
+                            onClick={() => this.setState({mode: "edit"})}
+                            style={
+                                mode === "edit"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            EDIT
+                        </span>
+                        {" | "}
+                        <span
+                            onClick={() => this.setState({mode: "preview"})}
+                            style={
+                                mode === "preview"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            PREVIEW
+                        </span>
+                        {" | "}
+                        <span
+                            onClick={() => this.setState({mode: "json"})}
+                            style={
+                                mode === "json"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            JSON
+                        </span>
+                    </span>
+                    <span style={styles.controls}>
+                        Screen:{" "}
+                        <span
+                            onClick={() => this.setState({screen: "phone"})}
+                            style={
+                                screen === "phone"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            PHONE
+                        </span>
+                        {" | "}
+                        <span
+                            onClick={() => this.setState({screen: "tablet"})}
+                            style={
+                                screen === "tablet"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            TABLET
+                        </span>
+                        {" | "}
+                        <span
+                            onClick={() => this.setState({screen: "desktop"})}
+                            style={
+                                screen === "desktop"
+                                    ? styles.controlSelected
+                                    : styles.control
+                            }
+                        >
+                            DESKTOP
+                        </span>
+                    </span>
+                </div>
+                <div style={styles.editor}>
+                    <ArticleEditor {...this.state} />
+                </div>
+            </div>
+        );
+    },
+});
+
+const styles = {
+    controlBar: {
+        marginBottom: 25,
+        marginTop: 5,
+    },
+    controls: {
+        marginRight: 10,
+    },
+    controlSelected: {
+        cursor: "default",
+        fontWeight: 700,
+    },
+    control: {
+        cursor: "pointer",
+    },
+    editor: {
+        marginTop: -20,
+    },
+};
+
+export default StatefulArticleEditor;

package/src/stateful-editor-page.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable react/no-unsafe, react/sort-comp */
+// @flow
+import createReactClass from "create-react-class";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import EditorPage from "./editor-page.jsx";
+
+/* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
+ *
+ * Normally the parent of EditorPage must pass it an onChange callback and then
+ * respond to any changes by modifying the EditorPage props to reflect those
+ * changes. With StatefulEditorPage changes are stored in state so you can
+ * query them with serialize.
+ */
+// $FlowFixMe[signature-verification-failure]
+const StatefulEditorPage = createReactClass({
+    displayName: "StatefulEditorPage",
+
+    propTypes: {
+        componentClass: PropTypes.func,
+    },
+
+    getDefaultProps: function () {
+        return {
+            componentClass: EditorPage,
+        };
+    },
+
+    render: function () {
+        const Component = this.props.componentClass;
+        return <Component {...this.state} />;
+    },
+
+    getInitialState: function () {
+        return _({}).extend(_.omit(this.props, "componentClass"), {
+            onChange: this.handleChange,
+            ref: "editor",
+        });
+    },
+
+    componentDidMount: function () {
+        this._isMounted = true;
+    },
+
+    componentWillUnmount: function () {
+        this._isMounted = false;
+    },
+
+    // getInitialState isn't called if the react component is re-rendered
+    // in-place on the dom, in which case this is called instead, so we
+    // need to update the state here.
+    // (This component is currently re-rendered by the "Add image" button.)
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
+        this.setState(
+            _(nextProps).pick(
+                "apiOptions",
+                "imageUploader",
+                "developerMode",
+                "problemNum",
+                "previewDevice",
+                "frameSource",
+            ),
+        );
+    },
+
+    getSaveWarnings: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.getSaveWarnings();
+    },
+
+    serialize: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.serialize();
+    },
+
+    handleChange: function (newState, cb) {
+        if (this._isMounted) {
+            this.setState(newState, cb);
+        }
+    },
+
+    scorePreview: function () {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.editor.scorePreview();
+    },
+});
+
+export default StatefulEditorPage;