@khanacademy/perseus-editor 2.16.2 → 3.0.0

package/dist/widgets/deprecated-standin-editor.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type Props = {
+    onChange: (options: any) => void;
+};
+declare class DeprecatedStandinEditor extends React.Component<Props> {
+    static widgetName: "deprecated-standin";
+    serialize(): any;
+    render(): React.ReactNode;
+}
+export default DeprecatedStandinEditor;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.16.2",
+    "version": "3.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -25,7 +25,7 @@
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
         "@khanacademy/math-input": "^16.5.0",
-        "@khanacademy/perseus": "^17.7.0",
+        "@khanacademy/perseus": "^18.0.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

package/src/__tests__/editor.test.tsx

@@ -1,120 +1,142 @@
-import {ApiOptions, Dependencies, Widgets} from "@khanacademy/perseus";
+import {
+    ApiOptions,
+    Dependencies,
+    Widgets,
+    widgets,
+    Util,
+} from "@khanacademy/perseus";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom mathers
 
 import {testDependencies} from "../../../../testing/test-dependencies";
-import {wait} from "../../../../testing/wait";
-import {question1} from "../__testdata__/input-number.testdata";
 import Editor from "../editor";
+import ImageEditor from "../widgets/image-editor";
+
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
+
+const Harnessed = (props: Partial<PropsFor<typeof Editor>>) => {
+    return (
+        <Editor
+            apiOptions={ApiOptions.defaults}
+            onChange={() => {}}
+            content="[[☃ image 1]]"
+            widgets={{
+                "image 1": {
+                    type: "image",
+                    options: {
+                        backgroundImage: {
+                            url: "http://placekitten.com/200/300",
+                        },
+                    },
+                },
+            }}
+            {...props}
+        />
+    );
+};
 
 describe("Editor", () => {
+    beforeAll(() => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const ImageWidget = widgets.find((w) => w.name === "image")!;
+        expect(ImageWidget).toBeDefined();
+        Widgets.registerWidget("image", ImageWidget);
+        Widgets.registerEditors([ImageEditor]);
+    });
+
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );
     });
 
