fix: initialize MathJax correctly (#57321)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com>

client/src/templates/Challenges/classic/show.tsx

@@ -403,13 +403,11 @@ function ShowClassic({
   }) => {
     return (
       <SidePanel
-        block={block}
         challengeDescription={
           <ChallengeDescription
             description={description}
             instructions={instructions}
             superBlock={superBlock}
-            block={block}
           />
         }
         challengeTitle={
@@ -422,7 +420,6 @@ function ShowClassic({
         }
         instructionsPanelRef={instructionsPanelRef}
         toolPanel={toolPanel}
-        superBlock={superBlock}
         hasDemo={hasDemo}
       />
     );

client/src/templates/Challenges/components/challenge-description.tsx

@@ -1,25 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-
+import { initializeMathJax, isMathJaxAllowed } from '../../../utils/math-jax';
 import PrismFormatted from './prism-formatted';
 import './challenge-description.css';
 
 type Props = {
   description?: string;
   instructions?: string;
-  superBlock?: string;
+  superBlock: string;
-  block?: string;
 };
+
 const ChallengeDescription = ({
   description,
   instructions,
-  superBlock,
+  superBlock
-  block
 }: Props) => {
-  const sbClass = superBlock ? superBlock : '';
+  useEffect(() => {
-  const bClass = block ? block : '';
+    if (isMathJaxAllowed(superBlock)) {
+      initializeMathJax();
+    }
+  }, [superBlock]);
+
   return (
     <div
-      className={`challenge-instructions ${sbClass} ${bClass}`}
+      className={'challenge-instructions mathjax-support'}
       data-playwright-test-label='challenge-description'
     >
       {description && <PrismFormatted text={description} />}

client/src/templates/Challenges/components/side-panel.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Trans } from 'react-i18next';
 import { Spacer } from '@freecodecamp/ui';
 
 import { Test } from '../../../redux/prop-types';
-import { SuperBlocks } from '../../../../../shared/config/curriculum';
-import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import { openModal } from '../redux/actions';
 import TestSuite from './test-suite';
@@ -30,35 +28,23 @@ type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = typeof mapDispatchToProps;
 
 interface SidePanelProps extends DispatchProps, StateProps {
-  block: string;
   challengeDescription: ReactElement;
   challengeTitle: ReactElement;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   hasDemo: boolean;
   toolPanel: ReactNode;
-  superBlock: SuperBlocks;
   tests: Test[];
 }
 
 export function SidePanel({
-  block,
   challengeDescription,
   challengeTitle,
   instructionsPanelRef,
   hasDemo,
   toolPanel,
-  superBlock,
   tests,
   openModal
 }: SidePanelProps): JSX.Element {
-  useEffect(() => {
-    const mathJaxChallenge =
-      superBlock === SuperBlocks.RosettaCode ||
-      superBlock === SuperBlocks.ProjectEuler ||
-      block === 'intermediate-algorithm-scripting';
-    initializeMathJax(mathJaxChallenge);
-  }, [block, superBlock]);
-
   return (
     <div
       className='instructions-panel'

client/src/templates/Challenges/generic/show.tsx

@@ -217,7 +217,10 @@ const ShowGeneric = ({
 
             {description && (
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <ChallengeDescription description={description} />
+                <ChallengeDescription
+                  description={description}
+                  superBlock={superBlock}
+                />
                 <Spacer size='m' />
               </Col>
             )}
@@ -239,7 +242,10 @@ const ShowGeneric = ({
 
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
               {instructions && (
-                <ChallengeDescription instructions={instructions} />
+                <ChallengeDescription
+                  instructions={instructions}
+                  superBlock={superBlock}
+                />
               )}
 
               <Spacer size='m' />

client/src/templates/Challenges/ms-trophy/show.tsx

@@ -184,6 +184,7 @@ function MsTrophy(props: MsTrophyProps) {
                 {title}
               </ChallengeTitle>
               <ChallengeDescription
+                superBlock={superBlock}
                 description={description}
                 instructions={instructions}
               />

client/src/templates/Challenges/projects/backend/show.tsx

@@ -189,6 +189,7 @@ const ShowBackEnd = (props: BackEndProps) => {
                 {title}
               </ChallengeTitle>
               <ChallengeDescription
+                superBlock={superBlock}
                 description={description}
                 instructions={instructions}
               />

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -158,6 +158,7 @@ const ShowFrontEndProject = (props: ProjectProps) => {
                 {title}
               </ChallengeTitle>
               <ChallengeDescription
+                superBlock={superBlock}
                 description={description}
                 instructions={instructions}
               />

client/src/templates/Challenges/quiz/show.tsx

@@ -313,7 +313,10 @@ const ShowQuiz = ({
 
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
               <Spacer size='m' />
-              <ChallengeDescription description={description} />
+              <ChallengeDescription
+                description={description}
+                superBlock={superBlock}
+              />
               <Spacer size='l' />
               <ObserveKeys>
                 <Quiz questions={quizData} disabled={hasSubmitted} />

client/src/utils/math-jax.ts

@@ -1,15 +1,19 @@
+import { SuperBlocks } from '../../../shared/config/curriculum';
 import { scriptLoader } from './script-loaders';
 
 export const mathJaxSrc =
   'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML';
 
 export const isMathJaxAllowed = (pathname: string) =>
-  [
+  superBlocksWithMathJax.some(superBlock => pathname.includes(superBlock));
-    '/learn/javascript-algorithms-and-data-structures-v8',
+
-    '/learn/project-euler/',
+const superBlocksWithMathJax = [
-    '/learn/rosetta-code',
+  SuperBlocks.JsAlgoDataStructNew,
-    '/learn/scientific-computing-with-python'
+  SuperBlocks.JsAlgoDataStruct,
-  ].some(allowedPath => pathname.includes(allowedPath));
+  SuperBlocks.ProjectEuler,
+  SuperBlocks.RosettaCode,
+  SuperBlocks.SciCompPy
+];
 
 const configure = () => {
   if (!global.MathJax) return;
@@ -21,17 +25,13 @@ const configure = () => {
         ['\\(', '\\)']
       ],
       processEscapes: true,
-      processClass:
+      processClass: 'mathjax-support'
-        'rosetta-code|project-euler|intermediate-algorithm-scripting|description-container'
     }
   });
   MathJax.Hub.Queue([
     'Typeset',
     MathJax.Hub,
-    document.querySelector('.intermediate-algorithm-scripting'),
+    document.querySelector('.mathjax-support')
-    document.querySelector('.rosetta-code'),
-    document.querySelector('.project-euler'),
-    document.querySelector('.description-container')
   ]);
 };
 

client/utils/tags.tsx

@@ -44,7 +44,7 @@ export function getheadTagComponents(): JSX.Element[] {
   return headTags;
 }
 
-export function getPostBodyComponents(pathname: string): JSX.Element[] {
+export function getPostBodyComponents(superblock: string): JSX.Element[] {
   const scripts = [];
   const mathJaxScriptElement = (
     <script
@@ -56,7 +56,7 @@ export function getPostBodyComponents(pathname: string): JSX.Element[] {
     />
   );
 
-  if (isMathJaxAllowed(pathname)) {
+  if (isMathJaxAllowed(superblock)) {
     scripts.push(mathJaxScriptElement);
   }