@brightspace-ui/core 1.207.4 → 1.208.0

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

@@ -10,6 +10,10 @@
 			import { provideInstance } from '../../../mixins/provider-mixin.js';
 
 			class DemoReplacementRenderer {
+				get canRenderInline() {
+					return true;
+				}
+
 				async render(elem) {
 					const elemsToReplace = elem.querySelectorAll('[data-replace-me-id]');
 					if (elemsToReplace.length === 0) return elem;
@@ -188,6 +192,119 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (math, no deferred rendering)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block no-deferred-rendering>
+						<div>
+							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+								<mi>x</mi>
+								<mo>=</mo>
+								<mrow>
+									<mfrac>
+										<mrow>
+											<mo>&#x2212;</mo>
+											<mi>b</mi>
+											<mo>&#xB1;</mo>
+											<msqrt>
+												<msup>
+													<mi>b</mi>
+													<mn>2</mn>
+												</msup>
+												<mo>&#x2212;</mo>
+												<mn>4</mn>
+												<mi>a</mi>
+												<mi>c</mi>
+											</msqrt>
+										</mrow>
+										<mrow>
+											<mn>2</mn>
+											<mi>a</mi>
+										</mrow>
+									</mfrac>
+								</mrow>
+								<mtext>.</mtext>
+							</math>
+							<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+								<msup>
+									<mrow>
+										<mo>(</mo>
+										<mrow>
+											<munderover>
+												<mo>∑<!-- ∑ --></mo>
+												<mrow class="MJX-TeXAtom-ORD">
+													<mi>k</mi>
+													<mo>=</mo>
+													<mn>1</mn>
+												</mrow>
+												<mi>n</mi>
+											</munderover>
+											<msub>
+												<mi>a</mi>
+												<mi>k</mi>
+											</msub>
+											<msub>
+												<mi>b</mi>
+												<mi>k</mi>
+											</msub>
+										</mrow>
+										<mo>)</mo>
+									</mrow>
+									<mrow class="MJX-TeXAtom-ORD">
+										<mspace width="negativethinmathspace"></mspace>
+										<mspace width="negativethinmathspace"></mspace>
+										<mn>2</mn>
+									</mrow>
+								</msup>
+								<mo>≤<!-- ≤ --></mo>
+								<mrow>
+									<mo>(</mo>
+									<mrow>
+										<munderover>
+											<mo>∑<!-- ∑ --></mo>
+											<mrow class="MJX-TeXAtom-ORD">
+												<mi>k</mi>
+												<mo>=</mo>
+												<mn>1</mn>
+											</mrow>
+											<mi>n</mi>
+										</munderover>
+										<msubsup>
+											<mi>a</mi>
+											<mi>k</mi>
+											<mn>2</mn>
+										</msubsup>
+									</mrow>
+									<mo>)</mo>
+								</mrow>
+								<mrow>
+									<mo>(</mo>
+									<mrow>
+										<munderover>
+											<mo>∑<!-- ∑ --></mo>
+											<mrow class="MJX-TeXAtom-ORD">
+												<mi>k</mi>
+												<mo>=</mo>
+												<mn>1</mn>
+											</mrow>
+											<mi>n</mi>
+										</munderover>
+										<msubsup>
+											<mi>b</mi>
+											<mi>k</mi>
+											<mn>2</mn>
+										</msubsup>
+									</mrow>
+									<mo>)</mo>
+								</mrow>
+							</math>
+							<p>The wizard (<span data-replace-me-id="0">Elmer Fudd</span>) quickly jinxed the gnomes before they vaporized.</p>
+						</div>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (inline math)</h2>
 
 			<d2l-demo-snippet>

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

@@ -118,6 +118,17 @@ const getRenderers = () => {
  */
 class HtmlBlock extends LitElement {
 
+	static get properties() {
+		return {
+			/**
+			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
+			 * unless your HTML relies on script executions that may break upon stamping.
+			 * @type {Boolean}
+			 */
+			noDeferredRendering: { type: Boolean, attribute: 'no-deferred-rendering' }
+		};
+	}
+
 	static get styles() {
 		return [ htmlBlockContentStyles, css`
 			:host {
@@ -131,7 +142,10 @@ class HtmlBlock extends LitElement {
 			:host([hidden]) {
 				display: none;
 			}
-			::slotted(*) {
+			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
+				display: none;
+			}
+			:host(:not([no-deferred-rendering])) ::slotted(*) {
 				display: none;
 			}
 		`];
@@ -139,6 +153,7 @@ class HtmlBlock extends LitElement {
 
 	constructor() {
 		super();
+		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
@@ -153,9 +168,9 @@ class HtmlBlock extends LitElement {
 		super.connectedCallback();
 		if (this._contextObserverController) this._contextObserverController.hostConnected();
 
-		if (!this._templateObserver) return;
+		if (!this._templateObserver || this.noDeferredRendering) return;
 
-		const template = this.querySelector('template');
+		const template = this._findSlottedElement('TEMPLATE');
 		if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
 	}
 
@@ -172,24 +187,14 @@ class HtmlBlock extends LitElement {
 
 		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
 
-		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => {
-
-			const template = e.target.assignedNodes({ flatten: true })
-				.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TEMPLATE'));
-
-			this._stamp(template);
-
-		});
+		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 } : {};
 	}
 
 	updated() {
 		super.updated();
-		if (this._contextObserverController && this._contextObjectHasChanged()) {
-			const template = this.querySelector('template');
-			this._stamp(template);
-		}
+		if (this._contextObserverController && this._contextObjectHasChanged()) this._render();
 	}
 
 	_contextObjectHasChanged() {
@@ -201,7 +206,40 @@ class HtmlBlock extends LitElement {
 		return false;
 	}
 
-	_stamp(template) {
+	_findSlottedElement(tagName, slot) {
+		if (!slot) slot = this.shadowRoot.querySelector('slot');
+		return slot.assignedNodes({ flatten: true })
+			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));
+	}
+
+	async _processRenderers(elem) {
+		for (const renderer of getRenderers()) {
+			if (this.noDeferredRendering && !renderer.canRenderInline) continue;
+
+			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, contextValues);
+			} else {
+				elem = await renderer.render(elem);
+			}
+		}
+
+		return elem;
+	}
+
+	async _render(slot) {
+		if (this.noDeferredRendering) await this._renderInline(slot);
+		else this._stamp(slot);
+	}
+
+	async _renderInline(slot) {
+		const noDeferredRenderingContainer = this._findSlottedElement('DIV', slot);
+		if (!noDeferredRenderingContainer) return;
+		await this._processRenderers(noDeferredRenderingContainer);
+	}
+
+	_stamp(slot) {
 		const stampHTML = async template => {
 			const fragment = template ? document.importNode(template.content, true) : null;
 			if (fragment) {
@@ -209,15 +247,7 @@ class HtmlBlock extends LitElement {
 				let temp = document.createElement('div');
 				temp.appendChild(fragment);
 
-				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)));
-						temp = await renderer.render(temp, contextValues);
-					} else {
-						temp = await renderer.render(temp);
-					}
-				}
+				temp = await this._processRenderers(temp);
 				this._renderContainer.innerHTML = temp.innerHTML;
 
 			} else {
@@ -225,6 +255,8 @@ class HtmlBlock extends LitElement {
 			}
 		};
 
+		const template = this._findSlottedElement('TEMPLATE', slot);
+
 		if (this._templateObserver) this._templateObserver.disconnect();
 		if (template) {
 			this._templateObserver = new MutationObserver(() => stampHTML(template));

package/custom-elements.json

@@ -3377,6 +3377,23 @@
       "name": "d2l-html-block",
       "path": "./components/html-block/html-block.js",
       "description": "A component for displaying user-authored HTML.",
+      "attributes": [
+        {
+          "name": "no-deferred-rendering",
+          "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
+          "type": "Boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "noDeferredRendering",
+          "attribute": "no-deferred-rendering",
+          "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
+          "type": "Boolean",
+          "default": "false"
+        }
+      ],
       "slots": [
         {
           "name": "",

package/helpers/mathjax.js

@@ -4,6 +4,12 @@ let mathJaxLoaded;
 
 export class HtmlBlockMathRenderer {
 
+	get canRenderInline() {
+		// The custom MathJax ShadowAdaptor creates a new document and renders
+		// its contents to the DOM.
+		return false;
+	}
+
 	get contextAttributes() {
 		return [mathjaxContextAttribute];
 	}

package/package.json

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