-    describe("input-number widget", () => {
-        beforeEach(async () => {
-            const [InputNumberWidget, InputNumberEditor] = await Promise.all([
-                import("@khanacademy/perseus").then((m) => m.InputNumber),
-                import("../widgets/input-number-editor").then((m) => m.default),
-            ]);
-            Widgets.registerWidgets([InputNumberWidget]);
-            Widgets.registerEditors([InputNumberEditor]);
-            jest.useRealTimers();
+    it("should delete widget if confirmed", async () => {
+        const onChangeMock = jest.fn();
+        jest.spyOn(window, "confirm").mockReturnValue(true);
+
+        // Arrange
+        render(<Harnessed onChange={onChangeMock} />);
+
+        // Act
+        userEvent.click(
+            screen.getByRole("button", {name: "Remove image widget"}),
+        );
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({content: ""});
+    });
+
+    it("should NOT delete widget if not confirmed", async () => {
+        const onChangeMock = jest.fn();
+        jest.spyOn(window, "confirm").mockReturnValue(false);
+
+        // Arrange
+        render(<Harnessed onChange={onChangeMock} />);
+
+        // Act
+        userEvent.click(
+            screen.getByRole("button", {name: "Remove image widget"}),
+        );
+
+        // Assert
+        expect(onChangeMock).not.toHaveBeenCalled();
+    });
+
+    test("clicking on the widget editor should open it", async () => {
+        // Arrange
+        render(<Harnessed />);
+
+        // Act
+        const widgetDisclosure = screen.getByRole("link", {
+            name: "image 1",
         });
+        userEvent.click(widgetDisclosure);
+
+        // Assert
+        const previewImage = screen.getByAltText("Editor preview of image");
+        expect(previewImage).toHaveAttribute(
+            "src",
+            "http://placekitten.com/200/300",
+        );
+    });
+
+    it("should update values", async () => {
+        // Arrange
+        jest.spyOn(Util, "getImageSizeModern").mockResolvedValue([200, 200]);
 
-        test("clicking on the widget editor should open it", async () => {
-            // Arrange
-            render(
-                <Editor
-                    apiOptions={ApiOptions.defaults}
-                    content={question1.content}
-                    placeholder=""
-                    widgets={question1.widgets}
-                    images={question1.images}
-                    disabled={false}
-                    widgetEnabled={true}
-                    immutableWidgets={false}
-                    showWordCount={true}
-                    warnNoPrompt={true}
-                    warnNoWidgets={true}
-                    onChange={(props) => {}}
-                />,
-            );
-            await wait();
-
-            // Act
-            const widgetDisclosure = screen.getByRole("link", {
-                name: "input-number 1",
-            });
-            userEvent.click(widgetDisclosure);
-            const correctAnswerInput = screen.getByLabelText("Correct answer:");
-
-            // Assert
-            expect(correctAnswerInput).toHaveValue("0.5");
+        const changeFn = jest.fn();
+        render(<Harnessed onChange={changeFn} />);
+
+        // Act
+        const widgetDisclosure = screen.getByRole("link", {
+            name: "image 1",
         });
+        userEvent.click(widgetDisclosure);
 
-        it("should update values", async () => {
-            // Arrange
-            const changeFn = jest.fn();
-            render(
-                <Editor
-                    apiOptions={ApiOptions.defaults}
-                    content={question1.content}
-                    placeholder=""
-                    widgets={question1.widgets}
-                    images={question1.images}
-                    disabled={false}
-                    widgetEnabled={true}
-                    immutableWidgets={false}
-                    showWordCount={true}
-                    warnNoPrompt={true}
-                    warnNoWidgets={true}
-                    onChange={changeFn}
-                />,
-            );
-            await wait();
-
-            // Act
-            const widgetDisclosure = screen.getByRole("link", {
-                name: "input-number 1",
-            });
-            userEvent.click(widgetDisclosure);
-            const correctAnswerInput = screen.getByLabelText("Correct answer:");
-
-            userEvent.clear(correctAnswerInput);
-            userEvent.paste(correctAnswerInput, "0.75");
-            userEvent.tab(); // blurring the input triggers onChange to be called
-
-            // Assert
-            expect(changeFn).toHaveBeenCalledWith(
-                {
-                    widgets: {
-                        "input-number 1": {
-                            graded: true,
-                            version: {major: 0, minor: 0},
-                            static: false,
-                            type: "input-number",
-                            options: {
-                                value: 0.75,
-                                simplify: "required",
-                                size: "normal",
-                                inexact: false,
-                                maxError: 0.1,
-                                answerType: "number",
-                                rightAlign: false,
-                            },
-                            alignment: "default",
-                        },
-                    },
+        const captionInput = screen.getByLabelText(/Caption:/);
+
+        userEvent.clear(captionInput);
+        userEvent.type(captionInput, "A picture of kittens");
+        userEvent.tab(); // blurring the input triggers onChange to be called
+        jest.runOnlyPendingTimers();
+
+        // Assert
+        expect(changeFn).toHaveBeenCalledWith(
+            {
+                widgets: {
+                    "image 1": expect.objectContaining({
+                        type: "image",
+                        graded: true,
+                        options: expect.objectContaining({
+                            caption: "A picture of kittens",
+                        }),
+                    }),
                 },
-                undefined,
-                undefined,
-            );
-        });
+            },
+            undefined,
+            undefined,
+        );
     });
 });

package/src/__tests__/hint-editor.test.tsx

@@ -0,0 +1,83 @@
+import "@testing-library/jest-dom";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import CombinedHintsEditor from "../hint-editor";
+
+describe("CombinedHintsEditor", () => {
+    it("should render", () => {
+        render(
+            <CombinedHintsEditor deviceType="phone" previewURL="about:blank" />,
+        );
+    });
+
+    it("should confirm before removing a hint", () => {
+        // Arrange
+        const comfirmSpy = jest.spyOn(window, "confirm").mockReturnValue(false);
+        render(
+            <CombinedHintsEditor
+                deviceType="phone"
+                previewURL="about:blank"
+                hints={[
+                    {content: "You know this one!", widgets: {}, images: {}},
+                    {content: "Ok, the answer is 3", widgets: {}, images: {}},
+                ]}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getAllByText("Remove this hint")[0]);
+
+        // Assert
+        expect(comfirmSpy).toHaveBeenCalled();
+    });
+
+    it("should not remove the hint if not confirmed", () => {
+        // Arrange
+        jest.spyOn(window, "confirm").mockReturnValue(false);
+        const onChangeMock = jest.fn();
+        render(
+            <CombinedHintsEditor
+                deviceType="phone"
+                previewURL="about:blank"
+                hints={[
+                    {content: "You know this one!", widgets: {}, images: {}},
+                    {content: "Ok, the answer is 3", widgets: {}, images: {}},
+                ]}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getAllByText("Remove this hint")[0]);
+
+        // Assert
+        expect(onChangeMock).not.toHaveBeenCalled();
+    });
+
+    it("should remove the hint if confirmed", () => {
+        // Arrange
+        jest.spyOn(window, "confirm").mockReturnValue(true);
+        const onChangeMock = jest.fn();
+        render(
+            <CombinedHintsEditor
+                deviceType="phone"
+                previewURL="about:blank"
+                hints={[
+                    {content: "You know this one!", widgets: {}, images: {}},
+                    {content: "Ok, the answer is 3", widgets: {}, images: {}},
+                ]}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act
+        userEvent.click(screen.getAllByText("Remove this hint")[0]);
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({
+            hints: [{content: "Ok, the answer is 3", widgets: {}, images: {}}],
+        });
+    });
+});

package/src/all-editors.ts

@@ -1,6 +1,7 @@
 import CategorizerEditor from "./widgets/categorizer-editor";
 import CSProgramEditor from "./widgets/cs-program-editor";
 import DefinitionEditor from "./widgets/definition-editor";
+import DeprecatedStandinEditor from "./widgets/deprecated-standin-editor";
 import DropdownEditor from "./widgets/dropdown-editor";
 import ExampleGraphieWidgetEditor from "./widgets/example-graphie-widget-editor";
 import ExampleWidgetEditor from "./widgets/example-widget-editor";
@@ -80,4 +81,5 @@ export default [
     UnitEditor,
     VideoEditor,
     RadioEditor,
+    DeprecatedStandinEditor,
 ];

package/src/components/widget-editor.tsx

@@ -10,33 +10,33 @@ import _ from "underscore";
 
 import SectionControlButton from "./section-control-button";
 
-import type {Alignment, WidgetInfo} from "@khanacademy/perseus";
+import type {Alignment, PerseusWidget} from "@khanacademy/perseus";
 
-const {InlineIcon, PropCheckBox} = components;
+const {InlineIcon} = components;
 const {iconChevronDown, iconChevronRight, iconTrash} = icons;
 
 type WidgetEditorProps = {
     // Unserialized props
     id: string;
     onChange: (
-        widgetInfo: WidgetInfo,
+        widgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => unknown;
     onRemove: () => unknown;
     apiOptions: any;
-} & WidgetInfo;
+} & PerseusWidget;
 
 type WidgetEditorState = {
     showWidget: boolean;
-    widgetInfo: WidgetInfo;
+    widgetInfo: PerseusWidget;
 };
 
-const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
+const _upgradeWidgetInfo = (props: WidgetEditorProps): PerseusWidget => {
     // 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 - 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'.
+    // @ts-expect-error TS(2345) Type '"categorizer" | undefined' is not assignable to type '"deprecated-standin"'.
     return Widgets.upgradeWidgetInfoToLatestVersion(filteredProps);
 };
 
@@ -53,14 +53,12 @@ class WidgetEditor extends React.Component<
         super(props);
         this.state = {
             showWidget: false,
-            // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
             widgetInfo: _upgradeWidgetInfo(props),
         };
     }
 
     // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
-        // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
         this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});
     }
 
@@ -77,7 +75,7 @@ class WidgetEditor extends React.Component<
         const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ) as WidgetInfo;
+        ) as PerseusWidget;
         newWidgetInfo.options = Object.assign(
             // eslint-disable-next-line react/no-string-refs
             // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
@@ -91,7 +89,7 @@ class WidgetEditor extends React.Component<
         e.preventDefault();
         const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
             static: !this.state.widgetInfo.static,
-        }) as WidgetInfo;
+        }) as PerseusWidget;
         this.props.onChange(newWidgetInfo);
     };
 
