@brightspace-ui/core 2.43.0 → 2.43.1

package/components/html-block/html-block.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { codeStyles, HtmlBlockCodeRenderer } from '../../helpers/prism.js';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
@@ -140,6 +141,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			compact: { type: Boolean },
 			/**
 			 * Whether to display the HTML in inline mode
+			 * @type {Boolean}
 			 */
 			inline: { type: Boolean },
 			/**
@@ -161,13 +163,17 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				text-align: left;
 			}
 			:host([inline]),
-			:host([inline]) div.d2l-html-block-rendered {
+			:host([inline]) .d2l-html-block-rendered {
 				display: inline;
 			}
 			:host([hidden]),
-			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
+			:host([no-deferred-rendering]) .d2l-html-block-rendered,
+			slot {
 				display: none;
 			}
+			:host([no-deferred-rendering]) slot {
+				display: contents;
+			}
 			:host([dir="rtl"]) {
 				text-align: right;
 			}
@@ -209,52 +215,60 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
+		this._updateContextKeys();
+	}
 
-		if (this._renderContainer) return;
-
-		// The d2l-html-block-rendered class is used to apply CSS outside of the html-block component. Do not change lightly.
-		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered'
-			+ `${this.compact ? ' d2l-html-block-compact' : ''}`
-			+ '"></div><slot'
-			+ `${!this.noDeferredRendering ? ' style="display: none"' : ''}`
-			+ '></slot>';
+	render() {
+		const renderContainerClasses = {
+			'd2l-html-block-rendered': true,
+			'd2l-html-block-compact': this.compact
+		};
 
-		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
-		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		this._context = this._contextObserverController ? { ...this._contextObserverController.values } : {};
+		return html`
+			<div class="${classMap(renderContainerClasses)}"></div>
+			<slot @slotchange="${this._handleSlotChange}"></slot>
+		`;
 	}
 
-	updated() {
-		super.updated();
-		if (this._contextObserverController && this._contextObjectHasChanged()) this._render();
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this._contextChanged()) {
+			this._render();
+			this._updateContextKeys();
+		}
 	}
 
-	_contextObjectHasChanged() {
-		if (this._context.size !== this._contextObserverController.values.size) return true;
-		for (const [attr, val] of this._context) {
+	_contextChanged() {
+		if (!this._contextObserverController) return false;
+
+		if (this._contextKeys.size !== this._contextObserverController.values.size) return true;
+		for (const [attr, val] of this._contextKeys) {
 			if (!this._contextObserverController.values.has(attr)) return true;
 			if (this._contextObserverController.values.get(attr) !== val) return true;
 		}
 		return false;
 	}
 
+	async _handleSlotChange(e) {
+		if (!e.target) return;
+		await this._render(e.target);
+	}
+
 	async _processRenderers(elem) {
 		for (const renderer of getRenderers()) {
 			if (this._contextObserverController && renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
-				elem = await renderer.render(elem, {
+				await renderer.render(elem, {
 					contextValues: contextValues,
 					noDeferredRendering: this.noDeferredRendering
 				});
 			} else {
-				elem = await renderer.render(elem, {
+				await renderer.render(elem, {
 					noDeferredRendering: this.noDeferredRendering
 				});
 			}
 		}
-
-		return elem;
 	}
 
 	async _render(slot) {
@@ -274,20 +288,16 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	}
 
 	_stamp(slot) {
-		const stampHTML = async nodes => {
-			if (nodes && nodes.length > 0) {
-
-				let temp = document.createElement('div');
-				temp.style.display = 'none';
-				nodes.forEach(node => temp.appendChild(node.cloneNode(true)));
+		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
 
-				this._renderContainer.appendChild(temp);
-				temp = await this._processRenderers(temp);
-				this._renderContainer.innerHTML = temp.innerHTML;
+		const stampHTML = async nodes => {
+			renderContainer.innerHTML = '';
+			if (!nodes || nodes.length === 0) return;
 
-			} else {
-				this._renderContainer.innerHTML = '';
-			}
+			// Nodes must be cloned into the render container before processing, as
+			// some renderers require connected nodes (e.g. MathJax).
+			nodes.forEach(node => renderContainer.appendChild(node.cloneNode(true)));
+			await this._processRenderers(renderContainer);
 		};
 
 		if (this._contentObserver) this._contentObserver.disconnect();
@@ -303,6 +313,15 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		stampHTML(slottedNodes);
 	}
 
+	_updateContextKeys() {
+		if (!this._contextObserverController) return;
+		if (!this._contextKeys) this._contextKeys = new Map();
+
+		this._contextObserverController.values.forEach((val, attr) => {
+			this._contextKeys.set(attr, val);
+		});
+	}
+
 }
 
 customElements.define('d2l-html-block', HtmlBlock);

package/custom-elements.json

@@ -3813,7 +3813,7 @@
         {
           "name": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {
@@ -3835,7 +3835,7 @@
           "name": "inline",
           "attribute": "inline",
           "description": "Whether to display the HTML in inline mode",
-          "type": "boolean",
+          "type": "Boolean",
           "default": "false"
         },
         {

package/helpers/mathjax.js

@@ -61,35 +61,18 @@ export class HtmlBlockMathRenderer {
 		// This work-around should be removed when linebreaks are natively supported.
 		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
 		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-		const lineBreakStyle = 'display: block; height: 0.5rem;';
-
-		// If we're opting out of deferred rendering, we need to rely
-		// on the global MathJax install for rendering.
-		if (options.noDeferredRendering) {
-			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
-				elm.setAttribute('style', lineBreakStyle);
-			});
-
-			await window.MathJax.startup.promise;
-			renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
-			await renderingPromise;
-			return elem;
-		}
-
-		const inner = elem.innerHTML.replace(/<mspace linebreak="newline">/gi, `<mspace linebreak="newline" style="${lineBreakStyle}">`);
-
-		const temp = document.createElement('div');
-		temp.style.display = 'none';
-		temp.attachShadow({ mode: 'open' });
-		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${inner}</mjx-body></mjx-doc></div>`;
+		elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+			elm.style.display = 'block';
+			elm.style.height = '0.5rem';
+		});
 
-		elem.appendChild(temp);
+		// If we're using deferred rendering, we need to create a document structure
+		// within the element so MathJax can appropriately process math.
+		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
 
 		await window.MathJax.startup.promise;
-		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(temp.shadowRoot));
+		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
 		await renderingPromise;
-
-		return temp.shadowRoot.firstChild;
 	}
 
 }
@@ -129,12 +112,18 @@ export function loadMathJax(mathJaxConfig) {
 				const AbstractHandler = window.MathJax._.core.Handler.AbstractHandler.prototype;
 				const startup = window.MathJax.startup;
 
+				const getFirstChild = doc => {
+					const child = doc.firstChild;
+					if (!child || child.nodeType === Node.ELEMENT_NODE) return child;
+					else return child.nextElementSibling;
+				};
+
 				//
 				//  Extend HTMLAdaptor to handle shadowDOM as the document
 				//
 				class ShadowAdaptor extends HTMLAdaptor {
 					body(doc) {
-						return doc.body || (doc.firstChild || {}).lastChild || doc;
+						return doc.body || (getFirstChild(doc) || {}).lastChild || doc;
 					}
 					create(kind, ns) {
 						const document = (this.document.createElement ? this.document : this.window.document);
@@ -143,10 +132,10 @@ export function loadMathJax(mathJaxConfig) {
 							document.createElement(kind));
 					}
 					head(doc) {
-						return doc.head || (doc.firstChild || {}).firstChild || doc;
+						return doc.head || (getFirstChild(doc) || {}).firstChild || doc;
 					}
 					root(doc) {
-						return doc.documentElement || doc.firstChild || doc;
+						return doc.documentElement || getFirstChild(doc) || doc;
 					}
 					text(text) {
 						const document = (this.document.createTextNode ? this.document : this.window.document);

package/helpers/prism.js

@@ -450,8 +450,6 @@ export async function formatCodeElement(elem) {
 
 	if (!elem.dataset.language && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;
 	Prism.highlightElement(code);
-
-	return elem;
 }
 
 export class HtmlBlockCodeRenderer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.43.0",
+  "version": "2.43.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -44,7 +44,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/eslint-parser": "^7",
-    "@brightspace-ui/stylelint-config": "^0.6",
+    "@brightspace-ui/stylelint-config": "^0.7",
     "@open-wc/testing": "^3",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.14",