From 68550ccbb4a1b46f27efc7adec72b2a497648e27 Mon Sep 17 00:00:00 2001 From: Sem Bauke Date: Mon, 23 Dec 2024 12:53:38 +0100 Subject: [PATCH] fix: initialize MathJax correctly (#57321) Co-authored-by: Naomi --- .../src/templates/Challenges/classic/show.tsx | 3 --- .../components/challenge-description.tsx | 21 +++++++++------- .../Challenges/components/side-panel.tsx | 16 +------------ .../src/templates/Challenges/generic/show.tsx | 10 ++++++-- .../templates/Challenges/ms-trophy/show.tsx | 1 + .../Challenges/projects/backend/show.tsx | 1 + .../Challenges/projects/frontend/show.tsx | 1 + client/src/templates/Challenges/quiz/show.tsx | 5 +++- client/src/utils/math-jax.ts | 24 +++++++++---------- client/utils/tags.tsx | 4 ++-- 10 files changed, 42 insertions(+), 44 deletions(-) diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index 86457401183..9d478a58dc2 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -403,13 +403,11 @@ function ShowClassic({ }) => { return ( } challengeTitle={ @@ -422,7 +420,6 @@ function ShowClassic({ } instructionsPanelRef={instructionsPanelRef} toolPanel={toolPanel} - superBlock={superBlock} hasDemo={hasDemo} /> ); diff --git a/client/src/templates/Challenges/components/challenge-description.tsx b/client/src/templates/Challenges/components/challenge-description.tsx index 86f3aa107f0..22a652ab8ea 100644 --- a/client/src/templates/Challenges/components/challenge-description.tsx +++ b/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; - block?: string; + superBlock: string; }; + const ChallengeDescription = ({ description, instructions, - superBlock, - block + superBlock }: Props) => { - const sbClass = superBlock ? superBlock : ''; - const bClass = block ? block : ''; + useEffect(() => { + if (isMathJaxAllowed(superBlock)) { + initializeMathJax(); + } + }, [superBlock]); + return (
{description && } diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx index 293a4773364..dbf8680e3c8 100644 --- a/client/src/templates/Challenges/components/side-panel.tsx +++ b/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; type DispatchProps = typeof mapDispatchToProps; interface SidePanelProps extends DispatchProps, StateProps { - block: string; challengeDescription: ReactElement; challengeTitle: ReactElement; instructionsPanelRef: React.RefObject; 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 (
- + )} @@ -239,7 +242,10 @@ const ShowGeneric = ({ {instructions && ( - + )} diff --git a/client/src/templates/Challenges/ms-trophy/show.tsx b/client/src/templates/Challenges/ms-trophy/show.tsx index 56997a2f49b..4ee7cdf940b 100644 --- a/client/src/templates/Challenges/ms-trophy/show.tsx +++ b/client/src/templates/Challenges/ms-trophy/show.tsx @@ -184,6 +184,7 @@ function MsTrophy(props: MsTrophyProps) { {title} diff --git a/client/src/templates/Challenges/projects/backend/show.tsx b/client/src/templates/Challenges/projects/backend/show.tsx index bb565d79be9..ed053d076b5 100644 --- a/client/src/templates/Challenges/projects/backend/show.tsx +++ b/client/src/templates/Challenges/projects/backend/show.tsx @@ -189,6 +189,7 @@ const ShowBackEnd = (props: BackEndProps) => { {title} diff --git a/client/src/templates/Challenges/projects/frontend/show.tsx b/client/src/templates/Challenges/projects/frontend/show.tsx index 88ad872d870..f27ee706d7d 100644 --- a/client/src/templates/Challenges/projects/frontend/show.tsx +++ b/client/src/templates/Challenges/projects/frontend/show.tsx @@ -158,6 +158,7 @@ const ShowFrontEndProject = (props: ProjectProps) => { {title} diff --git a/client/src/templates/Challenges/quiz/show.tsx b/client/src/templates/Challenges/quiz/show.tsx index cf6b180f330..098612c6c99 100644 --- a/client/src/templates/Challenges/quiz/show.tsx +++ b/client/src/templates/Challenges/quiz/show.tsx @@ -313,7 +313,10 @@ const ShowQuiz = ({ - + diff --git a/client/src/utils/math-jax.ts b/client/src/utils/math-jax.ts index b97ea11bffc..b537b017b4d 100644 --- a/client/src/utils/math-jax.ts +++ b/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) => - [ - '/learn/javascript-algorithms-and-data-structures-v8', - '/learn/project-euler/', - '/learn/rosetta-code', - '/learn/scientific-computing-with-python' - ].some(allowedPath => pathname.includes(allowedPath)); + superBlocksWithMathJax.some(superBlock => pathname.includes(superBlock)); + +const superBlocksWithMathJax = [ + SuperBlocks.JsAlgoDataStructNew, + SuperBlocks.JsAlgoDataStruct, + SuperBlocks.ProjectEuler, + SuperBlocks.RosettaCode, + SuperBlocks.SciCompPy +]; const configure = () => { if (!global.MathJax) return; @@ -21,17 +25,13 @@ const configure = () => { ['\\(', '\\)'] ], processEscapes: true, - processClass: - 'rosetta-code|project-euler|intermediate-algorithm-scripting|description-container' + processClass: 'mathjax-support' } }); MathJax.Hub.Queue([ 'Typeset', MathJax.Hub, - document.querySelector('.intermediate-algorithm-scripting'), - document.querySelector('.rosetta-code'), - document.querySelector('.project-euler'), - document.querySelector('.description-container') + document.querySelector('.mathjax-support') ]); }; diff --git a/client/utils/tags.tsx b/client/utils/tags.tsx index a130cd72e52..4f1d9c9814a 100644 --- a/client/utils/tags.tsx +++ b/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 = (