@khanacademy/perseus-editor 2.2.2 → 2.3.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.2.2",
+    "version": "2.3.1",
     "publishConfig": {
         "access": "public"
     },
@@ -23,13 +23,16 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/perseus": "^6.2.1"
+        "@khanacademy/perseus": "^6.3.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",
         "@khanacademy/wonder-blocks-clickable": "^3.0.8",
         "@khanacademy/wonder-blocks-color": "^2.0.1",
+        "@khanacademy/wonder-blocks-core": "^5.0.4",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-typography": "^2.0.8",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -45,7 +48,10 @@
         "@khanacademy/wonder-blocks-button": "^4.0.8",
         "@khanacademy/wonder-blocks-clickable": "^3.0.8",
         "@khanacademy/wonder-blocks-color": "^2.0.1",
+        "@khanacademy/wonder-blocks-core": "^5.0.4",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-typography": "^2.0.8",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -56,4 +62,4 @@
         "underscore": "^1.4.4"
     },
     "keywords": []
-}
+}

package/src/__stories__/editor.stories.tsx

@@ -1,17 +1,21 @@
-import {ApiOptions} from "@khanacademy/perseus";
+/* eslint-disable react/prop-types */
+import {ApiOptions, PerseusRenderer} from "@khanacademy/perseus";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
+import SideBySide from "../../../../testing/side-by-side";
 import {question1} from "../__testdata__/input-number.testdata";
 import Editor from "../editor";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
+registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
+
 export default {
     title: "Perseus/Editor",
 };
 
