@khanacademy/perseus 12.0.1 → 12.2.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.0.1",
+    "version": "12.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.3",
         "@khanacademy/kmath": "^0.1.4",
-        "@khanacademy/math-input": "^14.1.1",
+        "@khanacademy/math-input": "^14.2.0",
         "@khanacademy/perseus-core": "1.1.2",
         "@khanacademy/perseus-linter": "^0.3.6",
         "@khanacademy/pure-markdown": "^0.2.8",
@@ -57,7 +57,7 @@
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "perseus-build-settings": "^0.2.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",

package/src/__stories__/article-renderer.stories.tsx

@@ -7,6 +7,7 @@ import {
     multiSectionArticle,
     passageArticle,
     articleWithExpression,
+    multiSectionArticleWithExpression,
 } from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 import TestKeypadContextWrapper from "../widgets/__stories__/test-keypad-context-wrapper";
@@ -55,7 +56,7 @@ export const PassageArticle = ({useNewStyles}): any => (
 export const ExpressionArticle = ({useNewStyles}): any => (
     <TestKeypadContextWrapper>
         <KeypadContext.Consumer>
-            {({keypadElement, setRenderer, scrollableElement}) => (
+            {({keypadElement, setRenderer}) => (
                 <ArticleRenderer
                     ref={(node) => {
                         setRenderer(node);
@@ -63,7 +64,32 @@ export const ExpressionArticle = ({useNewStyles}): any => (
                     json={articleWithExpression}
                     dependencies={storybookDependenciesV2}
                     useNewStyles={useNewStyles}
-                    apiOptions={{isMobile: true, customKeypad: true}}
+                    apiOptions={{
+                        isMobile: true,
+                        customKeypad: true,
+                    }}
+                    keypadElement={keypadElement}
+                />
+            )}
+        </KeypadContext.Consumer>
+    </TestKeypadContextWrapper>
+);
+
+export const MultiSectionedExpressionArticle = ({useNewStyles}): any => (
+    <TestKeypadContextWrapper>
+        <KeypadContext.Consumer>
+            {({keypadElement, setRenderer}) => (
+                <ArticleRenderer
+                    ref={(node) => {
+                        setRenderer(node);
+                    }}
+                    json={multiSectionArticleWithExpression}
+                    dependencies={storybookDependenciesV2}
+                    useNewStyles={useNewStyles}
+                    apiOptions={{
+                        isMobile: true,
+                        customKeypad: true,
+                    }}
                     keypadElement={keypadElement}
                 />
             )}

package/src/__testdata__/article-renderer.testdata.ts

@@ -125,3 +125,88 @@ export const multiSectionArticle: ReadonlyArray<PerseusRenderer> = [
         widgets: {},
     },
 ];
+
+export const multiSectionArticleWithExpression: ReadonlyArray<PerseusRenderer> =
+    [
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 1]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 1": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 2]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 2": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+        {
+            content:
+                "### Practice Problem\n\n$8\\cdot(11i+2)=$ [[☃ expression 3]]  \n*Your answer should be a complex number in the form $a+bi$ where $a$ and $b$ are real numbers.*",
+            images: {},
+            widgets: {
+                "expression 3": {
+                    alignment: "default",
+                    graded: true,
+                    options: {
+                        answerForms: [
+                            {
+                                considered: "correct",
+                                form: true,
+                                simplify: false,
+                                value: "16+88i",
+                            },
+                        ],
+                        buttonSets: ["basic"],
+                        functions: ["f", "g", "h"],
+                        times: false,
+                    },
+                    static: false,
+                    type: "expression",
+                    version: {major: 1, minor: 0},
+                },
+            },
+        },
+    ];

package/src/__tests__/article-renderer.test.tsx

@@ -0,0 +1,131 @@
+import {
+    StatefulKeypadContextProvider,
+    KeypadContext,
+} from "@khanacademy/math-input";
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {screen, render, fireEvent, waitFor} from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
+import KeypadSwitch from "../../../math-input/src/components/keypad-switch";
+import {articleWithExpression} from "../__testdata__/article-renderer.testdata";
+import ArticleRenderer from "../article-renderer";
+import * as Dependencies from "../dependencies";
+import {ApiOptions} from "../perseus-api";
+
+import type {APIOptions} from "../types";
+
+function KeypadWithContext() {
+    return (
+        <KeypadContext.Consumer>
+            {({setKeypadElement}) => {
+                return (
+                    <KeypadSwitch
+                        onElementMounted={setKeypadElement}
+                        onDismiss={() => {}}
+                        onAnalyticsEvent={async () => {}}
+                        useV2Keypad
+                    />
+                );
+            }}
+        </KeypadContext.Consumer>
+    );
+}
+// This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
+// the ArticleRenderer instead of Renderer
+export const RenderArticle = (
+    apiOptions: APIOptions = Object.freeze({}),
+): {
+    container: HTMLElement;
+    renderer: ArticleRenderer;
+} => {
+    let renderer: ArticleRenderer | null = null;
+    const {container} = render(
+        <RenderStateRoot>
+            <StatefulKeypadContextProvider>
+                <KeypadContext.Consumer>
+                    {({keypadElement, setRenderer}) => (
+                        <ArticleRenderer
+                            ref={(node) => {
+                                renderer = node;
+                                setRenderer(node);
+                            }}
+                            json={articleWithExpression}
+                            dependencies={testDependenciesV2}
+                            apiOptions={{...apiOptions}}
+                            keypadElement={keypadElement}
+                        />
+                    )}
+                </KeypadContext.Consumer>
+                <KeypadWithContext />
+            </StatefulKeypadContextProvider>
+        </RenderStateRoot>,
+    );
+    if (!renderer) {
+        throw new Error(`Failed to render!`);
+    }
+    return {container, renderer};
+};
+
+describe("article renderer", () => {
+    beforeEach(() => {
+        // Mock ResizeObserver used by the mobile keypad
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }));
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    afterEach(() => {
+        // The Renderer uses a timer to wait for widgets to complete rendering.
+        // If we don't spin the timers here, then the timer fires in the test
+        // _after_ and breaks it because we do setState() in the callback,
+        // and by that point the component has been unmounted.
+        jest.runOnlyPendingTimers();
+    });
+
+    it("should render the content", () => {
+        // Arrange and Act
+        RenderArticle({
+            ...ApiOptions.defaults,
+            isMobile: false,
+            customKeypad: false,
+        });
+
+        // Assert
+        expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("should call the onFocusChanged callback when an input is focused", async () => {
+        // Arrange
+        const answerableCallback = jest.fn();
+
+        // Act
+        RenderArticle({
+            ...ApiOptions.defaults,
+            onFocusChange: answerableCallback,
+            isMobile: true,
+            customKeypad: true,
+        });
+
+        const input = screen.getByLabelText(
+            "Math input box Tap with one or two fingers to open keyboard",
+        );
+
+        fireEvent.touchStart(input);
+
+        await waitFor(() => {
+            expect(screen.getByRole("button", {name: "4"})).toBeVisible();
+        });
+        expect(answerableCallback).toHaveBeenCalled();
+    });
+});

package/src/__tests__/item-renderer.test.tsx

@@ -1,6 +1,6 @@
 import {StatefulKeypadContextProvider} from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import {fireEvent, 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 matchers
@@ -88,7 +88,6 @@ export const renderQuestion = (
                 area. Without both of these, it fails to render anything! */}
                 <div id="workarea" />
                 <div id="hintsarea" />
-
                 <Peripherals />
             </StatefulKeypadContextProvider>
         </RenderStateRoot>,
@@ -312,23 +311,6 @@ describe("item renderer", () => {
             );
         });
 
-        it("should activate the keypad when widget with input is focused", async () => {
-            // Arrange
-            const {renderer} = renderQuestion(itemWithInput, {
-                isMobile: true,
-                customKeypad: true,
-                useV2Keypad: true,
-            });
-
-            // Act
-            renderer.focus();
-
-            // Assert
-            await waitFor(() => {
-                expect(screen.getByLabelText("7")).toBeVisible();
-            });
-        });
-
         it("should provide current and previous focus paths on focus change to, and away from, a single widget", () => {
             // Arrange
             const onFocusChange = jest.fn();

package/src/article-renderer.tsx

@@ -44,6 +44,7 @@ class ArticleRenderer
     implements KeypadContextRendererInterface
 {
     _currentFocus: any;
+    sectionRenderers: Array<Renderer> = [];
 
     static defaultProps: DefaultProps = {
         apiOptions: ApiOptions.defaults,
@@ -87,14 +88,21 @@ class ArticleRenderer
         // paths, so as to check whether the focused path represents an
         // input.
         let didFocusInput = false;
+        let focusedInput;
+
         if (this._currentFocus) {
-            const [sectionRef, ...focusPath] = this._currentFocus;
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
-            const inputPaths = this.refs[sectionRef].getInputPaths();
+            const [sectionIndex, ...focusPath] = this._currentFocus;
+
+            const inputPaths =
+                this.sectionRenderers[sectionIndex].getInputPaths();
+
             didFocusInput = inputPaths.some((inputPath) => {
                 return Util.inputPathsEqual(inputPath, focusPath);
             });
+            focusedInput =
+                this.sectionRenderers[sectionIndex].getDOMNodeForPath(
+                    focusPath,
+                );
         }
 
         if (this.props.apiOptions.onFocusChange != null) {
@@ -102,6 +110,7 @@ class ArticleRenderer
                 this._currentFocus,
                 prevFocusPath,
                 didFocusInput ? keypadElement?.getDOMNode() : null,
+                didFocusInput ? focusedInput : null,
             );
         }
 
@@ -137,10 +146,8 @@ class ArticleRenderer
 
     blur: () => void = () => {
         if (this._currentFocus) {
-            const [sectionRef, ...inputPath] = this._currentFocus;
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
-            this.refs[sectionRef].blurPath(inputPath);
+            const [sectionIndex, ...inputPath] = this._currentFocus;
+            this.sectionRenderers[sectionIndex].blurPath(inputPath);
         }
     };
 
@@ -166,47 +173,53 @@ class ArticleRenderer
         });
 
         // TODO(alex): Add mobile api functions and pass them down here
-        const sections = this._sections().map((section, i) => {
-            const refForSection = `section-${i}`;
+        // We're using the index as the key here because we don't have a unique
+        // identifier for each section. This should be fine as we never remove
+        // or reorder sections.
+        const sections = this._sections().map((section, sectionIndex) => {
             return (
-                <DependenciesContext.Provider value={this.props.dependencies}>
-                    <div key={i} className="clearfix">
-                        <Renderer
-                            {...section}
-                            ref={refForSection}
-                            key={i}
-                            key_={i}
-                            keypadElement={this.props.keypadElement}
-                            apiOptions={{
-                                ...apiOptions,
-                                onFocusChange: (newFocusPath, oldFocusPath) => {
-                                    // Prefix the paths with the relevant section,
-                                    // so as to allow us to distinguish between
-                                    // equivalently-named inputs across Renderers.
-                                    this._handleFocusChange(
-                                        newFocusPath &&
-                                            [refForSection].concat(
-                                                newFocusPath,
-                                            ),
-                                        oldFocusPath &&
-                                            [refForSection].concat(
-                                                oldFocusPath,
-                                            ),
-                                    );
-                                },
-                            }}
-                            linterContext={PerseusLinter.pushContextStack(
-                                this.props.linterContext,
-                                "article",
-                            )}
-                            legacyPerseusLint={this.props.legacyPerseusLint}
-                        />
-                    </div>
-                </DependenciesContext.Provider>
+                <div key={sectionIndex} className="clearfix">
+                    <Renderer
+                        {...section}
+                        ref={(elem) => {
+                            if (elem) {
+                                this.sectionRenderers[sectionIndex] = elem;
+                            }
+                        }}
+                        key={sectionIndex}
+                        key_={sectionIndex}
+                        keypadElement={this.props.keypadElement}
+                        apiOptions={{
+                            ...apiOptions,
+                            onFocusChange: (newFocusPath, oldFocusPath) => {
+                                // Prefix the paths with the relevant section index,
+                                // so as to allow us to distinguish between
+                                // equivalently-named inputs across Renderers.
+                                this._handleFocusChange(
+                                    newFocusPath &&
+                                        [sectionIndex].concat(newFocusPath),
+                                    oldFocusPath &&
+                                        [sectionIndex].concat(oldFocusPath),
+                                );
+                            },
+                        }}
+                        linterContext={PerseusLinter.pushContextStack(
+                            this.props.linterContext,
+                            "article",
+                        )}
+                        legacyPerseusLint={this.props.legacyPerseusLint}
+                    />
+                </div>
             );
         });
 
-        return <div className={classes}>{sections}</div>;
+        return (
+            <div className={classes}>
+                <DependenciesContext.Provider value={this.props.dependencies}>
+                    {sections}
+                </DependenciesContext.Provider>
+            </div>
+        );
     }
 }
 

package/src/styles/perseus-renderer.less

@@ -441,6 +441,7 @@
 /* Widget CSS */
 
 .perseus-graph-padding {
+    box-sizing: content-box;
     padding: 25px 25px 0 0;
 }
 

package/src/styles/widgets/image.less

@@ -1,5 +1,6 @@
 .perseus-image-widget {
-    margin: 0;
+    margin-left: auto;
+    margin-right: auto;
 
     .perseus-image-title {
         text-align: center;
@@ -10,11 +11,6 @@
         padding-left: 16px;
         position: relative;
 
-        // This offsets the paragraph's padding
-        // So that the caption sits much closer
-        // to the image
-        top: -12px;
-
         &::before {
             content: "";
             position: absolute;

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

@@ -72,6 +72,7 @@ export const Question2 = (args: StoryArgs): React.ReactElement => {
                     imageOptions != null
                         ? {
                               ...imageOptions,
+                              alignment: "full-width",
                               title: args.title,
                               caption:
                                   "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",

package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap

@@ -1146,6 +1146,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                         >
                           <figure
                             class="perseus-image-widget"
+                            style="max-width: 380px;"
                           >
                             <div
                               class="fixed-to-responsive svg-image"

package/src/widgets/__tests__/__snapshots__/image.test.ts.snap

@@ -26,6 +26,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="fixed-to-responsive svg-image"
@@ -207,6 +208,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="perseus-image-title"

package/src/widgets/image.tsx

@@ -220,7 +220,12 @@ class ImageWidget extends React.Component<Props> {
             }
 
             return (
-                <figure className="perseus-image-widget">
+                <figure
+                    className="perseus-image-widget"
+                    style={{
+                        maxWidth: backgroundImage.width,
+                    }}
+                >
                     {image}
                     {alt}
                     {titleAndCaption}
@@ -260,7 +265,12 @@ class ImageWidget extends React.Component<Props> {
         }
 
         return (
-            <figure className="perseus-image-widget">
+            <figure
+                className="perseus-image-widget"
+                style={{
+                    maxWidth: backgroundImage.width,
+                }}
+            >
                 {title}
                 {image}
                 {alt}