@@ -100,7 +98,7 @@ class WidgetEditor extends React.Component<
         const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ) as WidgetInfo;
+        ) as PerseusWidget;
         newWidgetInfo.alignment = newAlignment;
         this.props.onChange(newWidgetInfo);
     };
@@ -145,15 +143,6 @@ class WidgetEditor extends React.Component<
 
         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
@@ -214,7 +203,6 @@ class WidgetEditor extends React.Component<
                         (this.state.showWidget ? "enter" : "leave")
                     }
                 >
-                    {isUngradedEnabled && gradedPropBox}
                     {Ed && (
                         <Ed
                             // eslint-disable-next-line react/no-string-refs

package/src/editor.tsx

@@ -25,7 +25,7 @@ import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
 import TexErrorView from "./tex-error-view";
 
-import type {ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
+import type {ChangeHandler, PerseusWidget} from "@khanacademy/perseus";
 
 // like [[snowman input-number 1]]
 const widgetPlaceholder = "[[\u2603 {id}]]";
@@ -114,7 +114,7 @@ type Props = Readonly<{
     replace?: any;
     placeholder: string;
     widgets: {
-        [name: string]: WidgetInfo;
+        [name: string]: PerseusWidget;
     };
     images: any;
     disabled: boolean;
@@ -141,7 +141,7 @@ type DefaultProps = {
     warnNoWidgets: boolean;
     widgetEnabled: boolean;
     widgets: {
-        [name: string]: WidgetInfo;
+        [name: string]: PerseusWidget;
     };
 };
 
@@ -245,37 +245,35 @@ class Editor extends React.Component<Props, State> {
         clearTimeout(this.deferredChange);
     }
 
-    getWidgetEditor: (id: string, type: string) => undefined | React.ReactNode =
-        (id: string, type: string) => {
-            if (!Widgets.getEditor(type)) {
-                return;
-            }
-            return (
-                <WidgetEditor
-                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-                    key={id}
-                    ref={id}
-                    id={id}
-                    // @ts-expect-error - TS2783 - 'type' is specified more than once, so this usage will be overwritten.
-                    type={type}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this._handleWidgetEditorChange.bind(this, id)}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onRemove={this._handleWidgetEditorRemove.bind(this, id)}
-                    apiOptions={this.props.apiOptions}
-                    {...this.props.widgets[id]}
-                />
-            );
-        };
+    getWidgetEditor(
+        id: string,
+        type: PerseusWidget["type"],
+    ): undefined | React.ReactNode {
+        if (!Widgets.getEditor(type)) {
+            return;
+        }
+        return (
+            <WidgetEditor
+                ref={id}
+                id={id}
+                // eslint-disable-next-line react/jsx-no-bind
+                onChange={this._handleWidgetEditorChange.bind(this, id)}
+                // eslint-disable-next-line react/jsx-no-bind
+                onRemove={this._handleWidgetEditorRemove.bind(this, id)}
+                apiOptions={this.props.apiOptions}
+                {...this.props.widgets[id]}
+            />
+        );
+    }
 
     _handleWidgetEditorChange: (
         id: string,
-        newWidgetInfo: WidgetInfo,
+        newWidgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => void = (
         id: string,
-        newWidgetInfo: WidgetInfo,
+        newWidgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => {
@@ -285,6 +283,11 @@ class Editor extends React.Component<Props, State> {
     };
 
     _handleWidgetEditorRemove: (id: string) => void = (id: string) => {
+        // eslint-disable-next-line no-alert
+        if (!confirm("Are you sure you want to delete this item?")) {
+            return;
+        }
+
         const textarea = this.textarea.current;
         const re = new RegExp(widgetRegExp.replace("{id}", id), "gm");
         this.props.onChange({content: textarea?.value.replace(re, "")});
@@ -680,14 +683,13 @@ class Editor extends React.Component<Props, State> {
         const newContent = newPrelude + widgetContent + newPostlude;
 
         const newWidgets = _.clone(this.props.widgets);
+        // @ts-expect-error TS(2345) Type '"categorizer" | undefined' is not assignable to type '"deprecated-standin"'.
         newWidgets[id] = {
             options: Widgets.getEditor(widgetType)?.defaultProps,
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"'.
-            type: widgetType,
+            type: widgetType as PerseusWidget["type"],
             // Track widget version on creation, so that a widget editor
             // without a valid version prop can only possibly refer to a
             // pre-versioning creation time.
-            // @ts-expect-error - TS2322 - Type 'Version | null | undefined' is not assignable to type 'Version | undefined'.
             version: Widgets.getVersion(widgetType),
         };
 
@@ -905,6 +907,8 @@ class Editor extends React.Component<Props, State> {
             underlayPieces = [];
 
             for (let i = 0; i < pieces.length; i++) {
+                // We split on widgets so every even-numbered indexed piece is
+                // text and odd-numbered indexes are the widget references.
                 if (i % 2 === 0) {
                     // Normal text
                     underlayPieces.push(pieces[i]);
@@ -933,7 +937,7 @@ class Editor extends React.Component<Props, State> {
                     const match = Util.rWidgetParts.exec(pieces[i]);
                     if (match != null) {
                         const id = match[1];
-                        const type = match[2];
+                        const type = match[2] as PerseusWidget["type"];
 
                         const selected = false;
                         // TODO(alpert):

package/src/hint-editor.tsx

@@ -334,6 +334,11 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     };
 
     handleHintRemove: (i: number) => void = (i: number) => {
+        // eslint-disable-next-line no-alert
+        if (!confirm("Are you sure you want to delete this hint?")) {
+            return;
+        }
+
         const hints = _(this.props.hints).clone();
         // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
         hints.splice(i, 1);

package/src/index.ts

@@ -24,4 +24,8 @@ import AllWidgets from "./all-widgets";
 Widgets.registerEditors(AllEditors);
 Widgets.registerWidgets(AllWidgets);
 
+// When it's time to ship transformer's deprecation uncomment
+// Widgets.replaceEditor("transformer", "deprecated-standin");
+// Widgets.replaceWidget("transformer", "deprecatd-standin");
+
 export {AllEditors, AllWidgets};

package/src/util/register-all-widgets-and-editors-for-testing.ts

@@ -11,4 +11,8 @@ import allWidgets from "../all-widgets";
 export const registerAllWidgetsAndEditorsForTesting = () => {
     Widgets.registerWidgets(allWidgets);
     Widgets.registerEditors(allEditors);
+
+    // When it's time to ship transformer's deprecation uncomment
+    // Widgets.replaceEditor("transformer", "deprecated-standin");
+    // Widgets.replaceWidget("transformer", "deprecatd-standin");
 };

package/src/widgets/deprecated-standin-editor.tsx

@@ -0,0 +1,29 @@
+import {EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+type Props = {
+    // Callback for when a widget prop is changed.
+    onChange: (options: any) => void;
+};
+
+class DeprecatedStandinEditor extends React.Component<Props> {
+    static widgetName = "deprecated-standin" as const;
+
+    serialize(): any {
+        return EditorJsonify.serialize.call(this);
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div>
+                <p>This widget has been deprecated and removed</p>
+                <p>
+                    Learners will see a message and they will not be graded on
+                    this part. Please replace this widget with a supported one.
+                </p>
+            </div>
+        );
+    }
+}
+
+export default DeprecatedStandinEditor;