@khanacademy/perseus 12.1.0 → 12.3.0

package/src/article-renderer.tsx

@@ -19,19 +19,20 @@ import type {KeypadAPI} from "@khanacademy/math-input";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
-type Props = {
-    apiOptions: APIOptions;
-    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
-    // Whether to use the new Bibliotron styles for articles
-    /**
-     * @deprecated Does nothing
-     */
-    useNewStyles: boolean;
-    linterContext: LinterContextProps;
-    legacyPerseusLint?: ReadonlyArray<string>;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-} & KeypadProps;
+type Props = Partial<React.ContextType<typeof DependenciesContext>> &
+    KeypadProps & {
+        apiOptions: APIOptions;
+        json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
+        // Whether to use the new Bibliotron styles for articles
+        /**
+         * @deprecated Does nothing
+         */
+        useNewStyles: boolean;
+        linterContext: LinterContextProps;
+        legacyPerseusLint?: ReadonlyArray<string>;
+        keypadElement?: KeypadAPI | null | undefined;
+        dependencies: PerseusDependenciesV2;
+    };
 
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
@@ -44,6 +45,7 @@ class ArticleRenderer
     implements KeypadContextRendererInterface
 {
     _currentFocus: any;
+    sectionRenderers: Array<Renderer> = [];
 
     static defaultProps: DefaultProps = {
         apiOptions: ApiOptions.defaults,
@@ -87,14 +89,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 +111,7 @@ class ArticleRenderer
                 this._currentFocus,
                 prevFocusPath,
                 didFocusInput ? keypadElement?.getDOMNode() : null,
+                didFocusInput ? focusedInput : null,
             );
         }
 
@@ -137,10 +147,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 +174,54 @@ 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}
+                        {...this.props.dependencies}
+                    />
+                </div>
             );
         });
 
-        return <div className={classes}>{sections}</div>;
+        return (
+            <div className={classes}>
+                <DependenciesContext.Provider value={this.props.dependencies}>
+                    {sections}
+                </DependenciesContext.Provider>
+            </div>
+        );
     }
 }
 

package/src/error-boundary.tsx

