ccnmtl · Evan-CTL · Apr 23, 2024 · Apr 23, 2024
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -8,8 +8,8 @@ const config = {
     },
     transformIgnorePatterns: [],
     testPathIgnorePatterns: [
-        // Temporary workaround for mathjax3-react issue:
-        // https://github.com/asnunes/mathjax3-react/issues/30
+        // Temporary workaround for better-react-mathjax issue:
+        // https://github.com/fast-reflexes/better-react-mathjax/issues/62
         "media/js/src/form-components/RangeEditor.test.js",
         "media/js/src/JXGBoard.test.js",
         "media/js/src/GraphEditor.test.js",

diff --git a/media/js/src/Editor.test.js b/media/js/src/Editor.test.js
@@ -3,38 +3,51 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import ReactTestUtils from 'react-dom/test-utils';
+import { MathJaxContext } from 'better-react-mathjax';
 import Editor from './Editor.jsx';
 import { exportGraph } from './GraphMapping.js';
 
 it('renders without crashing', () => {
-    TestRenderer.create(<Editor />);
+    TestRenderer.create(
+        <MathJaxContext>
+            <Editor />
+        </MathJaxContext>
+    );
 });
 
 it('renders with children in the expected visibility state', () => {
-    TestRenderer.create(<Editor />, function() {
-        expect(this.gp.current.props.showing).toBe(true);
-        expect(this.ge.current.props.showing).toBe(false);
+    TestRenderer.create(
+        <MathJaxContext>
+            <Editor />
+        </MathJaxContext>,
+        function() {
+            expect(this.gp.current.props.showing).toBe(true);
+            expect(this.ge.current.props.showing).toBe(false);
 
-        expect(ReactTestUtils.isCompositeComponent(this.gp.current)).toBe(true);
-        expect(ReactTestUtils.isCompositeComponent(this.ge.current)).toBe(true);
+            expect(ReactTestUtils.isCompositeComponent(this.gp.current)).toBe(true);
+            expect(ReactTestUtils.isCompositeComponent(this.ge.current)).toBe(true);
 
-        expect(this.state.step).toBe(0);
-        expect(this.state.gType).toBe(null);
-        ReactTestUtils.Simulate.click(this.gp.current.b1);
-        // expect(this.state.step).toBe(1);
-    });
+            expect(this.state.step).toBe(0);
+            expect(this.state.gType).toBe(null);
+            ReactTestUtils.Simulate.click(this.gp.current.b1);
+            // expect(this.state.step).toBe(1);
+        });
 });
 
 it('exports its graph state', () => {
-    TestRenderer.create(<Editor />, function() {
-        let o = exportGraph(this.state);
-        expect(o.graph_type).toBe(null);
-        expect(o.show_intersection).toBe(true);
-        expect(o.line_1_slope).toBe(1);
-        expect(o.line_2_slope).toBe(-1);
-        expect(o.line_1_label).toBe('');
-        expect(o.line_2_label).toBe('');
-        expect(o.y_axis_label).toBe('');
-        expect(o.x_axis_label).toBe('');
-    });
+    TestRenderer.create(
+        <MathJaxContext>
+            <Editor />
+        </MathJaxContext>,
+        function() {
+            let o = exportGraph(this.state);
+            expect(o.graph_type).toBe(null);
+            expect(o.show_intersection).toBe(true);
+            expect(o.line_1_slope).toBe(1);
+            expect(o.line_2_slope).toBe(-1);
+            expect(o.line_1_label).toBe('');
+            expect(o.line_2_label).toBe('');
+            expect(o.y_axis_label).toBe('');
+            expect(o.x_axis_label).toBe('');
+        });
 });
diff --git a/media/js/src/JXGBoard.jsx b/media/js/src/JXGBoard.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import JXG from 'jsxgraph';
 import {graphTypes} from './graphs/graphTypes.js';
 import {mkNonLinearDemandSupply} from './graphs/NonLinearDemandSupplyGraph.js';
@@ -589,14 +589,14 @@ export default class JXGBoard extends React.Component {
                 const func1 = String.raw`MP_${this.props.gNName} = (1 - \alpha)${this.props.gCobbDouglasAName}${this.props.gCobbDouglasKName}^\alpha ${this.props.gNName}^{-\alpha}`;
                 const func2 = String.raw`MP_${this.props.gCobbDouglasKName} = \alpha ${this.props.gCobbDouglasAName}${this.props.gCobbDouglasKName}^{\alpha - 1} ${this.props.gNName}^{1 - \alpha}`;
                 math1 = (
-                    <MathJaxProvider>
-                        <MathJaxFormula formula={'$$' + func1 + '$$'} />
-                    </MathJaxProvider>
+                    <MathJax>
+                        {'$$' + func1 + '$$'}
+                    </MathJax>
                 );
                 math2 = (
-                    <MathJaxProvider>
-                        <MathJaxFormula formula={'$$' + func2 + '$$'} />
-                    </MathJaxProvider>
+                    <MathJax>
+                        {'$$' + func2 + '$$'}
+                    </MathJax>
                 );
             }
             figure2 = false;

diff --git a/media/js/src/JXGBoard.test.js b/media/js/src/JXGBoard.test.js
@@ -2,12 +2,16 @@
 
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import { MathJaxContext } from 'better-react-mathjax';
 import JXGBoard from './JXGBoard.jsx';
 
 it('renders without crashing', () => {
     TestRenderer.create(
-        <JXGBoard
-            id={'id-test'}
-            gType={0}
-            gShowIntersection={true} />);
+        <MathJaxContext>
+            <JXGBoard
+                id={'id-test'}
+                gType={0}
+                gShowIntersection={true} />
+        </MathJaxContext>
+    );
 });
