@khanacademy/perseus 17.3.0 → 17.3.2

package/dist/question-paragraph.d.ts

@@ -4,6 +4,7 @@ type Props = {
     translationIndex: number;
     paragraphIndex?: number;
     children?: React.ReactNode;
+    inline?: boolean;
 };
 declare class QuestionParagraph extends React.Component<Props> {
     render(): React.ReactNode;

package/dist/renderer.d.ts

@@ -59,6 +59,7 @@ type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
     widgets: PerseusRenderer["widgets"];
+    inline?: boolean;
 };
 type State = {
     translationLintErrors: ReadonlyArray<string>;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.3.0",
+    "version": "17.3.2",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.3.0",
+        "@khanacademy/math-input": "^16.4.0",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",

package/src/__tests__/error-boundary.test.tsx

@@ -0,0 +1,76 @@
+import {screen, render} from "@testing-library/react";
+import * as React from "react";
+
+import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import ErrorBoundary from "../error-boundary";
+
+import "@testing-library/jest-dom";
+
+const ProblematicComponent = () => {
+    throw new Error("I can haz error");
+};
+
+describe("error boundary", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render children", () => {
+        render(
+            <ErrorBoundary>
+                <span>Hello world</span>
+            </ErrorBoundary>,
+        );
+
+        expect(screen.getByText("Hello world")).toBeInTheDocument();
+    });
+
+    it("should render error icon when children error", () => {
+        render(
+            <ErrorBoundary>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(screen.getByRole("img")).toBeInTheDocument();
+        expect(screen.getByTitle("Rendering Error!")).toBeInTheDocument();
+    });
+
+    it("should call the onError callback when children error", () => {
+        const onErrorCallback = jest.fn();
+
+        render(
+            <ErrorBoundary onError={onErrorCallback}>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(onErrorCallback).toHaveBeenCalled();
+    });
+
+    it("should log the error when children error", () => {
+        const errorSpy = jest.spyOn(testDependencies.Log, "error");
+
+        render(
+            <ErrorBoundary>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(errorSpy).toHaveBeenCalledWith(
+            "Unhandled Perseus error: I can haz error",
+            "Internal",
+            {
+                cause: expect.anything(),
+                loggedMetadata: {
+                    componentStack: `
+    in ProblematicComponent
+    in ErrorBoundary`,
+                },
+            },
+        );
+    });
+});

package/src/error-boundary.tsx

@@ -22,13 +22,27 @@ class ErrorBoundary extends React.Component<Props, State> {
     componentDidCatch(error: Error, info: any) {
         this.setState({error: error.toString()});
         this.props.onError?.(error, info);
-        Log.error("Perseus error boundary caught error", Errors.Internal, {
-            cause: error,
-            loggedMetadata: {
-                componentStack: info.componentStack,
-                ...this.props.metadata,
+        Log.error(
+            // NOTE(jeremy): We concatenate the error messsage here. Typical
+            // Khan Academy error handling guidance says that you should never
+            // "build" the error message that might be sent to our error
+            // reporting tool (currently Sentry). However, if we don't
+            // differentiate between the different errors that are thrown, they
+            // all end up being grouped as a single Sentry event, which is very
+            // unhelpful.
+            "Unhandled Perseus error: " + error.message,
+            Errors.Internal,
+            {
+                cause: error,
+                loggedMetadata: {
+                    componentStack:
+                        !!info && "componentStack" in info
+                            ? info.componentStack
+                            : "componentStack not provided",
+                    ...this.props.metadata,
+                },
             },
-        });
+        );
     }
 
     render(): React.ReactNode {
@@ -39,7 +53,8 @@ class ErrorBoundary extends React.Component<Props, State> {
             // errors into inline elements.
             // TODO(michaelpolyak): Link error icon to "Report a problem".
             return (
-                <svg height="16" width="16" viewBox="0 0 16 16">
+                <svg height="16" width="16" viewBox="0 0 16 16" role={"img"}>
+                    <title>Rendering Error!</title>
                     <path
                         d="m8 16c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3c0.55 0 1-0.45 1-1s-0.45-1-1-1-1 0.45-1 1 0.45 1 1 1zm0-9c-0.55 0-1 0.45-1 1v4c0 0.55.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1z"
                         fill="#d92916"

package/src/question-paragraph.tsx

@@ -5,6 +5,7 @@ type Props = {
     translationIndex: number;
     paragraphIndex?: number;
     children?: React.ReactNode;
+    inline?: boolean;
 };
 
 class QuestionParagraph extends React.Component<Props> {
@@ -16,7 +17,11 @@ class QuestionParagraph extends React.Component<Props> {
         // to attach some metadata to top-level QuestionParagraphs:
         return (
             <div
-                className={className}
+                className={
+                    this.props.inline
+                        ? this.props.className ?? undefined
+                        : className
+                }
                 data-perseus-component-index={this.props.translationIndex}
                 data-perseus-paragraph-index={this.props.paragraphIndex}
             >

package/src/renderer.tsx

@@ -172,6 +172,8 @@ type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
     widgets: PerseusRenderer["widgets"];
+    // Skip adding paragraph class
+    inline?: boolean;
 };
 
 type State = {
@@ -1060,6 +1062,7 @@ class Renderer extends React.Component<Props, State> {
                 className={className}
                 translationIndex={this.translationIndex}
                 paragraphIndex={state.paragraphIndex}
+                inline={this.props.inline}
             >
                 <ErrorBoundary>{output}</ErrorBoundary>
             </QuestionParagraph>
@@ -1919,13 +1922,17 @@ class Renderer extends React.Component<Props, State> {
         this._isTwoColumn = false;
 
         // Parse the string of markdown to a parse tree
-        const parsedMarkdown = PerseusMarkdown.parse(content, {
-            // Recognize crowdin IDs while translating articles
-            // (This should never be hit by exercises, though if you
-            // decide you want to add a check that this is an article,
-            // go for it.)
-            isJipt: this.translationIndex != null,
-        });
+        const parsedMarkdown = this.props.inline
+            ? PerseusMarkdown.parseInline(content, {
+                  // Recognize crowdin IDs while translating articles
+                  // (This should never be hit by exercises, though if you
+                  // decide you want to add a check that this is an article,
+                  // go for it.)
+                  isJipt: this.translationIndex != null,
+              })
+            : PerseusMarkdown.parse(content, {
+                  isJipt: this.translationIndex != null,
+              });
 
         // Optionally apply the linter to the parse tree
         if (this.props.linterContext.highlightLint) {

package/src/styles/widgets/label-image.less

@@ -5,35 +5,18 @@
             margin: 0;
         }
     }
-    button[id*="perseus-label-image-widget-answer-pill"],
-    div[id*="perseus-label-image-widget-answer-pill"] {
-        // Reset text content.
-        div.paragraph {
-            all: revert;
-        }
-        // Allow for padding around math content. Accounting for the negative margin here:
-        // https://github.com/Khan/perseus/blob/bafd35daee723456bf259a39b88e7638d91c8c3b/packages/perseus/src/renderer.tsx#L1176
-        div.perseus-block-math-inner {
-            margin: -5px 0 !important;
-        }
-    }
 }
 
 // Reset mobile text content for answer pills.
 @media (max-width: 767px) {
     [id*="perseus-label-image-widget-answer-pill"] {
-        div.paragraph {
-            all: revert;
-        }
         > div.perseus-renderer-responsive {
             all: revert;
         }
     }
-
     .framework-perseus.perseus-mobile
         [id*="perseus-label-image-widget-answer-pill"] {
-        .perseus-renderer > .paragraph,
-        .perseus-renderer > .paragraph .paragraph {
+        mjx-container {
             all: revert;
         }
     }

package/src/widgets/__stories__/label-image.stories.tsx

@@ -5,6 +5,8 @@ import {
     textQuestion,
     mathQuestion,
     numberline,
+    longTextFromArticle,
+    mixedContentQuestion,
 } from "../__testdata__/label-image.testdata";
 
 import type {PerseusRenderer} from "../../perseus-types";
@@ -59,6 +61,21 @@ export const LabelWidgetWithText = (args: StoryArgs): React.ReactElement => {
     );
 };
 
+export const LabelWidgetWithLongText = (
+    args: StoryArgs,
+): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(longTextFromArticle, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
 export const LabelWidgetWithMath = (args: StoryArgs): React.ReactElement => {
     const apiOptions: APIOptions = {
         isMobile: args.isMobile,
@@ -85,6 +102,19 @@ export const LabelImageNumberline = (args: StoryArgs): React.ReactElement => {
     );
 };
 
+export const LabelImageMixedContent = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(mixedContentQuestion, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
 export default {
     title: "Perseus/Widgets/Label Image",
     args: {

package/src/widgets/__testdata__/label-image.testdata.ts

@@ -178,3 +178,131 @@ export const numberline: PerseusRenderer = {
         },
     },
 };
+
+export const longTextFromArticle: PerseusRenderer = {
+    content: "[[☃ label-image 1]]",
+    images: {},
+    widgets: {
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: [
+                    "long wavelength & low frequency",
+                    "short wavelength & high frequency",
+                ],
+                imageAlt:
+                    "Section of a rainbow in the sky. From left to right, the colors appear as violet, indigo, blue, green, yellow, orange, and red.",
+                imageUrl:
+                    "https://cdn.kastatic.org/ka-content-images/227d402cb09ebc1b67f197467212fa4ab3ced5b3.jpg",
+                imageWidth: 400,
+                imageHeight: 289,
+                markers: [
+                    {
+                        answers: ["short wavelength & high frequency"],
+                        label: "Violet side of the rainbow",
+                        x: 35.8,
+                        y: 13,
+                    },
+                    {
+                        answers: ["long wavelength & low frequency"],
+                        label: "Red side of the rainbow",
+                        x: 71.8,
+                        y: 50.5,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const mixedContentQuestion: PerseusRenderer = {
+    content:
+        "A beach ball floats on water. The ball is at rest.\n\n[[☃ image 1]]\n\n**Complete the free body diagram by labeling the forces acting on the ball.**\n\n[[☃ label-image 1]]",
+    images: {
+        "https://cdn.kastatic.org/ka-content-images/0fa7eefde0067d986d2e6dc377e8d2db3e1d466f.svg":
+            {
+                width: 150,
+                height: 300,
+            },
+    },
+    widgets: {
+        "image 1": {
+            type: "image",
+            alignment: "block",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                title: "",
+                range: [
+                    [0, 10],
+                    [0, 10],
+                ],
+                box: [350, 219],
+                backgroundImage: {
+                    url: "https://cdn.kastatic.org/ka-content-images/581c7d3928ba5f81e9dc5720291ec895764cc7e8.png",
+                    width: 350,
+                    height: 219,
+                },
+                labels: [],
+                alt: "An inflated beach ball floats on the surface of water. Only a small portion of the ball is underwater.",
+                caption: "",
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: [
+                    "lift $(F_\\text{L})$",
+                    "buoyant force $(F_\\text{B})$",
+                    "gravity $(F_\\text{g})$",
+                    "normal force $(F_\\text{N})$",
+                ],
+                imageAlt:
+                    "A model shows a square with two arrows pointing out of it. One arrow points up and another arrow points down.",
+                imageUrl:
+                    "https://cdn.kastatic.org/ka-content-images/b24e40b5a36890130acfb7bd237c4bf0d85c7b44.svg",
+                imageWidth: 150,
+                imageHeight: 300,
+                markers: [
+                    {
+                        answers: ["buoyant force $(F_\\text{B})$"],
+                        label: "An arrow that points upward from the square",
+                        x: 64.2,
+                        y: 17.6,
+                    },
+                    {
+                        answers: ["gravity $(F_\\text{g})$"],
+                        label: "An arrow that points downward from the square",
+                        x: 66.2,
+                        y: 81.8,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -121,6 +121,35 @@ describe("expression mobile", () => {
         );
     });
 
+    it("shows keypad after focused input interaction", async () => {
+        render(<ConnectedRenderer />);
+
+        const input = screen.getByLabelText(
+            "Math input box Tap with one or two fingers to open keyboard",
+        );
+
+        fireEvent.touchStart(input);
+
+        // waiting because `visibility` is animated
+        await waitFor(() =>
+            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
+        );
+
+        userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
+
+        // wait for the keypad to close
+        await waitFor(() =>
+            expect(screen.queryByRole("button", {name: "1"})).toBeNull(),
+        );
+
+        fireEvent.touchStart(input);
+
+        // confirm that the keypad has reopened
+        await waitFor(() =>
+            expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
+        );
+    });
+
     it("is possible to use the keypad", async () => {
         render(<ConnectedRenderer />);
 

package/src/widgets/label-image/__stories__/answer-pill.stories.tsx

@@ -22,7 +22,7 @@ export default story;
 export const SingleAnswer = {
     args: {
         id: "1",
-        selectedAnswers: ["Answer Pill!"],
+        selectedAnswers: ["Answer Pill"],
         markerRef: null,
         side: "top",
         onClick: () => {},
@@ -42,7 +42,7 @@ export const MultipleAnswers = {
 export const Correct = {
     args: {
         id: "1",
-        selectedAnswers: ["Right Answer!"],
+        selectedAnswers: ["Right Answer"],
         showCorrectness: "correct",
         markerRef: null,
         side: "top",
@@ -53,7 +53,7 @@ export const Correct = {
 export const Incorrect = {
     args: {
         id: "1",
-        selectedAnswers: ["Wrong Answer!"],
+        selectedAnswers: ["Wrong Answer"],
         showCorrectness: "incorrect",
         markerRef: null,
         side: "top",

package/src/widgets/label-image/answer-pill.tsx

@@ -72,7 +72,7 @@ export const AnswerPill = (props: {
                         incorrect && styles.incorrect,
                     ]}
                 >
-                    <Renderer content={answerString} />
+                    <Renderer content={answerString} inline />
                 </Pill>
             )}
         </Popper>

package/src/widgets/label-image.tsx

@@ -667,7 +667,7 @@ export class LabelImage extends React.Component<
                 [`margin${
                     markerPosition.charAt(0).toUpperCase() +
                     markerPosition.slice(1)
-                }`]: 5, // move pill further from marker
+                }`]: 15, // move pill further from marker
             };
 
             const showAnswerChoice =

package/src/widgets/passage-ref-target.tsx

@@ -50,8 +50,11 @@ class PassageRefTarget extends React.Component<any> {
         return (
             <Renderer
                 content={this.props.content}
-                // @ts-expect-error - TS2322 - Type '{ content: any; inline: boolean; apiOptions: any; linterContext: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Renderer> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | ... 3 more ... | "legacyPerseusLint"> & InexactPartial<...> & InexactPartial<...>'.
-                inline={true}
+                // This was already here before inline was recently added (#873)
+                // It was for a different use case a long time ago:
+                // https://phabricator.khanacademy.org/D12113
+                // Commenting out to prevent unanticipated side effects
+                // inline={true}
                 apiOptions={this.props.apiOptions}
                 linterContext={this.props.linterContext}
             />