@khanacademy/perseus 11.1.0 → 11.3.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "11.1.0",
+    "version": "11.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,10 +24,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^11.0.0",
+        "@khanacademy/math-input": "^12.1.0",
         "@khanacademy/perseus-core": "1.0.0",
-        "@khanacademy/perseus-linter": "^0.3.2",
-        "@khanacademy/pure-markdown": "^0.2.4",
+        "@khanacademy/perseus-linter": "^0.3.3",
+        "@khanacademy/pure-markdown": "^0.2.5",
         "@khanacademy/simple-markdown": "^0.10.0"
     },
     "devDependencies": {
@@ -47,7 +47,7 @@
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
-        "@khanacademy/wonder-stuff-core": "^1.2.2",
+        "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -80,7 +80,7 @@
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
-        "@khanacademy/wonder-stuff-core": "^1.2.2",
+        "@khanacademy/wonder-stuff-core": "^1.5.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

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

@@ -25,7 +25,8 @@ export const singleSectionArticle: PerseusRenderer = {
                 },
                 labels: [],
                 alt: 'A scene from Pixar\'s film "Toy Story 3" where the characters are swimming in a sea of trash and look very afraid.',
-                caption: "",
+                caption:
+                    'A scene from Pixar\'s film "Toy Story 3" where the characters are swimming in a sea of trash and look very afraid."',
             },
             version: {major: 0, minor: 0},
         },

package/src/error-boundary.tsx

@@ -4,6 +4,7 @@ import {Errors, Log} from "./logging/log";
 
 type Props = {
     children: React.ReactNode;
+    metadata?: Record<string, string>;
 };
 type State = {
     error: string;
@@ -19,7 +20,10 @@ class ErrorBoundary extends React.Component<Props, State> {
         this.setState({error: error.toString()});
         Log.error("Perseus error boundary caught error", Errors.Internal, {
             cause: error,
-            loggedMetadata: {info: info.toString()},
+            loggedMetadata: {
+                componentStack: info.componentStack,
+                ...this.props.metadata,
+            },
         });
     }
 

package/src/mixins/provide-keypad.tsx

@@ -103,6 +103,11 @@ const ProvideKeypad = {
                     // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
                     style={_this.props.keypadStyle}
                     useV2Keypad={apiOptions.useV2Keypad}
+                    onAnalyticsEvent={async () => {
+                        // Intentionally left empty. This component is
+                        // deprecated and so we don't want/need to instrument
+                        // it.
+                    }}
                 />,
                 _this._keypadContainer,
             );

package/src/renderer.tsx

@@ -550,7 +550,10 @@ 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}>
+                <ErrorBoundary
+                    key={"container:" + id}
+                    metadata={{widget_type: type, widget_id: id}}
+                >
                     <WidgetContainer
                         ref={"container:" + id}
                         type={type}

package/src/styles/articles.less

@@ -121,7 +121,6 @@
         font-size: 14px;
         line-height: 19px;
         margin: 16px auto 42px;
-        max-width: 455px;
         text-align: left;
     }
 

package/src/styles/widgets/image.less

@@ -7,7 +7,6 @@
 
     .perseus-image-caption {
         color: rgba(33, 36, 44, 0.7);
-        max-width: 420px;
         padding-left: 16px;
         position: relative;
 

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -1,5 +1,6 @@
 import {KeypadContext, MobileKeypad} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {action} from "@storybook/addon-actions";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -12,6 +13,10 @@ const Footer = (): React.ReactElement => {
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}
+                        useV2Keypad={true}
+                        onAnalyticsEvent={async (e) => {
+                            action("onAnalyticsEvent")(e);
+                        }}
                     />
                 )}
             </KeypadContext.Consumer>

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

@@ -75,6 +75,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                   </span>
                   <figcaption
                     class="perseus-image-caption has-title"
+                    style="max-width: 420px;"
                   >
                     <div>
                       <div
@@ -273,6 +274,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                   </span>
                   <figcaption
                     class="perseus-image-caption"
+                    style="max-width: 420px;"
                   >
                     <div
                       class="perseus-renderer perseus-renderer-responsive"

package/src/widgets/expression.tsx

@@ -422,6 +422,11 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     _handleFocus: () => void = () => {
+        this.props.analytics.onAnalyticsEvent({
+            type: "perseus:expression-focused",
+            payload: null,
+        });
+
         /* c8 ignore next */
         this.props.onFocus([]);
     };

package/src/widgets/image.tsx

@@ -197,7 +197,12 @@ class ImageWidget extends React.Component<Props> {
                 const minWidth = isImageFullWidth ? null : "0 !important";
 
                 titleAndCaption = (
-                    <figcaption className={className}>
+                    <figcaption
+                        className={className}
+                        style={{
+                            maxWidth: backgroundImage.width,
+                        }}
+                    >
                         <div
                             style={{
                                 // @ts-expect-error - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
@@ -239,7 +244,12 @@ class ImageWidget extends React.Component<Props> {
 
         if (this.props.caption) {
             caption = (
-                <figcaption className="perseus-image-caption">
+                <figcaption
+                    className="perseus-image-caption"
+                    style={{
+                        maxWidth: backgroundImage.width,
+                    }}
+                >
                     <Renderer
                         content={this.props.caption}
                         apiOptions={apiOptions}