diff --git a/media/js/src/editor-main.js b/media/js/src/editor-main.js
@@ -1,7 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { MathJaxContext } from 'better-react-mathjax';
 import Editor from './Editor.jsx';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(<Editor />);
+root.render(
+    <MathJaxContext>
+        <Editor />
+    </MathJaxContext>
+);
diff --git a/media/js/src/editors/CobbDouglasEditor.jsx b/media/js/src/editors/CobbDouglasEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import RangeEditor from '../form-components/RangeEditor.js';
 import EditableControl from '../form-components/EditableControl.jsx';
 import { handleFormUpdate } from '../utils.js';
@@ -37,9 +37,9 @@ export default class CobbDouglasEditor extends React.Component {
                         </div>
                     )}
                     <div className="col">
-                        <MathJaxProvider>
-                            <MathJaxFormula formula={'$$' + tex + '$$'} />
-                        </MathJaxProvider>
+                        <MathJax>
+                            {'$$' + tex + '$$'}
+                        </MathJax>
                     </div>
                 </div>
                 <hr />

diff --git a/media/js/src/editors/CobbDouglasNLDSEditor.jsx b/media/js/src/editors/CobbDouglasNLDSEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import RangeEditor from '../form-components/RangeEditor.js';
 import EditableControl from '../form-components/EditableControl.jsx';
 import { handleFormUpdate } from '../utils.js';
@@ -39,9 +39,9 @@ export default class CobbDouglasNLDSEditor extends React.Component {
                         </div>
                     )}
                     <div className="col">
-                        <MathJaxProvider>
-                            <MathJaxFormula formula={'$$' + tex + '$$'} />
-                        </MathJaxProvider>
+                        <MathJax>
+                            {'$$' + tex + '$$'}
+                        </MathJax>
                     </div>
                 </div>
 
