@brightspace-ui/core 2.18.1 → 2.18.4

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/components/html-block/html-block.js

@@ -156,7 +156,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				overflow-wrap: break-word;
 				overflow-x: auto;
 				overflow-y: hidden;
-				position: relative;
 				text-align: left;
 			}
 			:host([hidden]),

package/helpers/README.md

@@ -125,7 +125,7 @@ getComposedActiveElement()
 // gets the first focusable descendant given a node, including those within the shadow DOM
 getFirstFocusableDescendant(node, includeHidden, predicate)
 
-// gets the last fusable descendant given a node, including those within the shadow DOM
+// gets the last focusable descendant given a node, including those within the shadow DOM
 getLastFocusableDescendant(node, includeHidden)
 
 // gets the previous focusable node on the page given a node
@@ -134,7 +134,7 @@ getPreviousFocusable(node, includeHidden)
 // gets the next focusable node on the page given a node
 getNextFocusable(node, includeHidden)
 
-// gets the ancestor of the given node that is focusable
+// gets the nearest focusable ancestor of the given node
 getPreviousFocusableAncestor(node, includeHidden, includeTabbablesOnly)
 
 // returns true/false whether the element is focusable

package/helpers/mathjax.js

@@ -68,12 +68,13 @@ 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;
 		}
 
-		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', `<mspace linebreak="newline" style="${lineBreakStyle}">`);
+		const inner = elem.innerHTML.replace(/<mspace linebreak="newline">/gi, `<mspace linebreak="newline" style="${lineBreakStyle}">`);
 
 		const temp = document.createElement('div');
 		temp.style.display = 'none';
@@ -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.1",
+  "version": "2.18.4",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -60,7 +60,7 @@
     "lit-analyzer": "^1",
     "messageformat-validator": "^2",
     "node-sass": "^7",
-    "sinon": "^13",
+    "sinon": "^14",
     "stylelint": "^14"
   },
   "dependencies": {