@khanacademy/perseus 10.0.1 → 11.0.0

package/dist/perseus-api.d.ts

@@ -65,7 +65,7 @@ export declare const ApiOptions: {
     readonly defaults: Readonly<Readonly<{
         isArticle?: boolean | undefined;
         onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-        onFocusChange?: ((newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
         GroupMetadataEditor?: React.ComponentType<any> | undefined;
         showAlignmentOptions?: boolean | undefined;
         readOnly?: boolean | undefined;
@@ -108,7 +108,7 @@ export declare const ApiOptions: {
         isArticle: NonNullable<boolean | undefined>;
         isMobile: NonNullable<boolean | undefined>;
         useV2Keypad: NonNullable<boolean | undefined>;
-        onFocusChange: (newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+        onFocusChange: (newFocusPath: import("./types").FocusPath, oldFocusPath: import("./types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
         onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
         readOnly: NonNullable<boolean | undefined>;
         setDrawingAreaAvailable: (arg1: boolean) => unknown;

package/dist/server-item-renderer.d.ts

@@ -10,7 +10,8 @@ import * as React from "react";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { APIOptions, FocusPath, PerseusDependenciesV2 } from "./types";
-import type { RendererInterface, KEScore } from "@khanacademy/perseus-core";
+import type { KeypadAPI } from "@khanacademy/math-input";
+import type { KeypadContextRendererInterface, RendererInterface, KEScore } from "@khanacademy/perseus-core";
 type OwnProps = // These props are used by the ProvideKeypad mixin.
 KeypadProps & {
     apiOptions: APIOptions;
@@ -21,7 +22,7 @@ KeypadProps & {
     };
     problemNum?: number;
     reviewMode?: boolean;
-    keypadElement?: any | null | undefined;
+    keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
 };
 type HOCProps = {
@@ -43,7 +44,7 @@ type SerializedState = {
     question: any;
     hints: any;
 };
-export declare class ServerItemRenderer extends React.Component<Props, State> implements RendererInterface {
+export declare class ServerItemRenderer extends React.Component<Props, State> implements RendererInterface, KeypadContextRendererInterface {
     questionRenderer: Renderer;
     hintsRenderer: any;
     _currentFocus: FocusPath;
@@ -110,7 +111,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<KeypadProps & {
     };
     problemNum?: number | undefined;
     reviewMode?: boolean | undefined;
-    keypadElement?: any | null | undefined;
+    keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
 } & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
 export default ref;

package/dist/types.d.ts

@@ -8,6 +8,7 @@ import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 import type * as React from "react";
+import type ReactDOM from "react-dom";
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 type Empty = Record<never, never>;
 export type Dimensions = {
@@ -85,7 +86,7 @@ type TrackInteractionArgs = {
 export type APIOptions = Readonly<{
     isArticle?: boolean;
     onInputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
-    onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: HTMLElement, focusedElement?: HTMLElement) => unknown;
+    onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: ReturnType<typeof ReactDOM.findDOMNode>, focusedElement?: HTMLElement) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;
     showAlignmentOptions?: boolean;
     readOnly?: boolean;

package/dist/widgets/expression.d.ts

@@ -94,7 +94,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -137,7 +137,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -159,7 +159,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -202,7 +202,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -224,7 +224,7 @@ declare const _default: Readonly<{
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -267,7 +267,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -300,7 +300,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -343,7 +343,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -365,7 +365,7 @@ declare const _default: Readonly<{
         apiOptions: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -408,7 +408,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;
@@ -430,7 +430,7 @@ declare const _default: Readonly<{
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
             GroupMetadataEditor?: React.ComponentType<any> | undefined;
             showAlignmentOptions?: boolean | undefined;
             readOnly?: boolean | undefined;
@@ -473,7 +473,7 @@ declare const _default: Readonly<{
             isArticle: NonNullable<boolean | undefined>;
             isMobile: NonNullable<boolean | undefined>;
             useV2Keypad: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: HTMLElement | undefined, focusedElement?: HTMLElement | undefined) => unknown;
+            onFocusChange: (newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown;
             onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
             readOnly: NonNullable<boolean | undefined>;
             setDrawingAreaAvailable: (arg1: boolean) => unknown;

package/package.json

@@ -3,13 +3,14 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "10.0.1",
+    "version": "11.0.0",
     "publishConfig": {
         "access": "public"
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/Khan/perseus.git"
+        "url": "https://github.com/Khan/perseus.git",
+        "directory": "packages/perseus"
     },
     "bugs": {
         "url": "https://github.com/Khan/perseus/issues"
@@ -23,8 +24,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^10.1.0",
-        "@khanacademy/perseus-core": "0.2.0",
+        "@khanacademy/math-input": "^11.0.0",
+        "@khanacademy/perseus-core": "1.0.0",
         "@khanacademy/perseus-linter": "^0.3.2",
         "@khanacademy/pure-markdown": "^0.2.4",
         "@khanacademy/simple-markdown": "^0.10.0"

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

@@ -1,3 +1,4 @@
+import {KeypadContext} from "@khanacademy/math-input";
 import React from "react";
 
 import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
@@ -5,8 +6,10 @@ import {
     singleSectionArticle,
     multiSectionArticle,
     passageArticle,
+    articleWithExpression,
 } from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
+import TestKeypadContextWrapper from "../widgets/__stories__/test-keypad-context-wrapper";
 
 export default {
     title: "Perseus/Renderers/Article Renderer",
@@ -48,3 +51,22 @@ export const PassageArticle = ({useNewStyles}): any => (
         useNewStyles={useNewStyles}
     />
 );
+
+export const ExpressionArticle = ({useNewStyles}): any => (
+    <TestKeypadContextWrapper>
+        <KeypadContext.Consumer>
+            {({keypadElement, setRenderer, scrollableElement}) => (
+                <ArticleRenderer
+                    ref={(node) => {
+                        setRenderer(node);
+                    }}
+                    json={articleWithExpression}
+                    dependencies={storybookDependenciesV2}
+                    useNewStyles={useNewStyles}
+                    apiOptions={{isMobile: true, customKeypad: true}}
+                    keypadElement={keypadElement}
+                />
+            )}
+        </KeypadContext.Consumer>
+    </TestKeypadContextWrapper>
+);

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

@@ -58,6 +58,34 @@ export const passageArticle: PerseusRenderer = {
     },
 };
 
+export const articleWithExpression: 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},
+        },
+    },
+};
+
 export const multiSectionArticle: ReadonlyArray<PerseusRenderer> = [
     {
         content:

package/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -230,7 +230,7 @@ exports[`renderer rendering should render block math on mobile 1`] = `
           style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
         >
           <span
-            style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+            style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1;"
           >
             <span
               class="mock-TeX"

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

@@ -28,6 +28,7 @@ import MockWidgetExport from "./mock-widget";
 import type {PerseusItem} from "../perseus-types";
 import type {APIOptions} from "../types";
 import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
+import type {KeypadAPI} from "@khanacademy/math-input";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 // This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
@@ -342,12 +343,16 @@ describe("server item renderer", () => {
             // Arranged
             const onFocusChange = jest.fn();
             const keypadElementDOMNode = <div />;
-            const keypadElement = {
+            const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
                     .mockImplementation(() => keypadElementDOMNode),
                 activate: jest.fn(),
-            } as const;
+                dismiss: jest.fn(),
+                configure: jest.fn(),
+                setCursor: jest.fn(),
+                setKeyHandler: jest.fn(),
+            };
             const {renderer} = renderQuestion(
                 itemWithInput,
                 {onFocusChange, isMobile: true},
@@ -402,13 +407,16 @@ describe("server item renderer", () => {
             // Arranged
             const onFocusChange = jest.fn();
             const keypadElementDOMNode = <div />;
-            const keypadElement = {
+            const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
                     .mockImplementation(() => keypadElementDOMNode),
                 activate: jest.fn(),
                 dismiss: jest.fn(),
-            } as const;
+                configure: jest.fn(),
+                setCursor: jest.fn(),
+                setKeyHandler: jest.fn(),
+            };
             const {renderer} = renderQuestion(
                 itemWithInput,
                 {onFocusChange, isMobile: true},

package/src/article-renderer.tsx

@@ -8,7 +8,6 @@ import classNames from "classnames";
 import * as React from "react";
 
 import {DependenciesContext} from "./dependencies";
-import ProvideKeypad from "./mixins/provide-keypad";
 import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
@@ -16,6 +15,8 @@ import Util from "./util";
 import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusRenderer} from "./perseus-types";
 import type {APIOptions, PerseusDependenciesV2} from "./types";
+import type {KeypadAPI} from "@khanacademy/math-input";
+import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 type Props = {
@@ -28,7 +29,7 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
-
+    keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 
@@ -38,11 +39,10 @@ type DefaultProps = {
     linterContext: Props["linterContext"];
 };
 
-type State = {
-    keypadElement: any | null;
-};
-
-class ArticleRenderer extends React.Component<Props, State> {
+class ArticleRenderer
+    extends React.Component<Props>
+    implements KeypadContextRendererInterface
+{
     _currentFocus: any;
 
     static defaultProps: DefaultProps = {
@@ -53,26 +53,16 @@ class ArticleRenderer extends React.Component<Props, State> {
 
     constructor(props: Props) {
         super(props);
-        this.state = ProvideKeypad.getInitialState.call(this);
     }
 
     componentDidMount() {
-        ProvideKeypad.componentDidMount.call(this);
         this._currentFocus = null;
     }
 
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        return nextProps !== this.props || nextState !== this.state;
+    shouldComponentUpdate(nextProps: Props): boolean {
+        return nextProps !== this.props;
     }
 
-    componentWillUnmount() {
-        ProvideKeypad.componentWillUnmount.call(this);
-    }
-
-    keypadElement: () => void = () => {
-        return ProvideKeypad.keypadElement.call(this);
-    };
-
     _handleFocusChange: (arg1: any, arg2: any) => void = (
         newFocusPath,
         oldFocusPath,
@@ -87,7 +77,8 @@ class ArticleRenderer extends React.Component<Props, State> {
     };
 
     _setCurrentFocus: (arg1: any) => void = (newFocusPath) => {
-        const keypadElement = this.keypadElement();
+        const {keypadElement, apiOptions} = this.props;
+        const {isMobile} = apiOptions;
 
         const prevFocusPath = this._currentFocus;
         this._currentFocus = newFocusPath;
@@ -110,18 +101,14 @@ class ArticleRenderer extends React.Component<Props, State> {
             this.props.apiOptions.onFocusChange(
                 this._currentFocus,
                 prevFocusPath,
-                // @ts-expect-error - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
-                didFocusInput && keypadElement && keypadElement.getDOMNode(),
+                didFocusInput ? keypadElement?.getDOMNode() : null,
             );
         }
 
-        // @ts-expect-error - TS1345 - An expression of type 'void' cannot be tested for truthiness.
-        if (keypadElement) {
+        if (keypadElement && isMobile) {
             if (didFocusInput) {
-                // @ts-expect-error - TS2339 - Property 'activate' does not exist on type 'never'.
                 keypadElement.activate();
             } else {
-                // @ts-expect-error - TS2339 - Property 'dismiss' does not exist on type 'never'.
                 keypadElement.dismiss();
             }
         }
@@ -189,7 +176,7 @@ class ArticleRenderer extends React.Component<Props, State> {
                             ref={refForSection}
                             key={i}
                             key_={i}
-                            keypadElement={this.keypadElement()}
+                            keypadElement={this.props.keypadElement}
                             apiOptions={{
                                 ...apiOptions,
                                 onFocusChange: (newFocusPath, oldFocusPath) => {

package/src/components/__stories__/zoomable.stories.tsx

@@ -10,6 +10,11 @@ type Story = {
 
 export default {
     title: "Perseus/Components/Zoomable",
+    argTypes: {
+        disableEntranceAnimation: {
+            control: {type: "boolean"},
+        },
+    },
 } as Story;
 
 type Bounds = {
@@ -29,7 +34,10 @@ const computeChildBounds = (
 
 export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
     return (
-        <Zoomable computeChildBounds={computeChildBounds}>
+        <Zoomable
+            computeChildBounds={computeChildBounds}
+            disableEntranceAnimation={!!args.disableEntranceAnimation}
+        >
             <span>
                 Here's some zoomed-out content.
                 <br />

package/src/components/zoomable-tex.tsx

@@ -59,6 +59,8 @@ export default class ZoomableTeX extends React.Component<Props, State> {
             <Zoomable
                 readyToMeasure={this.state.isRendered}
                 computeChildBounds={computeMathBounds}
+                animateHeight={false}
+                disableEntranceAnimation={true}
             >
                 <AssetContext.Consumer>
                     {({setAssetStatus}) => (

package/src/components/zoomable.tsx

@@ -14,6 +14,8 @@ type Bounds = {
 type Props = {
     children: React.ReactNode;
     animateHeight: boolean;
+
+    disableEntranceAnimation: boolean;
     /**
      * Optional function that allows customizations in zooming.
      *
@@ -35,6 +37,7 @@ type DefaultProps = {
     animateHeight: Props["animateHeight"];
     computeChildBounds: Props["computeChildBounds"];
     readyToMeasure: Props["readyToMeasure"];
+    disableEntranceAnimation: Props["disableEntranceAnimation"];
 };
 
 type State = {
@@ -60,6 +63,7 @@ class Zoomable extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         animateHeight: false,
         readyToMeasure: true,
+        disableEntranceAnimation: false,
         computeChildBounds: (parentNode) => {
             const firstChild = parentNode.firstElementChild;
 
@@ -245,7 +249,7 @@ class Zoomable extends React.Component<Props, State> {
     render(): React.ReactNode {
         const {visible, scale, compactHeight, expandedHeight, zoomed} =
             this.state;
-        const {animateHeight} = this.props;
+        const {animateHeight, disableEntranceAnimation} = this.props;
 
         const property = animateHeight
             ? "opacity transform height"
@@ -261,7 +265,10 @@ class Zoomable extends React.Component<Props, State> {
             : {};
 
         // Do a fancy little slide as we fade the contents in the first time.
-        const translateOffset = visible ? "" : " translate(0, 8px)";
+        const shouldSlide = !disableEntranceAnimation && !visible;
+        const translateOffset = shouldSlide ? " translate(0, 8px)" : "";
+        const opacity = shouldSlide ? 0 : 1;
+
         const scaleString = (scale ?? 1).toString();
         const transform = zoomed
             ? `scale(1, 1) ${translateOffset}`
@@ -273,7 +280,7 @@ class Zoomable extends React.Component<Props, State> {
             height: zoomed ? expandedHeight : compactHeight,
             transform: transform,
             transformOrigin: "0 0",
-            opacity: visible ? 1 : 0,
+            opacity: opacity,
             WebkitTapHighlightColor: "transparent",
             ...transitionStyle,
         } as const;

package/src/server-item-renderer.tsx

@@ -22,7 +22,12 @@ import Util from "./util";
 
 import type {KeypadProps} from "./mixins/provide-keypad";
 import type {APIOptions, FocusPath, PerseusDependenciesV2} from "./types";
-import type {RendererInterface, KEScore} from "@khanacademy/perseus-core";
+import type {KeypadAPI} from "@khanacademy/math-input";
+import type {
+    KeypadContextRendererInterface,
+    RendererInterface,
+    KEScore,
+} from "@khanacademy/perseus-core";
 
 const {mapObject} = Objective;
 
@@ -36,9 +41,7 @@ type OwnProps = // These props are used by the ProvideKeypad mixin.
         };
         problemNum?: number;
         reviewMode?: boolean;
-        // from KeypadContext
-        keypadElement?: any | null | undefined;
-
+        keypadElement?: KeypadAPI | null | undefined;
         dependencies: PerseusDependenciesV2;
     };
 
@@ -71,7 +74,7 @@ type SerializedState = {
 /* eslint-disable-next-line react/no-unsafe */
 export class ServerItemRenderer
     extends React.Component<Props, State>
-    implements RendererInterface
+    implements RendererInterface, KeypadContextRendererInterface
 {
     // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
     questionRenderer: Renderer;
@@ -176,8 +179,8 @@ export class ServerItemRenderer
             onFocusChange(
                 this._currentFocus,
                 prevFocus,
-                didFocusInput && keypadElement && keypadElement.getDOMNode(),
-                // @ts-expect-error - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
+                didFocusInput ? keypadElement?.getDOMNode() : null,
+                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
                 didFocusInput &&
                     this.questionRenderer.getDOMNodeForPath(newFocus),
             );

package/src/styles/widgets/image.less

@@ -1,7 +1,39 @@
 .perseus-image-widget {
+    margin: 0;
+
     .perseus-image-title {
         text-align: center;
     }
+
+    .perseus-image-caption {
+        color: rgba(33, 36, 44, 0.7);
+        max-width: 420px;
+        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;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            margin-left: 4px;
+            width: 1px;
+            background-color: rgba(33, 36, 44, 0.5);
+
+            border: 1px solid rgba(33, 36, 44, 0.5);
+            border-radius: 2px;
+        }
+        .paragraph {
+            font-size: 14px;
+            padding-right: 12px;
+        }
+    }
 }
 
 .perseus-image-editor {

package/src/types.ts

@@ -8,6 +8,7 @@ import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 import type * as React from "react";
+import type ReactDOM from "react-dom";
 
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 
@@ -143,10 +144,7 @@ export type APIOptions = Readonly<{
     onFocusChange?: (
         newFocusPath: FocusPath,
         oldFocusPath: FocusPath,
-        // These two parameters are only used in library-exercise.jsx and
-        // practice-exercise.jsx and in the mobile app
-        // (javascript/perseus-package/perseus-mobile-bridge.js).
-        keypadElement?: HTMLElement,
+        keypadElement?: ReturnType<typeof ReactDOM.findDOMNode>,
         focusedElement?: HTMLElement,
     ) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;