Hints: fix hints type on PerseusItem to be correct

.changeset/gentle-planes-rest.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Correct `hints` type on ItemRenderer

packages/perseus-editor/src/hint-editor.tsx

@@ -318,14 +318,13 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
         silent: boolean,
     ) => {
         // TODO(joel) - lens
-        const hints = _(this.props.hints).clone();
+        const hints = [...this.props.hints];
         hints[i] = _.extend(
             {},
             this.serializeHint(i, {keepDeletedWidgets: true}),
             newProps,
         );
 
-        // @ts-expect-error - TS2740 - Type 'Hint' is missing the following properties from type 'readonly Hint[]': length, concat, join, slice, and 18 more.
         this.props.onChange({hints: hints}, cb, silent);
     };
 
@@ -335,23 +334,18 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
             return;
         }
 
-        const hints = _(this.props.hints).clone();
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+        const hints = [...this.props.hints];
         hints.splice(i, 1);
-        // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints});
     };
 
     handleHintMove: (i: number, dir: number) => void = (
         i: number,
         dir: number,
     ) => {
-        const hints = _(this.props.hints).clone();
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+        const hints = [...this.props.hints];
         const hint = hints.splice(i, 1)[0];
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
         hints.splice(i + dir, 0, hint);
-        // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints}, () => {
             // eslint-disable-next-line react/no-string-refs
             // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
@@ -360,10 +354,9 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     };
 
     addHint: () => void = () => {
-        const hints = _(this.props.hints)
-            .clone()
-            // @ts-expect-error - TS2339 - Property 'concat' does not exist on type 'Hint'.
-            .concat([{content: ""}]);
+        const hints = [...this.props.hints].concat([
+            {content: "", images: {}, widgets: {}},
+        ]);
         this.props.onChange({hints: hints}, () => {
             const i = hints.length - 1;
             // eslint-disable-next-line react/no-string-refs

packages/perseus/src/index.ts

@@ -152,7 +152,6 @@ export type {
     DomInsertCheckFn,
     EditorMode,
     FocusPath,
-    Hint,
     ImageDict,
     ImageUploader,
     JiptLabelStore,
@@ -167,6 +166,7 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
+    Hint,
     LockedFigure,
     LockedFigureColor,
     LockedFigureFillType,

packages/perseus/src/perseus-types.ts

@@ -87,7 +87,7 @@ export type PerseusItem = {
     // The details of the question being asked to the user.
     question: PerseusRenderer;
     // A collection of hints to be offered to the user that support answering the question.
-    hints: ReadonlyArray<PerseusRenderer>;
+    hints: ReadonlyArray<Hint>;
     // Details about the tools the user might need to answer the question
     answerArea: PerseusAnswerArea | null | undefined;
     // Multi-item should only show up in Test Prep content and it is a variant of a PerseusItem
@@ -127,6 +127,15 @@ export type PerseusRenderer = {
     };
 };
 
+export type Hint = PerseusRenderer & {
+    /**
+     * When `true`, causes the previous hint to be replaced with this hint when
+     * displayed. When `false`, the previous hint remains visible when this one
+     * is displayed.
+     */
+    replace?: boolean;
+};
+
 export type PerseusImageDetail = {
     // The width of the image
     width: number;

packages/perseus/src/types.ts

@@ -1,8 +1,8 @@
 import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
 import type {
+    Hint,
     PerseusAnswerArea,
-    PerseusRenderer,
     PerseusWidget,
     PerseusWidgetsMap,
 } from "./perseus-types";
@@ -47,10 +47,6 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type Hint = PerseusRenderer & {
-    replace?: boolean;
-};
-
 export type Version = {
     major: number;
     minor: number;