Update the mathjax configuration to add in some of the other needed

MathJax configuration that was missed.  Also, instead of disabling all
of eslint, just disable typescript rules.  This file should probably be
changed to a js file.  I have upcoming changes to the eslint
configuaration that will not run typescript rules on js files that will
make this work correctly.

Also, load mathajx files from the already installed npm package rather
than using a cdn.  Furthermore, install the mathjax files for the
production build.

Also change formData.append to formData.set.

Author: drgrice1

.jscpd.json

@@ -1,4 +1,4 @@
 {
 	"threshold": 5,
-	"ignore": ["node_modules", "dist"]
+	"ignore": ["node_modules", "dist", "**/*.pm", "**/*.ts"]
 }

quasar.conf.js

@@ -1,7 +1,9 @@
 /* eslint-env node */
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return */
 const { configure } = require('quasar/wrappers');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
+const path = require('path');
 
 module.exports = configure(function (ctx) {
 	return {
@@ -48,6 +50,27 @@ module.exports = configure(function (ctx) {
 					files: ['**/*.{vue,html,css,scss,sass}'],
 					exclude: ['node_modules', 'dist']
 				}));
+
+				if (ctx.prod) {
+					chain.plugin('copy-webpack')
+						.tap(args => {
+							args[0].patterns.push({
+								from: path.resolve(__dirname, './node_modules/mathjax-full/es5'),
+								to: path.resolve(__dirname, './dist/spa/mathjax'),
+								toType: 'dir'
+							});
+							return args;
+						});
+				}
+			},
+
+			extendWebpack(cfg) {
+				if (cfg.optimization && cfg.optimization.minimizer instanceof Array) {
+					cfg.optimization.minimizer.forEach((plugin) => {
+						if (plugin.constructor.name == 'TerserPlugin')
+							plugin.options.exclude = /.*mathjax.*/;
+					});
+				}
 			}
 		},
 
@@ -64,6 +87,13 @@ module.exports = configure(function (ctx) {
 						'^/renderer': ''
 					}
 				}
+			},
+			static: path.join(__dirname, 'node_modules/mathjax-full/es5'),
+			historyApiFallback: {
+				rewrites: [{
+					from: /^\/webwork3\/mathjax\/.*$/,
+					to: (context) => context.parsedUrl.pathname.replace(/^\/webwork3\/mathjax/, '')
+				}]
 			}
 		}
 	};

src/components/common/Problem.vue

@@ -1,8 +1,10 @@
 <template>
-	<div v-html="html" />
+	<div ref="renderDiv" v-html="html" />
 </template>
+
 <script lang="ts">
-import { defineComponent, Ref, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import axios from 'axios';
 
 import './mathjax-config';
@@ -11,7 +13,7 @@ import 'mathjax-full/es5/tex-chtml.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Window {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-  MathJax: any
+	MathJax: any
 }
 
 export default defineComponent({
@@ -25,36 +27,36 @@ export default defineComponent({
 	setup(props){
 		const html: Ref<string> = ref('');
 		const _file: Ref<string> = ref(props.file);
+		const renderDiv = ref<HTMLElement>();
 
- 		async function loadProblem() {
+		async function loadProblem() {
 			const formData = new FormData();
 			formData.set('problemSeed', '1');
 			formData.set('sourceFilePath', _file.value);
 			formData.set('outputFormat', 'static');
 
-			const response = await axios.post('/renderer/render-api', formData,
-				{ headers: { 'Content-Type': 'multipart/form-data' } });
+			let value;
+			try {
+				const response = await axios.post('/renderer/render-api', formData,
+					{ headers: { 'Content-Type': 'multipart/form-data' } });
+
+				value = (response.data as { renderedHTML: string }).renderedHTML;
+			} catch(e) {
+				return;
+			}
 
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-			let value = response.data.renderedHTML as string;
+			if (!value) return;
 
-			// extract only the form element.
+			// Extract only the form element.
 			const match = /<form(.*)>(.*)<\/form>/s.exec(value);
+			if (match) html.value = match[0];
 
-			// replace the script tags with \( \) or \[ \]
-			if (match) {
-				html.value = match[0];
-				// const m0 = match[0].replace(/<script type="math\/tex mode=display">(.+?)<\/script>/g, '\\[$1\\]');
-				// html.value = m0.replace(/<script type="math\/tex">(.+?)<\/script>/g, '\\($1\\)');
+			/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+			if (window.MathJax && typeof window.MathJax.typesetPromise == 'function') {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+				window.MathJax.startup.promise.then(() => window.MathJax.typesetPromise([renderDiv.value]));
 			}
-			void Promise.resolve()
-				.then(() => {
-					/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-					window.MathJax.typesetPromise();
-					/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-				});
-			// .catch();  // need to figure out a more robust way of handling an error like this.
-
+			/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
 		}
 
 		watch(() => props.file, () => {
@@ -63,7 +65,8 @@ export default defineComponent({
 		});
 
 		return {
-			html
+			html,
+			renderDiv
 		};
 	}
 });

src/components/common/mathjax-config.ts

@@ -1,38 +1,47 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call */
 
 interface Window {
-  MathJax: any
+	MathJax: any
 }
 
 window.MathJax = {
+	tex: {
+		packages: { '[+]': ['noerrors'] }
+	},
 	loader: {
 		paths: {
-			mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5'
+			mathjax: `${process.env.VUE_ROUTER_BASE ?? ''}mathjax`
+		},
+		load: ['input/asciimath', '[tex]/noerrors']
+	},
+	startup: {
+		ready: () => {
+			const AM = window.MathJax.InputJax.AsciiMath.AM;
+			for (let i = 0; i < AM.symbols.length; ++i) {
+				if (AM.symbols[i].input == '**') {
+					AM.symbols[i] = { input: '**', tag: 'msup', output: '^', tex: null, ttype: AM.TOKEN.INFIX };
+				}
+			}
+			return window.MathJax.startup.defaultReady();
 		}
 	},
 	options: {
 		renderActions: {
-			findScript: [10, function (doc: any) {
-				document.querySelectorAll('script[type^="math/tex"]').forEach(function(node) {
-					const nodeType = node.getAttribute('type');
-
-					const display = nodeType && !!nodeType.match(/; *mode=display/);
+			findScript: [10, (doc: any) => {
+				document.querySelectorAll('script[type^="math/tex"]').forEach((node: Element) => {
+					const display = !!/; *mode=display/.exec((node as HTMLScriptElement).type);
 					const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
 					const text = document.createTextNode('');
-					if (node.parentNode) {
-						node.parentNode.replaceChild(text, node);
-						math.start = {node: text, delim: '', n: 0};
-						math.end = {node: text, delim: '', n: 0};
-						doc.math.push(math);
-					}
+					node.parentNode?.replaceChild(text, node);
+					math.start = { node: text, delim: '', n: 0 };
+					math.end = { node: text, delim: '', n: 0 };
+					doc.math.push(math);
 				});
 			}, '']
-		}
+		},
+		ignoreHtmlClass: 'tex2jax_ignore'
 	}
-	// tex: {
-	// inlineMath: [
-	// ['$', '$'],
-	// ['\\(', '\\)']
-	// ]
-	// }
+
 };