@brightspace-ui/core 2.18.2 → 2.18.3

package/components/html-block/demo/html-block.html

@@ -383,6 +383,7 @@
 									<mo>)</mo>
 								</mrow>
 							</math>
+							$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$
 							<p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
 						</div>
 					</d2l-html-block>
@@ -495,6 +496,7 @@
 				<template>
 					<d2l-html-block>
 						<div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
+						<div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>
 					</d2l-html-block>
 				</template>
 			</d2l-demo-snippet>
@@ -507,7 +509,7 @@
 						<div>
 							An equation rendered using LaTeX...
 							\( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
-							... and some text!
+							... and some text ...
 						</div>
 					</d2l-html-block>
 				</template>

package/helpers/mathjax.js

@@ -68,8 +68,9 @@ export class HtmlBlockMathRenderer {
 			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
 				elm.setAttribute('style', lineBreakStyle);
 			});
+
 			await window.MathJax.startup.promise;
-			window.MathJax.typeset([elem]);
+			window.MathJax.typesetShadow(elem.getRootNode(), elem);
 			return elem;
 		}
 
@@ -93,6 +94,11 @@ export function loadMathJax(mathJaxConfig) {
 
 	if (mathJaxLoaded) return mathJaxLoaded;
 
+	const loadOptions = ['ui/menu'];
+	if (mathJaxConfig && mathJaxConfig.renderLatex) {
+		loadOptions.push('[tex]/all-packages');
+	}
+
 	window.MathJax = {
 		chtml: {
 			scale: (mathJaxConfig && mathJaxConfig.outputScale) || 1
@@ -102,7 +108,7 @@ export function loadMathJax(mathJaxConfig) {
 				settings: { zoom: 'None' }
 			}
 		},
-		loader: { load: ['ui/menu'] },
+		loader: { load: loadOptions },
 		startup: {
 			ready: () => {
 
@@ -182,10 +188,13 @@ export function loadMathJax(mathJaxConfig) {
 				//  renders the document.  The MathDocument is returned in case
 				//  you need to rerender the shadowRoot later.
 				//
-				window.MathJax.typesetShadow = function(root) {
+				window.MathJax.typesetShadow = function(root, elem) {
 					const InputJax = startup.getInputJax();
 					const OutputJax = startup.getOutputJax();
 					const html = mathjax.document(root, { InputJax, OutputJax });
+
+					if (elem) html.options.elements = [elem];
+
 					html.render().typeset();
 					return html;
 				};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.18.2",
+  "version": "2.18.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",