Merge pull request #4475 from dpalou/MOBILE-4828

Mobile 4828

Author: crazyserver

scripts/copy-assets.js

@@ -23,6 +23,7 @@ const ASSETS = {
     '/node_modules/mathjax/es5/input/mml/extensions': '/lib/mathjax/input/mml/extensions',
     '/node_modules/mathjax/es5/input/tex/extensions': '/lib/mathjax/input/tex/extensions',
     '/node_modules/mathjax/es5/output/chtml/fonts/woff-v2': '/lib/mathjax/output/chtml/fonts/woff-v2',
+    '/node_modules/mathjax/es5/ui/safe.js': '/lib/mathjax/ui/safe.js',
     '/node_modules/mp3-mediarecorder/dist/vmsg.wasm': '/lib/vmsg/vmsg.wasm',
     '/src/core/features/h5p/assets': '/lib/h5p',
     '/node_modules/ogv/dist': '/lib/ogv',

src/addons/filter/mathjaxloader/services/handlers/mathjaxloader.ts

@@ -21,7 +21,6 @@ import { CoreText } from '@singletons/text';
 import { CorePromiseUtils } from '@singletons/promise-utils';
 import { CoreSite } from '@classes/sites/site';
 import { makeSingleton } from '@singletons';
-import { CoreWait } from '@singletons/wait';
 import { CoreDom } from '@singletons/dom';
 import { CoreLogger } from '@singletons/logger';
 
@@ -40,32 +39,52 @@ export class AddonFilterMathJaxLoaderHandlerService extends CoreFilterDefaultHan
     /**
      * Initialize MathJax.
      */
-    initialize(): void {
+    async initialize(): Promise<void> {
         if (document.head.querySelector('#core-filter-mathjax-script')) {
             // Script already added, don't add it again.
+            await this.window.MathJax?.startup.promise;
+
             return;
         }
 
         // The MathJax configuration needs to be created before loading the MathJax script. Changing the options
         // after MathJax is initialized doesn't work (e.g. chaning window.MathJax.options or window.MathJax.config.options).
+        // @todo: Obtain mathjaxconfig from the site.
         this.window.MathJax = {
             options: {
                 enableMenu: false, // Disable right-click menu on equations.
             },
             startup: {
                 typeset: false, // Don't run typeset automatically on the whole page when MathJax is loaded.
             },
+            loader: {
+                load: ['ui/safe'], // Prevent XSS.
+            },
         };
 
         // Add the script to the header.
-        const script = document.createElement('script');
-        script.id = 'core-filter-mathjax-script';
-        script.src = 'assets/lib/mathjax/tex-mml-chtml.js';
-        document.head.appendChild(script);
+        await this.loadMathJax();
+
+        await this.window.MathJax?.startup.promise;
 
         // @todo: Once MathJax supports locale, set current language and listen for CoreEvents.LANGUAGE_CHANGED events.
     }
 
+    /**
+     * Load the MathJax script.
+     */
+    protected loadMathJax(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.onload = () => resolve();
+            script.onerror = (error) => reject(error);
+            script.id = 'core-filter-mathjax-script';
+            script.src = 'assets/lib/mathjax/tex-mml-chtml.js';
+            script.type = 'text/javascript';
+            document.head.appendChild(script);
+        });
+    }
+
     /**
      * @inheritdoc
      */
@@ -152,8 +171,7 @@ export class AddonFilterMathJaxLoaderHandlerService extends CoreFilterDefaultHan
             return;
         }
 
-        this.initialize();
-        await this.waitForReady();
+        await this.initialize();
 
         await Promise.all(equations.map((node) => this.typesetNode(node)));
     }
@@ -183,22 +201,6 @@ export class AddonFilterMathJaxLoaderHandlerService extends CoreFilterDefaultHan
         }
     }
 
-    /**
-     * Wait for the MathJax library and our JS object to be loaded.
-     *
-     * @param retries Number of times this has been retried.
-     * @returns Promise resolved when ready or if it took too long to load.
-     */
-    protected async waitForReady(retries: number = 0): Promise<void> {
-        if (this.window.MathJax?.typesetPromise || retries >= 25) {
-            // Loaded or too many retries, stop.
-            return;
-        }
-
-        await CoreWait.wait(20 + 10 * retries);
-        await CorePromiseUtils.ignoreErrors(this.waitForReady(retries + 1));
-    }
-
     /**
      * Find math environments in the $text and wrap them in no link spans
      * (<span class="nolink"></span>). If math environments are nested, only