@khanacademy/perseus 15.0.0 → 17.0.0

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

@@ -1,3 +1,4 @@
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 /**
  * A copy of the ItemRenderer which renders its question renderer and hints
  * renderer normally instead of ReactDOM.render()ing them into elements in the
@@ -11,6 +12,7 @@ import Renderer from "./renderer";
 import type { APIOptions, FocusPath, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface, RendererInterface, KEScore } from "@khanacademy/perseus-core";
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type OwnProps = {
     apiOptions: APIOptions;
     hintsVisible?: number;
@@ -18,6 +20,7 @@ type OwnProps = {
         hints: ReadonlyArray<any>;
         question: any;
     };
+    linterContext: LinterContextProps;
     problemNum?: number;
     reviewMode?: boolean;
     keypadElement?: KeypadAPI | null | undefined;
@@ -30,6 +33,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 type State = {
     questionCompleted: boolean;
@@ -100,5 +104,41 @@ export declare class ServerItemRenderer extends React.Component<Props, State> im
     setAssetStatus: (assetKey: string, status: boolean) => void;
     render(): React.ReactNode;
 }
-declare const ref: React.ForwardRefExoticComponent<Omit<OwnProps & HOCProps, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
+declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps, "item" | "problemNum" | "reviewMode" | "keypadElement" | "hintsVisible" | "dependencies"> & {
+    linterContext?: PerseusLinter.LinterContextProps | undefined;
+    apiOptions?: Readonly<{
+        isArticle?: boolean | undefined;
+        onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+        onFocusChange?: ((newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+        GroupMetadataEditor?: React.ComponentType<any> | undefined;
+        showAlignmentOptions?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+        getAnotherHint?: (() => unknown) | undefined;
+        interactionCallback?: (() => unknown) | undefined;
+        groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+        imagePlaceholder?: React.ReactNode;
+        widgetPlaceholder?: React.ReactNode;
+        baseElements?: {
+            Link: React.ComponentType<any>;
+        } | undefined;
+        imagePreloader?: ((dimensions: import("./types").Dimensions) => React.ReactNode) | undefined;
+        trackInteraction?: ((args: {
+            type: string;
+            id: string;
+            correct?: boolean | undefined;
+        } & Partial<import("./types").TrackingGradedGroupExtraArguments> & Partial<import("./types").TrackingSequenceExtraArguments>) => void) | undefined;
+        customKeypad?: boolean | undefined;
+        nativeKeypadProxy?: ((blur: () => void) => KeypadAPI) | undefined;
+        isMobile?: boolean | undefined;
+        setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+        useDraftEditor?: boolean | undefined;
+        hintProgressColor?: string | undefined;
+        canScrollPage?: boolean | undefined;
+        inModal?: boolean | undefined;
+        crossOutEnabled?: boolean | undefined;
+        editorChangeDelay?: number | undefined;
+    }> | undefined;
+    onRendered?: ((isRendered: boolean) => void) | undefined;
+} & {}, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
 export default ref;

package/dist/strings.js

@@ -53,8 +53,6 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
-    i18n._("Cosine", {}),
-    i18n._("Cube root", {}),
     i18n._("Current", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
@@ -62,19 +60,13 @@ module.exports = [
     i18n._("Dilation", {}),
     i18n.$_("Dilation about %(point)s by %(scale)s", {}),
     i18n.$_("Dilation of scale %(scale)s about %(point)s", {}),
-    i18n._("Divide", {}),
     i18n._("Drag handles to make graph", {}),
     i18n._("End of reading passage.", {}),
     i18n._("entered in an invalid answer.", {}),
-    i18n._("Equals sign", {}),
     i18n.$_("Error rendering: %(error)s", {}),
     i18n._("Explain", {}),
-    i18n._("Exponent", {}),
     i18n._("False", {}),
-    i18n._("Fraction, excluding the current expression", {}),
     i18n._("Get another hint", {}),
-    i18n._("Greater than or equal to sign", {}),
-    i18n._("Greater than sign", {}),
     i18n._("Hide answer choices", {}),
     i18n._("Hide explanation", {}),
     i18n._("Hint #%(pos)s", {}),
@@ -87,38 +79,27 @@ module.exports = [
     i18n._("It looks like you left something blank or ", {}),
     i18n._("Keep trying", {}),
     i18n._("Khan Academy video wrapper", {}),
-    i18n._("Less than or equal to sign", {}),
-    i18n._("Less than sign", {}),
     // I18N: a label next to a reading passage to denote the line number
     i18n._("Line ", {}),
     i18n.$_("line %(lineNumber)s", {}),
     i18n.$_("lines %(lineRange)s", {}),
     i18n._("Loading...", {}),
-    i18n._("Logarithm with base 10", {}),
-    i18n._("Logarithm with custom base", {}),
     i18n._("Make circle filled", {}),
     i18n._("Make circle open", {}),
     i18n._("Make sure you fill in all cells in the matrix.", {}),
     i18n._("Make sure you select something for every row.", {}),
-    i18n._("Minus", {}),
     i18n.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
-    i18n._("Multiply", {}),
-    i18n._("Natural logarithm", {}),
     i18n._("Next question", {}),
     i18n._("No", {}),
     i18n._("None of the above", {}),
-    i18n._("Not-equals sign", {}),
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
     i18n._("Oops!", {}),
     i18n._("open math keypad", {}),
     i18n._("Parameter", {}),
-    i18n._("Phi", {}),
-    i18n._("Pi", {}),
     i18n._("Please choose the correct number of answers.", {}),
     i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
-    i18n._("Plus", {}),
     i18n._("Reaction arrow pointing to the right.", {}),
     // I18N: As in the command, "Reflect the polygon"
     i18n._("Reflect", {}),
@@ -136,19 +117,15 @@ module.exports = [
     i18n._("Run simulation", {}),
     i18n._("Sample size:", {}),
     i18n._("See video transcript", {}),
-    i18n._("Sine", {}),
     i18n._("Skip to %(title)s", {}),
     i18n._("Something went wrong.", {}),
     i18n._("Sorry, I don't understand that!", {}),
-    i18n._("Square root", {}),
     i18n._("Switch direction", {}),
-    i18n._("Tangent", {}),
     i18n._("Tap each dot on the image to select all answers that apply.", {}),
     i18n._("Tap each dot on the image to select an answer.", {}),
     i18n._("Tap to add points", {}),
     i18n._("That answer is numerically incorrect.", {}),
     i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
-    i18n._("Theta", {}),
     i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
     i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
     i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "15.0.0",
+    "version": "17.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.6",
         "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/math-input": "^16.1.0",
+        "@khanacademy/math-input": "^16.1.1",
         "@khanacademy/perseus-core": "1.4.0",
         "@khanacademy/perseus-linter": "^0.3.9",
         "@khanacademy/pure-markdown": "^0.2.12",

package/src/__stories__/server-item-renderer.stories.tsx

@@ -1,10 +1,13 @@
 import * as React from "react";
 
 import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-renderer-with-debug-ui";
+import {testDependenciesV2} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
+    itemWithLintingError,
     labelImageItem,
 } from "../__testdata__/server-item-renderer.testdata";
+import {ServerItemRenderer} from "../server-item-renderer";
 
 type StoryArgs = Record<any, any>;
 
@@ -23,3 +26,19 @@ export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
 export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };
+
+export const WithLintingError = (args: StoryArgs): React.ReactElement => {
+    return (
+        <ServerItemRenderer
+            problemNum={0}
+            item={itemWithLintingError}
+            dependencies={testDependenciesV2}
+            linterContext={{
+                contentType: "",
+                highlightLint: true,
+                paths: [],
+                stack: [],
+            }}
+        />
+    );
+};

package/src/__testdata__/server-item-renderer.testdata.ts

@@ -158,3 +158,16 @@ export const mockedItem: PerseusItem = {
     itemDataVersion: {major: 0, minor: 0},
     answer: null,
 };
+
+export const itemWithLintingError: PerseusItem = {
+    question: {
+        content: "# h1s aren't allowed",
+        images: {},
+        widgets: {},
+    },
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};

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

@@ -10,6 +10,7 @@ import {
 } from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
+    itemWithLintingError,
     mockedItem,
 } from "../__testdata__/server-item-renderer.testdata";
 import * as Dependencies from "../dependencies";
@@ -529,4 +530,40 @@ describe("server item renderer", () => {
             expect(screen.getByRole("textbox")).toHaveValue("-42");
         });
     });
+
+    describe("content editing", () => {
+        it("shouldn't show linting errors when highlightLint is false", () => {
+            // Arrange and Act
+            renderQuestion(itemWithLintingError, undefined, {
+                linterContext: {
+                    contentType: "exercise",
+                    highlightLint: false,
+                    paths: [],
+                    stack: [],
+                },
+            });
+
+            expect(
+                screen.queryByText("Don't use level-1 headings", {
+                    exact: false,
+                }),
+            ).not.toBeInTheDocument();
+        });
+
+        it("should show linting errors when highlightLint is true", () => {
+            // Arrange and Act
+            renderQuestion(itemWithLintingError, undefined, {
+                linterContext: {
+                    contentType: "exercise",
+                    highlightLint: true,
+                    paths: [],
+                    stack: [],
+                },
+            });
+
+            expect(
+                screen.getByText("Don't use level-1 headings", {exact: false}),
+            ).toBeInTheDocument();
+        });
+    });
 });

package/src/components.ts

@@ -12,5 +12,4 @@ export {default as PropCheckBox} from "./components/prop-check-box";
 export {default as RangeInput} from "./components/range-input";
 export {default as SvgImage} from "./components/svg-image";
 export {default as TextInput} from "./components/text-input";
-export {default as TexButtons} from "./components/tex-buttons";
 export {default as TextListEditor} from "./components/text-list-editor";

package/src/server-item-renderer.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 /**
  * A copy of the ItemRenderer which renders its question renderer and hints
@@ -27,6 +28,8 @@ import type {
     RendererInterface,
     KEScore,
 } from "@khanacademy/perseus-core";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 const {mapObject} = Objective;
 
@@ -37,6 +40,7 @@ type OwnProps = {
         hints: ReadonlyArray<any>;
         question: any;
     };
+    linterContext: LinterContextProps;
     problemNum?: number;
     reviewMode?: boolean;
     keypadElement?: KeypadAPI | null | undefined;
@@ -52,6 +56,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 
 type State = {
@@ -83,6 +88,7 @@ export class ServerItemRenderer
 
     static defaultProps: DefaultProps = {
         apiOptions: {} as any, // a deep default is done in `this.update()`
+        linterContext: PerseusLinter.linterContextDefault,
         onRendered: (isRendered: boolean) => {},
     };
 
@@ -415,6 +421,10 @@ export class ServerItemRenderer
                     content={this.props.item.question.content}
                     widgets={this.props.item.question.widgets}
                     images={this.props.item.question.images}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "question",
+                    )}
                     {...this.props.dependencies}
                 />
             </AssetContext.Provider>
@@ -426,6 +436,10 @@ export class ServerItemRenderer
                 hintsVisible={this.props.hintsVisible}
                 apiOptions={apiOptions}
                 ref={(elem) => (this.hintsRenderer = elem)}
+                linterContext={PerseusLinter.pushContextStack(
+                    this.props.linterContext,
+                    "hints",
+                )}
             />
         );
 
@@ -460,7 +474,7 @@ const styles = StyleSheet.create({
 
 const ref = React.forwardRef<
     ServerItemRenderer,
-    Omit<React.ComponentProps<typeof ServerItemRenderer>, "onRendered">
+    Omit<PropsFor<typeof ServerItemRenderer>, "onRendered">
 >((props, ref) => (
     <LoadingContext.Consumer>
         {({onRendered}) => (

package/src/styles/khan-exercise.css

@@ -675,30 +675,6 @@ div.timeline-total {
     width: 100px;
 }
 
-#previous-step {
-    margin: 5px;
-    cursor: pointer;
-    float: left;
-    width: 100px;
-}
-
-#next-step {
-    margin: 5px;
-    cursor: pointer;
-    float: right;
-    width: 80px;
-}
-
-#previous-step span {
-    background: url(/images/previous-step.png) no-repeat 0 50% transparent;
-    padding: 4px 0 4px 25px;
-}
-
-#next-step span {
-    background: url(/images/next-step.png) no-repeat 100% 50% transparent;
-    padding: 4px 25px 4px 0;
-}
-
 #next-problem {
     margin: 5px;
     cursor: pointer;