@khanacademy/perseus-editor 2.15.3 → 2.15.4

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.15.3",
+    "version": "2.15.4",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.3.3",
+        "@khanacademy/perseus": "^17.4.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

package/src/__stories__/editor-page.stories.tsx

@@ -0,0 +1,65 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import {EditorPage} from "..";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
+
+import type {
+    DeviceType,
+    Hint,
+    PerseusAnswerArea,
+    PerseusRenderer,
+} from "@khanacademy/perseus";
+
+registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
+
+export default {
+    title: "Perseus/Editor/EditorPage",
+};
+
+const onChangeAction = action("onChange");
+
+export const Demo = (): React.ReactElement => {
+    const [previewDevice, setPreviewDevice] =
+        React.useState<DeviceType>("phone");
+    const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
+    const [answerArea, setAnswerArea] = React.useState<
+        PerseusAnswerArea | undefined | null
+    >();
+    const [question, setQuestion] = React.useState<
+        PerseusRenderer | undefined
+    >();
+    const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();
+
+    return (
+        <EditorPage
+            apiOptions={{isMobile: false}}
+            previewDevice={previewDevice}
+            onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
+            developerMode={true}
+            jsonMode={jsonMode}
+            answerArea={answerArea}
+            question={question}
+            hints={hints}
+            frameSource="about:blank"
+            previewURL="about:blank"
+            itemId="1"
+            onChange={(props) => {
+                onChangeAction(props);
+
+                if ("jsonMode" in props) {
+                    setJsonMode(props.jsonMode);
+                }
+                if ("answerArea" in props) {
+                    setAnswerArea(props.answerArea);
+                }
+                if ("question" in props) {
+                    setQuestion(props.question);
+                }
+                if ("hints" in props) {
+                    setHints(props.hints);
+                }
+            }}
+        />
+    );
+};

package/src/__stories__/editor.stories.tsx

@@ -4,19 +4,17 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
+import {Editor} from "..";
 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";
 
 import type {PerseusRenderer} from "@khanacademy/perseus";
 
