Remove MathJax v2 (#16961)

GitOrigin-RevId: 32a43361cfc883aa1a5ed85f6be5432b6e838b9d

services/web/frontend/js/base.js

@@ -22,7 +22,6 @@ import './modules/errorCatcher'
 import './modules/localStorage'
 import './modules/sessionStorage'
 import getMeta from './utils/meta'
-import { configureMathJax } from './features/mathjax/configure'
 
 const App = angular
   .module('OverleafApp', [
@@ -40,8 +39,6 @@ const App = angular
     function ($qProvider, uiSelectConfig) {
       $qProvider.errorOnUnhandledRejections(false)
       uiSelectConfig.spinnerClass = 'fa fa-refresh ui-select-spin'
-
-      configureMathJax()
     },
   ])
 

services/web/frontend/js/directives/mathjax.js

@@ -1,15 +0,0 @@
-/* global MathJax */
-
-import App from '../base'
-
-export default App.directive('mathjax', function () {
-  return {
-    link(scope, element, attrs) {
-      if (!(MathJax && MathJax.Hub)) return
-
-      setTimeout(() => {
-        MathJax.Hub.Queue(['Typeset', MathJax.Hub, element.get(0)])
-      }, 0)
-    },
-  }
-})

services/web/frontend/js/features/chat/components/message-content.tsx

@@ -1,8 +1,6 @@
 import { useRef, useEffect, type FC } from 'react'
-// @ts-ignore
 import Linkify from 'react-linkify'
 import useIsMounted from '../../../shared/hooks/use-is-mounted'
-import { configureMathJax } from '../../mathjax/configure'
 import { loadMathJax } from '../../mathjax/load-mathjax'
 import { debugConsole } from '@/utils/debugging'
 
@@ -18,18 +16,6 @@ const MessageContent: FC<{ content: string }> = ({ content }) => {
         a.setAttribute('rel', 'noreferrer noopener')
       }
 
-      // MathJax v2 typesetting
-      if (window.MathJax?.Hub) {
-        const { Hub } = window.MathJax
-
-        const timeout = setTimeout(() => {
-          configureMathJax()
-          Hub.Queue(['Typeset', Hub, root.current])
-        }, 0)
-
-        return () => clearTimeout(timeout)
-      }
-
       // MathJax v3 typesetting
       loadMathJax()
         .then(MathJax => {

services/web/frontend/js/features/mathjax/configure.js

@@ -1,49 +0,0 @@
-/* global MathJax */
-
-import { mathJaxLoaded } from './util'
-import getMeta from '../../utils/meta'
-
-let configured = false
-
-export function configureMathJax() {
-  if (configured) return
-  if (getMeta('ol-mathJax3Path')) return
-  if (!mathJaxLoaded()) return
-
-  const inlineMath = [['\\(', '\\)']]
-
-  if (!getMeta('ol-no-single-dollar')) {
-    inlineMath.push(['$', '$'])
-  }
-
-  MathJax.Hub.Config({
-    messageStyle: 'none',
-    imageFont: null,
-    // Fast preview, introduced in 2.5, is unhelpful due to extra codemirror refresh
-    // and disabling it avoids issues with math processing errors
-    // github.com/overleaf/write_latex/pull/1375
-    'fast-preview': { disabled: true },
-    'HTML-CSS': {
-      availableFonts: ['TeX'],
-      // MathJax's automatic font scaling does not work well when we render math
-      // that isn't yet on the page, so we disable it and set a global font
-      // scale factor
-      scale: 110,
-      matchFontHeight: false,
-    },
-    TeX: {
-      equationNumbers: { autoNumber: 'AMS' },
-      useLabelIDs: false,
-    },
-    skipStartupTypeset: true,
-    tex2jax: {
-      processEscapes: true,
-      inlineMath,
-      displayMath: [
-        ['$$', '$$'],
-        ['\\[', '\\]'],
-      ],
-    },
-  })
-  configured = true
-}

services/web/frontend/js/features/mathjax/index.js

@@ -1,14 +0,0 @@
-/* global MathJax */
-import { configureMathJax } from './configure'
-import { mathJaxLoaded } from './util'
-
-function render(el) {
-  if (!mathJaxLoaded()) return
-  configureMathJax()
-
-  setTimeout(() => {
-    MathJax.Hub.Queue(['Typeset', MathJax.Hub, el])
-  }, 0)
-}
-
-document.querySelectorAll('[data-ol-mathjax]').forEach(render)

services/web/frontend/js/features/mathjax/index.ts

@@ -0,0 +1,17 @@
+import { loadMathJax } from '@/features/mathjax/load-mathjax'
+import { debugConsole } from '@/utils/debugging'
+import getMeta from '@/utils/meta'
+
+window.addEventListener('DOMContentLoaded', function () {
+  const elements = document.querySelectorAll('[data-ol-mathjax]')
+  if (elements.length > 0) {
+    loadMathJax({
+      enableMenu: true,
+      numbering: 'ams',
+      singleDollar: !getMeta('ol-no-single-dollar'),
+      useLabelIds: true,
+    })
+      .then(MathJax => MathJax.typesetPromise([...elements]))
+      .catch(debugConsole.error)
+  }
+})

services/web/frontend/js/features/mathjax/load-mathjax.ts

@@ -2,9 +2,26 @@ import getMeta from '../../utils/meta'
 
 let mathJaxPromise: Promise<typeof window.MathJax>
 
-export const loadMathJax = async () => {
+export const loadMathJax = async (options?: {
+  enableMenu?: boolean
+  numbering?: string
+  singleDollar?: boolean
+  useLabelIds?: boolean
+}) => {
   if (!mathJaxPromise) {
     mathJaxPromise = new Promise((resolve, reject) => {
+      options = {
+        enableMenu: false,
+        singleDollar: true,
+        useLabelIds: false,
+        ...options,
+      }
+
+      const inlineMath = [['\\(', '\\)']]
+      if (options.singleDollar) {
+        inlineMath.push(['$', '$'])
+      }
+
       // https://docs.mathjax.org/en/v3.2-latest/upgrading/v2.html
       window.MathJax = {
         // https://docs.mathjax.org/en/latest/options/input/tex.html#the-configuration-block
@@ -14,10 +31,7 @@ export const loadMathJax = async () => {
             // https://github.com/mathjax/MathJax/issues/1219#issuecomment-341059843
             bm: ['\\boldsymbol{#1}', 1],
           },
-          inlineMath: [
-            ['\\(', '\\)'],
-            ['$', '$'],
-          ],
+          inlineMath,
           displayMath: [
             ['\\[', '\\]'],
             ['$$', '$$'],
@@ -30,6 +44,8 @@ export const loadMathJax = async () => {
           },
           processEscapes: true,
           processEnvironments: true,
+          useLabelIds: options.useLabelIds,
+          tags: options.numbering,
         },
         loader: {
           load: [
@@ -37,15 +53,22 @@ export const loadMathJax = async () => {
           ],
         },
         options: {
-          enableMenu: false, // https://docs.mathjax.org/en/latest/options/menu.html
+          enableMenu: options.enableMenu, // https://docs.mathjax.org/en/latest/options/menu.html
         },
         startup: {
           typeset: false,
+          pageReady() {
+            // disable the "Math Renderer" option in the context menu,
+            // as only SVG is available
+            window.MathJax.startup.document.menu.menu
+              .findID('Renderer')
+              .disable()
+          },
         },
       }
 
       const script = document.createElement('script')
-      const path = getMeta('ol-mathJax3Path')
+      const path = getMeta('ol-mathJaxPath')
       if (!path) {
         reject(new Error('No MathJax path found'))
         return

services/web/frontend/js/features/mathjax/util.js

@@ -1,5 +0,0 @@
-/* global MathJax */
-
-export function mathJaxLoaded() {
-  return !!(typeof MathJax !== 'undefined' && MathJax && MathJax.Hub)
-}

services/web/frontend/js/marketing.js

@@ -12,6 +12,7 @@ import './features/fallback-image'
 import './features/multi-submit'
 import './features/cookie-banner'
 import './features/autoplay-video'
+import './features/mathjax'
 
 $('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })
 $('[data-toggle="tooltip"]').tooltip()