@brightspace-ui/core 2.18.0 → 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/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/components/tag-list/README.md

@@ -3,7 +3,7 @@
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 
-<!-- docs: demo display:block -->
+<!-- docs: demo autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -12,7 +12,7 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
   <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
   <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
   <d2l-tag-list-item text="Excepteur sint"></d2l-tag-list-item>
@@ -26,7 +26,7 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 
 The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-item` and adds the appropriate keyboard navigation, list semantics, clearing behaviour and responsive behaviour.
 
-<!-- docs: demo live name:d2l-tag-list display:block -->
+<!-- docs: demo live name:d2l-tag-list autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -39,7 +39,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 </script>
 <d2l-tag-list description="Example Tags">
   <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
   <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
   <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
@@ -48,7 +48,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 ## Tag List Item [d2l-tag-list-item]
 The `d2l-tag-list-item` provides the appropriate `listitem` semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
 
-<!-- docs: demo live name:d2l-tag-list-item display:block -->
+<!-- docs: demo live name:d2l-tag-list-item autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';

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.0",
+  "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",
@@ -60,7 +60,7 @@
     "lit-analyzer": "^1",
     "messageformat-validator": "^2",
     "node-sass": "^7",
-    "sinon": "^13",
+    "sinon": "^14",
     "stylelint": "^14"
   },
   "dependencies": {