@khanacademy/perseus 16.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
@@ -8,18 +9,18 @@
  */
 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 { 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 & {
+import type { LinterContextProps } from "@khanacademy/perseus-linter";
+type OwnProps = {
     apiOptions: APIOptions;
     hintsVisible?: number;
     item: {
         hints: ReadonlyArray<any>;
         question: any;
     };
+    linterContext: LinterContextProps;
     problemNum?: number;
     reviewMode?: boolean;
     keypadElement?: KeypadAPI | null | undefined;
@@ -32,6 +33,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 type State = {
     questionCompleted: boolean;
@@ -102,16 +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<KeypadProps & {
-    apiOptions: APIOptions;
-    hintsVisible?: number | undefined;
-    item: {
-        hints: ReadonlyArray<any>;
-        question: any;
-    };
-    problemNum?: number | undefined;
-    reviewMode?: boolean | undefined;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-} & 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": "16.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__/item-renderer.testdata";
+} 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

@@ -0,0 +1,173 @@
+import type {
+    InputNumberWidget,
+    LabelImageWidget,
+    PerseusItem,
+    PerseusRenderer,
+} from "../perseus-types";
+
+export const itemWithInput: PerseusItem = {
+    question: {
+        content:
+            "Enter the number $$-42$$ in the box: [[\u2603 input-number 1]]",
+        images: {},
+        widgets: {
+            "input-number 1": {
+                type: "input-number",
+                graded: true,
+                options: {
+                    answerType: "number",
+                    value: "-42",
+                    simplify: "required",
+                    size: "normal",
+                    inexact: false,
+                    maxError: 0.1,
+                },
+            } as InputNumberWidget,
+        },
+    },
+    hints: [
+        {content: "Hint #1", images: {}, widgets: {}},
+        {content: "Hint #2", images: {}, widgets: {}},
+        {content: "Hint #3", images: {}, widgets: {}},
+    ],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};
+
+export const labelImageItem: PerseusItem = {
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    _multi: null,
+    answer: null,
+    hints: [],
+    itemDataVersion: {major: 0, minor: 1},
+    question: {
+        content:
+            "Catherine created a chart and a bar graph to show how many dogs of each breed the animal shelter placed into good homes last year. \n\nDog breed  | Number of dogs \n:- | :-: \nBulldog | $32$ \nGreyhound | $72$ \nMastiff | $56$ \nCollie | $40$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n\n\n",
+        images: {
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/2f60b533892fe6cb9351f704ffdada8ae4bc655c":
+                {height: 365, width: 503},
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/75f937c6ea133d655dd9f698a58182efd6cc85d4":
+                {height: 293, width: 331},
+        },
+        widgets: {
+            "label-image 1": {
+                alignment: "default",
+                graded: true,
+                static: false,
+                type: "label-image",
+                version: {major: 0, minor: 0},
+                options: {
+                    choices: ["Bulldog", "Greyhound", "Mastiff", "Collie"],
+                    hideChoicesFromInstructions: true,
+                    imageAlt:
+                        "A bar graph with four bar lines shows the horizontal axis labeled Dog breed and the vertical axis labeled Number of dogs. The vertical axis is labeled from the bottom of the axis to the top of the axis as follows: 0, 8, 16, 24, 32, 40, 48, 56, 64, 72, and 80. The horizontal axis has, from left to right, four unlabeled bar lines as follows: the first unlabeled bar line extends to 56, the second unlabeled bar line extends to 72, the third unlabeled bar line extends to 40, and the fourth unlabeled bar line extends to 32.",
+                    imageHeight: 293,
+                    imageUrl:
+                        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/64ace45942546183c3dc842cb0e9e4f64a312727",
+                    imageWidth: 331,
+                    markers: [
+                        {
+                            answers: ["Bulldog"],
+                            label: "The fourth unlabeled bar line.",
+                            x: 87.3,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Collie"],
+                            label: "The third unlabeled bar line.",
+                            x: 67.7,
+                            y: 90.5,
+                        },
+                        {
+                            answers: ["Greyhound"],
+                            label: "The second unlabeled bar line.",
+                            x: 47.7,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Mastiff"],
+                            label: "The first unlabeled bar line.",
+                            x: 27.8,
+                            y: 90.5,
+                        },
+                    ],
+                    multipleAnswers: false,
+                    static: false,
+                },
+            } as LabelImageWidget,
+        },
+    },
+};
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedItem: PerseusItem = {
+    // The mock widget type is not part of the PerseusWidget type union (and
+    // we don't want to make it such to avoid polluting our production types
+    // for test purposes) so we force TypeScript to accept it here.
+    // @ts-expect-error - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+    question: {
+        content:
+            "Mock widget ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]] [[\u2603 mock-widget 4]]",
+        images: {},
+        widgets: {
+            "mock-widget 1": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 2": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+            "mock-widget 3": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 4": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+        },
+    } as PerseusRenderer,
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    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,8 +10,9 @@ import {
 } from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
+    itemWithLintingError,
     mockedItem,
-} from "../__testdata__/item-renderer.testdata";
+} from "../__testdata__/server-item-renderer.testdata";
 import * as Dependencies from "../dependencies";
 import WrappedServerItemRenderer, {
     ServerItemRenderer,
@@ -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/article-renderer.tsx

@@ -12,27 +12,25 @@ import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 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 = 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 Props = Partial<React.ContextType<typeof DependenciesContext>> & {
+    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"];

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/index.ts

@@ -14,7 +14,6 @@ export {default as itemVersion} from "./item-version";
  * Renderers
  */
 export {default as ArticleRenderer} from "./article-renderer";
-export {default as ItemRenderer} from "./item-renderer";
 export {default as ServerItemRenderer} from "./server-item-renderer";
 export {default as HintsRenderer} from "./hints-renderer";
 export {default as HintRenderer} from "./hint-renderer";

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
@@ -20,7 +21,6 @@ import {ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-import type {KeypadProps} from "./mixins/provide-keypad";
 import type {APIOptions, FocusPath, PerseusDependenciesV2} from "./types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {
@@ -28,22 +28,24 @@ 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;
 
-type OwnProps = // These props are used by the ProvideKeypad mixin.
-    KeypadProps & {
-        apiOptions: APIOptions;
-        hintsVisible?: number;
-        item: {
-            hints: ReadonlyArray<any>;
-            question: any;
-        };
-        problemNum?: number;
-        reviewMode?: boolean;
-        keypadElement?: KeypadAPI | null | undefined;
-        dependencies: PerseusDependenciesV2;
+type OwnProps = {
+    apiOptions: APIOptions;
+    hintsVisible?: number;
+    item: {
+        hints: ReadonlyArray<any>;
+        question: any;
     };
+    linterContext: LinterContextProps;
+    problemNum?: number;
+    reviewMode?: boolean;
+    keypadElement?: KeypadAPI | null | undefined;
+    dependencies: PerseusDependenciesV2;
+};
 
 type HOCProps = {
     onRendered: (isRendered: boolean) => void;
@@ -54,6 +56,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 
 type State = {
@@ -85,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) => {},
     };
 
@@ -417,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>
@@ -428,6 +436,10 @@ export class ServerItemRenderer
                 hintsVisible={this.props.hintsVisible}
                 apiOptions={apiOptions}
                 ref={(elem) => (this.hintsRenderer = elem)}
+                linterContext={PerseusLinter.pushContextStack(
+                    this.props.linterContext,
+                    "hints",
+                )}
             />
         );
 
@@ -462,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;