@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/README.md

@@ -1,7 +0,0 @@
-The Perseus editor, with all the widgets.
-
-TODO(benkraft): Figure out and document how this relates to the other perseus
-packages.
-
-Code-Owner: Learning Platform
-Crowdin-Category: content.chrome

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

@@ -1,65 +0,0 @@
-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

@@ -1,134 +0,0 @@
-/* eslint-disable react/prop-types */
-import {ApiOptions} from "@khanacademy/perseus";
-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 {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
-
-import type {PerseusRenderer} from "@khanacademy/perseus";
-
-registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
-
-export default {
-    title: "Perseus/Editor/Editor",
-};
-
-export const Demo = (): React.ReactElement => {
-    return (
-        <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) => {}}
-        />
-    );
-};
-
-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/__stories__/item-editor.stories.tsx

@@ -1,41 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-
-import ItemExtrasEditor from "../item-extras-editor";
-
-import type {Meta, StoryObj} from "@storybook/react";
-
-import "../styles/perseus-editor.less";
-
-type Props = React.ComponentProps<typeof ItemExtrasEditor>;
-
-const Wrapper = (props: Props) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {onChange, ...rest} = props;
-    const [extras, setExtras] =
-        React.useState<Partial<typeof ItemExtrasEditor.defaultProps>>(rest);
-
-    return (
-        <ItemExtrasEditor
-            {...extras}
-            onChange={(e) => {
-                props.onChange?.(e); // to register action in storybook
-                setExtras((prevExtras) => ({...prevExtras, ...e}));
-            }}
-        />
-    );
-};
-
-const story: Meta<Props> = {
-    title: "Perseus/Editor/Item Extras Editor",
-    component: ItemExtrasEditor,
-    render: (args) => <Wrapper {...args} />,
-    argTypes: {onChange: {action: "changed"}},
-};
-export default story;
-
-type Story = StoryObj<typeof ItemExtrasEditor>;
-
-export const Default: Story = {
-    args: {...ItemExtrasEditor.defaultProps},
-};

package/src/__stories__/tex-error-view.stories.tsx

@@ -1,26 +0,0 @@
-import TexErrorView from "../tex-error-view";
-
-import type {Meta, StoryObj} from "@storybook/react";
-
-const meta: Meta<typeof TexErrorView> = {
-    component: TexErrorView,
-    title: "Perseus/Editor/TexErrorView",
-};
-
-export default meta;
-type Story = StoryObj<typeof TexErrorView>;
-
-export const Primary: Story = {
-    args: {
-        errorList: [
-            {
-                math: "\\x^2",
-                message: "TeX parse error: Undefined control sequence: \\x",
-            },
-            {
-                math: "\\y^2",
-                message: "TeX parse error: Undefined control sequence: \\y",
-            },
-        ],
-    },
-};

package/src/__testdata__/input-number.testdata.ts

@@ -1,27 +0,0 @@
-import type {PerseusRenderer, InputNumberWidget} from "@khanacademy/perseus";
-
-export const question1: PerseusRenderer = {
-    content:
-        "A sequence is defined recursively as follows:\n\n\n$\\qquad\\displaystyle{{a}_{n}}=-\\frac{1}{a_{n-1}-1} \n~~~~~~\\text{ with}\\qquad\\displaystyle{{a}_{0}}=\\frac{1}{2}\\,$\n\n\nFind the term $a_3$ in the sequence.\n\n[[\u2603 input-number 1]]",
-    images: {},
-    widgets: {
-        "input-number 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
-            type: "input-number",
-            options: {
-                maxError: 0.1,
-                inexact: false,
-                value: 0.5,
-                simplify: "required",
-                answerType: "number",
-                size: "normal",
-            },
-            alignment: "default",
-        } as InputNumberWidget,
-    },
-};

package/src/__tests__/editor.test.tsx

@@ -1,142 +0,0 @@
-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 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,
-        );
-    });
-
-    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]);
-
-        const changeFn = jest.fn();
-        render(<Harnessed onChange={changeFn} />);
-
-        // Act
-        const widgetDisclosure = screen.getByRole("link", {
-            name: "image 1",
-        });
-        userEvent.click(widgetDisclosure);
-
-        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,
-        );
-    });
-});

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

@@ -1,83 +0,0 @@
-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: {}}],
-        });
-    });
-});