@khanacademy/perseus-editor 2.2.2 → 2.3.0

package/src/editor.tsx

@@ -1,6 +1,4 @@
 import {
-    components,
-    icons,
     preprocessTex,
     Errors,
     Log,
@@ -8,7 +6,6 @@ import {
     PerseusMarkdown,
     Util,
     Widgets,
-    WIDGET_PROP_DENYLIST,
 } from "@khanacademy/perseus";
 import $ from "jquery";
 // eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
@@ -18,13 +15,11 @@ import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import DragTarget from "./components/drag-target";
+import WidgetEditor from "./components/widget-editor";
+import WidgetSelect from "./components/widget-select";
 import KatexErrorView from "./katex-error-view";
-import SectionControlButton from "./section-control-button";
 
-import type {Alignment, ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
-
-const {InlineIcon, PropCheckBox} = components;
-const {iconChevronDown, iconChevronRight, iconTrash} = icons;
+import type {ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
 
 // like [[snowman input-number 1]]
 const widgetPlaceholder = "[[\u2603 {id}]]";
@@ -66,264 +61,6 @@ const makeStartWithAParagraphAlways = (content) => {
     return "\n\n".slice(0, 2 - newlines.length) + content;
 };
 
-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>
-        );
-    }
-}
-
-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>
-        );
-    }
-}
-
 // This is more general than the actual markdown image parsing regex,
 // which is fine for correctness since it should only mean we could
 // store extra image dimensions, unless the question is insanely
@@ -1254,10 +991,7 @@ class Editor extends React.Component<Props, State> {
             // }, this);
 
             this.widgetIds = _.keys(widgets);
-            widgetsDropDown = (
-                // eslint-disable-next-line react/no-string-refs
-                <WidgetSelect ref="widgetSelect" onChange={this._addWidget} />
-            );
+            widgetsDropDown = <WidgetSelect onChange={this._addWidget} />;
 
             const insertTemplateString = "Insert template\u2026";
             templatesDropDown = (

package/src/util/points.test.ts

@@ -0,0 +1,24 @@
+import {parsePointCount} from "./points";
+
+describe("parsePointCount", () => {
+    it.each([
+        // Special case, 0 means unlimited points
+        ["0", "unlimited"],
+        // Regular cases, ints as a string
+        ["1", 1],
+        ["2", 2],
+        ["3", 3],
+        ["4", 4],
+        ["5", 5],
+        ["6", 6],
+        ["7", 7],
+        ["8", 8],
+        ["9", 9],
+        ["10", 10],
+        // Parse-error cases - all map to "unlimited"
+        ["non-numeric string", "unlimited"],
+        ["one", "unlimited"],
+    ])("Should parse %s to %s", (input, expected) => {
+        expect(parsePointCount(input)).toEqual(expected);
+    });
+});

package/src/util/points.ts

@@ -0,0 +1,13 @@
+export const UNLIMITED = "unlimited" as const;
+export type PointValue = number | typeof UNLIMITED;
+
+// Parses a string (ostensibly from some UI element that only supports string
+// types, such as a <select />) into a numeric point count or the special sigil
+// "unlimited". Note that 0 is a special case, and means "unlimited".
+export const parsePointCount = (points: string): PointValue => {
+    const parsed = parseInt(points, 10);
+    if (isNaN(parsed)) {
+        return UNLIMITED;
+    }
+    return parsed === 0 ? UNLIMITED : parsed;
+};