@@ -5,6 +5,9 @@ import {Errors, Log} from "./logging/log";
 type Props = {
     children: React.ReactNode;
     metadata?: Record<string, string>;
+
+    // A callback that is called when the error boundary traps an error.
+    onError?: (error: Error, info: any) => void;
 };
 type State = {
     error: string;

package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap

@@ -218,7 +218,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -385,7 +385,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -552,7 +552,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -719,7 +719,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -886,7 +886,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"

package/src/renderer.tsx

@@ -29,6 +29,7 @@ import preprocessTex from "./util/katex-preprocess";
 import WidgetContainer from "./widget-container";
 import * as Widgets from "./widgets";
 
+import type {DependenciesContext} from "./dependencies";
 import type {PerseusRenderer, PerseusWidgetOptions} from "./perseus-types";
 import type {
     APIOptions,
@@ -52,6 +53,8 @@ const noopOnRender = () => {};
 
 const SHOULD_CLEAR_WIDGETS_PROP_LIST = ["content", "problemNum", "widgets"];
 
+const makeContainerId = (id: string) => "container:" + id;
+
 // Check if one focus path / id path is a prefix of another
 // The focus path null will never be a prefix of any non-null
 // path, since it represents no focus.
@@ -144,7 +147,7 @@ export type Widget = {
     examples?: () => ReadonlyArray<string>;
 };
 
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions?: APIOptions;
     alwaysUpdate?: boolean;
     findExternalWidgets: any;
@@ -223,6 +226,8 @@ class Renderer extends React.Component<Props, State> {
     // The i18n linter.
     _translationLinter: TranslationLinter;
 
+    _widgetContainers: Map<string, WidgetContainer> = new Map();
+
     lastRenderedMarkdown: React.ReactNode;
     // @ts-expect-error - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
     reuseMarkdown: boolean;
@@ -390,9 +395,7 @@ class Renderer extends React.Component<Props, State> {
         // they are re-rendered, so even if they've been
         // re-rendered we need to call these methods on them.
         _.each(this.widgetIds, (id) => {
-            // eslint-disable-next-line react/no-string-refs
-            const container = this.refs["container:" + id];
-            // @ts-expect-error - TS2339 - Property 'replaceWidgetProps' does not exist on type 'ReactInstance'.
+            const container = this._widgetContainers.get(makeContainerId(id));
             container && container.replaceWidgetProps(this.getWidgetProps(id));
         });
 
@@ -550,21 +553,25 @@ class Renderer extends React.Component<Props, State> {
             // filtered out in this.render(), so we shouldn't have to
             // worry about using this widget key and ref:
             return (
-                <ErrorBoundary
-                    key={"container:" + id}
-                    metadata={{widget_type: type, widget_id: id}}
-                >
-                    <WidgetContainer
-                        ref={"container:" + id}
-                        type={type}
-                        initialProps={this.getWidgetProps(id)}
-                        shouldHighlight={shouldHighlight}
-                        linterContext={PerseusLinter.pushContextStack(
-                            this.props.linterContext,
-                            "widget",
-                        )}
-                    />
-                </ErrorBoundary>
+                <WidgetContainer
+                    key={makeContainerId(id)}
+                    id={id}
+                    ref={(node) => {
+                        const containerId = makeContainerId(id);
+                        if (node != null) {
+                            this._widgetContainers.set(containerId, node);
+                        } else {
+                            this._widgetContainers.delete(containerId);
+                        }
+                    }}
+                    type={type}
+                    initialProps={this.getWidgetProps(id)}
+                    shouldHighlight={shouldHighlight}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "widget",
+                    )}
+                />
             );
         }
         return null;
@@ -603,7 +610,6 @@ class Renderer extends React.Component<Props, State> {
 
         return {
             ...widgetProps,
-            ref: id,
             widgetId: id,
             alignment: widgetInfo && widgetInfo.alignment,
             // When determining if a widget is static, we verify that the widget is not an
@@ -853,15 +859,11 @@ class Renderer extends React.Component<Props, State> {
         ];
     };
 
-    getWidgetInstance: (id: string) => Widget | null | undefined = (
-        id: string,
-    ): Widget | null | undefined => {
-        // eslint-disable-next-line react/no-string-refs
-        const ref = this.refs["container:" + id];
+    getWidgetInstance: (id: string) => Widget | null | undefined = (id) => {
+        const ref = this._widgetContainers.get(makeContainerId(id));
         if (!ref) {
             return null;
         }
-        // @ts-expect-error - TS2339 - Property 'getWidget' does not exist on type 'ReactInstance'.
         return ref.getWidget();
     };
 
@@ -1781,7 +1783,7 @@ class Renderer extends React.Component<Props, State> {
             // widget can be undefined if it hasn't yet been rendered
             if (widget && widget.simpleValidate) {
                 widgetScores[id] = widget.simpleValidate(
-                    props?.options,
+                    {...props?.options, scoring: true},
                     onInputError,
                 );
             }

package/src/server-item-renderer.tsx

@@ -416,6 +416,7 @@ export class ServerItemRenderer
                     content={this.props.item.question.content}
                     widgets={this.props.item.question.widgets}
                     images={this.props.item.question.images}
+                    {...this.props.dependencies}
                 />
             </AssetContext.Provider>
         );

package/src/styles/constants.ts

@@ -1,7 +1,7 @@
-// @baseFontFamily:        "Proxima Nova", sans-serif;
-export const baseFontFamily = "'Proxima Nova',sans-serif";
-// @boldFontFamily:        "Proxima Nova Semibold", sans-serif;
-export const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+// @baseFontFamily:        "Lato", sans-serif;
+export const baseFontFamily = "'Lato', sans-serif";
+// @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
+export const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 // @green:                 #76a005;
 export const green = "#76A005";
 // @kaGreen:               #71b307;

package/src/styles/perseus-renderer.less

@@ -113,16 +113,6 @@
 
     // HACK(yejia): Override the font size and line height for blurbs
     //
-    // NOTE(yejia): Minion Pro is only loaded on GTP pages, because those
-    //     are the main call sites for blurbs and the passage widget. We
-    //     considered inserting the relevant stylesheet whenever the passage
-    //     widget loads, but this approach produced a "flash of unstyled
-    //     text", so we decided to embed the stylesheet into the relevant
-    //     page templates instead.
-    //
-    // NOTE(yejia): Minion Pro will not be available on ZNDs, due to
-    //     restrictions in our Adobe TypeKit configuration.
-    //
     // TODO(TP-3315): Remove once Perseus uses Wonder Blocks BodySerif
     .test-prep-blurb div.paragraph {
         font-size: 16px;
@@ -441,6 +431,7 @@
 /* Widget CSS */
 
 .perseus-graph-padding {
+    box-sizing: content-box;
     padding: 25px 25px 0 0;
 }
 

package/src/styles/variables.less

@@ -1,6 +1,6 @@
 // Steal from webapp/stylesheets/shared-package/variables.less
-@baseFontFamily: "Proxima Nova", sans-serif;
-@boldFontFamily: "Proxima Nova Semibold", sans-serif;
+@baseFontFamily: "Lato", sans-serif;
+@boldFontFamily: "Lato-Bold", "Lato", sans-serif;
 @green: #76a005;
 @kaGreen: #71b307;
 @blue: #1c758a;

package/src/styles/variables.shared.less

@@ -86,8 +86,8 @@
 
 // Typography
 @baseFontSize: 14px;
-// The body of the page is setup to use 'Helvetica' by default and 'Proxima
-// Nova' (or 'Lato' if you're testing our new typography) if/once it downloads.
+// The body of the page is setup to use 'Helvetica' by default and
+// 'Lato' if/once it downloads.
 // For your elements to follow this pattern, all you need is to make the text
 // in your element inherit from the body using the "inherit" value.
 @baseFontFamily: inherit;

package/src/styles/widgets/expression.less

@@ -63,80 +63,3 @@
         }
     }
 }
-
-// Old expression widget
-.perseus-widget-expression-old {
-    &,
-    > .output,
-    > .output > .tex,
-    > .output > .placeholder {
-        display: block;
-    }
-}
-
-.perseus-widget-expression-old input,
-#answer_area .perseus-widget-expression-old input {
-    direction: ltr;
-    border: 1px solid #a4a4a4;
-    border-radius: 5px;
-    box-sizing: border-box;
-    font-size: 14px;
-    margin-bottom: 5px;
-    max-width: 240px;
-    padding: 6px;
-    width: 100%;
-}
-
-.perseus-widget-expression-old > .output {
-    background: #f2f2f2;
-    border-radius: 5px;
-    padding: 10px;
-    margin: 10px 0;
-}
-
-#answer_area .perseus-widget-expression-old > .output {
-    background: #f7f7f7;
-}
-
-.perseus-widget-expression-old > .output > .tex {
-    overflow-x: auto;
-    padding: 5px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder {
-    position: relative;
-    height: 40px;
-    overflow-y: hidden;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error {
-    border-radius: 10px;
-    background: #f7f7f7;
-    border: 1px solid #ddd;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-    color: #000;
-    display: none;
-    font-weight: normal;
-    min-height: 22px;
-    width: 168px;
-    position: absolute;
-    top: 0px;
-    left: 40px;
-    margin: auto;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
-    background-image: url(/images/perseus/error-buddy.png);
-    background-size: 100%;
-    height: 36px;
-    width: 40px;
-    position: absolute;
-    top: -3px;
-    left: -42px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .message {
-    font: 12px @baseFontFamily;
-    line-height: 1.4em;
-    margin: 0px 4px;
-}

package/src/styles/widgets/passage.less

@@ -17,26 +17,8 @@
         margin: 22px;
         position: relative;
 
-        // Use the "Minion Pro" font, if available. If not, fall back to
-        // KaTeX_Main or another serif font.
-        //
-        // NOTE(mdr): Minion Pro is only loaded on SAT and GTP pages, because
-        //     those are the main call sites for the passage widget. We
-        //     considered inserting the relevant stylesheet whenever the
-        //     passage widget loads, but this approach produced a "flash of
-        //     unstyled text", so we decided to embed the stylesheet into the
-        //     relevant page templates instead.
-        //
-        // NOTE(mdr): Minion Pro will not be available on ZNDs, due to
-        //     restrictions in our Adobe TypeKit configuration.
-        //
-        // TODO(mdr): The BodySerif component will hopefully soon use Minion
-        //     Pro by default (WB-399). Once that happens, we should be able to
-        //     switch to the BodySerif component (TP-3112), and remove this
-        //     special font-family rule.
         div.paragraph {
-            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman",
-                serif;
+            font-family: KaTeX_Main, Times, "Times New Roman", serif;
         }
 
         .passage-title div.paragraph {

package/src/widget-container.tsx

@@ -4,6 +4,8 @@ import classNames from "classnames";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import {DependenciesContext} from "./dependencies";
+import ErrorBoundary from "./error-boundary";
 import {zIndexInteractiveComponent} from "./styles/constants";
 import {containerSizeClass, getClassFromWidth} from "./util/sizing-utils";
 import * as Widgets from "./widgets";
@@ -15,6 +17,7 @@ import type {LinterContextProps} from "@khanacademy/perseus-linter";
 type Props = {
     shouldHighlight: boolean;
     type: string; // widget type/name,
+    id: string; // widget id
     initialProps: WidgetProps<any, PerseusWidgetOptions>;
     linterContext: LinterContextProps;
 };
@@ -29,6 +32,8 @@ type State = {
 };
 
 class WidgetContainer extends React.Component<Props, State> {
+    widgetRef = React.createRef<React.ComponentType<any>>();
+
     static defaultProps: DefaultProps = {
         linterContext: linterContextDefault,
     };
@@ -132,14 +137,32 @@ class WidgetContainer extends React.Component<Props, State> {
                 className={className}
                 style={isStatic ? staticContainerStyles : {}}
             >
-                <WidgetType
-                    {...this.state.widgetProps}
-                    linterContext={linterContext}
-                    containerSizeClass={this.state.sizeClass}
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="widget"
-                />
-                {isStatic && <div style={staticOverlayStyles} />}
+                <DependenciesContext.Consumer>
+                    {({analytics}) => (
+                        <ErrorBoundary
+                            metadata={{
+                                widget_type: type,
+                                widget_id: this.props.id,
+                            }}
+                            onError={(error) => {
+                                analytics.onAnalyticsEvent({
+                                    type: "perseus:widget-rendering-error",
+                                    payload: {
+                                        widgetType: type,
+                                    },
+                                });
+                            }}
+                        >
+                            <WidgetType
+                                {...this.state.widgetProps}
+                                linterContext={linterContext}
+                                containerSizeClass={this.state.sizeClass}
+                                ref={this.widgetRef}
+                            />
+                            {isStatic && <div style={staticOverlayStyles} />}
+                        </ErrorBoundary>
+                    )}
+                </DependenciesContext.Consumer>
             </div>
         );
     }
@@ -163,8 +186,7 @@ class WidgetContainer extends React.Component<Props, State> {
     }
 
     getWidget: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.widget;
+        return this.widgetRef.current;
     };
 
     replaceWidgetProps: (arg1: WidgetProps<any, PerseusWidgetOptions>) => void =

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question} from "../__testdata__/label-image.testdata";
+
+import type {APIOptions} from "../../types";
+
+type StoryArgs = {
+    isMobile: boolean;
+};
+
+type ImageStory = {
+    title: string;
+    args: StoryArgs;
+};
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return <RendererWithDebugUI question={question} apiOptions={apiOptions} />;
+};
+
+export default {
+    title: "Perseus/Widgets/Label Image",
+    args: {
+        isMobile: false,
+    },
+} as ImageStory;