Update mathjax-renderer to v2. (#1235)

## Summary: This adds in a required locale param to createMathField, which is the biggest change, and technically a breaking change, so I'm going to do a major version bump on math-input. Issue: FEI-5571 ## Test plan: Tests all pass. Author: jeresig Reviewers: benchristel, jeremywiebe Required Reviewers: Approved By: benchristel Checks: ✅ codecov/project, ❌ codecov/patch, ✅ Upload Coverage, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1235
Khan · May 8, 2024 · 87169b2 · 87169b2
1 parent d341a66
commit 87169b2
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 23 deletions.
diff --git a/.changeset/slow-pans-work.md b/.changeset/slow-pans-work.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/math-input": major
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Update mathjax-renderer usage, locale is now required for createMathField.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@jest/globals": "^29.7.0",
     "@khanacademy/eslint-config": "^4.0.0",
     "@khanacademy/eslint-plugin": "^3.0.0",
-    "@khanacademy/mathjax-renderer": "^1.7.2",
+    "@khanacademy/mathjax-renderer": "^2.0.0",
     "@khanacademy/wonder-blocks-button": "6.3.0",
     "@khanacademy/wonder-blocks-i18n": "^2.0.2",
     "@khanacademy/wonder-blocks-layout": "^2.0.31",

diff --git a/packages/math-input/package.json b/packages/math-input/package.json
@@ -41,7 +41,7 @@
         "mathquill": "https://github.com/Khan/mathquill/releases/download/v1.0.0/mathquill-v1.0.0.tgz"
     },
     "devDependencies": {
-        "@khanacademy/mathjax-renderer": "^1.7.2",
+        "@khanacademy/mathjax-renderer": "^2.0.0",
         "@khanacademy/wonder-blocks-clickable": "^4.1.0",
         "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-popover": "^3.1.3",
@@ -61,7 +61,7 @@
         "react-transition-group": "^4.4.1"
     },
     "peerDependencies": {
-        "@khanacademy/mathjax-renderer": "^1.7.2",
+        "@khanacademy/mathjax-renderer": "^2.0.0",
         "@khanacademy/wonder-blocks-clickable": "^4.2.0",
         "@khanacademy/wonder-blocks-core": "^6.4.0",
         "@khanacademy/wonder-blocks-popover": "^3.2.0",

diff --git a/packages/math-input/src/components/input/__tests__/mathquill-helpers.test.ts b/packages/math-input/src/components/input/__tests__/mathquill-helpers.test.ts
@@ -8,7 +8,7 @@ describe("MathQuill Helpers", () => {
         it("returns NONE for empty MathField", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
 
             // Act
             const context = getCursorContext(mathField);
@@ -20,7 +20,7 @@ describe("MathQuill Helpers", () => {
         it("returns BEFORE_FRACTION when before a fraction", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // create fraction and move cursor before it
             mathField.cmd("\\frac");
             mathField.keystroke("Left");
@@ -35,7 +35,7 @@ describe("MathQuill Helpers", () => {
         it("returns IN_PARENS when in parenthesis", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // MQ puts you inside parens when you start a paren
             mathField.typedText("(");
 
@@ -49,7 +49,7 @@ describe("MathQuill Helpers", () => {
         it("returns IN_NUMERATOR when in numerator", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // MQ puts you in the numerator when making a fraction
             mathField.cmd("\\frac");
 
@@ -63,7 +63,7 @@ describe("MathQuill Helpers", () => {
         it("returns IN_DENOMINATOR when in denominator", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // create fraction and move cursor to denominator
             mathField.cmd("\\frac");
             mathField.keystroke("Down");
@@ -78,7 +78,7 @@ describe("MathQuill Helpers", () => {
         it("returns IN_SUB_SCRIPT when in subscript", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // "_" triggers a subscript
             mathField.typedText("6_");
 
@@ -92,7 +92,7 @@ describe("MathQuill Helpers", () => {
         it("returns IN_SUPER_SCRIPT when in superscript", () => {
             // Arrange
             const mount = document.createElement("div");
-            const mathField = createMathField(mount, mockStrings);
+            const mathField = createMathField(mount, "en", mockStrings);
             // "^" triggers a superscript
             mathField.typedText("6^");
 

diff --git a/packages/math-input/src/components/input/math-wrapper.ts b/packages/math-input/src/components/input/math-wrapper.ts
@@ -43,7 +43,7 @@ class MathWrapper {
         locale: string,
         callbacks = {},
     ) {
-        this.mathField = createMathField(element, strings, () => {
+        this.mathField = createMathField(element, locale, strings, () => {
             return {
                 // use a span instead of a textarea so that we don't bring up the
                 // native keyboard on mobile when selecting the input

diff --git a/packages/math-input/src/components/input/mathquill-instance.ts b/packages/math-input/src/components/input/mathquill-instance.ts
@@ -101,6 +101,7 @@ const createBaseConfig = (): MathFieldConfig => ({
  */
 export function createMathField(
     container: HTMLDivElement | HTMLSpanElement,
+    locale: string,
     strings: MathInputStrings,
     configCallback?: (baseConfig: MathFieldConfig) => MathFieldConfig,
 ): MathFieldInterface {
@@ -132,7 +133,7 @@ export function createMathField(
     //   mocked in consuming packages now that we do not bundle source code.
     //   When it eventually times out, it will cause arbitrary test failures.
     !inJest &&
-        SpeechRuleEngine.setup().then((SRE) =>
+        SpeechRuleEngine.setup(locale).then((SRE) =>
             mathField.setMathspeakOverride(SRE.texToSpeech),
         );
 

diff --git a/packages/math-input/src/components/key-handlers/__tests__/handle-jump-out.test.ts b/packages/math-input/src/components/key-handlers/__tests__/handle-jump-out.test.ts
@@ -6,7 +6,7 @@ describe("handleJumpOut", () => {
     it("jumps out of parenthesis", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.typedText("(4");
@@ -20,7 +20,7 @@ describe("handleJumpOut", () => {
     it("jumps into numerator", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.typedText("4");
@@ -36,7 +36,7 @@ describe("handleJumpOut", () => {
     it("jumps out of numerator", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.cmd("frac");
@@ -51,7 +51,7 @@ describe("handleJumpOut", () => {
     it("jumps out of denominator", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.cmd("frac");
@@ -68,7 +68,7 @@ describe("handleJumpOut", () => {
     it("jumps out of superscript", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.typedText("4^22");
@@ -82,7 +82,7 @@ describe("handleJumpOut", () => {
     it("jumps out of subscript", () => {
         // Arrange
         const mount = document.createElement("div");
-        const mathField = createMathField(mount, mockStrings);
+        const mathField = createMathField(mount, "en", mockStrings);
 
         // Act
         mathField.typedText("4_22");

diff --git a/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx b/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx
@@ -30,6 +30,7 @@ function V2KeypadWithMathquill(props: Props) {
         if (!mathField && mathFieldWrapperRef.current) {
             const mathFieldInstance = createMathField(
                 mathFieldWrapperRef.current,
+                "en",
                 strings,
                 (baseConfig) => {
                     return {

diff --git a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
@@ -29,6 +29,7 @@ export function V2KeypadWithMathquill() {
         if (!mathField && mathFieldWrapperRef.current) {
             const mathFieldInstance = createMathField(
                 mathFieldWrapperRef.current,
+                "en",
                 mockStrings,
                 (baseConfig) => ({
                     ...baseConfig,

diff --git a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
@@ -20,7 +20,7 @@ type Props = {
 export default function MathquillInput(props: Props) {
     const mathFieldWrapperRef = useRef<HTMLSpanElement>(null);
     const mathFieldInstance = useRef<MathFieldInterface>();
-    const {strings} = useMathInputI18n();
+    const {locale, strings} = useMathInputI18n();
 
     useEffect(() => {
         // If we have the mount for the input, but not the input
@@ -29,6 +29,7 @@ export default function MathquillInput(props: Props) {
             // Initialize MathQuill.MathField instance
             mathFieldInstance.current = createMathField(
                 mathFieldWrapperRef.current,
+                locale,
                 strings,
                 (baseConfig) => ({
                     ...baseConfig,

diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
@@ -168,6 +168,7 @@ class InnerMathInput extends React.Component<InnerProps, State> {
             // Initialize MathQuill.MathField instance
             this.__mathField = createMathField(
                 this.__mathFieldWrapperRef,
+                locale,
                 this.props.mathInputStrings,
                 (baseConfig) => ({
                     ...baseConfig,

diff --git a/testing/test-mathjax.tsx b/testing/test-mathjax.tsx
@@ -15,6 +15,7 @@ const renderer = new MathJaxRenderer({
     // environment without a layout engine, e.g. jsdom.
     shouldFixUnicodeLayout: true,
     fontURL: "https://cdn.kastatic.org/fonts/mathjax",
+    locale: "en",
 });
 
 type Props = {

diff --git a/yarn.lock b/yarn.lock
@@ -2434,10 +2434,10 @@
     "@typescript-eslint/utils" "^5.60.1"
     checksync "^5.0.5"
 
-"@khanacademy/mathjax-renderer@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@khanacademy/mathjax-renderer/-/mathjax-renderer-1.7.2.tgz#18127f24a9ae2c77424ee4cce52e62d558258e25"
-  integrity sha512-p4mYMrgX7CdgtPR3zAeThh3ZkteaxlB1PLIY4CcHVeKYmVXklWPh57tpj6gt3eHycEZqX4LpHYp69Z466rdApA==
+"@khanacademy/mathjax-renderer@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/mathjax-renderer/-/mathjax-renderer-2.0.0.tgz#a3eccf7853d5127ec1393acb3ffd7aa546aa1475"
+  integrity sha512-ikJzvId18FXdAtn+LoozfnuXHnmb9er3b+6yAUokmtEVzWdBxDfwNawHJsKLEHo3Kq2ifMDxBMMDqAfy1QEcKA==
   dependencies:
     mathjax-full "3.2.2"
     mu-lambda "^0.0.3"