-import "../styles/perseus-editor.less";
-
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
 export default {
-    title: "Perseus/Editor",
+    title: "Perseus/Editor/Editor",
 };
 
 export const Demo = (): React.ReactElement => {

package/src/editor-page.tsx

@@ -15,6 +15,7 @@ import type {
     Hint,
     ImageUploader,
     Version,
+    PerseusItem,
 } from "@khanacademy/perseus";
 import type {KEScore} from "@khanacademy/perseus-core";
 
@@ -25,7 +26,7 @@ type Props = {
     answerArea?: any; // related to the question,
     // TODO(CP-4838): Should this be a required prop?
     contentPaths?: ReadonlyArray<string>;
-    // Only used in the perseus demos. Consider removing.
+    // "Power user" mode. Shows the raw JSON of the question.
     developerMode: boolean;
     // Source HTML for the iframe to render
     frameSource: string;
@@ -53,15 +54,8 @@ type Props = {
     previewURL: string;
 };
 
-type PerseusJson = {
-    question: any;
-    answerArea: any;
-    hints: ReadonlyArray<Hint>;
-    itemDataVersion?: Version;
-};
-
 type State = {
-    json: PerseusJson;
+    json: PerseusItem;
     gradeMessage: string;
     wasAnswered: boolean;
     highlightLint: boolean;
@@ -207,7 +201,7 @@ class EditorPage extends React.Component<Props, State> {
         return issues1.concat(issues2);
     }
 
-    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusJson {
+    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusItem {
         if (this.props.jsonMode) {
             return this.state.json;
         }
@@ -226,7 +220,7 @@ class EditorPage extends React.Component<Props, State> {
         this.props.onChange(newProps, cb, silent);
     };
 
-    changeJSON: (newJson: PerseusJson) => void = (newJson: PerseusJson) => {
+    changeJSON: (newJson: PerseusItem) => void = (newJson: PerseusItem) => {
         this.setState({
             json: newJson,
         });

package/src/editor.tsx

@@ -132,7 +132,7 @@ type Props = Readonly<{
     onChange: ChangeHandler;
 }>;
 
-type DeafultProps = {
+type DefaultProps = {
     content: string;
     disabled: boolean;
     images: Record<any, any>;
@@ -157,7 +157,7 @@ class Editor extends React.Component<Props, State> {
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
 
-    static defaultProps: DeafultProps = {
+    static defaultProps: DefaultProps = {
         content: "",
         placeholder: "",
         widgets: {},

package/src/widgets/__stories__/categorizer-editor.stories.tsx

@@ -0,0 +1,24 @@
+import {ApiOptions} from "@khanacademy/perseus";
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import CategorizerEditor from "../categorizer-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Categorizer Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return (
+        <CategorizerEditor
+            onChange={action("onChange")}
+            apiOptions={ApiOptions.defaults}
+        />
+    );
+};

package/src/widgets/__stories__/definition-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import DefinitionEditor from "../definition-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Definition Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <DefinitionEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/dropdown-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import DropdownEditor from "../dropdown-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Dropdown Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <DropdownEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/explanation-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import ExplanationEditor from "../explanation-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Explanation Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <ExplanationEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/input-number-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import InputNumberEditor from "../input-number-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/InputNumber Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <InputNumberEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/matcher-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import MatcherEditor from "../matcher-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Matcher Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <MatcherEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/number-line-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import NumberLineEditor from "../number-line-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Number Line Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <NumberLineEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/numeric-input-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import NumericInputEditor from "../numeric-input-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/NumericInput Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <NumericInputEditor onChange={action("onChange")} />;
+};

package/src/widgets/__stories__/radio-editor.stories.tsx

@@ -97,12 +97,12 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
                 <RadioEditor
                     {...this.state}
                     apiOptions={this.apiOptions}
-                    onChange={(props) =>
+                    onChange={(props) => {
                         this.setState({
                             ...this._widget.serialize(),
                             ...props,
-                        })
-                    }
+                        });
+                    }}
                     // @ts-expect-error [FEI-5003] - TS2322 - Type 'RadioEditor | null' is not assignable to type 'RadioEditor'.
                     ref={(widget) => (this._widget = widget)}
                 />

package/src/widgets/__stories__/sorter-editor.stories.tsx

@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import SorterEditor from "../sorter-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Sorter Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <SorterEditor onChange={action("onChange")} />;
+};

package/src/widgets/__tests__/categorizer-editor.test.tsx

@@ -0,0 +1,51 @@
+import {ApiOptions, Dependencies} 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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import CategorizerEditor from "../categorizer-editor";
+
+describe("categorizer-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(
+            <CategorizerEditor
+                onChange={() => undefined}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        expect(
+            await screen.findByText("Randomize item order"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to change randomize item order", async () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <CategorizerEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Randomize item order",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({randomizeItems: true}),
+        );
+    });
+});

package/src/widgets/__tests__/definition-editor.test.tsx

@@ -0,0 +1,41 @@
+import {Dependencies} 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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import DefinitionEditor from "../definition-editor";
+
+describe("definition-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<DefinitionEditor onChange={() => undefined} />);
+
+        expect(
+            await screen.findByText("Definition style guide"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to change the definition", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<DefinitionEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Word to be defined:",
+        });
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({togglePrompt: "a"}),
+            undefined,
+        );
+    });
+});

package/src/widgets/__tests__/dropdown-editor.test.tsx

@@ -0,0 +1,57 @@
+import {Dependencies} 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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import DropdownEditor from "../dropdown-editor";
+
+describe("dropdown-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should be possible to modify placeholder text", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<DropdownEditor onChange={onChangeMock} />);
+
+        const input = screen.getByPlaceholderText("Placeholder value");
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith({placeholder: "a"});
+    });
+
+    it("should be possible to delete choice", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<DropdownEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Delete choice"}));
+
+        expect(onChangeMock).toBeCalledWith({choices: []});
+    });
+
+    it("should be possible to add choice", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<DropdownEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("link", {name: "Add a choice"}));
+
+        expect(onChangeMock).toBeCalledWith(
+            {
+                choices: [
+                    {content: "", correct: false},
+                    {content: "", correct: false},
+                ],
+            },
+            // there's some anonymous function that's also passed
+            expect.anything(),
+        );
+    });
+});

package/src/widgets/__tests__/explanation-editor.test.tsx

@@ -0,0 +1,59 @@
+import {Dependencies} 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";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import ExplanationEditor from "../explanation-editor";
+
+describe("explanation-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<ExplanationEditor onChange={() => undefined} />);
+
+        expect(
+            await screen.findByText("Prompt to show explanation:"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to change prompt to show explanation", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExplanationEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Prompt to show explanation:",
+        });
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith(
+            // The dropdown initalizes with "Explain"
+            expect.objectContaining({showPrompt: "Explaina"}),
+            undefined,
+        );
+    });
+
+    it("should be possible to change prompt to hide explanation", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<ExplanationEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Prompt to hide explanation:",
+        });
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith(
+            // The dropdown initalizes with "Hide explain"
+            expect.objectContaining({hidePrompt: "Hide explanationa"}),
+            undefined,
+        );
+    });
+});