-export const Rational = (): React.ReactElement => {
-    registerAllWidgetsAndEditorsForTesting();
-
+export const Demo = (): React.ReactElement => {
     return (
         <Editor
             apiOptions={ApiOptions.defaults}
@@ -29,3 +33,100 @@ export const Rational = (): React.ReactElement => {
         />
     );
 };
+
+export const DemoInteractiveGraph = (): React.ReactElement => {
+    const editorRef = React.useRef<Editor>(null);
+    const [options, setOptions] = React.useState({});
+    const [content, setContent] = React.useState(
+        "[[\u2603 interactive-graph 1]]",
+    );
+    const [images, setImages] = React.useState<PerseusRenderer["images"]>({});
+    const [widgets, setWidgets] = React.useState<PerseusRenderer["widgets"]>({
+        "interactive-graph 1": {
+            options: {
+                labels: ["x", "y"],
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                gridStep: [1, 1],
+                snapStep: [1, 1],
+                step: [1, 1],
+                backgroundImage: {
+                    url: null,
+                },
+                markings: "graph",
+                showProtractor: false,
+                showRuler: false,
+                showTooltips: false,
+                rulerLabel: "",
+                rulerTicks: 10,
+                graph: {
+                    type: "linear",
+                    coords: [
+                        [1, 1],
+                        [5, 5],
+                    ],
+                },
+                correct: {
+                    type: "linear",
+                },
+            },
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    });
+
+    return (
+        // Many of the editor components use scoped CSS that requires this
+        // class to be above it.
+        // TODO: Refactor to aphrodite styles instead of scoped CSS in Less.
+        <div className="framework-perseus">
+            <SideBySide
+                leftTitle="Editor"
+                left={
+                    <View style={{width: "360px", margin: "20px"}}>
+                        <Editor
+                            ref={editorRef}
+                            apiOptions={ApiOptions.defaults}
+                            content={content}
+                            placeholder=""
+                            widgets={widgets}
+                            images={images}
+                            disabled={false}
+                            widgetEnabled={true}
+                            immutableWidgets={false}
+                            showWordCount={true}
+                            warnNoPrompt={false}
+                            warnNoWidgets={true}
+                            onChange={(props: Partial<PerseusRenderer>) => {
+                                action("onChange")(props);
+                                if (props.content) {
+                                    setContent(props.content);
+                                } else if (props.widgets) {
+                                    setWidgets(props.widgets);
+                                } else if (props.images) {
+                                    setImages(props.images);
+                                }
+                                // We need to wait for one tick so that the editor
+                                // has been re-rendered with the changed props. If
+                                // we don't wait, we get the values from the n-1
+                                // render and miss the latest change.
+                                setTimeout(() => {
+                                    setOptions(
+                                        editorRef.current?.serialize() || {},
+                                    );
+                                }, 0);
+                            }}
+                        />
+                    </View>
+                }
+                rightTitle="Serialized Widget Options"
+                jsonObject={options}
+            />
+        </div>
+    );
+};

package/src/article-editor.tsx

@@ -17,9 +17,9 @@ import _ from "underscore";
 
 import DeviceFramer from "./components/device-framer";
 import JsonEditor from "./components/json-editor";
+import SectionControlButton from "./components/section-control-button";
 import Editor from "./editor";
 import IframeContentRenderer from "./iframe-content-renderer";
-import SectionControlButton from "./section-control-button";
 
 import type {APIOptions} from "@khanacademy/perseus";
 

package/src/{__stories__ → components/__stories__}/section-control-button.stories.tsx

@@ -10,7 +10,7 @@ type Story = {
 };
 
 export default {
-    title: "Perseus Editor/Widgets/Section Control Button",
+    title: "Perseus/Editor/Components/Section Control Button",
 } as Story;
 
 export const ButtonForEditingSectionsOfContentWithInArticleEditor = (

package/src/components/graph-points-count-selector.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import {PointValue, UNLIMITED, parsePointCount} from "../util/points";
+
+const GraphPointsCountSelector = ({
+    numPoints = 1,
+    onChange,
+}: {
+    numPoints?: PointValue;
+    onChange: (points: PointValue) => void;
+}) => {
+    return (
+        <select
+            value={numPoints}
+            onChange={(e) => {
+                onChange(parsePointCount(e.target.value));
+            }}
+        >
+            {[...Array(7).keys()].map((n) => (
+                <option key={n} value={n}>
+                    {`${n} point${n > 1 ? "s" : ""}`}
+                </option>
+            ))}
+            <option value={UNLIMITED}>unlimited</option>
+        </select>
+    );
+};
+
+export default GraphPointsCountSelector;

package/src/components/graph-type-selector.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type GraphTypeSelectorProps = {
+    graphType: string;
+    onChange: (newGraphType: string) => void;
+};
+
+const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
+    return (
+        <select
+            value={props.graphType}
+            onChange={(e) => {
+                const type = e.target.value;
+                props.onChange(type);
+            }}
+        >
+            <option value="linear">Linear function</option>
+            <option value="quadratic">Quadratic function</option>
+            <option value="sinusoid">Sinusoid function</option>
+            <option value="circle">Circle</option>
+            <option value="point">Point(s)</option>
+            <option value="linear-system">Linear System</option>
+            <option value="polygon">Polygon</option>
+            <option value="segment">Line Segment(s)</option>
+            <option value="ray">Ray</option>
+            <option value="angle">Angle</option>
+        </select>
+    );
+};
+
+export default GraphTypeSelector;

package/src/components/json-editor.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable react/no-unsafe */
 /* eslint-disable react/sort-comp */

package/src/components/segment-count-selector.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import _ from "underscore";
+
+const SegmentCountSelector = ({
+    numSegments = 1,
+    onChange,
+}: {
+    numSegments?: number;
+    onChange: (numSegments: number) => void;
+}) => (
+    <select
+        key="segment-select"
+        value={numSegments}
+        onChange={(e) => {
+            const num = +e.target.value;
+            onChange(num);
+        }}
+    >
+        {_.range(1, 7).map((n) => (
+            <option key={n} value={n}>
+                {`${n} segment${n > 1 ? "s" : ""}`}
+            </option>
+        ))}
+    </select>
+);
+
+export default SegmentCountSelector;

package/src/components/widget-editor.tsx

@@ -0,0 +1,232 @@
+import {
+    components,
+    icons,
+    Widgets,
+    WIDGET_PROP_DENYLIST,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import SectionControlButton from "./section-control-button";
+
+import type {Alignment, WidgetInfo} from "@khanacademy/perseus";
+
+const {InlineIcon, PropCheckBox} = components;
+const {iconChevronDown, iconChevronRight, iconTrash} = icons;
+
+type WidgetEditorProps = {
+    // Unserialized props
+    id: string;
+    onChange: (
+        widgetInfo: WidgetInfo,
+        cb?: () => unknown,
+        silent?: boolean,
+    ) => unknown;
+    onRemove: () => unknown;
+    apiOptions: any;
+} & WidgetInfo;
+
+type WidgetEditorState = {
+    showWidget: boolean;
+    widgetInfo: WidgetInfo;
+};
+
+const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
+    // We can't call serialize here because this.refs.widget
+    // doesn't exist before this component is mounted.
+    const filteredProps = _.omit(props, WIDGET_PROP_DENYLIST);
+    // @ts-expect-error [FEI-5003] - TS2322 - Type 'PerseusWidget' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'. | TS2345 - Argument of type 'Partial<{ id: string; onChange: (widgetInfo: PerseusWidget, cb?: (() => unknown) | undefined, silent?: boolean | undefined) => unknown; onRemove: () => unknown; apiOptions: any; } & CategorizerWidget & { ...; }> | ... 38 more ... | Partial<...>' is not assignable to parameter of type 'PerseusWidget'.
+    return Widgets.upgradeWidgetInfoToLatestVersion(filteredProps);
+};
+
+// This component handles upgading widget editor props via prop
+// upgrade transforms. Widget editors will always be rendered
+// with all available transforms applied, but the results of those
+// transforms will not be propogated upwards until serialization.
+// eslint-disable-next-line react/no-unsafe
+class WidgetEditor extends React.Component<
+    WidgetEditorProps,
+    WidgetEditorState
+> {
+    constructor(props: WidgetEditorProps) {
+        super(props);
+        this.state = {
+            showWidget: false,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
+            widgetInfo: _upgradeWidgetInfo(props),
+        };
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
+        // @ts-expect-error [FEI-5003] - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
+        this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});
+    }
+
+    _toggleWidget = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        this.setState({showWidget: !this.state.showWidget});
+    };
+
+    _handleWidgetChange = (
+        newProps: WidgetEditorProps,
+        cb: () => unknown,
+        silent: boolean,
+    ) => {
+        const newWidgetInfo = Object.assign(
+            {},
+            this.state.widgetInfo,
+        ) as WidgetInfo;
+        newWidgetInfo.options = Object.assign(
+            // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
+            this.refs.widget.serialize(),
+            newProps,
+        );
+        this.props.onChange(newWidgetInfo, cb, silent);
+    };
+
+    _toggleStatic = (e: Event) => {
+        e.preventDefault();
+        const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
+            static: !this.state.widgetInfo.static,
+        }) as WidgetInfo;
+        this.props.onChange(newWidgetInfo);
+    };
+
+    _handleAlignmentChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+        const newAlignment = e.currentTarget.value as Alignment;
+        const newWidgetInfo = Object.assign(
+            {},
+            this.state.widgetInfo,
+        ) as WidgetInfo;
+        newWidgetInfo.alignment = newAlignment;
+        this.props.onChange(newWidgetInfo);
+    };
+
+    getSaveWarnings = () => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
+        const issuesFunc = this.refs.widget.getSaveWarnings;
+        return issuesFunc ? issuesFunc() : [];
+    };
+
+    serialize = () => {
+        // TODO(alex): Make this properly handle the case where we load json
+        // with a more recent widget version than this instance of Perseus
+        // knows how to handle.
+        const widgetInfo = this.state.widgetInfo;
+        return {
+            type: widgetInfo.type,
+            alignment: widgetInfo.alignment,
+            static: widgetInfo.static,
+            graded: widgetInfo.graded,
+            // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
+            options: this.refs.widget.serialize(),
+            version: widgetInfo.version,
+        };
+    };
+
+    render(): React.ReactNode {
+        const widgetInfo = this.state.widgetInfo;
+
+        const Ed = Widgets.getEditor(widgetInfo.type);
+        let supportedAlignments: ReadonlyArray<Alignment>;
+        if (this.props.apiOptions.showAlignmentOptions) {
+            supportedAlignments = Widgets.getSupportedAlignments(
+                widgetInfo.type,
+            );
+        } else {
+            // NOTE(kevinb): "default" is not one in `validAlignments` in widgets.js.
+            supportedAlignments = ["default"];
+        }
+
+        const supportsStaticMode = Widgets.supportsStaticMode(widgetInfo.type);
+
+        const isUngradedEnabled = widgetInfo.type === "transformer";
+        const gradedPropBox = (
+            <PropCheckBox
+                label="Graded:"
+                graded={widgetInfo.graded}
+                onChange={this.props.onChange}
+            />
+        );
+
+        return (
+            <div className="perseus-widget-editor">
+                <div
+                    className={
+                        "perseus-widget-editor-title " +
+                        (this.state.showWidget ? "open" : "closed")
+                    }
+                >
+                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                    <a
+                        className="perseus-widget-editor-title-id"
+                        href="#"
+                        onClick={this._toggleWidget}
+                    >
+                        {this.props.id}
+                        {this.state.showWidget ? (
+                            <InlineIcon {...iconChevronDown} />
+                        ) : (
+                            <InlineIcon {...iconChevronRight} />
+                        )}
+                    </a>
+
+                    {supportsStaticMode && (
+                        <input
+                            type="button"
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
+                            onClick={this._toggleStatic}
+                            className="simple-button--small"
+                            value={
+                                widgetInfo.static
+                                    ? "Unset as static"
+                                    : "Set as static"
+                            }
+                        />
+                    )}
+                    {supportedAlignments.length > 1 && (
+                        <select
+                            className="alignment"
+                            value={widgetInfo.alignment}
+                            onChange={this._handleAlignmentChange}
+                        >
+                            {supportedAlignments.map((alignment) => (
+                                <option key={alignment}>{alignment}</option>
+                            ))}
+                        </select>
+                    )}
+                    <SectionControlButton
+                        icon={iconTrash}
+                        onClick={() => {
+                            this.props.onRemove();
+                        }}
+                        title="Remove image widget"
+                    />
+                </div>
+                <div
+                    className={
+                        "perseus-widget-editor-content " +
+                        (this.state.showWidget ? "enter" : "leave")
+                    }
+                >
+                    {isUngradedEnabled && gradedPropBox}
+                    {Ed && (
+                        <Ed
+                            // eslint-disable-next-line react/no-string-refs
+                            ref="widget"
+                            onChange={this._handleWidgetChange}
+                            static={widgetInfo.static}
+                            apiOptions={this.props.apiOptions}
+                            {...widgetInfo.options}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default WidgetEditor;

package/src/components/widget-select.tsx

@@ -0,0 +1,48 @@
+import {Widgets} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+type WidgetSelectProps = {
+    onChange?: (widgetType: string) => unknown;
+};
+
+class WidgetSelect extends React.Component<WidgetSelectProps> {
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+        const widgetType = e.currentTarget.value;
+        if (widgetType === "") {
+            // TODO(alpert): Not sure if change will trigger here
+            // but might as well be safe
+            return;
+        }
+        if (this.props.onChange) {
+            this.props.onChange(widgetType);
+        }
+    };
+
+    render(): React.ReactNode {
+        const widgets = Widgets.getPublicWidgets();
+        const orderedWidgetNames = _.sortBy(_.keys(widgets), (name) => {
+            return widgets[name].displayName;
+        });
+        const addWidgetString = "Add a widget\u2026";
+        return (
+            <select value="" onChange={this.handleChange}>
+                <option value="">{addWidgetString}</option>
+                <option disabled>--</option>
+                {_.map(orderedWidgetNames, (name) => {
+                    return (
+                        <option key={name} value={name}>
+                            {widgets[name].displayName}
+                        </option>
+                    );
+                })}
+            </select>
+        );
+    }
+}
+
+export default WidgetSelect;