@@ -63,9 +63,9 @@ export default class CobbDouglasNLDSEditor extends React.Component {
                                     value={0}
                                     checked={this.props.gFunctionChoice === 0} />
                                 <label className="form-check-label" htmlFor="gFunctionChoice1">
-                                    <MathJaxProvider>
-                                        <MathJaxFormula formula={'$$' + func1 + '$$'} />
-                                    </MathJaxProvider>
+                                    <MathJax>
+                                        {'$$' + func1 + '$$'}
+                                    </MathJax>
                                 </label>
                             </div>
                         </div>
@@ -81,9 +81,9 @@ export default class CobbDouglasNLDSEditor extends React.Component {
                                     value={1}
                                     checked={this.props.gFunctionChoice === 1} />
                                 <label className="form-check-label" htmlFor="gFunctionChoice2">
-                                    <MathJaxProvider>
-                                        <MathJaxFormula formula={'$$' + func2 + '$$'} />
-                                    </MathJaxProvider>
+                                    <MathJax>
+                                        {'$$' + func2 + '$$'}
+                                    </MathJax>
                                 </label>
                             </div>
                         </div>

diff --git a/media/js/src/editors/ConsumptionLeisureEditor.jsx b/media/js/src/editors/ConsumptionLeisureEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import RangeEditor from '../form-components/RangeEditor.js';
 import EditableControl from '../form-components/EditableControl.jsx';
 import { handleFormUpdate } from '../utils.js';
@@ -21,9 +21,9 @@ export default class ConsumptionLeisureEditor extends React.Component {
                         <h2>Function</h2>
                         <div className="row">
                             <div className="col-auto">
-                                <MathJaxProvider>
-                                    <MathJaxFormula formula={'$$' + tex + '$$'} />
-                                </MathJaxProvider>
+                                <MathJax>
+                                    {'$$' + tex + '$$'}
+                                </MathJax>
                             </div>
                         </div>
                         <hr />

diff --git a/media/js/src/editors/ConsumptionSavingEditor.jsx b/media/js/src/editors/ConsumptionSavingEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import RangeEditor from '../form-components/RangeEditor.js';
 import EditableControl from '../form-components/EditableControl.jsx';
 import { handleFormUpdate } from '../utils.js';
@@ -15,9 +15,9 @@ export default class ConsumptionSavingEditor extends React.Component {
                     <React.Fragment>
                         <h2>Function</h2>
                         <div className="row ml-2 mb-2">
-                            <MathJaxProvider>
-                                <MathJaxFormula formula={'$$' + tex + '$$'} />
-                            </MathJaxProvider>
+                            <MathJax>
+                                {'$$' + tex + '$$'}
+                            </MathJax>
                         </div>
                     </React.Fragment>
                 }

diff --git a/media/js/src/editors/NonLinearDemandSupplyEditor.jsx b/media/js/src/editors/NonLinearDemandSupplyEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import RangeEditor from '../form-components/RangeEditor.js';
 import EditableControl from '../form-components/EditableControl.jsx';
 import AreaConfiguration from './AreaConfiguration.jsx';
@@ -26,9 +26,9 @@ export default class NonLinearDemandSupplyEditor extends React.Component {
                                 checked={this.props.gFunctionChoice === 0} />
 
                             <label className="form-check-label" htmlFor="gFunctionChoice1">
-                                <MathJaxProvider>
-                                    <MathJaxFormula formula={'$$' + func1 + '$$'} />
-                                </MathJaxProvider>
+                                <MathJax>
+                                    {'$$' + func1 + '$$'}
+                                </MathJax>
                             </label>
                         </div>
                         <div className="form-check">
@@ -40,9 +40,9 @@ export default class NonLinearDemandSupplyEditor extends React.Component {
                                 value={1}
                                 checked={this.props.gFunctionChoice === 1} />
                             <label className="form-check-label" htmlFor="gFunctionChoice2">
-                                <MathJaxProvider>
-                                    <MathJaxFormula formula={'$$' + func2 + '$$'} />
-                                </MathJaxProvider>
+                                <MathJax>
+                                    {'$$' + func2 + '$$'}
+                                </MathJax>
                             </label>
                         </div>
                         <hr />

diff --git a/media/js/src/editors/TemplateGraphEditor.jsx b/media/js/src/editors/TemplateGraphEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import { create, all } from 'mathjs';
 
 import {handleFormUpdate} from '../utils.js';
@@ -50,9 +50,9 @@ export default class TemplateGraphEditor extends React.Component {
                         <label
                             className="form-check-label me-2 flex-shrink-1 d-flex align-self-center"
                             htmlFor={`g${name}`}>
-                            <MathJaxProvider>
-                                <MathJaxFormula formula="$$y = $$" />
-                            </MathJaxProvider>
+                            <MathJax>
+                                {'$$y = $$'}
+                            </MathJax>
                         </label>
                         <input
                             type="text"

diff --git a/media/js/src/form-components/RangeEditor.js b/media/js/src/form-components/RangeEditor.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
+import { MathJax } from 'better-react-mathjax';
 import { btnStep } from '../utils.js';
 
 /**
@@ -18,9 +18,9 @@ export default class RangeEditor extends React.Component {
                             <label key="dataId" className="w-100" htmlFor={this.props.id}>
                                 {this.props.itemlabel && (
                                     <div style={{display: 'flex'}}>
-                                        <MathJaxProvider>
-                                            <MathJaxFormula formula={'$$' + this.props.itemlabel + '$$'} />
-                                        </MathJaxProvider>
+                                        <MathJax>
+                                            {'$$' + this.props.itemlabel + '$$'}
+                                        </MathJax>
                                     </div>
                                 )}
 

diff --git a/media/js/src/form-components/RangeEditor.test.js b/media/js/src/form-components/RangeEditor.test.js
@@ -2,31 +2,36 @@
 
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import { MathJaxContext } from 'better-react-mathjax';
 import RangeEditor from './RangeEditor.js';
 
 it('renders without crashing', () => {
     const el = TestRenderer.create(
-        <RangeEditor
-            dataId="gCobbDouglasA"
-            value={0}
-            handler={function() {}}
-            min={0} />
+        <MathJaxContext>
+            <RangeEditor
+                dataId="gCobbDouglasA"
+                value={0}
+                handler={function() {}}
+                min={0} />
+        </MathJaxContext>
     );
     if (!el){ console.error('el does not exist'); }
 });
 
 it('Displays override radio button when configured', () => {
     const el = TestRenderer.create(
-        <RangeEditor
-            dataId="gCobbDouglasA"
-            value={0}
-            handler={function() {}}
-            min={0}
-            max={5}
-            showOverrideButton={true}
-            overrideLabel={'override'}
-            overrideValue={10000}
-        />
+        <MathJaxContext>
+            <RangeEditor
+                dataId="gCobbDouglasA"
+                value={0}
+                handler={function() {}}
+                min={0}
+                max={5}
+                showOverrideButton={true}
+                overrideLabel={'override'}
+                overrideValue={10000}
+            />
+        </MathJaxContext>
     ).root;
     const button = el.findByProps({type: 'radio'});
     expect(button.type).toEqual('input');