[WIP] add TeX support to dropdown

packages/perseus/src/widgets/dropdown/dropdown.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
 
-import {question1} from "./dropdown.testdata";
+import {question1, question2} from "./dropdown.testdata";
 
 export default {
     title: "Perseus/Widgets/Dropdown",
@@ -13,3 +13,7 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const Question2 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question2} />;
+};

packages/perseus/src/widgets/dropdown/dropdown.testdata.ts

@@ -31,3 +31,34 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const question2: PerseusRenderer = {
+    content: "If x equals 4, then [[☃ dropdown 1]] equals $10$.",
+    images: {},
+    widgets: {
+        "dropdown 1": {
+            type: "dropdown",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                placeholder: "",
+                choices: [
+                    {
+                        content: "$5\\sqrt{x}$",
+                        correct: true,
+                    },
+                    {
+                        content: "$5x$",
+                        correct: false,
+                    },
+                ],
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 
 import {ApiOptions} from "../../perseus-api";
+import Renderer from "../../renderer";
 
 import dropdownValidator from "./dropdown-validator";
 
@@ -12,6 +13,7 @@ import type {
     PerseusDropdownRubric,
     PerseusDropdownUserInput,
 } from "../../validation.types";
+import type {PerseusI18nContext} from "@khanacademy/perseus";
 
 type Props = WidgetProps<RenderProps, PerseusDropdownRubric> & {
     selected: number;
@@ -32,6 +34,8 @@ class Dropdown extends React.Component<Props> implements Widget {
         apiOptions: ApiOptions.defaults,
     };
 
+    declare context: React.ContextType<typeof PerseusI18nContext>;
+
     focus: () => boolean = () => {
         // TODO(LP-10797): This focus() call doesn't do anything because our
         // root element is a <div> and that cannot be focused without a
@@ -62,13 +66,25 @@ class Dropdown extends React.Component<Props> implements Widget {
                 key="placeholder"
                 value="0"
                 disabled
-                label={this.props.placeholder}
+                label={
+                    <Renderer
+                        content={this.props.placeholder}
+                        strings={this.context.strings}
+                        inline
+                    />
+                }
             />,
             ...this.props.choices.map((choice, i) => (
                 <OptionItem
                     key={String(i + 1)}
                     value={String(i + 1)}
-                    label={choice}
+                    label={
+                        <Renderer
+                            content={choice}
+                            strings={this.context.strings}
+                            inline
+                        />
+                    }
                 />
             )),
         ];